@watermarkinsights/ripple 5.20.0-alpha.9 → 5.21.0-alpha.0

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

@@ -1,5 +1,7 @@
 import { h, Host } from "@stencil/core";
-import { intl, dateFind, getMonthLength, makeISO, calendar_months, weekdays } from "../../../global/functions";
+import { intl, dateFind, getMonthLength, makeISO, calendar_months, weekdays, clampDate, } from "../../../global/functions";
+import { generateId } from "../../../global/functions";
+import { showTooltip, hideTooltip } from "../../../global/functions";
 export class PrivCalendar {
     constructor() {
         this.today = this.dateToISO(new Date());
@@ -9,6 +11,27 @@ export class PrivCalendar {
             id: "date.instructions",
             defaultMessage: "Use arrows to select a date in the table. Tab left or right to buttons for selecting previous month, next month, or the month selection table.",
         });
+        this.previousMonthButtonLabel = intl.formatMessage({
+            id: "date.selectPreviousMonth",
+            defaultMessage: "View previous month",
+            description: "Calendar button",
+        });
+        this.previousYearButtonLabel = intl.formatMessage({
+            id: "date.selectPreviousYear",
+            defaultMessage: "View previous year",
+            description: "Calendar button",
+        });
+        this.nextMonthButtonLabel = intl.formatMessage({
+            id: "date.selectNextMonth",
+            defaultMessage: "View next month",
+            description: "Calendar button",
+        });
+        this.nextYearButtonLabel = intl.formatMessage({
+            id: "date.selectNextYear",
+            defaultMessage: "View next year",
+            description: "Calendar button",
+        });
+        this.uid = generateId();
         this._focus = {
             year: {
                 asString: () => dateFind.year.asString(this.focusDate),
@@ -37,11 +60,11 @@ export class PrivCalendar {
                 },
                 increase: (n) => {
                     const newDate = dateFind.month.increase(this.focusDate, n);
-                    this.focusDate = newDate;
+                    this.focusDate = clampDate(newDate);
                 },
                 decrease: (n) => {
                     const newDate = dateFind.month.decrease(this.focusDate, n);
-                    this.focusDate = newDate;
+                    this.focusDate = clampDate(newDate);
                 },
             },
             day: {
@@ -238,6 +261,7 @@ export class PrivCalendar {
         return Array.from(this.el.querySelectorAll(".header-btn"));
     }
     handleKey(ev) {
+        const activeEl = (document.activeElement.shadowRoot || document).activeElement;
         switch (ev.key) {
             case " ":
             case "Enter":
@@ -286,55 +310,55 @@ export class PrivCalendar {
                 }
                 break;
             case "ArrowLeft":
-                ev.preventDefault();
-                if (this.view === "day") {
-                    this._focus.day.decrease(1);
-                    // if the month changes as a result of this navigation, calendar must render the correct month before the proper cell can be focused
-                    this.focusCell();
-                }
-                else {
-                    this.monthButtonFocus.decrease(1);
+                if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
+                    ev.preventDefault();
+                    if (this.view === "day") {
+                        this._focus.day.decrease(1);
+                        this.focusCell();
+                    }
+                    else {
+                        this.monthButtonFocus.decrease(1);
+                    }
                 }
                 break;
             case "ArrowRight":
-                ev.preventDefault();
-                if (this.view === "day") {
-                    this._focus.day.increase(1);
-                    this.focusCell();
-                }
-                else {
-                    this.monthButtonFocus.increase(1);
+                if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
+                    ev.preventDefault();
+                    if (this.view === "day") {
+                        this._focus.day.increase(1);
+                        this.focusCell();
+                    }
+                    else {
+                        this.monthButtonFocus.increase(1);
+                    }
                 }
                 break;
             case "ArrowUp":
-                ev.preventDefault();
-                if (this.view === "day") {
-                    this._focus.day.decrease(7);
-                    this.focusCell();
-                }
-                else {
-                    this.monthButtonFocus.decrease(3);
+                if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
+                    ev.preventDefault();
+                    if (this.view === "day") {
+                        this._focus.day.decrease(7);
+                        this.focusCell();
+                    }
+                    else {
+                        this.monthButtonFocus.decrease(3);
+                    }
                 }
                 break;
             case "ArrowDown":
-                ev.preventDefault();
-                if (this.view === "day") {
-                    //If the down arrow is pressed from the month button or the arrow buttons, focus should shift to the current cell in focus
-                    if (!(document.activeElement.shadowRoot || document).activeElement.classList.contains("date-cell")) {
-                        this.focusCell();
-                        break;
-                    }
-                    this._focus.day.increase(7);
+                if (activeEl.classList.contains("arw-btn")) {
+                    ev.preventDefault();
                     this.focusCell();
                 }
-                else {
-                    //If the down arrow is pressed from the arrow buttons or the title box, focus should shift to the current month in focus
-                    const activeEl = (document.activeElement.shadowRoot || document).activeElement;
-                    if (activeEl.classList.contains("header-btn")) {
+                if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
+                    ev.preventDefault();
+                    if (this.view === "day") {
+                        this._focus.day.increase(7);
                         this.focusCell();
-                        break;
                     }
-                    this.monthButtonFocus.increase(3);
+                    else if (this.view === "month") {
+                        this.monthButtonFocus.increase(3);
+                    }
                 }
                 break;
         }
@@ -466,34 +490,50 @@ export class PrivCalendar {
                 this.focusCell();
             } }, month));
     }
+    renderHeader() {
+        const previousButtonLabel = this.view == "day" ? this.previousMonthButtonLabel : this.previousYearButtonLabel;
+        const nextButtonLabel = this.view == "day" ? this.nextMonthButtonLabel : this.nextYearButtonLabel;
+        return (h("div", { class: "calendar-header" }, h("button", { onClick: () => {
+                if (this.view == "day") {
+                    this._focus.month.decrease(1);
+                }
+                else if (this.view == "month") {
+                    this._focus.year.decrease(1);
+                }
+            }, 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()), this.renderToggleButton(), h("button", { onClick: () => {
+                if (this.view == "day") {
+                    this._focus.month.increase(1);
+                }
+                else if (this.view == "month") {
+                    this._focus.year.increase(1);
+                }
+            }, "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" }))));
+    }
+    renderToggleButton() {
+        return (h("div", { class: "toggle-button" }, h("div", { class: "input-wrapper left" }, h("input", { type: "radio", id: `month-radio-${this.uid}`, "aria-label": intl.formatMessage({
+                id: "date.monthView",
+                defaultMessage: "Month view",
+                description: "Calendar button to change to month view",
+            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "day", onClick: () => (this.view = "day") }), h("label", { htmlFor: `month-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
+            id: "date.month",
+            defaultMessage: "Month",
+            description: "Calendar button to change to month view",
+        }))), h("div", { class: "input-wrapper right" }, h("input", { type: "radio", id: `year-radio-${this.uid}`, "aria-label": intl.formatMessage({
+                id: "date.yearView",
+                defaultMessage: "Year view",
+                description: "Calendar button to change to year view",
+            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "month", onClick: () => (this.view = "month") }), h("label", { htmlFor: `year-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
+            id: "date.year",
+            defaultMessage: "Year",
+            description: "Calendar button to change to year view",
+        })))));
+    }
     renderDayView() {
         const dates = this.getCalendarDates(this.focusDate);
         // 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", { class: "popup day-view" }, h("div", { class: "calendar-header" }, h("button", { onClick: () => {
-                this._focus.month.decrease(1);
-            }, class: "header-btn arw-btn", ref: (el) => (this.prevBtnEl = el), "aria-label": intl.formatMessage({
-                id: "date.selectPreviousMonth",
-                defaultMessage: "Select previous month",
-                description: "Calendar button",
-            }) }, h("span", { class: "svg-icon svg-previous" })), h("div", { id: "popup-title-month", class: "header-btn title-box", tabindex: "0", role: "button", onKeyDown: (ev) => {
-                if (ev.key === "Enter" || ev.key === " ") {
-                    ev.preventDefault();
-                    this.view = "month";
-                }
-            }, onClick: () => (this.view = "month"), "aria-label": `${intl.formatMessage({
-                id: "date.currentMonth",
-                defaultMessage: "current month",
-                description: "Calendar button",
-            })}: ${calendar_months[this._focus.month.asInt() - 1]}
-              ${this._focus.year.asString()}.`, "aria-describedby": "month-title" }, h("span", { class: "title", "aria-hidden": "true" }, calendar_months[this._focus.month.asInt() - 1], " ", this._focus.year.asString()), h("span", { class: "svg-icon svg-expand-more" })), h("button", { onClick: () => {
-                this._focus.month.increase(1);
-            }, "aria-label": intl.formatMessage({
-                id: "date.selectNextMonth",
-                defaultMessage: "Select next month",
-                description: "Calendar button",
-            }), class: "header-btn arw-btn" }, h("span", { class: "svg-icon svg-next" }))), 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" }, h("span", null, intl.formatMessage({
             id: "date.su",
             defaultMessage: "Su",
             description: "Abbreviated day of the week",
