@watermarkinsights/ripple 5.23.0-alpha.0 → 5.23.0-alpha.10

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.js

@@ -127,7 +127,7 @@ export class PrivCalendar {
                 buttons[newIndex].focus();
             },
         };
-        this.renderCalendarDate = (date, index, eitherStart, eitherEnd) => {
+        this.renderCalendarDate = (date, eitherStart, eitherEnd) => {
             if (date === "placeholder") {
                 return h("div", { role: "gridcell" });
             }
@@ -182,7 +182,7 @@ export class PrivCalendar {
                         defaultMessage: "today",
                         description: "calendar button",
                     })}, `
-                    : ""}${weekdays[index]}, ${calendar_months[monthOfDate - 1]} ${dayOfDate}, ${yearOfDate}`, onClick: (ev) => {
+                    : ""}${calendar_months[monthOfDate - 1]} ${dayOfDate}, ${yearOfDate}`, onClick: (ev) => {
                     this.handleDateClick(ev.target);
                 }, onMouseOver: () => this.cellHovered.emit(date), "data-month": dateFind.month.asString(date), "data-year": dateFind.year.asString(date), onBlur: (ev) => ev.stopPropagation(), tabIndex: isFocused ? 0 : -1 }, dayOfDate));
         };
@@ -192,6 +192,7 @@ export class PrivCalendar {
         this.startDate = undefined;
         this.endDate = undefined;
         this.hoverDate = undefined;
+        this.announcement = "";
     }
     setCalName() {
         const cals = this.el.parentElement.querySelectorAll("priv-calendar");
@@ -483,6 +484,16 @@ export class PrivCalendar {
     toggleBusyAttribute(state) {
         this.el.querySelector("#wm-container").setAttribute("aria-busy", state);
     }
+    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) {
+            message += "\u00A0";
+        }
+        this.announcement = message;
+    }
+    announceMonthYear() {
+        this.announce(`${calendar_months[dateFind.month.asInt(this.focusDate) - 1]} ${dateFind.year.asInt(this.focusDate)}`);
+    }
     renderMonth(month, index) {
         return (h("button", { id: `month-${index + 1}-${this.uid}`, class: `month ${this._focus.month.asInt() === index + 1 ? "selected focused" : ""}`, role: "gridcell", tabindex: index + 1 === this._focus.month.asInt() ? 0 : -1, onBlur: (ev) => ev.stopPropagation(), onClick: () => {
                 this._focus.month.set(index + 1);
@@ -500,6 +511,7 @@ export class PrivCalendar {
                 else if (this.view == "month") {
                     this._focus.year.decrease(1);
                 }
+                this.announceMonthYear();
             }, class: "header-btn arw-btn", ref: (el) => (this.prevBtnEl = el), "aria-label": previousButtonLabel, onMouseOver: () => showTooltip("right", this.prevBtnEl, previousButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("right", this.prevBtnEl, previousButtonLabel), onBlur: () => hideTooltip() }, h("span", { class: "svg-icon svg-previous" })), h("span", { class: "header-title" }, calendar_months[this._focus.month.asInt() - 1], " ", this._focus.year.asString()), h("button", { onClick: () => {
                 if (this.view == "day") {
                     this._focus.month.increase(1);
@@ -507,6 +519,7 @@ export class PrivCalendar {
                 else if (this.view == "month") {
                     this._focus.year.increase(1);
                 }
+                this.announceMonthYear();
             }, "aria-label": nextButtonLabel, class: "header-btn arw-btn", ref: (el) => (this.nextBtnEl = el), onMouseOver: () => showTooltip("right", this.nextBtnEl, nextButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("right", this.nextBtnEl, nextButtonLabel), onBlur: () => hideTooltip() }, h("span", { class: "svg-icon svg-next" })), this.renderToggleButton()));
     }
     renderToggleButton() {
@@ -533,45 +546,45 @@ export class PrivCalendar {
         // the start and end date, set in either of the calendars
         const eitherStart = this.startDate || (this.otherCalEl && this.otherCalEl.startDate);
         const eitherEnd = this.endDate || (this.otherCalEl && this.otherCalEl.endDate);
-        return (h("div", { "aria-labelledby": "popup-title-month", role: "grid", class: "date-grid" }, h("div", { role: "rowgroup", class: "date-header" }, h("div", { role: "row", class: "header-row" }, h("div", { role: "columnheader", class: "header-cell" }, h("span", null, intl.formatMessage({
+        return (h("div", { "aria-labelledby": "popup-title-month", role: "grid", class: "date-grid" }, h("div", { role: "rowgroup", class: "date-header" }, h("div", { role: "row", class: "header-row" }, h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[0] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
             id: "date.su",
             defaultMessage: "Su",
             description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell" }, h("span", null, intl.formatMessage({
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[1] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
             id: "date.mo",
             defaultMessage: "Mo",
             description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell" }, h("span", null, intl.formatMessage({
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[2] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
             id: "date.tu",
             defaultMessage: "Tu",
             description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell" }, h("span", null, intl.formatMessage({
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[3] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
             id: "date.we",
             defaultMessage: "We",
             description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell" }, h("span", null, intl.formatMessage({
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[4] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
             id: "date.th",
             defaultMessage: "Th",
             description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell" }, h("span", null, intl.formatMessage({
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[5] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
             id: "date.fr",
             defaultMessage: "Fr",
             description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell" }, h("span", null, intl.formatMessage({
+        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[6] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
             id: "date.sa",
             defaultMessage: "Sa",
             description: "Abbreviated day of the week",
-        }))))), h("div", { role: "rowgroup" }, h("div", { role: "row", class: "date-row" }, dates.slice(0, 7).map((date, i) => this.renderCalendarDate(date, i, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(7, 14).map((date, i) => this.renderCalendarDate(date, i, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(14, 21).map((date, i) => this.renderCalendarDate(date, i, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(21, 28).map((date, i) => this.renderCalendarDate(date, i, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(28, 35).map((date, i) => this.renderCalendarDate(date, i, eitherStart, eitherEnd))), dates.length > 35 ? (h("div", { role: "row" }, dates.slice(35).map((date, i) => this.renderCalendarDate(date, i, eitherStart, eitherEnd)))) : (""))));
+        }))))), h("div", { role: "rowgroup" }, h("div", { role: "row", class: "date-row" }, dates.slice(0, 7).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(7, 14).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(14, 21).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(21, 28).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(28, 35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), dates.length > 35 ? (h("div", { role: "row" }, dates.slice(35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd)))) : (""))));
     }
     renderMonthView() {
         return (h("div", { class: "month-view" }, h("div", { "aria-labelledby": "popup-title-year", role: "grid", class: "months" }, h("div", { role: "row", class: "month-row" }, calendar_months.slice(0, 3).map((month, index) => this.renderMonth(month, index))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(3, 6).map((month, index) => this.renderMonth(month, index + 3))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(6, 9).map((month, index) => this.renderMonth(month, index + 6))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(9).map((month, index) => this.renderMonth(month, index + 9))))));
     }
     render() {
-        return (h(Host, { key: '2aafd5b792462429620aa1ff8e0682f3564cda98', onMouseOut: (ev) => {
+        return (h(Host, { key: 'b3fddf504d68f3648aa091fdd09c8e02d6291480', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: '1d7766c4097d8c8c0bb072824037ed7ad1a1a133', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: 'b32936860f9cdb52b648d0a06d11273650c2e7ff', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions)));
+            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: '799c77b1f795bd42ba93d517e418899014c25597', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: 'de896a5c0650d9a12797a5a86eef4fe535814fa5', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: 'a4268e03c573b5b90fd5b1f692f39324bcc090d1', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement)));
     }
     static get is() { return "priv-calendar"; }
     static get originalStyleUrls() {
@@ -693,6 +706,11 @@ export class PrivCalendar {
             }
         };
     }
+    static get states() {
+        return {
+            "announcement": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "cellTriggered",

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: '01cfda19a94fd32e7e6ffdd254f15e8892a13527', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '2c4e2d66a3458bf9d54ee2f8451e6c52dade91d8', 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: 'd336140d727b053edff401eb5026d07c77f5cdef' })), h("div", { key: '3c21902d641b645fd83489f1f718b4719cce59cf', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { key: '6236c1325eda57a8cf73ed89bc252567e6459b65', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '60a7c7aee7090de15d5126898d180e9d9af98cc8', 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: 'a257d9eb32f238fe1a728efa366a4e3fbb3072de' })), h("div", { key: '1b5b726cd0293179690be299fff7eb0f380d428d', 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: '0a1e350bb54bd55cd63453bc7a62c79f9fe2cffe', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'c39f5c39105186a6becbcd06f93ae62b75e06f5a', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '3a8893cd1ad69abafc85987001a82e1801879895', class: "label-wrapper" }, h("label", { key: 'a2214f07dcc56e805cea3308b1c8ad8c4de1c1ef', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: 'f9d5f5938c7616ca8a21830e26fa97389bedce0e', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '101141bb02e455b57b0fc7a32cd14767281de1fe', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'deb21859c85dfdae5e9449785417142463fa653d', class: "label-wrapper" }, h("label", { key: 'ec765e72aac1232a99585c65d4187a390f675235', 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", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : ("")), h("div", { key: '41d6a46a4d6875205a5c7000915cfa79828199e7', class: "button-wrapper" }, h("button", Object.assign({ key: 'f52847e0ce5a0c85d4c5753a5922da146cbb25a5' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'ea3b300e83dfd659fa728ea8826f8663b7b509a3', class: "overflowcontrol" }, h("span", { key: '7b40fea61b005aede5173690b8ac056209b27587', class: "button-text" }, this.renderButtonText())), h("div", { key: '09c0b29901123c4b00e32a375e17218d68af0a19', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '2912d5c58cfffc0ee1d9e2d681b89f70f6a1bb68', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '64e5c65e8af0445cdd2933ee7e8027d10c03d829', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), h("div", { key: 'ba31768e22153c41c2eecb6de7e9de5420bc446a', 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.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : ("")), h("div", { key: '0735159dcea1c3cdf9145e18b224fedf90cd3ed7', class: "button-wrapper" }, h("button", Object.assign({ key: '4326702188583f9c210257f7e95dcee3d501825e' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'f3fb5f069b0ec70419c0ade0a1c520e8da79c453', class: "overflowcontrol" }, h("span", { key: '4da352b8a0312287ae27205731c7d46ff2cac88e', class: "button-text" }, this.renderButtonText())), h("div", { key: 'f85e648f0da497df4d906a262bba62b2fbe3c5db', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '7ab45a7201b3375d59ddef5ac86a2c0fea438662', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'a3153d330243404ed4c4dd931a182cc47f2a5672', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), h("div", { key: 'e106169ebfbe226b886d972f41e3a93d88ed8f26', 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: '02a98c5b1defbea903b342f8b38f39986c687170', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, h("slot", { key: '79dd9780df96268a4c2c04ef78d45b14462ab3e5' }))), h("div", { key: '2ebac56be3a30480d4f1d476ef8fc241169e1075', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '6842a3f6062ba4d79e2d539f88d187d51478c72b', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        })), h("div", { key: 'ba3ad38b66537f365379921ebcec8f630c934a93', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, h("slot", { key: 'b0083c7e49ba59f7a36459b599f79a89121c09e5' }))), h("div", { key: '4ccb451822e5ace5e34a96f2560d936b6c02b9ad', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: 'cdca96e717a912c022096a9c781199fabc040a43', 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: '7c310f384ca367c49fea1dfee2638ba4fb00eba5' }, h("div", { key: '58f81aa34832a2dff3e1eb4d65e3b212a00521b4', class: `list-wrapper` }, h("priv-option-list", { key: 'd3a618f8369f3bf7d589f33c858de9354a65adb2', 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: 'ebbc67c87d1745350c2aff0c69fcc411f69a5b06' })))));
+        return (h(Host, { key: 'f26edb066ca14bbad62dc07198651d180be2ed3b' }, h("div", { key: '202a27a0d33c34b861e28cfe08407225589905e9', class: `list-wrapper` }, h("priv-option-list", { key: '68a0f5992c24ee62ca7539ba900afeda25f313e5', 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: '8f445e06b048ccd6e49627beb989be9b6c55d651' })))));
     }
     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: 'd26e8bfc356e68f71747c97ec999ebfe80aa81f9', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: 'b20cd4ea1e33c17c5603e4439465239d2983a7af', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: 'e8f9195ee5f0e773ac0beeda221a4ef696ce2ae9', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: '3ddca0ac8271eaefcea4f15ee6f68eb5101876bd', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '059df85edccf6a947f9c281835325a6eeeaa0457', class: "sr-only" }, this.el.textContent)), h("div", { key: '615335972019fe8c39dd287211ce3ee39770ff13', class: "subinfo" }, this.subinfo)));
+        return (h(Host, { key: '0a31affb1b8ed02ba38fce11d11b4b0919b97d5c', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: 'b7ad9eef86983ba3ace177522f3a42a55a71bfdc', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: '5876611c20af1169794db93b30577e48a6ce63df', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: 'aef00aca54b33552892d73c51f70c273d9ad4088', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: 'fb6306f9014205ce6f1d2a39ecdbd3f36141584d', class: "sr-only" }, this.el.textContent)), h("div", { key: 'af1894e912632a93255b5f90412990f6c0f0924b', 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

@@ -7,11 +7,8 @@ export class Select {
         this.scrollableParents = [];
         this.returnFocus = false;
         this.hasAnchor = CSS.supports("top", "anchor(bottom)"); // for FF polyfill
-        //////////////////////////////////////
-        // for multiselect button text
-        this.overflowCount = 0;
         this.displayedOptions = [];
-        this.previousDisplayedOptions = [];
+        this.oldDisplayText = "";
         this.debouncedReposition = debounce(() => {
             this.dropdownPosition();
         }, 100);
@@ -39,6 +36,9 @@ export class Select {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
         return toBool(this.disabled);
     }
+    get displayText() {
+        return this.displayedOptions.map((x) => x.textContent).join(", ");
+    }
     get selectedOptions() {
         return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
     }
@@ -273,55 +273,85 @@ 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);
-        }
-        else if (this.multiple && this.allSelected && this.overflowCount > 0) {
-            return this.allSelectedMessage;
+    handleOverflow() {
+        if (!this.buttonEl) {
+            forceUpdate(this.el);
         }
         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 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.displayText;
+            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                this.overflowCount++;
+                this.displayedOptions.pop();
+                this.measurementAreaEl.textContent = this.displayText;
+                optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            }
+        }
+    }
+    setButtonText() {
+        if (!this.multiple) {
+            const selEl = this.childOptions.filter((x) => x.selected)[0];
+            return selEl ? selEl.textContent : "";
+        }
+        else {
+            this.displayedOptions = this.childOptions.filter((x) => x.selected);
+            const hasChanged = this.displayText !== this.oldDisplayText;
+            const noDisplayedOptions = this.displayedOptions.length < 1;
+            if (noDisplayedOptions) {
                 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;
+                return this.placeholder;
+            }
+            else if (hasChanged) {
+                this.handleOverflow();
+                if (this.allSelected) {
+                    // we want all selected message only if there's an overflow.
+                    if (!this.overflowCount) {
+                        // but on first render we don't know: handleOverflow can't calculate measurements
+                        // in that case, display all selected message even if there's a chance options could have been shown
+                        this.buttonText = this.allSelectedMessage;
+                    }
+                    else if (this.overflowCount > 0)
+                        // if calc could be made and there is an overflow, reset it as it shouldn't be shown
+                        this.overflowCount = 0;
+                    // then display all selected message
+                    this.buttonText = this.allSelectedMessage;
+                }
+                else {
+                    // otherwise, if handleOverflow was able to calculate, it set the count and the display text
+                    // if it wasn't able to calculate, the text of all the selected options will be displayed and may truncate (acceptable as fallback)
+                    this.buttonText = this.displayText;
                 }
-                this.previousDisplayedOptions = this.displayedOptions;
             }
-            return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
+            this.oldDisplayText = this.displayText;
+            // the reason for setting a global variable and returning it
+            // is that we need the stored value when displayedOptions haven't changed.
+            return this.buttonText; // multiselect value
         }
     }
     renderOverflowCount() {
-        if (this.overflowCount > 0 && !this.allSelected) {
+        if (this.overflowCount > 0) {
             return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
         }
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: 'e58f2afa4361d7e27f94175a32acb0f93701cf76', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '13de69b572a4af34c1abc0002bbc8a87dc7d521a', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'd234f604a3f94f843617733f6a8f5baaabc098d3', class: "label-wrapper" }, h("label", { key: '9dac4166a74898241e6422cd93023e5980d015bf', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: 'b9e427db71b61d4731a3c8c31826358efb2e71c9', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '6a8ad960dfcf56ba23736c5dc7306517a0f4cc61', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'a1829bc5949a9e75629bb645ab63331af4ae71f1', class: "label-wrapper" }, h("label", { key: '329944256ca0c0a76881b03192579849106fc0b8', 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: '788b4c52a1e59bfb425f909374f722b5856b8fb3', class: "required" }, h("span", { key: '95cbdb98f925a5b80579a77147151903f2f63618', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'ca3dacb55461f2cd7f5b81c746e5b70d8bd82f27', "aria-hidden": "true" }, "*")))), h("div", { key: '65cb0cbfe742c251b082adc84af5648a54ff4f12', class: "button-wrapper" }, h("button", { key: '8731a753912360eeb0ed4b60019463bf4398f8ae', 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: 'e8d751bedfcc1922416fc177f43153ed2dfa0f84', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '104277dfd731f7138889d573ad33ab7e5f8f4ffe', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'cddb5d3cb91877c2adf73978e2e3114e3a148999', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'e4e76e115d85e4a3d24a17d762dec65091c14c69', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '910df5182752522e9a709afbbb9d885b4cb93f46', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '620f6414a70890323eb11958ff2c17415a86e437',
+        this.requiredField && (h("span", { key: '5a7d128c99b2eb064c038aecca4097304775b94c', class: "required" }, h("span", { key: 'fea081b4029d61add6f8a1a6743e30eb64329f89', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'a8f8fd3695883555ccfdf1d63a56aa0b54472ac7', "aria-hidden": "true" }, "*")))), h("div", { key: 'd8c783d92db1f7599ad431ff14069d26f335efee', class: "button-wrapper" }, h("button", { key: '56a36ae5267f5323a595f411d9a4a7257e04ede1', 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: 'f026cf1c1f331ef84253a55df3308e518e8c38ed', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'c48385d25e0ac06b1faa8b5760949c4e3872a6c1', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: 'd47f6e6ccb3dfda11fdfd74c3880038a3582f593', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'ec2f38fce7005421341b176bbb9a07a2f4f930f2', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '76e51beef029574af384673324937b78631baac0', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '5ada44373bccb9ff83b8d33d5454f197fdbcece2',
             // 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: 'a059818c76eaad5b43895e30cc9a40ada0bc3ffa', 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: '85262c7c088219e1bb7e50953c4fd058d8750a12', 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;
@@ -329,7 +359,7 @@ export class Select {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: 'a8f910407e5bbba4b5d6e004f2114f2519c56454' }))), h("div", { key: '13651a1650697c9860718e4665dbf300ab6e5faa', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'f627a9e7035ea2f2df40493242965d2e15184de9', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: '66b4a65b4477b82cb8e0073cc49842e4d2a9e724' }))), h("div", { key: 'a3e19f185805e5ce1818fbc101e8e41ebeda3b8d', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'e524c3fdfc16d96750e7ddfa84207fb92803b648', 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

@@ -190,7 +190,7 @@ export class ActionMenu {
         return null;
     }
     render() {
-        return (h(Host, { key: '1b8e3626cfe3e94e978a5027a726621e38c18a45', onBlur: () => this.close(false) }, h("div", { key: '6ba7b43d42620a686783424efccc1741a8c4586c', class: getTextDir() }, h("wm-button", { key: 'f44fc8c9b988d25d8dc5fb42679bfb2eb8a9f206', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "#more-options" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: '837961a084c57516e58e1d1991408a4591a7aaa8', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: 'dd4244cd879e7b5c7ffe7995601b8788980f99c5' })))));
+        return (h(Host, { key: 'b502a2495bd993134ac44e48ceaaad6ec956b2ac', onBlur: () => this.close(false) }, h("div", { key: 'd182caca8e792e931c41228ca377f1862bcde0c7', class: getTextDir() }, h("wm-button", { key: 'd7250925bfe7301ba5cc07512153516c9a76cd05', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "#more-options" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: '0c57d648010b7b74ffae41d3a08211f58c84a10a', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: '453b3b42dfde1fa32be56386dec7841ced644f80' })))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -161,7 +161,7 @@
 :host .wm-button.nowrap {
   display: inline-block;
   width: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -233,7 +233,10 @@
   border-color: transparent;
 }
 :host .wm-button.-textonly {
-  color: var(--wmcolor-button-text-textonly);
+  color: var(--wmcolor-link-text);
+  text-decoration: underline;
+  text-decoration-thickness: 0.0714285714em;
+  text-underline-offset: 0.1428571429em;
   box-shadow: none;
   display: inline-block;
   letter-spacing: 0;
@@ -245,31 +248,27 @@
   padding: 0;
   height: auto;
   min-height: unset;
-  line-height: 1;
   overflow-wrap: anywhere;
   border-radius: 2px;
 }
 :host .wm-button.-textonly.small {
   font-size: 0.625rem;
 }
-:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete) {
-  text-decoration: underline;
+:host .wm-button.-textonly:hover:not(:disabled):not(.disabled) {
+  text-decoration-thickness: 0.1428571429em;
 }
-:host .wm-button.-textonly.dark {
-  color: var(--wmcolor-button-text-textonly-ondark);
+:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete):not(.ai) {
+  color: var(--wmcolor-link-text-hover);
 }
-:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled) {
-  text-decoration: underline;
+:host .wm-button.-textonly.dark:not(:disabled):not(.disabled):not(.-permanentlydelete):not(.ai) {
+  color: var(--wmcolor-link-text-ondark);
+}
+:host .wm-button.-textonly.dark:not(:disabled):not(.disabled):not(.-permanentlydelete):not(.ai):hover {
+  color: var(--wmcolor-link-text-hover-ondark);
 }
 :host .wm-button.-textonly.-permanentlydelete {
   color: var(--wmcolor-button-background-delete);
 }
-:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark) {
-  text-decoration: underline;
-}
-:host .wm-button.-textonly.-permanentlydelete.dark:not(:disabled):not(.disabled) {
-  color: var(--wmcolor-button-text-textonly-ondark);
-}
 :host .wm-button.-icononly, :host .wm-button.-navigational {
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;

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

@@ -249,7 +249,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'cfdc5af9869cf51dc3c168b7452d6e1f7f3a3c12', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'b5852385e8b842ab2770e41893cad1ab3d9febf2', 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: 'e63d9ee2399ca6886c649e3e427f9bec11802ca4', class: "button-text" }, h("slot", { key: 'b4835a17f4363ea61b5a9bd9d2d227dd6125ecaf' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'ee631ccbe050c4b9591a25b6a8cedc89451a6903', class: "selector-icon svg-icon svg-expand-more" })))));
+        return (h(Host, { key: '3909651c78ce41cceffe0398775c145753980100', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '2a5cb652b8d91eddee9730198c3d697e27b22265', 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: '2caefbd131837905560d956cf7fc67ac6561662a', class: "button-text" }, h("slot", { key: 'c3af52b84fbede6a57c931fedfda003180a0fc9d' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'c8ef8760a08241ce1a519886b222d2cf2be8cf67', 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: 'ff96d6aecde88c7dbe404187f5fe266f6891ae10', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '0e7b794a992c0e7e6ba0d9784a09e7bf90695d2d', 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: 'fd450a53e6f8ec69b35586cfcf4ded2ae8558f20', role: "list", class: "list-wrapper" }, h("slot", { key: 'a22f7a28535d7a311c7f0ce25296924ffcb82ffc' })));
+        return (h("div", { key: 'ecfeb07e38ae73d4cee41d40e42bc08e31b69f47', role: "list", class: "list-wrapper" }, h("slot", { key: '2b98626decea02837970168b892c7789f7be0004' })));
     }
     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: '5abd44475121c3711b1b45dd0ccbcf6598947a05' }, h("dialog", { key: '95dbde14e558cc011a344de5456b9114380ba886', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '25592c3e84f679397606b1fe6bc27ccd1d7b8426', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: 'f8455bed60f556d580021ca0b57e14dc2d7a7589', class: "flyout-content" }, h("slot", { key: 'bcf1fc296d9d203ed2093648b26285f502a2135b' })), this.renderFooter(), h("div", { key: '573d7f2f6bd77a449080e9435ebeb3f9f6249e82', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+        return (h(Host, { key: 'd68943a7b7dc87266087e8c5a8e4def91d138808' }, h("dialog", { key: '779e65065a15f7cf975c329b470eb324746aac80', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '971890ba3408b561829d3f98a1a94e9f6374ce51', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: 'f41605a52062336b73c4e68ff6850eee3e13ca58', class: "flyout-content" }, h("slot", { key: '4862d931516f9de7977cb4beaf5efefeca17a61d' })), this.renderFooter(), h("div", { key: '83f87c356cadf84757068f5ab7a2f9b2e3d93111', 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: 'd4aaf4e85013a21c72d2bc29b779bc531af63c7a', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '09841604f10ee7f90b72a02b8f205983208b8847', class: "label-wrapper" }, h("label", { key: '5ceaeeb463d2a91aa89cf3713deaad2702e0be41', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '225a478b431cc1966dd55c7113ebff9e3a972694', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("div", { key: '4be6730fc552c46f98dd445ef8034f6317aeaabf', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'b1ac92828de964e90229055b9c0c55c97c470805', class: "inner-wrapper" }, h("div", { key: '622d539566c05c7c0cd633edf9d5186eb3c082f2', class: "text-after-wrapper" }, h("div", { key: '83e3981b671a9039b83c6526003e6dee62f6e9bd', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: 'c51a71084b6761330fb9e4a4344f35cd659deef7', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '0b88b518786fadd884f624927c00d9a4802b90aa', 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: '7dd23511cb81aae62c4dde84880307f812d78d4d', 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: '9e8052c5a373c96f302354f7f95c38d27296fec6', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '80fd203c7fa68b2e0d612ad39090f0fd69526a83', id: "info", class: "info" }, this.info)), h("div", { key: 'bf3dba5e6ce9bdadbfddc231ea2fa684319489f2', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '316de8f690fad0ceb1c1e43ed6dab152dc23a0b8', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: '440534026de67cf3d4a3988a117e56947346fb5c', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'd0ae8862c9dcb63b77cc14890c652b06ad9f3c27', class: "label-wrapper" }, h("label", { key: '4e24aab7500503bd7eb98e077225769edba96f88', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: 'b004a2dd83dcdcfce1ecf3bc1d1d88a3ef59f96f', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("div", { key: '6bd8f84d7271ded3c08f07546e0a787527ff75af', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '8c2cbf7b3e33ecce61635274b411dae56a633af8', class: "inner-wrapper" }, h("div", { key: 'ee880eece5ac3c6b7d24316f21aa9c09bcb3e33b', class: "text-after-wrapper" }, h("div", { key: 'e5208c4ed4cbc34da95171a5f748901839373ae1', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '316f86011c89529f101769234f7cbd914eccc174', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '020bc74fd67239bfd6da162bba9c9fd3a7cf99c4', 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: '1f8fb34695d89d882d3c04690b1196b6b1bd9a26', 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: '0dbb52627a7fbb274b57b2191e6b7ca0614f40af', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: 'ca7f5a76086330bab897afa71233943bd97ee17b', id: "info", class: "info" }, this.info)), h("div", { key: '6ae93c211c1ac945aceea3a88cf8be773ff5860b', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '67ae836cbb27cb0c17531bf9a347cb64acb81197', 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

@@ -98,7 +98,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { key: '81bc0ba0714a6d885cfdce07a3e698562b0a19e7', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '5086ca8cce0a270e3600fa559daab22ea8baf9c4', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, this.icon && this.renderIcon(), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: '48ecd39137287b30ed6426013277b2d418301dbd', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '24fe7a9f4798fe7ae1637f6031dee9cff18cc21f', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, 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: '491f1ad5bb178b42c9e51c4d0879070e77a7f2a9', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'b6c785db316aba6a14f6f2ffe6b54e496fc46f80', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '5a73e1f8579637c8c0f16d1fd98daa1059b70ca4', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '26c0c6eefd2ef6e0d3ebb87d6d79c1ea4237be3b', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '61832b3a218df2e001b532bb2c3968de0665a9db', "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: '09a767c503fd0c29d548b626ce5d4e9f2dc05fab', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '2fb279caa8ab8d71959d218dbae28c614acce8e5', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '5f182514fc8bfa243ff630f6638ae27500f89c21', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'b27dc355a2794a0ca63774a80132aee49809762a', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: 'd03404a339209bae2fbd181227ac18c547667570', "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: '85348ecf5ef8d53807c965890fe245a6f5962003' }, h("div", { key: '48f782896bd53234c601b5ff853ed7ec0d077357', class: "wm-wrapper" }, h("div", { key: '1297ffe9269d4866ae6d343dfb37b50ea7cb1733' }, h("h2", { key: '6b777b66f9aec32bdbe1a2464b709d4a7d8c7add', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '415004f8cd63c2ac1a2beab4fe2d732edd3b06c8', class: "subtitle" }, this.subheading))), h("wm-button", { key: '342a5de331967b530ce75b074016ec724099bfe0', "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: 'fdd199695b2ceb94f64a277ceae16c596b406071' }, h("div", { key: '40e435da7701bf5a174028a153b5a040338ec0ed', class: "wm-wrapper" }, h("div", { key: '51f7b66ec56a8e977bdc75e84734a63b869ba53b' }, h("h2", { key: '23abdc0aba1d5ee84a66c6cf9facaf6c61f8ccc2', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'bcbb5454236dc3e51f66e08ce156a28a13335eb7', class: "subtitle" }, this.subheading))), h("wm-button", { key: '9390af056a9a0ce8da6d8387409c73d6b5535942', "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() {

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

@@ -31,10 +31,8 @@ export class Modal {
         return customElementToFocus;
     }
     get hasBrowserPopoverSupport() {
-        // for browsers without popover support, render an additional tooltip in the top-layer so that it can be displayed above the dialog element
-        const tooltipEl = document.getElementById("wm-tooltip");
-        //@ts-ignore
-        return tooltipEl ? !!tooltipEl.showPopover : false;
+        // For browsers without popover support, render a fallback tooltip inside the dialog so it appears above it
+        return typeof HTMLElement.prototype.showPopover === 'function';
     }
     toggleModal() {
         this.open ? this.showModal() : this.hideModal();
@@ -116,11 +114,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '79bdf56bcea90cc9848bf4027e0a2552eee31709', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '5fda5d81c1b468c883316d319a6975852106de5d', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: '633554a1b1e5df10d410e1c31e2f960642718e57', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '3d6d3bbce8760bfb1e642771f534b1d603f6a74b', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && h("div", { key: '0255a1dda891b5e69874cc02f4579fac9ec5de04', class: "wm-tooltip" }), h("slot", { key: 'e861a82a26202beb548db440a9e708f6c4fdad84' }), h("div", { key: 'ad5fc44a752fb903338b175cf3eee115e416047f', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: '7c660029e60f4b8df004dd3b830025f047710ccc', class: "wm-tooltip" }), h("slot", { key: '7779d237802e80dd2c7f84516bd1327438813ce2' }), h("div", { key: 'eb2fa33d5fdae1b8c41102380471c593b10e1826', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }