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

package/dist/collection/components/charts/wm-chart-bar/wm-chart-bar.js

@@ -88,7 +88,7 @@ export class ChartBar {
             var _a;
             const barColor = item.color || (isUniformConfigColor ? this.colorPalette[0] : (_a = this.colorPalette[index]) !== null && _a !== void 0 ? _a : defaultColor);
             return {
-                label: item.label,
+                barLegend: item.barLegend,
                 amount: item.amount,
                 gridPercent: (item.amount / this.gridMax) * 100,
                 displayValue: formatDisplayValue(item.amount, itemTotal, valueFormat),
@@ -223,7 +223,7 @@ export class ChartBar {
         setTimeout(() => {
             // allow time for the popover to reopen if the click that closed it was on a bar, to prevent flash
             if (this.popoverEl.open) {
-                this.highlightBar(this.processedData.findIndex((item) => { var _a; return item.label === ((_a = this.popoverEl.chartData) === null || _a === void 0 ? void 0 : _a.label); }));
+                this.highlightBar(this.processedData.findIndex((item) => { var _a; return item.barLegend === ((_a = this.popoverEl.chartData) === null || _a === void 0 ? void 0 : _a.barLegend); }));
             }
             else {
                 this.clearHighlights();
@@ -231,7 +231,7 @@ export class ChartBar {
         }, 30);
     }
     openPopover(clickedProcessedData, coords) {
-        let matchingChartData = this.data.find((item) => item.label === clickedProcessedData.label);
+        let matchingChartData = this.data.find((item) => item.barLegend === clickedProcessedData.barLegend);
         if (matchingChartData) {
             this.popoverEl.chartData = matchingChartData;
             this.popoverEl.header = matchingChartData.popoverTitle || this.config.popoverTitle || "";
@@ -271,14 +271,14 @@ export class ChartBar {
     // #region Rendering
     ////////////////////////////////////////////////////////////
     renderBarLegends() {
-        return this.processedData.map((item) => (h("div", { key: `legend-${item.label}`, class: "bar-legend" }, item.label)));
+        return this.processedData.map((item) => (h("div", { key: `legend-${item.barLegend}`, class: "bar-legend" }, item.barLegend)));
     }
     renderBars() {
         // Use effective grid max (numTicks * interval) for accurate bar sizing
         const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
         return this.processedData.map((item, idx) => {
             const barPercent = effectiveGridMax > 0 ? (item.amount / effectiveGridMax) * 100 : 0;
-            return (h("div", { key: `bar-${item.label}`, class: "bar-wrapper" }, h("div", { class: "bar", style: { width: `${barPercent}%`, backgroundColor: `var(--${item.color})` }, onClick: (ev) => this.handleBarClick(ev, idx), onKeyDown: (ev) => this.handleBarKeyDown(ev, idx), tabindex: "-1", "aria-label": `${item.label} ${item.displayValue}` }), h("span", { class: "value", style: { insetInlineStart: `${barPercent}%` } }, item.displayValue)));
+            return (h("div", { key: `bar-${item.barLegend}`, class: "bar-wrapper" }, h("div", { class: "bar", style: { width: `${barPercent}%`, backgroundColor: `var(--${item.color})` }, onClick: (ev) => this.handleBarClick(ev, idx), onKeyDown: (ev) => this.handleBarKeyDown(ev, idx), tabindex: "-1", "aria-label": `${item.barLegend} ${item.displayValue}` }), h("span", { class: "value", style: { insetInlineStart: `${barPercent}%` } }, item.displayValue)));
         });
     }
     renderXAxis() {
@@ -297,7 +297,7 @@ export class ChartBar {
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         const rowCount = this.processedData.length || 1;
-        return (h(Host, { key: 'af9ee18a445a32072133a4818a17543a9b642653' }, h("div", { key: '1ebd9b80b2546978f0819918abc7be5d71058315', class: "component-wrapper", tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, h("div", { key: 'fe01168cac52e5dba3f05b7fc51c8ef581c1422c', class: "popover-wrapper" }, h("priv-chart-popover", { key: '84dc52e1c81f3a978e2b4369cb675ef3969038cf', ref: (el) => (this.popoverEl = el), onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) })), h("label", { key: '0190875870d6e90915038a49c26343ee85f57a20', id: "label", class: `label --${(_b = this.config) === null || _b === void 0 ? void 0 : _b.labelPosition}` }, h("span", { key: '1d6900d5a62cecea8afab6f3348f9ed7305bed9f', class: "label-text" }, (_c = this.config) === null || _c === void 0 ? void 0 : _c.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : ""), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '1c22408dd8d89d988202eaa31279026641325f03', class: "chart-wrapper" }, h("div", { key: '11e1c3558f052f2f77f8b8e3f29503ca69a5f93d', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '96852f416f193b403dd2a1d55f8ef0d9181779ab', class: "category-axis-label" }, h("span", { key: '4c25a14518ea40222b2b965a319624ea35f87a84', class: "axis-label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.categoryAxisLabel))), h("div", { key: '7dcd802835da086e4860ee3f09e256bcb925b7ad', class: "chart-center" }, h("div", { key: 'bc8e2bfc65afea16e352b61f77bd9483271af04b', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: '5bcfb85a9d3f13843edd8a4242473e29ff8373e7', class: `bar-area ${this.isKeying ? "user-is-keying" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridInfo && ((_e = this.config) === null || _e === void 0 ? void 0 : _e.gridMax) != undefined && this.renderGrid(), this.gridInfo && this.processedData && this.renderBars())), h("div", { key: '8d7ea9e756430f0fc18db7a2114adca5dd0b13a0', class: "value-axis-label" }, h("span", { key: '5c6d15a4dc479179de31ab267dcbacf50bd6a918', class: "axis-label-text" }, (_f = this.config) === null || _f === void 0 ? void 0 : _f.valueAxisLabel)), this.gridInfo && ((_g = this.config) === null || _g === void 0 ? void 0 : _g.gridMax) != undefined && this.renderXAxis()), h("div", { key: '3cf6cf7f5574af218c366b00c3abfde6ad8d9204', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
+        return (h(Host, { key: '2fe75003c819b49d5de618eea92bbd2fcfc10723' }, h("div", { key: '48f496b705d9571f9386dfddaaaddbd414836252', class: "component-wrapper", tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, h("div", { key: '9f78d67d37c8048554127adbd40ee94409dcc575', class: "popover-wrapper" }, h("priv-chart-popover", { key: '9d1f5bf3bb3d1af0a36b2c0e7d53a7e56f23ce9d', ref: (el) => (this.popoverEl = el), onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) })), h("label", { key: 'c111aecf07f21b19422804a21ffeba9632258309', id: "label", class: `label --${(_b = this.config) === null || _b === void 0 ? void 0 : _b.labelPosition}` }, h("span", { key: 'bb866688ed8f54ded76bfdff8ca54437322dc73d', class: "label-text" }, (_c = this.config) === null || _c === void 0 ? void 0 : _c.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : ""), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '58a8f0c8932fa214311ef73fac64925d2eb1cb74', class: "chart-wrapper" }, h("div", { key: '1ad4c29e26a7d5fb3e23b54d25ce639adbceedd9', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '5f7aeb14ab9101f1fd38c811d9ac17660c5055d5', class: "category-axis-label" }, h("span", { key: 'bc99815352064b5b62efc9634d0f623b29e56c19', class: "axis-label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.categoryAxisLabel))), h("div", { key: '1b968d3f687215a65ddd3bc6e39bc96dd908c68c', class: "chart-center" }, h("div", { key: '6da38ae08882fed85387427d8c36984160ac805a', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: '1413e4f4a62e10cf7236d87b38b96932f3bd713a', class: `bar-area ${this.isKeying ? "user-is-keying" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridInfo && ((_e = this.config) === null || _e === void 0 ? void 0 : _e.gridMax) != undefined && this.renderGrid(), this.gridInfo && this.processedData && this.renderBars())), h("div", { key: '5021bad3a65b05b5280a63320dacfab6b560ab88', class: "value-axis-label" }, h("span", { key: 'c2b06b622ef28a16423eaa277c31e7c298ed431d', class: "axis-label-text" }, (_f = this.config) === null || _f === void 0 ? void 0 : _f.valueAxisLabel)), this.gridInfo && ((_g = this.config) === null || _g === void 0 ? void 0 : _g.gridMax) != undefined && this.renderXAxis()), h("div", { key: '49ae3d55b3172a5d98cb26b6bbdd59c277b38b57', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
     }
     static get is() { return "wm-chart-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -318,7 +318,7 @@ export class ChartBar {
                 "mutable": false,
                 "complexType": {
                     "original": "ChartConfig",
-                    "resolved": "undefined | { label: string; labelPosition: \"top\" | \"none\"; labelWidth: string; valueAxisLabel: string; categoryAxisLabel: string; printMode: boolean; printModeFormat: \"amount\" | \"percentage\"; gridMax?: number | \"auto\" | undefined; sort?: \"none\" | \"ascending\" | \"descending\" | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; subinfo?: string | undefined; completionMessage?: string | undefined; valueFormat?: \"none\" | \"amount\" | \"percentage\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
+                    "resolved": "undefined | { label: string; labelPosition: \"top\" | \"none\"; valueAxisLabel: string; categoryAxisLabel: string; printMode: boolean; printModeFormat: \"amount\" | \"percentage\"; gridMax?: number | \"auto\" | undefined; sort?: \"none\" | \"ascending\" | \"descending\" | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; subinfo?: string | undefined; completionMessage?: string | undefined; valueFormat?: \"none\" | \"amount\" | \"percentage\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartConfig": {
                             "location": "import",

package/dist/collection/components/charts/wm-chart-legend/wm-chart-legend.js

@@ -26,10 +26,10 @@ export class ChartLegend {
         this.wmLegendItemClick.emit({ idx: idx });
     }
     renderLegendItems() {
-        return this.processedData.map((item, idx) => (h("div", { class: "legend-item", key: item.label, onClick: () => this.handleLegendItemClick(idx) }, h("div", { class: "color", style: { "--color": `var(--${item.color})` } }), h("div", { class: "label" }, item.label), h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, "(", item.printValue, ")"))));
+        return this.processedData.map((item, idx) => (h("div", { class: "legend-item", key: item.barLegend, onClick: () => this.handleLegendItemClick(idx) }, h("div", { class: "color", style: { "--color": `var(--${item.color})` } }), h("div", { class: "label" }, item.barLegend), h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, "(", item.printValue, ")"))));
     }
     render() {
-        return (h(Host, { key: 'c6cff1273bae9bd36f74c056bc7863a538e83e28' }, h("div", { key: '8538f637a18d8b7e9877f8a95ff6a31e8e7ee317', class: `legend-container --${this.orientation}` }, this.renderLegendItems())));
+        return (h(Host, { key: 'be2793da927897a4c0e62345ffe502967fd7f12c' }, h("div", { key: '382567c522ff081fbd02e96563b11f1831a56c32', class: `legend-container --${this.orientation}` }, this.renderLegendItems())));
     }
     static get is() { return "wm-chart-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -273,55 +273,74 @@ 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);
+    handleOverflow() {
+        // handle overflow + counter for multiselect
+        // this is a fixed measurement accounting for the max width of a 3 character overflow counter
+        const overflowCounterWidth = 38;
+        const computedStyle = window.getComputedStyle(this.buttonEl);
+        // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+        const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
+        const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
+        const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
+        this.overflowCount = 0;
+        this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+        let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+        while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+            this.overflowCount++;
+            this.displayedOptions.pop();
+            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+            optionsTotalWidth = this.measurementAreaEl.clientWidth;
         }
-        else if (this.multiple && this.allSelected && this.overflowCount > 0) {
-            return this.allSelectedMessage;
+    }
+    setButtonText() {
+        if (!this.multiple) {
+            const selEl = this.childOptions.filter((x) => x.selected)[0];
+            return selEl ? selEl.textContent : "";
         }
         else {
-            // handle overflow + counter for multiselect
-            // only bother if things have changed
+            this.displayedOptions = this.childOptions.filter((x) => x.selected);
             const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
-            if (this.multiple && hasChanged) {
-                // this is a fixed measurement accounting for the max width of a 3 character overflow counter
-                const overflowCounterWidth = 38;
-                const computedStyle = window.getComputedStyle(this.buttonEl);
-                // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
-                const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
-                const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
-                const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-                this.overflowCount = 0;
-                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-                let optionsTotalWidth = this.measurementAreaEl.clientWidth;
-                while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
-                    this.overflowCount++;
-                    this.displayedOptions.pop();
-                    this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-                    optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            const noDisplayedOptions = this.displayedOptions.length < 1;
+            if (noDisplayedOptions) {
+                return this.placeholder;
+            }
+            else if (!this.buttonEl) {
+                forceUpdate(this.el);
+                return "";
+            }
+            else if (hasChanged) {
+                this.handleOverflow();
+                // we need to calc overflowcount as we only want to display allSelected message if there is an overflow...
+                if (this.overflowCount > 0 && this.allSelected) {
+                    // ...but it should be reset so it isn't displayed in that case
+                    this.overflowCount = 0;
+                    this.buttonText = this.allSelectedMessage;
+                }
+                else {
+                    this.buttonText = this.displayedOptions.map((x) => x.textContent).join(", ");
                 }
-                this.previousDisplayedOptions = this.displayedOptions;
             }
-            return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
+            this.previousDisplayedOptions = this.displayedOptions;
+            // 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: '32eda81294981e2d46b283c469f7373f9984dbdd', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'dc3e7f782326beda2517cf8878516d4d23576bf3', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '0ddf3269d861b1d252876b587346739e978117fe', class: "label-wrapper" }, h("label", { key: '78493121ecada1718c1f0de42cdc09289d000bc9', 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: 'dfa3603962893e5fe6542924561fbe31828b694b', class: "required" }, h("span", { key: '478a6d2c7e9bb56dea7165a1e762bc3a136c7c1d', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '8f3115f4a09dc109ed4580be49e3a704bd643ca0', "aria-hidden": "true" }, "*")))), h("div", { key: 'cbe6cc0600f11352dfc81a5a991805e757256906', class: "button-wrapper" }, h("button", { key: 'e943b99068a8822a65d8cc8ae6ab61999ac8a511', 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: 'e914e5cc9eabfe311e4ed57ee92744b14e3828e4', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '095981a63cea28e0dbcdc269401eb511694739f6', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: 'd006aadc9c414abf0dfefc05d8fbff9c0fc1c370', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '77054ec91448bc021ce4a4bacfa5a1a8130e34d3', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '1719132ac678c1a8a530e3b7f2fc3c67cd7c73ae', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'dc968de113b89cdf848d7a231b097a4d2308b357',
             // 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: '64518e2aa66f3373417506a4126fcec27de552f5', 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 +348,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: '138d16484638a094fd0664982e30149888cc3270' }))), h("div", { key: 'fc644fe425fc73337558af6dc809893e0574ba9a', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'a6f373b32a1dc83a788bfd17ee410e23a6d53001', 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.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

@@ -116,11 +116,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: '7e79523b945c00909991a3dcfecfda79e92c882b', 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: 'c032006260d0c083a5b796e20705cb99f6fa44b9', 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: '384ed4e4fa347e50d1f9c78a3c1d84d6dab9f34a', class: "wm-tooltip" }), h("slot", { key: '6ec6ba8b0b90db721ff1e29db8f259d2f1cff6d0' }), h("div", { key: '3795b7025286e5d4f542cfccad9c6851d2f22a8d', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }