@watermarkinsights/ripple 5.28.1 → 5.29.0-alpha.2

package/dist/collection/components/datepickers/wm-datepicker.js

@@ -1,25 +1,16 @@
 import { h, Host } from "@stencil/core";
-import { intl, toBool, handleDisabledAttribute, hasRoomRight, shouldOpenUp, dateToISO, showTooltip, hideTooltip, findAllScrollableParents, debounce, } from "../../global/functions";
+import { intl, toBool, handleDisabledAttribute, dateToISO, showTooltip, hideTooltip, findAllScrollableParents, } from "../../global/functions";
 export class DatePicker {
     constructor() {
-        this.openUp = false;
-        this.popupClicked = false;
-        this.toggleButtonClicked = false;
-        this.debouncedResize = debounce(async () => {
-            let scrollableParents = findAllScrollableParents(this.el);
-            if (scrollableParents.length > 0) {
-                let horizontalOffset = this.inputEl.getBoundingClientRect().x - scrollableParents[0].getBoundingClientRect().x;
-                if (scrollableParents[0].clientWidth - horizontalOffset < this.popupEl.clientWidth) {
-                    // popupEl must not have display: none, so it can be measured
-                    this.buttonContainerEl.classList.add("sr-only");
-                    this.toggleEl.tabIndex = -1;
-                }
-                else {
-                    this.buttonContainerEl.classList.remove("sr-only");
-                    this.toggleEl.tabIndex = 0;
-                }
-            }
-        }, 10);
+        this.hasAnchor = CSS.supports("top", "anchor(bottom)");
+        this.popupMinHeight = 337; // priv-calendar.scss line 98
+        this.popupWidth = 336;
+        this.checkCanOpen = () => {
+            if (!this.anchorEl)
+                return;
+            const fit = this.measureFit();
+            this.canOpen = fit.vertical !== "none" && fit.horizontal !== "none";
+        };
         this.value = "";
         this.disabled = false;
         this.dateFormat = "mm/dd/yyyy";
@@ -29,6 +20,34 @@ export class DatePicker {
         this.requiredField = false;
         this.preselected = undefined;
         this.isExpanded = false;
+        this.openUp = false;
+        this.openRight = false;
+        this.isHidden = false;
+        this.canOpen = true;
+    }
+    measureFit() {
+        const rect = this.anchorEl.getBoundingClientRect();
+        const vw = document.documentElement.clientWidth;
+        const vh = document.documentElement.clientHeight;
+        if (!vw || !vh) {
+            return { vertical: "below", horizontal: "left" };
+        }
+        const spaceBelow = vh - rect.bottom;
+        const spaceAbove = rect.top;
+        const fitsBelow = spaceBelow >= this.popupMinHeight;
+        const fitsAbove = spaceAbove >= this.popupMinHeight;
+        const canScroll = findAllScrollableParents(this.el).length > 0;
+        const fitsLeftAligned = rect.left + this.popupWidth <= vw;
+        const fitsRightAligned = rect.right - this.popupWidth >= 0;
+        const vertical = fitsBelow
+            ? "below"
+            : fitsAbove
+                ? "above"
+                : canScroll
+                    ? "below-scroll"
+                    : "none";
+        const horizontal = fitsLeftAligned ? "left" : fitsRightAligned ? "right" : "none";
+        return { vertical, horizontal };
     }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
@@ -59,46 +78,84 @@ export class DatePicker {
             setTimeout(() => this.announce(this.errorMessage), 100);
         }
     }
-    togglePopup() {
-        this.isExpanded ? this.closePopup() : this.openPopup();
-        this.toggleButtonClicked = true;
-    }
-    closePopup(returnFocus = false) {
-        this.isExpanded = false;
-        this.calEl.view = "day";
-        this.calEl.view = "day";
-        this.popupEl.classList.remove("open");
-        window.setTimeout(() => {
-            //not using display none in order to get measurements of the popup while hidden
-            this.popupEl.style.visibility = "hidden";
-        }, 250);
-        //Reset values so that menu reopens to day view with selected date in focus
-        if (returnFocus) {
-            this.toggleEl.focus();
+    positionDropdown() {
+        // polyfill for browsers without anchor() support (older Firefox)
+        const rect = this.anchorEl.getBoundingClientRect();
+        const spaceAbove = rect.top;
+        const spaceBelow = document.documentElement.clientHeight - rect.bottom;
+        const viewportWidth = document.documentElement.clientWidth;
+        const popupHeight = this.popupEl.clientHeight;
+        const popupWidth = this.popupEl.clientWidth;
+        this.el.style.removeProperty("--popup-translate-y");
+        this.el.style.removeProperty("--popup-max-height");
+        this.el.style.removeProperty("--popup-left");
+        // HORIZONTAL: prefer left-aligned to toggle; fall back to right-aligned.
+        // canOpen guarantees at least one side fits, so no centered fallback.
+        if (popupWidth <= viewportWidth - rect.left) {
+            this.el.style.setProperty("--popup-left", rect.left + "px");
         }
+        else {
+            this.el.style.setProperty("--popup-left", rect.right - popupWidth + "px");
+        }
+        // VERTICAL
+        const gap = 2;
+        if (popupHeight + gap <= spaceBelow) {
+            this.el.style.setProperty("--popup-translate-y", rect.bottom + gap + "px");
+        }
+        else if (popupHeight + gap <= spaceAbove) {
+            this.el.style.setProperty("--popup-translate-y", rect.top - popupHeight - gap + "px");
+        }
+        else if (spaceBelow >= spaceAbove) {
+            this.el.style.setProperty("--popup-translate-y", rect.bottom + gap + "px");
+            this.el.style.setProperty("--popup-max-height", spaceBelow - gap + "px");
+        }
+        else {
+            this.el.style.setProperty("--popup-translate-y", "0px");
+            this.el.style.setProperty("--popup-max-height", spaceAbove - gap + "px");
+        }
+        this.isHidden = false;
     }
-    openPopup() {
-        this.openUp = shouldOpenUp(this.el, this.popupEl.clientHeight, this.labelWrapperEl.clientHeight);
-        if (hasRoomRight(this.el, 336)) {
-            this.popupEl.style.left = "0";
-            this.popupEl.style.right = "auto";
+    handleToggle(ev) {
+        if (ev.newState === "open") {
+            if (!this.hasAnchor) {
+                this.positionDropdown();
+            }
+            requestAnimationFrame(() => {
+                if (this.hasAnchor) {
+                    const fit = this.measureFit();
+                    this.openUp = fit.vertical === "above";
+                    this.openRight = fit.horizontal === "right";
+                    if (fit.vertical === "below-scroll") {
+                        // scroll needs to reveal the popup — pop it out of top-layer fixed
+                        // positioning so the ancestor scroll container governs visibility.
+                        this.popupEl.style.position = "absolute";
+                    }
+                }
+                this.isExpanded = true;
+                this.calEl.focusDate = this.calendarDate;
+                this.calEl.startDate = this.calendarDate;
+                this.calEl.focusCell();
+                window.setTimeout(() => {
+                    this.calEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
+                }, 250);
+            });
         }
         else {
-            this.popupEl.style.right = "0";
-            this.popupEl.style.left = "auto";
+            this.popupEl.style.position = "";
+            this.isExpanded = false;
+            if (!this.hasAnchor) {
+                this.isHidden = true;
+            }
+            this.calEl.view = "day";
+        }
+    }
+    closePopup(returnFocus = false) {
+        this.popupEl.hidePopover();
+        if (returnFocus) {
+            window.setTimeout(() => {
+                this.toggleEl.focus();
+            }, 50);
         }
-        this.popupEl.style.visibility = "visible";
-        window.requestAnimationFrame(() => {
-            this.popupEl.classList.add("open");
-        });
-        this.isExpanded = true;
-        this.calEl.focusDate = this.calendarDate;
-        this.calEl.startDate = this.calendarDate;
-        this.calEl.focusCell();
-        window.setTimeout(() => {
-            // ensure focused element is visible if popup opens below the fold
-            this.calEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
-        }, 250);
     }
     handleInput(ev) {
         // keep component's value in sync with input's value
@@ -122,26 +179,6 @@ export class DatePicker {
             showTooltip("right", ev.target, this.label);
         }
     }
-    handleKey(ev) {
-        if (ev.key === "Escape" && this.isExpanded) {
-            ev.preventDefault();
-            ev.stopPropagation(); // prevents closing of parent modal
-            this.closePopup(true);
-        }
-    }
-    blurHandler() {
-        if (!this.popupClicked && !this.toggleButtonClicked && this.isExpanded) {
-            this.closePopup();
-        }
-        this.popupClicked = false;
-        this.toggleButtonClicked = false;
-    }
-    // for cases where the user clicks or uses a shortcut to leave the document
-    handleBlurOnWindow() {
-        if (this.isExpanded) {
-            this.closePopup();
-        }
-    }
     handleCellTriggered(ev) {
         let dateElement = ev.detail.cell;
         let isoDate = dateElement.getAttribute("data-year") +
@@ -222,45 +259,45 @@ export class DatePicker {
         if (this.label === "") {
             console.error("You must include a label prop for the datepicker input (for accessibility reasons), even if the label position is none.");
         }
+        if (!this.hasAnchor) {
+            this.isHidden = true;
+        }
         handleDisabledAttribute(this.el, this.isDisabled);
     }
     componentDidLoad() {
-        this.calEl.addEventListener("click", () => {
-            this.popupClicked = true;
-        });
-        const resizeObserver = new ResizeObserver(() => {
-            this.debouncedResize();
-        });
-        resizeObserver.observe(this.el);
+        this.checkCanOpen();
+        window.addEventListener("resize", this.checkCanOpen);
     }
-    handleWindowResize() {
-        this.debouncedResize();
+    disconnectedCallback() {
+        window.removeEventListener("resize", this.checkCanOpen);
     }
     announce(message) {
-        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        //   is a non-breaking space character, which causes the message to be read as a new one
         if (this.liveRegionEl.textContent === message) {
-            message += "\u00A0";
+            message += " ";
         }
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (h(Host, { key: '454c222862bda0c2dd3e1bc7a519dfc40b47ee65', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '837eff058e5797e6f8f5c9793926ccbd49bbac75', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '3acce2e8476634d08037c8df9a635830c217e9e3', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: 'c19ec0805ade5dfa0192fa686f8f915840ffb211', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '3a8228a16359b4dab823225d6933d04b1278ba84', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '1e9cfe640de52ad3cf3bbbdb171f592fe650dffa' }, h("div", { key: 'a7df529f7a3f3f344fb0ed1d3aa0294397082fd7', class: "single-wrapper input" }, h("input", { key: '3b7b9d8e9dda6d565d1c74f198be0ebe7e108908', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '4a967899ae3c2854907e0ed7106b870d67e8b00e', ref: (el) => (this.buttonContainerEl = el), class: "container", id: "wm-container" }, h("button", { key: 'd43efefc1685a690bf6f0b8b6f89977bd02a7d05', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
+        return (h(Host, { key: '5aa1a1ebee45fddbe0115120005653eb4e8f0949', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'a8099a183130f0f7db1d81cf9fd788352b788d89', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '017a8fc0ebeec8c4627f2ec37089194b2f0376cc', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '1ce207b8c401fa9984f1296eca2dd5641593149c', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '143b26071989903f116506d878805aa4651c6d05', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: 'e8ea10210bdee3ebe3ec892f46db57a0ef0a24af' }, h("div", { key: '430e16d121a51fbc0332192d9b167045ce8d2e7b', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, h("input", { key: '1e9229e8e64cff7bbcbbd7d7b47198d63ed7d8a1', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'cea591466300a74fa1221477f31a82264b14e205', class: "container", id: "wm-container" }, this.canOpen && (h("button", { key: '77dc9a126a4a050993b00b755ef39a08ba8ea272', disabled: this.disabled, "aria-label": intl.formatMessage({
                 id: "date.selectDate",
                 defaultMessage: "Select date",
                 description: "Button text for screen readers.",
-            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: '1815c02998d6bc10de8bec8c43aa2221e12b73be', class: "svg-icon svg-date" }), h("span", { key: 'fefcdbd1640376493d3f2120c680239fe0aa486b', class: "calendar", title: intl.formatMessage({
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: 'c343d4983996c82c060e7e1eedd967072ea48671', class: "svg-icon svg-date" }), h("span", { key: '14612ecb341cbd4a371e3193f4dadd7d21f4e71f', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })), h("div", { key: 'a4112b9138c5fa45a97b1cbeb215b0e6f26d7672', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { key: '1f3e951b7db6d91596dd145572adf164df4e92ab', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '820f8b268fe083bea37256254ecc6e0e315efd31', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '13bd765d5433840e75c9338668404e3bb9fdc3ad', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '1c0fa7a5f0c0250d0b208cb9d12d206d69f8228f', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'b5395503d54e3ec1e9b72894343048abaa37c78b', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) }))), h("div", { key: '6d9aa84a9bd718ae8d6c0c25a70e5359fcbc28a1', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "open-up" : ""} ${this.openRight ? "open-right" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
+            // @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
+            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '6621819f8a58a6c87761d26bc3e81a627ad9394f', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '0d2cde70da11059ab064e152ad1821062deb3ab7', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '88bc54e4d1ab32eacc76a6ca996ee71971b1c436', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: 'c85fa035265ae44f3274c41d0520bc29b834874e', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'ff9d8aa22eadbc2859b3b44dcbccb61a1750c6fa', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '498b8e339f1f6b40fbb939a700ddd75be0edda99', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: 'd5c6487ee625dcb969c560bb2206b5ee97b0be84', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), h("div", { key: '30515d8a6c93ce47dbcfb04ecb801d6352d1668c', id: "error", class: "error" }, this.errorMessage), h("div", { key: '5e3f1f09dd5b70326d4ba8ff90d0657535be93f0', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), h("div", { key: '3f836c8f120c2d0fbcb56c155a7b254e35bfc30f', id: "error", class: "error" }, this.errorMessage), h("div", { key: '254201ab85d9a7c1d4b3c2ee111a4ca44e1c2485', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
     }
     static get is() { return "wm-datepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -423,7 +460,11 @@ export class DatePicker {
     }
     static get states() {
         return {
-            "isExpanded": {}
+            "isExpanded": {},
+            "openUp": {},
+            "openRight": {},
+            "isHidden": {},
+            "canOpen": {}
         };
     }
     static get events() {
@@ -528,35 +569,11 @@ export class DatePicker {
     }
     static get listeners() {
         return [{
-                "name": "keydown",
-                "method": "handleKey",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "blurHandler",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "blur",
-                "method": "handleBlurOnWindow",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
                 "name": "cellTriggered",
                 "method": "handleCellTriggered",
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "resize",
-                "method": "handleWindowResize",
-                "target": "window",
-                "capture": false,
-                "passive": true
             }];
     }
 }

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

@@ -367,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: 'd1dc259bbc48591f82a0e44017349513b7e22f60', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '5ef4cd1533f03e47175ed6112996ba73a138aacd', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-label": this.optgroupLabel, 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: '53014694e7dc51fbfc4fe6da9abbf0749764b4a1' })), h("div", { key: 'f3e1bb6596bd0e656eb045c5a62dad39ee266985', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { key: '425b430c29dc0bfb140f584119c64cc23fde960b', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '9e21fb94dd8113e09d82ea5024de6327c16a1e9b', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-label": this.optgroupLabel, 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: '7f7ef3e9e175b677488bc0daed3e8170b109454f' })), h("div", { key: '43f89c5b2eccebfc62b847c529ae00469b4fa5b7', 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-nested-select/wm-nested-select.js

@@ -291,16 +291,16 @@ export class NestedSelect {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { key: '7e8ed5b276c45f62f8d92521e65b6b6dded568db', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '8712a1df1e10912a4e69b6584b1f47670f9fe0ef', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '6a4e9d87422861362ac87b92703dd094748da7e9', class: "label-wrapper" }, h("label", { key: 'e27736516799cf708681ee19eafd179094dd5096', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: 'f4ac99af822bcd4f917bc96daac6fbb61e34f80e', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '74d71c731f63152c402100fbfd97a54828360613', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'dbc5fc7283a3a32e059ba333116b1d882f321cd2', class: "label-wrapper" }, h("label", { key: 'cdd87e55969aaa094d1a3ddeb1385bf0bb3100de', 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.labelPosition !== "none" && this.requiredField && (h("span", { key: '0d6e9bc7134d9ce46d53813067eeef7f2af50e81', class: "required" }, h("span", { key: 'a4dd0ef025cf32566f863ce0119e72259d9ca50e', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '8169eaa0d995f90e49e5beb9c66dbac4cf93cc6d', "aria-hidden": "true" }, "*")))), h("div", { key: 'a84486ea919cc9cf713c3f98322b6f8f10e91e84', class: "button-wrapper" }, h("button", Object.assign({ key: 'd8605fbcab85f7c15cb030214e599654a3bbeb5e' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'ce7182acce7ac9f9bf4259fc73155ec1b8b765a2', class: "overflowcontrol" }, h("span", { key: 'dcda39e2afe152b5c3a75d92e9795f4a4fe93858', class: "button-text" }, this.renderButtonText())), h("div", { key: '8061497676ac1e2c4075f93416663f09b8687ff4', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '4a234681f6ccaf3860e46f193855b56e46e2b221', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '4a73cad886a38ba1674241b0a5147d3941c4f97e', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), h("div", { key: '4660e100c2e0c5291cced7a26a58143a25852f0a', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
+        this.labelPosition !== "none" && this.requiredField && (h("span", { key: '32b6eb9751a9e31228a2cf0d5a4d05448b095a8c', class: "required" }, h("span", { key: '5c5b0f47c47ed2cb90199e4cffdb4da91d7d45e3', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '7d04b03628b48903447c5b5289646b93b6cb619e', "aria-hidden": "true" }, "*")))), h("div", { key: 'e64f0cd85f5cf893b2466891df11ecc99b3cacf5', class: "button-wrapper" }, h("button", Object.assign({ key: '0b848795e3b8452474a19b0faec455aec49a4d1f' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '12f2c4f128bd3b8f993179408821521afbc879ed', class: "overflowcontrol" }, h("span", { key: '82f3176f5daafd346b011b0c2509c43b28e179a8', class: "button-text" }, this.renderButtonText())), h("div", { key: '3dd0a416c62f42d63ff216094e3977a1b905d07b', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'b0510d9af441f11bdd91a008029c5c3884d6d3ce', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '88e174bb89a1a5439750bcd7a67f1982e72a08e1', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), h("div", { key: 'f020d5cc419669458b37c90e3626166ebe64cd46', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
             return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("div", { class: "option-text" }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")), h("div", { class: "svg-icon svg-next" })));
-        })), h("div", { key: 'cd880112ee35cdc1a2a3dafa210db9837426fc47', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, h("slot", { key: 'f617faa2bbb0f34e500ec103704d3d1298d3f08d' }))), h("div", { key: '0020de125ad2ada89d5f0b38e3af6396879b4de6', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: 'ecc4b501c84e72461319863f4e6b5c6afc3aa944', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        })), h("div", { key: '10a832d2f59a1d4b12add69575decdc50e468cbb', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, h("slot", { key: 'd9a4e3f2fd69b9a8ff5da0718bad9f5fa5d0627d' }))), h("div", { key: 'beb4561d510171994dbc1b470f09a00c441c53dc', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '559f0ea2ccbd83f99bb52cabcfc643286346d6c4', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class Optgroup {
         handleDisabledAttribute(this.el, this.isDisabled);
     }
     render() {
-        return (h(Host, { key: 'f0aab9a65cc5d21105c75bdc3768e0076123c0c8' }, h("div", { key: '23429cfad03b7026205ed0aef92973353d3ccff0', class: `list-wrapper` }, h("priv-option-list", { key: '6d8d1ea6e0ab9394bec5f4cf5423941fd9979332', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", { key: 'e01aeec2a2c3cd346f821c1fe46d7e77944e4f98' })))));
+        return (h(Host, { key: '112773f131899f3d54ef25a3613b661a189039b3' }, h("div", { key: 'ecf1dc4c6d34313a3855cd8a48516c15511c580a', class: `list-wrapper` }, h("priv-option-list", { key: '411201251651e8b8b5658462c570a835a1c02ed9', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", { key: '7f92977bf73bad336e11cdc2a48db3c09e1abd0f' })))));
     }
     static get is() { return "wm-optgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -143,7 +143,7 @@ export class Option {
         this.parentOptionList.addEventListener("optionListSearchChanged", (ev) => this.handleSearch(ev));
     }
     render() {
-        return (h(Host, { key: 'bcabbcc25798f589af99a47142426ed517e1951f', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '83c81f098705c2ef5b6b2b374cc5d680ec78e2af', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: '4cc738837041f134ef4d6ac1f541b8b0409813c6', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: '44b3d931ed548dc841033ebf4757eb400773a3a4', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '25a0ecb424a65a7d6c878ad65848ae5270ac563f', class: "sr-only" }, this.el.textContent)), h("div", { key: '4e25dd1f8e9ae5767123d136874ec1e40474c0fb', class: "subinfo" }, this.subinfo)));
+        return (h(Host, { key: 'ddcce18a738c96e04821be241dbe60d7a66793a8', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '696f04668d92846969f4b87fde35bae2b3d7815b', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: '7c7806d75157dc65d04eb5ee8fb45ec660cbaf8a', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: 'ef04b8bb3cbe625ca3db957565946be82734b8eb', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '1701cb9a834c9a592e44a7e3e96995f7257cf857', class: "sr-only" }, this.el.textContent)), h("div", { key: 'd42fa750da7788e72ff675e13289d14e0c7ef397', class: "subinfo" }, this.subinfo)));
     }
     static get is() { return "wm-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -323,14 +323,14 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: '9a7eaa936f3f0723a852f780b706ce95dc83641a', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '4ab274d8cf13b0b8702928766bcaae20fa54216e', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '983713098202b6b9774ecabdbe56a43fe21f8938', class: "label-wrapper" }, h("label", { key: '8f79bf97083e3348ef10b15b8637e501915817b2', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: '0c15e3c853e8061fd3482900a5c9e79099e18072', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '86953fd45cb2e305629b0e688e97ed16038406e8', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '5758544de948ec407faea3909f45b9065e2ef857', class: "label-wrapper" }, h("label", { key: '4f32e8a8996f2926519151fe0d8256f8af620ba1', 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.labelPosition !== "none" && this.requiredField && (h("span", { key: 'f8fd8c444254d6588b010277684824a4f61bd0c7', class: "required" }, h("span", { key: '4bdbbded3292fa0a7d8ac7a7a14e63c4fa06a0bf', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '6e28deddff56fc2009fdc7b7610c1f379b0e958a', "aria-hidden": "true" }, "*")))), h("div", { key: '47f1f1d2d62006f117d0be49bfccaaee71e91b76', class: "button-wrapper" }, h("button", { key: '9803fc04172c3c85241891b1abd5dedcc39d8db7', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "info error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: 'e5a794d58c1115eaeabad64349aa763b880d8650', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'be25d6a9086a68305f23604395897d8ecb19af01', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: '09e34ec7ac74982b1f6c1db55b876d4a72256446', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '75b86a8c694a6bb3e5e92744935242727d2233a7', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '365885ab0546940f1ac4970894066beddf59ac42', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'fd952f83012203e7eaba6fcb8a83b053b5b17a28',
+        this.labelPosition !== "none" && this.requiredField && (h("span", { key: 'a72a5517f26e297549dcd0ac057ce7b19e1acfbd', class: "required" }, h("span", { key: '60bd893e2a2ed1031167bfe835cfb310133cd56e', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'bff8c8faee5517d83844c2dd22528dbc59ea3b42', "aria-hidden": "true" }, "*")))), h("div", { key: 'a9f9d86a709a21d312ecf0f008af1f29bfacf23c', class: "button-wrapper" }, h("button", { key: '6bae8ba99a52af84870a5861132e625de8f341f1', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "info error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '65ed5b61f0d0f1e7df3efcb7eb05e69a788d985f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '6eb71f7cb727bb9ef93a4780a61fcae3a4c5dc87', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: '7d71e73f4a5609c32c7b0bbd32a7c618f67204c6', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '946a6a2445eca2ecddaf0703672074f0f7aab906', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '359b34e29578c693cd11377208ad4c14f8da3699', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '8570e7a0eda0afc398d312de70fd7ab5edabfa0b',
             // 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.openUp ? "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: '54216ae45b02cab8b403fe30f0c32814e5085f3a', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '365d65d779b224a382c8910990d8fc5a8b9782fc', 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;
@@ -338,7 +338,7 @@ export class Select {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: 'defde80bf2e3e435fccfda6b910a0d53f4df9989' }))), this.info && (h("div", { key: '464984b66832d1c978df56c53dc4099a671d75c5', class: "info" }, this.info)), h("div", { key: '3a63d5293c2c97f04bddc39a2fcf5181a245f2a3', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'a9a47c2c45f0ab1149919504b9787378ccedc3de', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: '14e69ec589802c881b15056f26a316604231b953' }))), this.info && (h("div", { key: '874ecb2e44f633f9270d2ec2a75c8fcbd8c502c6', class: "info" }, this.info)), h("div", { key: 'c0092eabe951be48b32cfc552acff972ba2e1a85', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '4f0d41664246dbbb7dec502058814198d0b8195f', 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"; }

package/dist/collection/components/wm-action-menu/wm-action-menu.js

@@ -335,7 +335,7 @@ export class ActionMenu {
         return null;
     }
     render() {
-        return (h(Host, { key: '089e41398162bb653228788b4317049cde90677a', onBlur: () => this.close(false) }, h("div", { key: '8bf71c94ed904f5c4308b30aaba78910622918ec', class: getTextDir() }, h("button", { key: 'e907d5dbb4c76d9c1dcc4099b3f79faec27f4bdd', ref: (el) => (this.menubtnEl = el), id: "menubtn", class: `wm-button -${this.internalButtonType}${this.darkMode ? " dark" : ""}${this.isTabbing ? " user-is-tabbing" : ""}`, disabled: this.disabled, "aria-label": this.internalButtonType === "icononly"
+        return (h(Host, { key: '69913d953807a3170a37c14ec90374fb9b1d06f5', onBlur: () => this.close(false) }, h("div", { key: '7331521a42c349f0a8d413a8a5de1fc8c1cf669d', class: getTextDir() }, h("button", { key: '7e0f1be8ab511c85cf157610df71c31eaf3476b0', ref: (el) => (this.menubtnEl = el), id: "menubtn", class: `wm-button -${this.internalButtonType}${this.darkMode ? " dark" : ""}${this.isTabbing ? " user-is-tabbing" : ""}`, disabled: this.disabled, "aria-label": this.internalButtonType === "icononly"
                 ? this.labelForIdenticalButtons || this.tooltip
                 : this.labelForIdenticalButtons || undefined, "aria-expanded": this.isExpanded ? "true" : "false", "aria-haspopup": "menu", popoverTarget: "menu", popoverTargetAction: "toggle", onMouseEnter: () => this.actionMenuType === "icon" &&
                 showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing &&
@@ -343,9 +343,9 @@ export class ActionMenu {
                 showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onBlur: (ev) => {
                 hideTooltip();
                 this.handleButtonBlur(ev);
-            } }, this.actionMenuType === "icon" && (h("span", { key: 'bd615c986c40863c73a2ec9f060fc5b596e7d64f', class: "svg-icon svg-more-options", style: { "--icon-size": "24px" } })), this.actionMenuType !== "icon" && h("span", { key: '27ad43a2bc951784d313f08b210c1092f2adda55', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (h("div", { key: '54184d0f5faa1bd80eddc76127d4173f3dacb7ca', class: "selector-icon svg-icon svg-expand-more" }))), h("div", { key: '7f34d1d1527b5b65f512fe636aa243ef06c2ae61', class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "open-up" : ""} ${this.horizontalPosition}`, id: "menu", popover: "auto", tabindex: -1, role: "menu", ref: (el) => (this.dropdownEl = el),
+            } }, this.actionMenuType === "icon" && (h("span", { key: '20f9b04965a29040eedc9101888b4f19e2404a04', class: "svg-icon svg-more-options", style: { "--icon-size": "24px" } })), this.actionMenuType !== "icon" && h("span", { key: '1d621e6a8e82afba51b8ad517aa2305d96fb195c', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (h("div", { key: 'f074e4b5dd035dec5414e6dd376bb4cc99de26e9', class: "selector-icon svg-icon svg-expand-more" }))), h("div", { key: 'b56cf79575ba14b6b79b297d96b0419368821273', class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "open-up" : ""} ${this.horizontalPosition}`, id: "menu", popover: "auto", tabindex: -1, role: "menu", ref: (el) => (this.dropdownEl = el),
             // @ts-ignore -- don't tell typescript but we're in the future
-            onToggle: (ev) => this.handleToggle(ev) }, h("slot", { key: 'de4af1e89a98621b4093089e70f7b0c02b759cb2' })))));
+            onToggle: (ev) => this.handleToggle(ev) }, h("slot", { key: '54889dffdec22f8a353698b51b6036324b9adc3b' })))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -249,7 +249,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'f30891424469ba48386423d5ee2beab5e518b087', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'de7b7b574378a3f18cca34c68e2b473c627e4dec', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, (this.icon || this.buttonType.endsWith("-ai")) && this.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (h("span", { key: '5745d367a62143ca3a5d564e5995478da80d1b8e', class: "button-text" }, h("slot", { key: '62d087e69df12437677d6364f36b44a7ec1f0a4b' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'acccc06434173a130494549d802e741700873258', class: "selector-icon svg-icon svg-expand-more" })))));
+        return (h(Host, { key: '45c097cfa42faee14d57d673dfdfc0dc5eaf2e28', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'd2e49a842147c1aece51a067627649bd30a8b75d', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, (this.icon || this.buttonType.endsWith("-ai")) && this.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (h("span", { key: '56a427048076148c1e5b99633530e94215fa2989', class: "button-text" }, h("slot", { key: '0612c8fb5f2e0abb994ac97bced2ccddf54a0acb' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'd0d6780ad0bee7bef186a7576154c1c20cab1d2c', class: "selector-icon svg-icon svg-expand-more" })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -187,7 +187,7 @@ export class File {
         return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""} ${this.isExtraCondensed ? "extra-condensed" : ""}` }, this.renderFileName(), showRightGroup && (h("div", { class: "right-group" }, !this.isExtraCondensed && this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("div", { class: "right-group" }, h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { key: 'e825957afa878743760074bf8a75afc943432249', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '19151d50d2b01dd9db64aaf4b908fc95456ff3b7', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-file-list/wm-file-list.js

@@ -4,7 +4,7 @@ export class FileList {
         this.showInfo = "last-updated";
     }
     render() {
-        return (h("div", { key: '85c0c57f99ff0d6b1a3bee24b63724853f37f2b2', role: "list", class: "list-wrapper" }, h("slot", { key: 'a05f7e5ebb27e57a23713a7e029c0bdb18d89286' })));
+        return (h("div", { key: 'fb7803d26479493a92b7f9611cb3f5680660a5ba', role: "list", class: "list-wrapper" }, h("slot", { key: '0ad53e2213af396c9b29fb7e7fd4d9fe80399e45' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -155,7 +155,7 @@ export class Flyout {
         }
     }
     render() {
-        return (h(Host, { key: 'edef60d2bbbed2d457e1cc1b85aa3f6381084d5b' }, h("dialog", { key: 'be1c6a36c8bd59cdf45590402d24ba94271ada78', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '115b32676ca1215698eeaccac059a1730a65e16b', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '45a0bc9e0c3366d2e35409712cc4f02566659373', class: "flyout-content" }, h("slot", { key: '4613ce4d6cac4126bb70ab6b0301b68294f0244f' })), this.renderFooter(), h("div", { key: '3646f8d1604cfdbdeb0ce3872431473943978ecb', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+        return (h(Host, { key: 'c1546402148e441545a292d9ac795adfac725fe3' }, h("dialog", { key: '0ac428de73ee5ddc2ca3d539c247d2d548f51101', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'b38a16a9e97a98ce84b6a09522cca6dce7f8837f', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '270b3b0ed4e59ba61a74202a96b4f75fce4a8c94', class: "flyout-content" }, h("slot", { key: '765d86ef84594c4b0a713d4ef8df3649c3152067' })), this.renderFooter(), h("div", { key: '7c3fb50b72a44852964eac51db31192af176c54c', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
     }
     static get is() { return "wm-flyout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,7 +107,7 @@ export class Input {
             : `info error`;
     }
     render() {
-        return (h("div", { key: 'bce3b3c4252340f54f70ce0090ee9b43601338b3', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'eb078f570551eef008b151c6e109ab53bc2e6721', class: "label-wrapper" }, h("label", { key: '5e7890d8802f09854e353648f5e51852ec25f36a', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '29b03586a3302abb855c34740f44cb8331c433d5', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'c8fda1e852259ceeac78507cc751ff79f1573533', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '564f93368ac8a28d0bb91adc0d97e2e97d20cb21', class: "inner-wrapper" }, h("div", { key: 'ebc9be3527d6a264d4cb90bf59a51999aaf658ad', class: "text-after-wrapper" }, h("div", { key: '9f22cd67d191367ab015f1f7b18f40cd1af0296a', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '4113a8907719fb47d4cf2965c1c212d206ae1a3b', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: 'eed896950ced5aebfad101ec6559ebfd0e84e477', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '81a4a5fb4967223523b91e63775b8b4a30d951f4', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: '9c484c909d8f1097d7033576fa9f2d7b655ccf0c', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '8957eec57120ea823ecb2c0e2f6187ff7302a487', id: "info", class: "info" }, this.info)), h("div", { key: '1d9e53cc2f7c548ed8c1bafeb95da0a98eef07eb', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '88d7f2e6e22166d1f57e8f434436c065fb5aca89', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: '3580f19d6c2f1fc0cc5c58c13343e435d55233f8', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '5827ef923458400025e77de71fad2c80b1b095bd', class: "label-wrapper" }, h("label", { key: '7d1dc047b0c6bb2c14bc61a40445683277ea2ae6', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: 'c586de9e5cd0210a33619453a1ea4eacc1640822', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '0292d93aefa4007d05d31f01ac44eedf70d59d99', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'c82f5e79d3286d5b1d13e1e6d2f926b54c0c5403', class: "inner-wrapper" }, h("div", { key: '61aff4b5c1c880306a43899ade2431a4e3939b16', class: "text-after-wrapper" }, h("div", { key: 'c697b2f407a7b54ae5f971490e013a912a73de72', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '1983539be2e0a4e1aafa889910788b0fadbecf44', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '78fbe9432521856d2c86e43e16296fc01f1b07b8', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: 'abe682508a99df6475ce4ca4706926c11c1704c9', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: 'b6e60134de240bb256d75ff55744fe4df1e6c795', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '0a058e1a91250f96a04807419e73c0cc89519364', id: "info", class: "info" }, this.info)), h("div", { key: '21432ca07ec97686e3073297cece2013e5cc94e6', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'fe235ceffb5fd33b4a04eac4a87cd24579bbcbc3', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -95,7 +95,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { key: '3576abf0e512b2088c08a13a9b0da7be22fc4604', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '5ee18f1dc5bc3ce1498db2038d6e21ed9abeb951', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '1eb8c3e8db9dee82803e458dce83ea26314d454f', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: 'c4acd31a2ed44a310abfedbac8979553d897d786', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '641ab7d318bf9aa2c58c598b2a70c961ea8decf1', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '3c9b0be9cbffbcf0846d0951943dcfdd0f60b323', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
     }
     static get is() { return "wm-menuitem"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-modal/wm-modal-footer.js

@@ -31,7 +31,7 @@ export class ModalFooter {
         }
     }
     render() {
-        return (h("div", { key: 'd271a1ae0932d3d178fbc2963a022569304ce00c', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '9b9c1b5bd49ff76b6334e60bc5ada6b311913644', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '7741ec8fe680ddf5fb0aba02e894b2c3138727d1', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '35d73c0fe78849cf0ff55a33f94c69fa126844a9', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '6c322386f313e52a76fdafe0a7f56f480309b240', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
+        return (h("div", { key: '3f8bf20b91042cf4cffe66f699f69e2d3b4bf2a1', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '931e2db6fc146360aa6c30475a9cb5a7c7362abb', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'be69d329e1ff91222849469a490ebae0c9a79740', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '35e8f32d574a5d394aeeb5b863a351afe2caa63c', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '78059456220627f3397467ef676d4c6479c72040', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
     }
     static get is() { return "wm-modal-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal/wm-modal-header.js

@@ -22,7 +22,7 @@ export class ModalHeader {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (h(Host, { key: 'b68657ee6be25bb1acf42a1f2ee3c3bf907b82ec' }, h("div", { key: '1cc9bff33ede81baf02895c05eda31be8902705e', class: "wm-wrapper" }, h("div", { key: '079e8e5ed17ace20380cbe720d22a58a125a52c1' }, h("h2", { key: '7d50e7cda2fff6ddb16c4cd98de0e8b5fe1df786', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '68e79ac15c7bfb59754694b5033e9a115fbed6b2', class: "subtitle" }, this.subheading))), h("wm-button", { key: '258bc2a94df987545ec32f46da2903f97dd8bf99', "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, { key: 'bbeb92788540f1ced0f431b9e4de2f840411ba2b' }, h("div", { key: '80cef5fed98c11c17b053b253f89a8bec6cce125', class: "wm-wrapper" }, h("div", { key: '7de34c034dd881c921ae869b13c4b32a0eabb384' }, h("h2", { key: '97d040fc65373a77ab92f1d0dea82eaab0b7dd55', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '5ea4bbe018ffa23d11a30cba541e0acbba9d90fc', class: "subtitle" }, this.subheading))), h("wm-button", { key: '9eccd26892d01c1daf642f628762f759e697f375', "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-header"; }
     static get originalStyleUrls() {