@@ -521,34 +561,17 @@ export class PrivCalendar {
             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, 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)))) : (""))));
     }
     renderMonthView() {
-        return (h("div", { class: "month-view" }, h("div", { class: "calendar-header" }, h("button", { onClick: () => {
-                this._focus.year.decrease(1);
-            }, "aria-label": intl.formatMessage({
-                id: "date.selectPreviousYear",
-                defaultMessage: "Select previous year",
-                description: "Calendar button",
-            }), class: "header-btn arw-btn", ref: (el) => (this.prevBtnEl = el) }, h("span", { class: "svg-icon svg-previous" })), h("div", { id: "popup-title-year", tabindex: "0", class: "header-btn title-box year", role: "button", onClick: () => (this.view = "day"), onKeyDown: (ev) => {
-                if (ev.key === "Enter" || ev.key === " ") {
-                    ev.preventDefault();
-                    this.view = "day";
-                }
-            }, "aria-labelledby": "year-title" }, h("span", { class: "title" }, this._focus.year.asString()), h("span", { class: "svg-icon svg-expand-less" })), h("button", { onClick: () => {
-                this._focus.year.increase(1);
-            }, "aria-label": intl.formatMessage({
-                id: "date.selectNextYear",
-                defaultMessage: "Select next year",
-                description: "Calendar button",
-            }), class: "header-btn arw-btn" }, h("span", { class: "svg-icon svg-next" }))), 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))))));
+        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: '500ef2d223ffe8e8b5ff8303b45f26b7538adb06', onMouseOut: (ev) => {
+        return (h(Host, { key: '5ac1252b33ef3a43fecf9c3221938389cf1d3681', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { key: 'd91690922cc11ad991937dd87cd618d175bca76f', id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
+            }, role: "application", "aria-describedby": "application" }, h("div", { key: 'e92179ff0e073bb0713728d6781ac4d040543169', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: 'c16391c078271ae7fef7fdb55ac268b746d06124', id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
     }
     static get is() { return "priv-calendar"; }
     static get originalStyleUrls() {

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: '9f19650526738eefcf2e2de58b812d9d0d3a21af', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '381b60f8cb2dc58f7c268e75e6d0e78879393f0d', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '6a99161cdb2d3c4b6b1bfbe9b4af333daa4704de' })), h("div", { key: '8cee667df6aa79c7db5511858a73f68e911cc566', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { key: 'b1d10f8872c9d905ba04ddd8e3688561d779453c', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '8ec2219a390ee59f518a505a4e7a74266524203f', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '87573087bc2ca9f558171f2b166c65d1252d2bf0' })), h("div", { key: 'b066e22e83612448cc55c2495bc4a6532f6d0065', 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

@@ -292,16 +292,16 @@ export class NestedSelect {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { key: 'cace730a8e2023eee24ef2d48104cdc334b765df', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'fcf737069a6297763779710da41f1947235845cd', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'c7af1c5c2b04fa15eddac417b69b22dc2f820e6b', class: "label-wrapper" }, h("label", { key: '75b81af82fc50ff315d8873599c67e10c0ba0580', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: 'd695b66fc02c415decc52fb7933e045d77ec6570', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'f11c3f53c8def76bbd904e46d518e539161274f4', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '0c258365d64598bfd9b00e380c73317fd3023ae6', class: "label-wrapper" }, h("label", { key: '45b88d6f43d9f7769a86643a8755187d85aae2d0', 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: '1ee9286a3b62e9bd85049acfa347801220d47957', class: "button-wrapper" }, h("button", Object.assign({ key: 'b214874daf294a02d7a5671c806fc9f05be724bd' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'c2cca855b7085a26b8f9b0e2637424c34b36561f', class: "overflowcontrol" }, h("span", { key: '047d5650fd6dc9cf0a17ecbc7778d3c94060cce1', class: "button-text" }, this.renderButtonText())), h("div", { key: 'b65f799f801505de8fed7ad83453e6fca8f0ab26', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '07cdfdafb857c58f0d37e41cadcd884f7ddc0431', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '6d097a2a65b495e97c1556c4a4fa47d097df4ec5', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: 'cfb6b6aab31777b9a5f3223121fcaf5a0785c006', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), 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: '15aff7adcdeffb80773e642426351dfaf6aa2cb6', class: "button-wrapper" }, h("button", Object.assign({ key: '5939e8c3f600e30226b1197eb575ceea73a05163' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '03b725b1a68c66ca06112ad647cacd9c61a87e6e', class: "overflowcontrol" }, h("span", { key: 'abcf682d2a7d623c8e4efb94d7f9a55ca4722131', class: "button-text" }, this.renderButtonText())), h("div", { key: '5295064b9dddfc08facb985aed1a140b2f67d8dd', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'f97f6711b3239d0d6179c8cad3f8b088541161f4', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '637aba14e9e93baa1c902f8b7b81d5487d56e0a6', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: '6da587e0991c5b6bd5429b4796a7418610d586d6', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), 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: 'd1b03429523cc98abe7eab5daa7c3b53471c2a42', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '6b064d941c0d6c9fe77abcf0676ab9d53089e854' }))), h("div", { key: '227555697e6da19102120de41068750f48f322be', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: 'dfa6a311286314637093b9c60ab7c62cdc285d8a', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        })), h("div", { key: '34c842099530cbcbd56f98c40d4c37b307a45f32', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: 'ad13e3aa8800bb47a70105c525ff9ea7a280a658' }))), h("div", { key: '3098fc48ccd369e3c7209baaaf73842bf684a5f1', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: 'e69d19a1f0d34c0822c03e31c4acbc87f1122684', 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: 'bba30132f0e662bcfc6f9a4280558aa4426673f4' }, h("div", { key: '757e663ad18a9a451169f994f54faf8f9182e1d9', class: `list-wrapper` }, h("priv-option-list", { key: '1bfda628a518f2508084a2382cc7a2f19754859e', 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: 'd584feb13518107132003e262c5bcc818b677c5c' })))));
+        return (h(Host, { key: 'd77bf14f995daa7ee2809e248824722f786d1bd9' }, h("div", { key: 'a695e5a0c65767922d05eb38085a81737b1b840e', class: `list-wrapper` }, h("priv-option-list", { key: 'a0eb3e7a12e61b1508f16d20bd7dbddfb2724f38', 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: '106a06b63cccf8436616efd341e22e863021007e' })))));
     }
     static get is() { return "wm-optgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -876,11 +876,6 @@
   color: var(--wmcolor-select-option-text);
   user-select: none;
 }
