@watermarkinsights/ripple 5.19.0-alpha.11 → 5.19.0-alpha.14

package/dist/cjs/wm-uploader.cjs.entry.js

@@ -173,24 +173,28 @@ const Uploader = class {
         }
     }
     handleProgressUpdate(mutationRecord) {
-        if (this.inProgressFileEls.length !== 0) {
-            const changeInUploadingFiles = this.prevUploadCount !== this.inProgressFileEls.length;
+        const uploadCount = this.inProgressFileEls.length;
+        if (uploadCount !== 0) {
+            const changeInUploadingFiles = this.prevUploadCount !== uploadCount;
             changeInUploadingFiles &&
-                this.announce(intl.uploaderMessages.getFilesUploading(this.inProgressFileEls.length), this.assertiveLiveRegionEl);
-            this.notif = intl.uploaderMessages.getFilesUploading(this.inProgressFileEls.length);
-            this.prevUploadCount = this.inProgressFileEls.length;
+                this.announce(intl.uploaderMessages.getFilesUploading(uploadCount), this.assertiveLiveRegionEl);
+            this.notif = intl.uploaderMessages.getFilesUploading(uploadCount);
+            this.prevUploadCount = uploadCount;
+            if (this.batchCount < uploadCount) {
+                this.batchCount = uploadCount;
+            }
             if (!this.srProgress) {
                 this.srProgress = setInterval(() => {
                     const aggregate = this.fileEls.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
-                    this.announce(intl.uploaderMessages.getUploadProgress(Math.floor(aggregate / this.batchCount)), this.assertiveLiveRegionEl);
+                    const percentage = this.batchCount > 0 ? Math.floor(aggregate / this.batchCount) : 0;
+                    this.announce(intl.uploaderMessages.getUploadProgress(percentage), this.assertiveLiveRegionEl);
                 }, 5000);
             }
         }
-        else if (this.inProgressFileEls.length === 0 &&
-            mutationRecord.oldValue &&
-            parseInt(mutationRecord.oldValue) < 100) {
+        else if (uploadCount === 0 && mutationRecord.oldValue && parseInt(mutationRecord.oldValue) < 100) {
             // if final file progress completes
             this.uploadButtonEl.value = "";
+            this.batchCount = 0;
             this.notif = intl.uploaderMessages.finishedUploading;
             this.announce(intl.uploaderMessages.finishedUploading, this.assertiveLiveRegionEl);
             clearInterval(this.srProgress);
@@ -319,9 +323,9 @@ const Uploader = class {
         return (index.h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (index.h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, index.h("span", { class: "upload-arrow" }), index.h("span", null, "Drop to Upload")))));
     }
     render() {
-        return (index.h(index.Host, { key: 'b58548a627b616f7baf9e2218140583b42d2eeff', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: '4325b5923dd0879157bd0d0370ff2e9011fc3e89', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (index.h(index.Host, { key: '99be303c7fdecf7fed30bb597f312c792ab0dbd5', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: 'd4fd6720967d4a5eed7b9d0231a5fe8203ed98b8', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), index.h("div", { key: '4431d6e65f0b13f02a1b91c35a4fae6953c95a97', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), index.h("div", { key: '06cfeee56f1cb84a616324cbc8d736e79bf1f258', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/collection/components/selects/priv-option-list/priv-option-list.js

@@ -349,9 +349,7 @@ export class PrivOptionList {
             : selectMessages.optgroupSingleSelectionCount())))));
     }
     renderSearchField() {
-        return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "svg-icon svg-search" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list",
-            // aria-expanded={this.isExpanded ? "true" : "false"}
-            onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
+        return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "svg-icon svg-search" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list", onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
     }
     renderSearchFailedMessage() {
         return h("div", { class: "search-results-message" }, selectMessages.noSearchResults);
@@ -369,7 +367,7 @@ export class PrivOptionList {
         return (h("div", { class: "non-options-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton()));
     }
     render() {
-        return (h("div", { key: '1b5a638b1ce9746eba27e3b106f910b6c08d59ed', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '314e0a7234cdb65a636ea96bb9a5bc3ea94cf9aa', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '4399f882be1d24b5ee799126b1c8b7396f4985d7' })), h("div", { key: '4132af7d3529fdfa3ec301baa9aaf7ad460f9f5e', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { key: '9f19650526738eefcf2e2de58b812d9d0d3a21af', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '381b60f8cb2dc58f7c268e75e6d0e78879393f0d', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '6a99161cdb2d3c4b6b1bfbe9b4af333daa4704de' })), h("div", { key: '8cee667df6aa79c7db5511858a73f68e911cc566', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "priv-option-list"; }
     static get originalStyleUrls() {

package/dist/collection/components/selects/wm-select/wm-select.css

@@ -878,8 +878,7 @@
   --wmcolor-select-selectall-border: var(--wmcolor-select-option-border);
   --wmcolor-select-selectall-text: var(--wmcolor-interactive);
   --wmcolor-select-text: var(--wmcolor-interactive);
-  --offset-x: 0px;
-  --offset-y: 0px;
+  --button-width: auto;
   position: relative;
   display: block;
   box-sizing: border-box;
@@ -985,6 +984,7 @@
   min-width: 8.75rem;
 }
 .wrapper .button-wrapper .displayedoption {
+  anchor-name: --select-button;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -1103,19 +1103,15 @@
   -webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
   transform: scale(1, 1);
+  position: absolute;
+  position-anchor: --select-button;
   margin: 0;
+  padding: 0;
   width: unset;
   top: anchor(bottom);
   left: anchor(left);
   right: anchor(right);
-}
-.wrapper .button-wrapper > .dropdown:popover-open.upwards {
-  top: unset;
-  bottom: anchor(top);
-  -ms-transform-origin: center bottom;
-  -webkit-transform-origin: center bottom;
-  -moz-transform-origin: center bottom;
-  transform-origin: center bottom;
+  position-try-fallbacks: --try-top;
 }
 .wrapper.invalid .button-wrapper .displayedoption {
   -webkit-box-shadow: 0 0 0 1px var(--wmcolor-border-error);
@@ -1164,16 +1160,18 @@
   left: 0.5625rem;
 }
 
+@position-try --try-top {
+  top: unset;
+  bottom: anchor(top);
+  -ms-transform-origin: center bottom;
+  -webkit-transform-origin: center bottom;
+  -moz-transform-origin: center bottom;
+  transform-origin: center bottom;
+}
 @supports not (top: anchor(bottom)) {
-  :host {
-    position: relative;
-  }
-  :host .button-wrapper {
-    position: unset;
-  }
-  :host .button-wrapper .dropdown {
+  .dropdown {
     z-index: 30;
     inset: auto;
-    translate: var(--offset-x) var(--offset-y);
+    width: var(--button-width, auto) !important;
   }
 }

package/dist/collection/components/selects/wm-select/wm-select.js

@@ -1,24 +1,20 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute, showTooltip, hideTooltip, debounce, findAllScrollableParents, getCumulativeScrollOffset, } from "../../../global/functions";
+import { getTextDir, toBool, handleDisabledAttribute, showTooltip, hideTooltip, debounce, } from "../../../global/functions";
 import { globalMessages, selectMessages } from "../../../global/intl";
 export class Select {
     constructor() {
-        this.scrollableParents = [];
-        this.openUp = false;
+        this.returnFocus = false;
         //////////////////////////////////////
         // for multiselect button text
         this.overflowCount = 0;
         this.displayedOptions = [];
-        this.debouncedReveal = debounce(() => {
-            const { x, y } = getCumulativeScrollOffset(this.el);
-            this.el.style.setProperty("--offset-x", "-" + x + "px");
-            this.el.style.setProperty("--offset-y", "-" + y + "px");
-            this.isHidden = false;
-        }, 100);
+        this.previousDisplayedOptions = [];
         this.debouncedResize = debounce(() => {
-            this.scrollableParents = findAllScrollableParents(this.el);
-        }, 200);
+            // Set the dropdown width to match the button width
+            const buttonWidth = this.buttonEl.getBoundingClientRect().width;
+            this.el.style.setProperty("--button-width", buttonWidth + "px");
+        }, 10);
         this.disabled = false;
         this.maxHeight = "200px";
         this.label = undefined;
@@ -31,15 +27,12 @@ export class Select {
         this.placeholder = selectMessages.multiPlaceholder;
         this.searchPlaceholder = selectMessages.searchPlaceholder;
         this.allSelectedMessage = selectMessages.allSelected;
-        this.isHidden = true;
+        this.isExpanded = false;
         this.announcement = "";
     }
     get childOptions() {
         return Array.from(this.el.querySelectorAll("wm-option"));
     }
-    get isExpanded() {
-        return this.dropdownEl && this.dropdownEl.matches(":popover-open");
-    }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
         return toBool(this.disabled);
@@ -53,53 +46,79 @@ export class Select {
     //////////////////////////////////////
     handleOptionSelection() {
         if (!this.multiple) {
-            this.close();
+            this.returnFocus = true;
+            this.dropdownEl.hidePopover();
         }
     }
     handleChildEnter() {
         // only occurs for multiselects. handle the click, then close
-        this.close();
+        this.returnFocus = true;
+        this.dropdownEl.hidePopover();
     }
-    closePopupOnEscape() {
-        this.close();
+    closeDropdownOnEscape() {
+        this.returnFocus = true;
+        this.dropdownEl.hidePopover();
     }
-    handleOptionBlur(ev) {
-        // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget
-        // keeps our component's blur events accurate, and closes when focusing browser address bar
-        if (!isElOrChild(this.el, ev.detail.relatedTarget)) {
-            const event = new CustomEvent("blur");
-            // @ts-ignore
-            event.relatedTarget = ev.detail.relatedTarget;
-            this.el.dispatchEvent(event);
-        }
+    handleToggle(ev) {
+        ev.newState === "open" ? this.open() : this.close();
     }
-    handleClick(ev) {
-        if (!isElOrChild(this.el, ev.target)) {
-            this.close();
+    open() {
+        if (!this.isDisabled) {
+            this.isExpanded = true;
+            // polyfill for browsers without anchor() support (FF)
+            if (!CSS.supports("top", "anchor(bottom)")) {
+                // Set the dropdown width to match the button width
+                const buttonWidth = this.buttonEl.getBoundingClientRect().width;
+                this.el.style.setProperty("--button-width", buttonWidth + "px");
+            }
+            window.requestAnimationFrame(() => {
+                this.optionListEl.handleInitialFocus(this.elToFocus);
+                this.elToFocus = undefined;
+            });
         }
     }
-    handleButtonBlur(ev) {
-        if (isElOrChild(this.el, ev.relatedTarget)) {
-            // do not emit a blur event when opening the dropdown and focusing the Options
-            ev.stopPropagation();
+    close() {
+        if (this.isExpanded) {
+            this.isExpanded = false;
+            this.optionListEl.unfocusAll();
+            window.setTimeout(() => {
+                if (this.optionListEl.multiple) {
+                    this.optionListEl.updateOptionVisibility();
+                }
+                // clear search field, reset filtered / bolded state of wm-options
+                if (this.search) {
+                    this.optionListEl.clearSearch();
+                }
+            }, 150);
+            if (this.returnFocus) {
+                requestAnimationFrame(() => {
+                    this.buttonEl.focus();
+                    this.returnFocus = false;
+                });
+            }
         }
     }
     handleKey(ev) {
         switch (ev.key) {
             case "Tab":
                 // if tabbing backwards, close and return focus to button. Otherwise, close but do not redirect focus.
-                this.close(ev.shiftKey ? true : false);
+                if (this.isExpanded && ev.shiftKey) {
+                    this.returnFocus = true;
+                }
+                this.dropdownEl.hidePopover();
                 break;
             case "ArrowDown":
                 if (this.isExpanded === false) {
                     ev.preventDefault();
-                    this.open("next");
+                    this.elToFocus = "next";
+                    this.dropdownEl.showPopover();
                 }
                 break;
             case "ArrowUp":
                 if (this.isExpanded === false) {
                     ev.preventDefault();
-                    this.open("previous");
+                    this.elToFocus = "previous";
+                    this.dropdownEl.showPopover();
                 }
                 break;
         }
@@ -126,8 +145,6 @@ export class Select {
         });
     }
     handleChildChange() {
-        // on update of children or children selected state, reset button text and rerender
-        this.setButtonText();
         forceUpdate(this.el);
         if (this.multiple) {
             // update state of clone options
@@ -136,58 +153,6 @@ export class Select {
     }
     componentDidLoad() {
         this.wmSelectDidLoad.emit();
-        this.setButtonText();
-        if (!CSS.supports("top", "anchor(bottom)")) {
-            this.scrollableParents = findAllScrollableParents(this.el);
-            // Add scroll listeners to all scrollable parents
-            this.scrollableParents.forEach((parent) => {
-                if (parent === document.documentElement) {
-                    // For document element, listen to window scroll event
-                    window.addEventListener("scroll", () => this.handleScroll());
-                }
-                else {
-                    // For regular elements, listen to their scroll event
-                    parent.addEventListener("scroll", () => this.handleScroll());
-                }
-            });
-        }
-    }
-    open(optionToSelect) {
-        if (!this.isDisabled) {
-            this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, this.labelEl.clientHeight);
-            // handling scroll offset for older browsers (currently FF and Safari)
-            if (!CSS.supports("top", "anchor(bottom)")) {
-                const { x, y } = getCumulativeScrollOffset(this.buttonEl);
-                this.el.style.setProperty("--offset-x", "-" + x + "px");
-                this.el.style.setProperty("--offset-y", "-" + y + "px");
-            }
-            this.isHidden = false;
-            window.requestAnimationFrame(() => {
-                this.optionListEl.handleInitialFocus(optionToSelect);
-            });
-        }
-    }
-    close(returnFocus = true) {
-        if (this.isExpanded) {
-            this.optionListEl.unfocusAll();
-            window.setTimeout(() => {
-                this.isHidden = true;
-                if (this.optionListEl.multiple) {
-                    this.optionListEl.updateOptionVisibility();
-                }
-                // clear search field, reset filtered / bolded state of wm-options
-                if (this.search) {
-                    this.optionListEl.clearSearch();
-                }
-                // Returns focus to button after popup closes (no need if user is tabbing)
-                // Delay is necessary for screenreader to get new expanded state before focus
-                // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
-                // also UX wise, it makes sense for the button to only be focused after the animation is complete
-                if (returnFocus) {
-                    this.buttonEl.focus();
-                }
-            }, 150);
-        }
     }
     announceError() {
         if (this.errorMessage) {
@@ -200,7 +165,6 @@ export class Select {
     handleComponentBlur(ev) {
         // Do not close or emit custom blur event when blurring to an element inside (wm-option)
         if (!this.el.contains(ev.relatedTarget)) {
-            this.close(false);
             this.wmSelectBlurred.emit();
         }
     }
@@ -210,35 +174,6 @@ export class Select {
             showTooltip("right", ev.target, this.label);
         }
     }
-    handleScroll() {
-        if (this.isExpanded) {
-            if (!this.isHidden)
-                this.isHidden = true;
-            this.debouncedReveal();
-        }
-    }
-    setButtonText() {
-        this.displayedOptions = this.childOptions.filter((x) => x.selected);
-        // handle overflow + counter for multiselect
-        if (this.multiple) {
-            // this is a fixed measurement accounting for the max width of a 3 character overflow counter
-            const overflowCounterWidth = 38;
-            const computedStyle = window.getComputedStyle(this.buttonEl);
-            // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
-            const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
-            const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
-            const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-            this.overflowCount = 0;
-            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
-            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
-                this.overflowCount++;
-                this.displayedOptions.pop();
-                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-                optionsTotalWidth = this.measurementAreaEl.clientWidth;
-            }
-        }
-    }
     announce(message) {
         // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
         if (this.liveRegionEl.textContent === message) {
@@ -247,6 +182,7 @@ export class Select {
         this.announcement = message;
     }
     renderButtonText() {
+        this.displayedOptions = this.childOptions.filter((x) => x.selected);
         if (this.multiple && this.displayedOptions.length < 1) {
             return h("span", null, this.placeholder);
         }
@@ -254,6 +190,28 @@ export class Select {
             return this.allSelectedMessage;
         }
         else {
+            // handle overflow + counter for multiselect
+            // only bother if things have changed
+            const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
+            if (this.multiple && hasChanged) {
+                // this is a fixed measurement accounting for the max width of a 3 character overflow counter
+                const overflowCounterWidth = 38;
+                const computedStyle = window.getComputedStyle(this.buttonEl);
+                // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+                const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
+                const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
+                const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
+                this.overflowCount = 0;
+                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+                let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+                while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                    this.overflowCount++;
+                    this.displayedOptions.pop();
+                    this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+                    optionsTotalWidth = this.measurementAreaEl.clientWidth;
+                }
+                this.previousDisplayedOptions = this.displayedOptions;
+            }
             return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
         }
     }
@@ -264,20 +222,19 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        const buttonProps = {
-            id: "selectbtn",
-            ["disabled"]: this.isDisabled,
-            ["aria-controls"]: "list",
-            ["aria-labelledby"]: "label selectbtn",
-            ["aria-describedby"]: "error",
-            ["aria-expanded"]: this.isExpanded ? "true" : "false",
-            ["popovertarget"]: "dropdown",
-            ["popovertargetaction"]: "toggle",
-            onClick: () => (this.isExpanded ? this.close() : this.open()),
-        };
-        return (h(Host, { key: '330408045b96bb9d56e5998d50706e74b2b094a7', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '82b457ba9b22107a26359d5f7f63c56333f33e46', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '9cfa0597409bd864b747b89ac2b843de0b085ca7', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: '7d0c9f4a985b6ab59a239d0cafa69d932125b91b', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: '21d95492d43ab9d1069bf1742d93071df9985dfe', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'eb131f027fcc63a0d7196f647ad6f8952bbc13de', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '41ce7e3027abf28c20927a3f4ad0efa2f8d79ffb', class: "label-wrapper" }, h("label", { key: 'deabf9ba353e261bb1f3d7dbf87be2ddd5d805f2', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField && (h("span", { key: '4a527a732bb04851b3d3fefc29bb4c317d3864b8', class: "required" }, h("span", { key: '8ac2a86df3f5b59d5275f55cca6c85d64c96559e', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '023605d744293eaff5d924f23d5a604fd4fe8796', "aria-hidden": "true" }, "*")))), h("div", { key: '8d1a8b4e1499c3bc41af8231149c5be2da261fb5', class: "button-wrapper" }, h("button", Object.assign({ key: '2068a2077fb7e39c3c41b7e4bb2aa953bc60b9d8' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '71fadfcbc3f77637af1ab24878fcce0507d59012', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'c770393cfe04bb2c107c3052f8b23c83ff581b00', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'e1087535c9c44974385e303ae928d76c071d555f', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'a3e291c520dd26a2512a59e3e3be95f6db72f17a', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'fd328a33e9c92561c1cd9ca0785349b12daa5cb7', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '4d7308d974bd20a1fea40e946abdcd89247095a3', class: `dropdown ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upwards" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '1797c238d91272e4983b4e98f80bfd1519b4fc5f', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: 'de94c77063873993f52d46ab762b461cc3573f30' }))), h("div", { key: '717ee774cf69f04ad73825d717cec9c9e30adc6b', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '053db243c037e395a41f0cb2eade700c600a903d', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField && (h("span", { key: '44ee2795454f9f3bee95ecc4f260b9d56527a108', class: "required" }, h("span", { key: 'defe21df63827aac177d52074e1242c32e98bcb3', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'a10f31be028d79e347d38b6226e64d11e67bcee4', "aria-hidden": "true" }, "*")))), h("div", { key: 'a7910f2d9180bb148b71ff30d91a4b32814720ab', class: "button-wrapper" }, h("button", { key: 'e346214e6aa3087126f48e831a1f4cf8ad47b374', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '6774b180ebc5831316af4364e82b09811a040681', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '70e0cc7710e6ca4eac93025dfc8c7c5241f5483d', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '451817c953223b0443999e1414808d430a1cfd7a', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '86db46ffc2455ec67a5a70f9a4e7a88541487473', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '150324e049b4f37405c13b866edb6a09d13866b5', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'e0aeb5622be16c1bc89c03b10eb0c9bc71e6321c', class: "dropdown", id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
+            // @ts-ignore -- don't tell typescript but we're in the future
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '79f20c45531d18790a8527694fda90f26f84c4e6', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+                this.dropdownEl.hidePopover();
+            }, onOptionListAllSelected: () => {
+                this.returnFocus = true;
+                this.wmSelectAllSelected.emit();
+            }, onOptionListAllDeselected: () => {
+                this.returnFocus = true;
+                this.wmSelectAllDeselected.emit();
+            } }, h("slot", { key: '04942d335177161673a0cb0e62bd509f418390a8' }))), h("div", { key: '2304a7f6e9f40a62a7a7d9b0ebe408dbfbb0c81d', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '78bea4db879582d61cee9b5bf24bfa7b6286926e', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }
@@ -512,7 +469,7 @@ export class Select {
     }
     static get states() {
         return {
-            "isHidden": {},
+            "isExpanded": {},
             "announcement": {}
         };
     }
@@ -604,22 +561,10 @@ export class Select {
                 "passive": false
             }, {
                 "name": "wmEscKeyPressed",
-                "method": "closePopupOnEscape",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmOptionBlurred",
-                "method": "handleOptionBlur",
+                "method": "closeDropdownOnEscape",
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "click",
-                "method": "handleClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
             }, {
                 "name": "keydown",
                 "method": "handleKey",

package/dist/collection/components/wm-file/wm-file.css

@@ -915,7 +915,7 @@
   min-inline-size: 0;
   flex-grow: 1;
 }
-.file-wrapper .file .left-group:has(.-truncated) {
+.file-wrapper .file .left-group:has(#file-details:not([open]) .-truncated) {
   min-inline-size: fit-content;
 }
 .file-wrapper .file .right-group {

package/dist/collection/components/wm-uploader/wm-uploader.js

@@ -163,24 +163,28 @@ export class Uploader {
         }
     }
     handleProgressUpdate(mutationRecord) {
-        if (this.inProgressFileEls.length !== 0) {
-            const changeInUploadingFiles = this.prevUploadCount !== this.inProgressFileEls.length;
+        const uploadCount = this.inProgressFileEls.length;
+        if (uploadCount !== 0) {
+            const changeInUploadingFiles = this.prevUploadCount !== uploadCount;
             changeInUploadingFiles &&
-                this.announce(uploaderMessages.getFilesUploading(this.inProgressFileEls.length), this.assertiveLiveRegionEl);
-            this.notif = uploaderMessages.getFilesUploading(this.inProgressFileEls.length);
-            this.prevUploadCount = this.inProgressFileEls.length;
+                this.announce(uploaderMessages.getFilesUploading(uploadCount), this.assertiveLiveRegionEl);
+            this.notif = uploaderMessages.getFilesUploading(uploadCount);
+            this.prevUploadCount = uploadCount;
+            if (this.batchCount < uploadCount) {
+                this.batchCount = uploadCount;
+            }
             if (!this.srProgress) {
                 this.srProgress = setInterval(() => {
                     const aggregate = this.fileEls.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
-                    this.announce(uploaderMessages.getUploadProgress(Math.floor(aggregate / this.batchCount)), this.assertiveLiveRegionEl);
+                    const percentage = this.batchCount > 0 ? Math.floor(aggregate / this.batchCount) : 0;
+                    this.announce(uploaderMessages.getUploadProgress(percentage), this.assertiveLiveRegionEl);
                 }, 5000);
             }
         }
-        else if (this.inProgressFileEls.length === 0 &&
-            mutationRecord.oldValue &&
-            parseInt(mutationRecord.oldValue) < 100) {
+        else if (uploadCount === 0 && mutationRecord.oldValue && parseInt(mutationRecord.oldValue) < 100) {
             // if final file progress completes
             this.uploadButtonEl.value = "";
+            this.batchCount = 0;
             this.notif = uploaderMessages.finishedUploading;
             this.announce(uploaderMessages.finishedUploading, this.assertiveLiveRegionEl);
             clearInterval(this.srProgress);
@@ -309,9 +313,9 @@ export class Uploader {
         return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
     }
     render() {
-        return (h(Host, { key: 'b58548a627b616f7baf9e2218140583b42d2eeff', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '4325b5923dd0879157bd0d0370ff2e9011fc3e89', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, { key: '99be303c7fdecf7fed30bb597f312c792ab0dbd5', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'd4fd6720967d4a5eed7b9d0231a5fe8203ed98b8', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { key: '4431d6e65f0b13f02a1b91c35a4fae6953c95a97', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { key: '06cfeee56f1cb84a616324cbc8d736e79bf1f258', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/dev/uploader.js

@@ -89,10 +89,10 @@ function handleFilesSelected(ev) {
         addFile(upl, newFile);
 
         // mock series of upload progress updates
-        setTimeout(() => updateUploadProgress(upl, fileId, 25), 1000);
-        setTimeout(() => updateUploadProgress(upl, fileId, 50), 3000 + uploadStagger);
-        setTimeout(() => updateUploadProgress(upl, fileId, 75), 3250 + uploadStagger);
-        setTimeout(() => updateUploadProgress(upl, fileId, 100), 3500 + uploadStagger);
+        setTimeout(() => updateUploadProgress(upl, fileId, 0.00), 1000 + 3000);
+        setTimeout(() => updateUploadProgress(upl, fileId, 25), 3000 + uploadStagger + 6000);
+        setTimeout(() => updateUploadProgress(upl, fileId, 75.5), 3250 + uploadStagger + 15000);
+        setTimeout(() => updateUploadProgress(upl, fileId, 100), 3500 + uploadStagger + 20000);
       } else {
         addError(upl, newFile, fileError);
       }

package/dist/esm/{app-globals-c069a17b.js → app-globals-edff5d27.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.19.0-alpha.11";
+const version = "5.19.0-alpha.14";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/{chartFunctions-3a54f8ac.js → chartFunctions-613e9c87.js}

@@ -1,5 +1,5 @@
 import { h } from './index-130e07bb.js';
-import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-669184a6.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-38e392cb.js';
 
 const colors = {
     salmon: "#ff5f4e",

package/dist/esm/{functions-669184a6.js → functions-38e392cb.js}

@@ -10585,4 +10585,4 @@ const weekdays = [
     intl.formatMessage({ id: "date.saturday", defaultMessage: "Saturday" }),
 ];
 
-export { findPrev as A, getTextDir as B, isElOrChild as C, throttle as D, getContextMeasurements as E, dateFind as F, calendar_months as G, findParentWithHiddenOverflow as H, transposeMatrix as I, wrapAround as J, getSmallestSkipInterval as K, calcPercentageInRange as L, makeISO as M, getMonthLength as N, weekdays as O, handleDisabledAttribute as a, triggerFormSubmit as b, checkForActiveElInShadow as c, debounce as d, safeMultiplyFloat as e, getPosition as f, generateId as g, hideTooltip as h, intl as i, findAllScrollableParents as j, dateToISO as k, shouldOpenUp as l, hasRoomRight as m, truncateText as n, getLastFocusableDescendant as o, csvToArray as p, snakeCaseToCamelCase as q, getNewIndexToFocus as r, showTooltip as s, toBool as t, getCumulativeScrollOffset as u, shouldOpenDown as v, shouldShiftRight as w, shouldShiftLeft as x, measureText as y, findNext as z };
+export { findPrev as A, getTextDir as B, throttle as C, getContextMeasurements as D, dateFind as E, calendar_months as F, findParentWithHiddenOverflow as G, transposeMatrix as H, wrapAround as I, getSmallestSkipInterval as J, calcPercentageInRange as K, isElOrChild as L, makeISO as M, getMonthLength as N, weekdays as O, handleDisabledAttribute as a, triggerFormSubmit as b, checkForActiveElInShadow as c, debounce as d, safeMultiplyFloat as e, getPosition as f, generateId as g, hideTooltip as h, intl as i, findAllScrollableParents as j, dateToISO as k, shouldOpenUp as l, hasRoomRight as m, truncateText as n, getLastFocusableDescendant as o, csvToArray as p, snakeCaseToCamelCase as q, getNewIndexToFocus as r, showTooltip as s, toBool as t, getCumulativeScrollOffset as u, shouldOpenDown as v, shouldShiftRight as w, shouldShiftLeft as x, measureText as y, findNext as z };

package/dist/esm/{intl-7906e2d7.js → intl-0b8f342e.js}

@@ -1,4 +1,4 @@
-import { i as intl } from './functions-669184a6.js';
+import { i as intl } from './functions-38e392cb.js';
 
 const globalMessages = {
     characterLimitReached: intl.formatMessage({