@watermarkinsights/ripple 5.19.1-alpha.2 → 5.20.0-alpha.0

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

@@ -1,34 +1,14 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, toBool, handleDisabledAttribute, showTooltip, hideTooltip, debounce, findAllScrollableParents, } from "../../../global/functions";
+import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute, showTooltip, hideTooltip } from "../../../global/functions";
 import { globalMessages, selectMessages } from "../../../global/intl";
 export class Select {
     constructor() {
-        this.scrollableParents = [];
-        this.returnFocus = false;
-        this.hasAnchor = CSS.supports("top", "anchor(bottom)"); // for FF polyfill
+        this.openUp = false;
         //////////////////////////////////////
         // for multiselect button text
         this.overflowCount = 0;
         this.displayedOptions = [];
-        this.previousDisplayedOptions = [];
-        this.debouncedScroll = debounce(() => {
-            if (this.hasAnchor) {
-                const popoverRect = this.dropdownEl.getBoundingClientRect();
-                const anchorRect = this.buttonEl.getBoundingClientRect();
-                // Heuristic: Popover is ABOVE the anchor (it opened upwards)
-                this.isUp = popoverRect.bottom < anchorRect.top;
-                this.isExpanded = true;
-                this.optionListEl.handleInitialFocus(this.elToFocus);
-                this.elToFocus = undefined;
-            }
-            else {
-                this.dropdownPosition();
-            }
-        }, 100);
-        this.debouncedResize = debounce(() => {
-            this.dropdownPosition();
-        }, 100);
         this.disabled = false;
         this.maxHeight = "200px";
         this.label = undefined;
@@ -42,8 +22,6 @@ export class Select {
         this.searchPlaceholder = selectMessages.searchPlaceholder;
         this.allSelectedMessage = selectMessages.allSelected;
         this.isExpanded = false;
-        this.isUp = false;
-        this.isHidden = false;
         this.announcement = "";
     }
     get childOptions() {
@@ -62,149 +40,58 @@ export class Select {
     //////////////////////////////////////
     handleOptionSelection() {
         if (!this.multiple) {
-            this.returnFocus = true;
-            this.dropdownEl.hidePopover();
+            this.close();
         }
     }
     handleChildEnter() {
         // only occurs for multiselects. handle the click, then close
-        this.returnFocus = true;
-        this.dropdownEl.hidePopover();
-    }
-    closeDropdownOnEscape() {
-        this.returnFocus = true;
-        this.dropdownEl.hidePopover();
-    }
-    handleBeforeToggle() {
-        if (!this.hasAnchor) {
-            // Start hidden to prevent flash during positioning calculation
-            this.isHidden = true;
-        }
-    }
-    handleToggle(ev) {
-        ev.newState === "open" ? this.open() : this.close();
-    }
-    dropdownPosition() {
-        // polyfill for opening up or down + positioning according to screen
-        // (must recalculate on scroll, resize)
-        // Using transform for better performance - only affects composite layer, no layout recalculation
-        const buttonElRect = this.buttonEl.getBoundingClientRect();
-        const spaceAbove = buttonElRect.top;
-        const spaceBelow = document.documentElement.clientHeight - buttonElRect.bottom;
-        const dropdownHeight = this.dropdownEl.clientHeight;
-        // Clear any previously set positioning properties
-        this.el.style.removeProperty("--dropdown-translate-y");
-        this.el.style.removeProperty("--dropdown-max-height");
-        this.el.style.removeProperty("--dropdown-left");
-        // Set horizontal position and width to match button
-        this.el.style.setProperty("--dropdown-left", buttonElRect.left + "px");
-        this.el.style.setProperty("--button-width", buttonElRect.width + "px");
-        if (dropdownHeight <= spaceBelow) {
-            // Case 1: Enough space below - position dropdown below the button
-            this.el.style.setProperty("--dropdown-translate-y", buttonElRect.bottom + "px");
-        }
-        else if (dropdownHeight <= spaceAbove) {
-            // Case 2: Not enough space below, but enough above - position dropdown above the button
-            this.el.style.setProperty("--dropdown-translate-y", buttonElRect.top - dropdownHeight + "px");
-        }
-        else {
-            // Case 3: Not enough space in either direction - use the larger available space and constrain height
-            if (spaceBelow >= spaceAbove) {
-                // Use space below and constrain dropdown height
-                this.el.style.setProperty("--dropdown-translate-y", buttonElRect.bottom + "px");
-                this.el.style.setProperty("--dropdown-max-height", spaceBelow + "px");
-            }
-            else {
-                // Use space above and constrain dropdown height
-                this.el.style.setProperty("--dropdown-translate-y", "0px");
-                this.el.style.setProperty("--dropdown-max-height", spaceAbove + "px");
-            }
+        this.close();
+    }
+    closePopupOnEscape() {
+        this.close();
+    }
+    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);
         }
-        this.isHidden = false;
     }
-    open() {
-        if (!this.isExpanded && !this.isDisabled) {
-            // polyfill for browsers without anchor() support (FF)
-            if (!this.hasAnchor) {
-                this.dropdownPosition();
-            }
-            requestAnimationFrame(() => {
-                const popoverRect = this.dropdownEl.getBoundingClientRect();
-                const anchorRect = this.buttonEl.getBoundingClientRect();
-                // Heuristic: Popover is ABOVE the anchor (it opened upwards)
-                this.isUp = popoverRect.top < anchorRect.top;
-                this.isExpanded = true;
-                this.optionListEl.handleInitialFocus(this.elToFocus);
-                this.elToFocus = undefined;
-            });
+    handleClick(ev) {
+        if (!isElOrChild(this.el, ev.target)) {
+            this.close();
         }
     }
-    close() {
-        if (this.isExpanded) {
-            this.isExpanded = false;
-            this.optionListEl.unfocusAll();
-            window.setTimeout(() => {
-                if (!this.hasAnchor) {
-                    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();
-                }
-            }, 150);
-            if (this.returnFocus) {
-                requestAnimationFrame(() => {
-                    this.buttonEl.focus();
-                    this.returnFocus = false;
-                });
-            }
+    handleButtonBlur(ev) {
+        if (isElOrChild(this.el, ev.relatedTarget)) {
+            // do not emit a blur event when opening the dropdown and focusing the Options
+            ev.stopPropagation();
         }
     }
     handleKey(ev) {
         switch (ev.key) {
             case "Tab":
                 // if tabbing backwards, close and return focus to button. Otherwise, close but do not redirect focus.
-                if (this.isExpanded && ev.shiftKey) {
-                    this.returnFocus = true;
-                }
-                this.dropdownEl.hidePopover();
+                this.close(ev.shiftKey ? true : false);
                 break;
             case "ArrowDown":
                 if (this.isExpanded === false) {
                     ev.preventDefault();
-                    this.elToFocus = "next";
-                    this.dropdownEl.showPopover();
+                    this.open("next");
                 }
                 break;
             case "ArrowUp":
                 if (this.isExpanded === false) {
                     ev.preventDefault();
-                    this.elToFocus = "previous";
-                    this.dropdownEl.showPopover();
+                    this.open("previous");
                 }
                 break;
         }
     }
-    handleResize() {
-        if (!this.hasAnchor && this.isExpanded) {
-            this.isHidden = true;
-            this.debouncedResize();
-        }
-    }
-    handleScroll() {
-        if (this.isExpanded) {
-            this.isHidden = true;
-            this.debouncedScroll();
-        }
-    }
     componentWillLoad() {
-        if (!this.hasAnchor) {
-            // Start hidden to prevent flash on first load
-            this.isHidden = true;
-        }
         if (!this.label) {
             console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
         }
@@ -221,6 +108,8 @@ 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
@@ -229,19 +118,43 @@ export class Select {
     }
     componentDidLoad() {
         this.wmSelectDidLoad.emit();
-        if (!this.hasAnchor) {
-            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());
+        this.dropdownEl.classList.add("hidden");
+        forceUpdate(this.el);
+        this.setButtonText();
+    }
+    open(optionToSelect) {
+        if (!this.isDisabled) {
+            this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, this.labelEl.clientHeight);
+            this.isExpanded = true;
+            this.dropdownEl.classList.add("open");
+            this.dropdownEl.classList.remove("hidden");
+            window.requestAnimationFrame(() => {
+                this.optionListEl.handleInitialFocus(optionToSelect);
+            });
+        }
+    }
+    close(returnFocus = true) {
+        if (this.isExpanded) {
+            this.isExpanded = false;
+            this.optionListEl.unfocusAll();
+            this.dropdownEl.classList.remove("open");
+            window.setTimeout(() => {
+                this.dropdownEl.classList.add("hidden");
+                if (this.optionListEl.multiple) {
+                    this.optionListEl.updateOptionVisibility();
                 }
-                else {
-                    // For regular elements, listen to their scroll event
-                    parent.addEventListener("scroll", () => this.handleScroll());
+                // 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() {
@@ -255,6 +168,7 @@ 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();
         }
     }
@@ -264,6 +178,28 @@ export class Select {
             showTooltip("right", ev.target, this.label);
         }
     }
+    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) {
@@ -272,7 +208,6 @@ 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);
         }
@@ -280,28 +215,6 @@ 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)));
         }
     }
@@ -312,22 +225,18 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: 'f73046e3e0d19f90e1de9f6c104b186159e08551', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '78f69feb04ef0436bb3b7f0bdeb08c67c69aa025', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'a3a54f3c4b01271bb472a2dcaeff653ae37191b8', class: "label-wrapper" }, h("label", { key: 'fac48d7e7a6ee92a6c28bcc6d76aa9b0358cb2fa', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        const buttonProps = {
+            id: "selectbtn",
+            ["disabled"]: this.isDisabled,
+            ["aria-controls"]: "list",
+            ["aria-labelledby"]: "label selectbtn",
+            ["aria-describedby"]: "error",
+            ["aria-expanded"]: this.isExpanded ? "true" : "false",
+            onClick: () => (this.isExpanded ? this.close() : this.open()),
+        };
+        return (h(Host, { key: '27f57d30b836eac8dc27ae98a425015d86a0948b', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '8f48d8e8d616244350e61d6e81f350640131bbf0', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '39d3bcec9b67d671a6bdbb6a3ee738832189ea51', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: 'b0bb90a215ac20de94afa8dba56e839bdc590dc1', 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: 'a78da94fc8742122542de24709dae541058aeab1', class: "required" }, h("span", { key: '055fb76d88b0680ede31d3c700a640b5c1cb498f', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'e1db2d800c6b5789d8a50ce73b02899b4c8cf105', "aria-hidden": "true" }, "*")))), h("div", { key: '9a1b34ee65e711a6bfd55149af12ed03899294cc', class: "button-wrapper" }, h("button", { key: 'b7c86d83006cb532787d3f1df0c9c9f3b54470e7', 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: 'ed2cc72a353f2bae29fdd5d8ea3f5b5dedc85c6b', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'cd68f6e2d0200649a57bb8f8c9c7ad423c551848', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '2501335ceaa6612cd720c71b0ea3c6efb68fa698', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'dacf8d5e2223a9700854ef4fac3ecabf1c8702a2', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '161a40394450b4bac8ac91435a2b03ef9a0f8277', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'ed6cdbdfe2d290440b1bd33938b4cee31a70047e',
-            // is-open is for the CSS transition in modern browsers
-            // hidden is to wait for position calculations in Firefox
-            class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.isUp ? "upward" : ""}`, 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: '14ab958ca5cb5a3ac3fa970ed138ec5b47089779', 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: '98699fb0f36674cbae13f226fa923d6228fdad97' }))), h("div", { key: '69a49e6a2fe618bf9ce1a7e08527630a2d48cb8b', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '374538b9eb797924abfe74049fec191a41ae7501', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField && (h("span", { key: '4a5648503a023ff1eba34db936d49709e14da9f1', class: "required" }, h("span", { key: '3fe783c7174d3d827b20589cad412d32fa4cd978', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '85ac4ca35f1077ade1bdda403b8888cc206ff28e', "aria-hidden": "true" }, "*")))), h("div", { key: 'c2e70d87db2d533713ac9c5a877ddba98a9a9a2f', class: "button-wrapper" }, h("button", Object.assign({ key: '460c6ac5cde8637b0098201966ca4268301ac2b7' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '3af3357f45ceacc5689e90e2bdc6459cab591c2f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'bd9869db1146e54cc47c2965ebe2776873e2a18e', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'b22d952625e93fab98ebb1b688101fd8891a4af7', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '1f6448ee167d1847eff8fb5bc7a30e0a964e6efe', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '0d550b97a3e08e9b708f2f4c3d91f9cac76ba5d8', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '59cc7fcfa25d9d3eab8e4d70cdcd365e36e160ad', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '9fb7d0396527bc18bb8f5d00d64c858470d0698d', 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: '4c307bca5104ec962ca050b46adf882fb78bb74a' }))), h("div", { key: '06f11b61b475cc6cd78c2a8278b8455a79405e17', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '86cf865fbb7fd0e2c88290fe92e6062ada7d9ab6', 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"; }
@@ -563,8 +472,6 @@ export class Select {
     static get states() {
         return {
             "isExpanded": {},
-            "isUp": {},
-            "isHidden": {},
             "announcement": {}
         };
     }
@@ -656,22 +563,28 @@ export class Select {
                 "passive": false
             }, {
                 "name": "wmEscKeyPressed",
-                "method": "closeDropdownOnEscape",
+                "method": "closePopupOnEscape",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
-                "name": "keydown",
-                "method": "handleKey",
+                "name": "wmOptionBlurred",
+                "method": "handleOptionBlur",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
-                "name": "resize",
-                "method": "handleResize",
-                "target": "window",
+                "name": "click",
+                "method": "handleClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKey",
+                "target": undefined,
                 "capture": false,
-                "passive": true
+                "passive": false
             }];
     }
 }

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

@@ -28,7 +28,7 @@ export class Toggletip {
         this.isHidden = true;
     }
     get isOpen() {
-        return this.toggletipEl.matches(":popover-open");
+        return this.toggletipEl && this.toggletipEl.matches(":popover-open");
     }
     get tooltipMessage() {
         switch (this.toggletipType) {
@@ -229,11 +229,11 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: '2127bc9c0e5bebbf58fce82b7ea772a3b6fe2ada', class: `size-${this.targetSize}` }, h("button", { key: '55335d84975af0a4e6928b71d08745050454d4e4', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        return (h(Host, { key: 'f8a626c9e0311a0a05d58d12787c0e9a3be5ca8a', class: `size-${this.targetSize}` }, h("button", { key: 'c2e2dbc45ce9900a8025973f0fd7a3870eca0afa', 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 && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: 'de52ea584962f47a035c900af10e31951ec49ef6', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: '3a786c92826bc07b6ec0bb3119f1adfeacc25656', 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), h("div", { key: '88e8da7742e5aa390fd17be1efd6067d25f71209', 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), h("div", { key: '7ed3b737df01ff9b2bbf3182e8cf3b3188d24b83', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/esm/{app-globals-14723564.js → app-globals-0290058e.js}

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

package/dist/esm/{chartFunctions-613e9c87.js → chartFunctions-3a54f8ac.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-38e392cb.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-669184a6.js';
 
 const colors = {
     salmon: "#ff5f4e",

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

@@ -10585,4 +10585,4 @@ const weekdays = [
     intl.formatMessage({ id: "date.saturday", defaultMessage: "Saturday" }),
 ];
 
-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 };
+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 };

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

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