-:host:focus, :host.focus {
-  outline: none;
-  background: var(--wmcolor-select-option-background-focus);
-  color: var(--wmcolor-interactive-text);
-}
 :host.icon {
   color: var(--wmcolor-interactive);
 }
@@ -993,13 +988,13 @@
   pointer-events: none;
 }
 
-:host(:focus-visible) {
+:host(:focus) {
   outline: none;
   background: var(--wmcolor-select-option-background-focus);
   color: var(--wmcolor-interactive-text);
 }
-:host(:focus-visible) .checkbox.svg-checkbox-blank,
-:host(:focus-visible) .checkbox.svg-checkbox-selected {
+:host(:focus) .checkbox.svg-checkbox-blank,
+:host(:focus) .checkbox.svg-checkbox-selected {
   --icon-fill: var(--wmcolor-interactive-text);
 }
 
@@ -1009,7 +1004,7 @@
   outline: none;
 }
 
-:host(:focus-visible:hover) .checkbox.svg-checkbox-blank,
-:host(:focus-visible:hover) .checkbox.svg-checkbox-selected {
+:host(:focus:hover) .checkbox.svg-checkbox-blank,
+:host(:focus:hover) .checkbox.svg-checkbox-selected {
   --icon-fill: var(--wmcolor-interactive);
 }

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: '613fb3ff6678fbe5793a432817705b46c502ae06', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '8f9e3e8a88bf839e6b5801f01e6b451d297bce55', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: '82c0706404571fda0937308433b9def82f021666', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: '8c657048302620555e49630a4adc94171894b0a3', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '879fad664edef7a7188a8dfac862b29d7f78af42', class: "sr-only" }, this.el.textContent)), h("div", { key: 'bf5a1372a0daf05ef3cf8af196eddcaacd7ee049', class: "subinfo" }, this.subinfo)));
+        return (h(Host, { key: '3bebc22b8d9c2f28d6d4a40202dbbd5bfcd881a2', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: 'a65b8024c460fc76a188847c383c813110cf9ae1', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: '9bb2af43b87a04158ac30263c766d1997ae13902', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: '341516525f8fd5eb4e389eda55ec336961d4010e', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '69c48602a0954b55ae50f441417e7088ae2f6550', class: "sr-only" }, this.el.textContent)), h("div", { key: 'd9f8a9a104849c65a1e13482a028e0c7b181f54f', class: "subinfo" }, this.subinfo)));
     }
     static get is() { return "wm-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1078,7 +1078,6 @@
   margin: 0;
   padding: 0;
   width: unset;
-  position: absolute;
   -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
   box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);

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

