@watermarkinsights/ripple 5.19.0-alpha.12 → 5.19.0-alpha.15

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

@@ -238,11 +238,11 @@ const Toggletip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '07c2a62e81a2df15f667ca84d440c96dc21a89f7', class: `size-${this.targetSize}` }, index.h("button", { key: 'd0cb8080843aa0c61fbc2a8280b12e25707ba79a', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        return (index.h(index.Host, { key: '2127bc9c0e5bebbf58fce82b7ea772a3b6fe2ada', class: `size-${this.targetSize}` }, index.h("button", { key: '55335d84975af0a4e6928b71d08745050454d4e4', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: '1b082071110727cf565df491c69b8f2a7c58a3d4', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: 'de52ea584962f47a035c900af10e31951ec49ef6', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
             // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
-            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: '140540c39e67e60d63ed8c6e4435a7063a2bb16d', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: '88e8da7742e5aa390fd17be1efd6067d25f71209', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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: '480a7275b0ebb68564f92433c8c522769ce60bc3', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: 'b2cec25d91186e5c8a8b7b851fe116bdfdd8c174', 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: 'eeb50c37630ba08df7e6be89ec30a55cefeafd9a', 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-tag-input/wm-tag-input.css

@@ -882,13 +882,13 @@
   --wmcolor-taginput-option-text-selected: var(--wmcolor-option-text-disabled);
   --wmcolor-taginput-option-text: var(--wmcolor-interactive);
   --wmcolor-taginput-row-background-hover: var(--wmcolor-interactive-background-hover);
-  --wmcolor-taginput-row-background-focus: var(--wmcolor-interactive-background-focus);
+  --wmcolor-taginput-row-background-focus: var(--wmcolor-background-selected);
   --wmcolor-taginput-row-background-selected: var(--wmcolor-table-row-background-selected);
   --wmcolor-taginput-row-background-table: var(--wmcolor-table-row-background);
   --wmcolor-taginput-row-border-selected: var(--wmcolor-table-row-border-selected);
   --wmcolor-taginput-tag-background-highlight: var(--wmcolor-interactive-background-highlight);
   --wmcolor-taginput-tag-background-locked: var(--wmcolor-interactive-disabled);
-  --wmcolor-taginput-tag-background: var(--wmcolor-palelilacgray); /* EXCEPTION */
+  --wmcolor-taginput-tag-background: var(--wmcolor-lilacgray-30); /* EXCEPTION */
   --wmcolor-taginput-tag-text-locked: var(--wmcolor-text-ondark);
   --wmcolor-taginput-tag-text: var(--wmcolor-text);
   --wmcolor-taginput-tagbutton-background-hover: var(--wmcolor-interactive-hover);
@@ -1218,11 +1218,12 @@
   outline: none;
   background: var(--wmcolor-taginput-option-background-hover);
 }
-:host .dropdown-wrapper li.option.focused, :host .dropdown-wrapper li.add-new-btn.focused,
-:host .dropdown-wrapper div.option.focused,
-:host .dropdown-wrapper div.add-new-btn.focused {
+:host .dropdown-wrapper li.option.focused:not(:hover), :host .dropdown-wrapper li.add-new-btn.focused:not(:hover),
+:host .dropdown-wrapper div.option.focused:not(:hover),
+:host .dropdown-wrapper div.add-new-btn.focused:not(:hover) {
   outline: none;
   background: var(--wmcolor-taginput-option-background-focus);
+  color: var(--wmcolor-interactive-text);
 }
 :host .dropdown-wrapper li.help-text,
 :host .dropdown-wrapper div.help-text {
@@ -1245,9 +1246,6 @@
   overflow: auto;
   margin-block-start: 1.5rem;
 }
-:host .table-wrapper:focus {
-  outline: none;
-}
 :host .table-wrapper #table {
   width: 100%;
   border-spacing: 0px;
@@ -1266,6 +1264,9 @@
   text-transform: uppercase;
   padding: 0 1.5rem;
 }
+:host .table-wrapper #table:focus {
+  outline: none;
+}
 :host .table-wrapper tr:nth-child(even) {
   background-color: var(--wmcolor-taginput-altrow-background-table);
 }