@@ -68,7 +68,7 @@ export class Select {
         }
     }
     handleToggle(ev) {
-        ev.newState === "open" ? this.open() : this.close();
+        ev.newState === "open" ? this.onOpen() : this.onClose();
     }
     dropdownPosition() {
         // polyfill for opening up or down + positioning according to screen
@@ -108,7 +108,7 @@ export class Select {
         }
         this.isHidden = false;
     }
-    open() {
+    onOpen() {
         if (!this.isExpanded && !this.isDisabled) {
             // polyfill for browsers without anchor() support (FF)
             if (!this.hasAnchor) {
@@ -119,6 +119,16 @@ export class Select {
                 const hasSpaceBelow = this.dropdownEl.offsetHeight <= document.documentElement.clientHeight - anchorRect.bottom;
                 const hasSpaceAbove = this.dropdownEl.offsetHeight <= anchorRect.top;
                 this.openUp = !hasSpaceBelow && hasSpaceAbove;
+                if (!hasSpaceBelow && !hasSpaceAbove) {
+                    // dropdown will open downwards but doesn't have enough space
+                    // it needs to be absolutely positioned + html has to have overflow-y auto
+                    // (the default, but could have been overriden)
+                    // in order to ensure the options can be scrolled to
+                    // (would already be possible if the page has content below. this is in case select was at bottom of page)
+                    this.initialHtmlOverflowY = document.documentElement.style.overflowY;
+                    document.documentElement.style.overflowY = "auto";
+                    this.dropdownEl.style.position = "absolute";
+                }
                 this.isExpanded = true;
             });
             setTimeout(() => {
@@ -128,9 +138,12 @@ export class Select {
             }, 50);
         }
     }
-    close() {
+    onClose() {
         if (this.isExpanded) {
             this.optionListEl.unfocusAll();
+            // see onOpen
+            document.documentElement.style.overflowY = this.initialHtmlOverflowY || "";
+            this.dropdownEl.style.position = "fixed";
             window.setTimeout(() => {
                 if (!this.hasAnchor) {
                     this.isHidden = true;
@@ -301,14 +314,14 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: '4ec7d687b40ffcef80fbce21e6880680c72d03a7', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'c400196d862a763af6f4f5d4663a8f3e805a9ddd', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '1c7df9eee5ebc62a12bd36e97918e144c7e4dc72', class: "label-wrapper" }, h("label", { key: '752c9ce6491c959afda2105a5e2c6063ce4ee52e', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: '7fb824eaafac8e737e8bafb76e6bbac60cf652d1', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '19cf9096a6dd9e534aa35e1aa2ad318cc71f0a17', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'b0c98aeb4a346745064fbbf214fb6647b2a9f32b', class: "label-wrapper" }, h("label", { key: 'fc1fde9175b1e661a6f08a0fcc35aa06a405bca9', 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: 'c0b4660ed16129c1a3aaf5252aa5e7c71eb42f20', class: "required" }, h("span", { key: '8c4a41df3473c88021f8d73f09fdfd33e3ad1c48', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '303e6f18bef3d30b32508c6192ac363bbc8fb80c', "aria-hidden": "true" }, "*")))), h("div", { key: '7acc269a0e60042549cbc3fc6879b3e471f1b016', class: "button-wrapper" }, h("button", { key: 'd1e7751c22951130f92ca6fdc2c9f253e4e63b5b', 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: '6236a027968e849c873e1d09bf89910ca627b760', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '3af139e809e636873cd53dfb53141c0c606e4963', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '5894b37ef490101b0ba38547745f450c0521a8ea', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '6bce5cbddd6160c0d2eeb8de27ed7f0d46fffb38', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'a0d9da60b818f8a576f6fcaab422b9ec31d42fd4', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'dc70db1f203700702cf3586412eef64ab108b86f',
+        this.requiredField && (h("span", { key: '2a322ba30403a27e5f4be402143d5ccc1c5ed134', class: "required" }, h("span", { key: '3461e69bc5773cc2d635aa16b739580314a2bfe6', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '435cd8abf9909ac43455c150c1e8ab7b7c3ee014', "aria-hidden": "true" }, "*")))), h("div", { key: '247e8b19ad5fb48e4f1152e67780218b201c9064', class: "button-wrapper" }, h("button", { key: 'a69404e36e8bbafa5bbd7c9f1c6e381571ce6240', 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: 'da21f5b17347388d719c32f49ffb06878fa5102b', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'c65e84dbf79866af02242917a91146cb85cda6e6', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'f57f44de3f21a331b7e996a823a4d88b53835eb0', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '44a7fade429711e38e95abca8d165c1d1cf0ff6c', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '07ad0b8a3e260c58b1291e64d3db2498cb0e503e', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '745291f917c50256155e3a208791417467b25f88',
             // 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: '09db81570f9990ec4cf87f16b52320ec82701a04', 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: '185863f82957568eef29a5180afcd0973c5616ad', 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;
@@ -316,7 +329,7 @@ export class Select {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: '420515d805ad1039ed3b72bd2968a0a29c27a5fc' }))), h("div", { key: '3bda216f90f3d6b10b92034996d3bdc90a4ffd60', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '032fb47f7c64c04d518740dbcb31efcd761baed6', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: '580139ee9425c0fe550c793aceddc85b2c4ff472' }))), h("div", { key: '5a99e8a6087b883dba4f97b9ee2a77ed65ea900f', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '01137653e4eeb06386250a901c5663cafd679d08', 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: '6a2551f3260b0ab3a606174243d89bfc7daa68e5', onBlur: () => this.close(false) }, h("div", { key: '1dc817e8a83608d514b45aa00c4c00031ba3019d', class: getTextDir() }, h("wm-button", { key: '4d9bb231cef8871774fbe03c71a0c3e203c0dd99', "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: 'c9c33887915c59b82c2b87fd65e39059a6f84bd5', 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: '0c5a25373176ffa495a75a0e91ab6e71e45d3bbf' })))));
+        return (h(Host, { key: '6c215ca92b7775278392baade1cbd7238fec554c', onBlur: () => this.close(false) }, h("div", { key: 'd38c5a3fc3cd5faaaeff2e7f5e1e23a7ea7ec1ab', class: getTextDir() }, h("wm-button", { key: '4570f3978bd74038a1832c3bd1583c630eb195f7', "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: '5058056510151dad8e95bd6b1ea6dd322d632331', 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: 'd1a23671f13261238fd3f2c1e33a8f6c277bd31a' })))));
     }
     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: 'd122993141c67e59f1b99fcc574772c7c35be7a7', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '6c6cb49fa724cb4e317a3a7c7fdc32e9d1ca43f6', 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: '164207b617f46f932f462f15fb22529885a64e86', class: "button-text" }, h("slot", { key: '9e2831478378a258a8fd83405d0a1509e0e56697' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'f0a5ebc4c97bd184a7e14171aaa0f103fd8c0c35', class: "selector-icon svg-icon svg-expand-more" })))));
+        return (h(Host, { key: 'e2cb063d8e0c666bfc211bd53e88db0272ac7921', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '7811155d0e2623f94dcfdebf4170895533afcd9d', 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: '1d4a5c64e24dea05a019b8bc4a8e7127ed32e14d', class: "button-text" }, h("slot", { key: 'bae008635b392c8082b2a63e6670d6a7d6b00205' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'fc2760aa3e58026bc1426bd0b3673701e67fee56', 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: '64184891986497ee7159216e7f9ffef22b046c1c', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: 'd1ec4a91453b2274dd4c60800ebbf12c1533b5c0', 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: 'bc22d0fa97458ed4323d6bba8d13966a68e9f5c4', role: "list", class: "list-wrapper" }, h("slot", { key: '105cb8fc11a0d9349ac2e38951cf0a2245b69bd8' })));
+        return (h("div", { key: '50bc377faf106c14b0c4fa9c1e6680b98d066f1b', role: "list", class: "list-wrapper" }, h("slot", { key: '5fad985b96a6cfc72c2baf85c7c5092db510d7fb' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -154,7 +154,7 @@ export class Flyout {
         }
     }
     render() {
-        return (h(Host, { key: 'a273ad4b8e9eedbf6db4218c6dacd2d25a6d6a2d' }, h("dialog", { key: '16e59e07237efd043ab13d1e148fac46d39789c6', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'dabbb79ec5b860cd040015cd556747364a5162b5', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '05a02dab99f64588b942725160b270512bc75ed4', class: "flyout-content" }, h("slot", { key: '36350a517cc02c4ab4f94bf8ce30c5be389a0981' })), this.renderFooter(), h("div", { key: 'bba7a50936fce8601b1cbcba39db31ec0b0dcfa1', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+        return (h(Host, { key: '8426f99872f01fe209bb11ce424af76e7c0b1727' }, h("dialog", { key: '8ba7566093a1357598c1c28510c7bf6b800c55e7', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'e7b0f1b8b9866e5db316d7cb07e5fc5667c789a3', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '2346c27d6967d3acfdf9d6ef3f790f713509aca5', class: "flyout-content" }, h("slot", { key: '4906e2566894e8fa81039c267f9aa4a2b68e353c' })), this.renderFooter(), h("div", { key: 'c60c5a887c7be651082e45764d9ff49031a00910', 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: 'abe39d76f1df8098aad09d37dae556ffafed9de3', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'f6ebdff5ee4efb2f6ce435848379e8f63bcb3f71', class: "label-wrapper" }, h("label", { key: '2c4f2b47f0b0a9c74b5aad022d7cd902324aeeb9', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '502b0bcc0f333fbfbc3c3d33d57491a1a8fe12c4', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("div", { key: 'aa9cee1f7f3c5dfc63dd9deeb934c81b879c3e03', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '53f479d7516f774efa07b782de29fa77d7d5624c', class: "inner-wrapper" }, h("div", { key: 'b03a37a1f631b49e12846156e7959783379c75ae', class: "text-after-wrapper" }, h("div", { key: '73fae0162460f8fa28ffeffb91b75bb7fa84bc4c', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '86272f79015b42f77b7ba506f179922b1855ef44', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '4d3e1e63ec9236862e7c4969713adcf7ee260ce8', 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: '6b11f19bdde5657a9f15ce82c541be250bc1e243', 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: 'c52bb5fa02b5383df5b8eecce28eada592069ad4', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '107479fef114a8294c2243e4f52844fa1098745e', id: "info", class: "info" }, this.info)), h("div", { key: '56d84ddae6595bce7882d98586edfdb977c1a4e0', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'ddfccd79d99b3144acb6733dc89898b07a5a3ca1', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: '5e281cdb07413696a1405266627db2bc22ce1674', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '2aa8b6434a1e649cc88cd9bddb771a7f18af9a5c', class: "label-wrapper" }, h("label", { key: 'd6246e9715693cce6e4ae537792042e8ffd97050', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '0fa5b82940b14472d05a1e8f6f628137d87a36f9', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("div", { key: '05c896add7e40b09ed3bee2cb19840ba9b71ecd4', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ffff813c749cd3432b773e41c07cf4f4fe32d6c6', class: "inner-wrapper" }, h("div", { key: '10e3e09153b703b51fd170cc0b77ca4beedcf63d', class: "text-after-wrapper" }, h("div", { key: 'dbaeab7a9da2a81eb3bd188819e0a1c5396190d8', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '45cd4bde06af5d09ef124ff27c7b40dffc642524', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '0c6b0a7ea54a1f85abb6d82a91cb7afaba5753c6', 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: 'b05bdbea66f4b71913130eff59770d22b573db36', 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: '41c2fb3f492ac63a423caf3ddbe48f1ecf06121a', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: 'f211e673ba9d3b7de1152d92ec2d496932f96772', id: "info", class: "info" }, this.info)), h("div", { key: '699d7f3c818082b4d2d8558b80bbf134587c827e', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '69cf3df248eb4884eaead9e13f1c7414c08f5cd1', 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: 'e6315d1845768369730087b4e9e0cb52224af68a', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'a1e8dc4267cf04c0ec5678744e2928acb39102c0', 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: '3918e12cfecc1ef4123851608175c4dfe9c41022', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'ce62650fb0afee46e8acf66324d65a303931efde', 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: '019e3ea4b92089f44320cc3f9d256f7cea96cfbc', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'e5c34592f8a374bc016fc6cb6125a864f99d17bd', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '6349bd48d3aab79be1f33438f904d758a48066fd', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '4154880503f788a9ea023fe4f0ce05b5f67b0f41', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: 'a48b61feaf42d6da0b237a68af68d5ac8ae49642', "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: '86b0ac602ef44f1f903993c287ccbf35736f0d6d', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '3eba5847dbf91ed35aa9489c39658794f7cb9870', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'f81a1bc7519936e40f400c243bfd6f6b4e19e8f3', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '19cf3c9d718ac7d82e9c073ebe3890163fef6dbd', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '7f10d760d7fbeea0325a1d6c194e153cfda26ff7', "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() {