@watermarkinsights/ripple 5.30.0-alpha.4 → 5.30.0

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

@@ -13,22 +13,22 @@ export class PrivCalendar {
         });
         this.previousMonthButtonLabel = intl.formatMessage({
             id: "date.selectPreviousMonth",
-            defaultMessage: "View previous month",
+            defaultMessage: "Previous month",
             description: "Calendar button",
         });
         this.previousYearButtonLabel = intl.formatMessage({
             id: "date.selectPreviousYear",
-            defaultMessage: "View previous year",
+            defaultMessage: "Previous year",
             description: "Calendar button",
         });
         this.nextMonthButtonLabel = intl.formatMessage({
             id: "date.selectNextMonth",
-            defaultMessage: "View next month",
+            defaultMessage: "Next month",
             description: "Calendar button",
         });
         this.nextYearButtonLabel = intl.formatMessage({
             id: "date.selectNextYear",
-            defaultMessage: "View next year",
+            defaultMessage: "Next year",
             description: "Calendar button",
         });
         this.uid = generateId();
@@ -512,7 +512,7 @@ export class PrivCalendar {
                     this._focus.year.decrease(1);
                 }
                 this.announceMonthYear();
-            }, class: "header-btn arw-btn", ref: (el) => (this.prevBtnEl = el), "aria-label": previousButtonLabel, onMouseOver: () => showTooltip("bottom-right", this.prevBtnEl, previousButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("bottom-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: () => {
+            }, class: "header-btn arw-btn", ref: (el) => (this.prevBtnEl = el), "aria-label": previousButtonLabel, onMouseOver: () => showTooltip("bottom", this.prevBtnEl, previousButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("bottom", 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);
                 }
@@ -520,7 +520,7 @@ export class PrivCalendar {
                     this._focus.year.increase(1);
                 }
                 this.announceMonthYear();
-            }, "aria-label": nextButtonLabel, class: "header-btn arw-btn", ref: (el) => (this.nextBtnEl = el), onMouseOver: () => showTooltip("bottom-right", this.nextBtnEl, nextButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("bottom-right", this.nextBtnEl, nextButtonLabel), onBlur: () => hideTooltip() }, h("span", { class: "svg-icon svg-next" })), this.renderToggleButton()));
+            }, "aria-label": nextButtonLabel, class: "header-btn arw-btn", ref: (el) => (this.nextBtnEl = el), onMouseOver: () => showTooltip("bottom", this.nextBtnEl, nextButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("bottom", this.nextBtnEl, nextButtonLabel), onBlur: () => hideTooltip() }, h("span", { class: "svg-icon svg-next" })), this.renderToggleButton()));
     }
     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({
@@ -552,11 +552,11 @@ export class PrivCalendar {
         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: '13c2fb6cb68b7e3a35c76bc05dd266ba4525db1f', onMouseOut: (ev) => {
+        return (h(Host, { key: '0d795a3a89b285d1e9b0bef0b68685e77eac947e', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: '3faf7478450cdcfbd6aa61fee7b9f8e9d71a4dcb', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: '17e9cbb2b2ac43846a5eca6db7ef5ce5cb78bbf9', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: '0d770c5bdb6c9b788a0ca3be07346d14bfc1a763', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement)));
+            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: 'f60032e3d2b7b12df707a83f6963360496535e33', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: '67b0bbd84a5ce5922937fcd28e554b70cc963c01', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: 'b5adb35334738a308afd0d7e8ad3afa96ed8b493', 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() {

package/dist/collection/components/datepickers/wm-date-range.js

@@ -529,25 +529,25 @@ export class DateRange {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '9840d0cb5b3aff858d939fbe2d67dc1d51535c05', "aria-busy": "false" }, h("div", { key: '71e3eb8f71812140abc538cbfec3111c2e2b9cba', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '094295f1471f1ba0eaea5c65617447efc5dca770', class: "range-wrapper cal", ref: (el) => (this.anchorEl = el) }, h("div", { key: '00bcfac555be41fe8b2f885e2a0335c8d41efd28', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: 'fa7a7f25eb9156ad8de4d3c243f41e974084e35b', id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: '146abd4001789c1020eeb27c154004376a39e4e3', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: 'a112e25addb7a17cf497728a4d4d72018228a706', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '29834ad29b391967f6313e7a72775f1647f61084', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: 'b3c0b90c040a0552db1e01b8f8aa38725a98357a', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '1a6b2881f11d9700fd5895ca49b72672d2c903aa', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '4ab993f81a4af844b51b66acefef64ecbf3c6be3', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '5ef90c128cc642ad23102f752838b2a2c5d30688', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '43a4820ce51afc316b96e09aa8581c4791d06aaf', class: "toggle-wrapper", id: "toggle-wrapper" }, this.canOpen && (h("button", { key: '7a39be01375c1406021c8c2015f746710db313b6', disabled: this.disabled, "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
+        return (h(Host, { key: '9840d0cb5b3aff858d939fbe2d67dc1d51535c05', "aria-busy": "false" }, h("div", { key: '71e3eb8f71812140abc538cbfec3111c2e2b9cba', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '094295f1471f1ba0eaea5c65617447efc5dca770', class: "range-wrapper cal", ref: (el) => (this.anchorEl = el) }, h("div", { key: '00bcfac555be41fe8b2f885e2a0335c8d41efd28', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '1f23a2bb3163e550f9929be4dbd6335bf5bf6579', id: "startlabel", htmlFor: "start-date-input", class: "label" }, this.labelStart, this.requiredField && (h("span", { key: '40dc9394b28b616e1dbfdb028f504474e8576fce', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '75addeddb3c54576c90fb9c6c662e525934f6166', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '3015302e413b2bd033dffb9edacc1ecb7c06fb68', id: "endlabel", htmlFor: "end-date-input", class: "label" }, this.labelEnd, this.requiredField && (h("span", { key: '6f27560f7730e1efc19c8f9f7b1845f7a4fc5489', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: 'a350aea0fa321f076f7b0258e6717b349f551813', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "date-format-hint error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'f3d74eae497160213ac05d99467ab254d30167b1', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '4e77331018a0ce06846adae9ce01f0acd556dcd8', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "date-format-hint error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '47f502431bd898d5baab11e483990585e49b648e', class: "toggle-wrapper", id: "toggle-wrapper" }, this.canOpen && (h("button", { key: 'b7dc42e4733418c6da7ecb5eae5a896ad0d92f4d', disabled: this.disabled, "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
                 id: "date.selectRange",
                 defaultMessage: "Select range",
                 description: "Button text for screen readers.",
-            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: 'd58a8a11fc19a77da89af41ac82c877acb4a0012', class: "svg-icon svg-date" }), h("span", { key: 'c0c3d305723275782e0e97db7a5feb3777de2c1b', class: "calendar", title: intl.formatMessage({
+            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: '8fcd8c7cbaff39440838c15354de40ea79230dfd', class: "svg-icon svg-date" }), h("span", { key: '392288ecb5e6617395b306d9e7993ef41c9f27d2', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })))), h("div", { key: 'de44f23903d4656c215b10a070dc262057a70a5f', class: `popup-wrapper popup-range ${this.startCalEl && this.startCalEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
+            }) })))), h("div", { key: 'a88e17a38bbee302551a7abc458f9a387afe1d89', class: `popup-wrapper popup-range ${this.startCalEl && this.startCalEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
             // @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
-            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '0f9e61c2aead0ad0587c99061e43b601b456de51', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { key: 'de148d250b5a9d58eeb186196b8db7ac09e3e111', ref: (el) => (this.startCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { key: 'f9522d0f4d4f5a9d6790604aebeba53fc18753e5', ref: (el) => (this.endCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { key: 'ef7e0bd324e44a0fdab74c5ac90c50533c3c6f65', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))), h("div", { key: '02a384909982487064ee8618783ad89f632effae' }, h("div", { key: '4cbd7f056e57b6cc52d70ec998aa9534f0d8e091', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '27d4adf2fb5da73fc1b0bf1da84a941400dfe75a', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '968c8f59c78dc1358295d5f5a7db69952f31da35', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { key: '73c5f5df127cb560aeaf7131ce4ba6e167857693', ref: (el) => (this.startCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { key: 'f3177d31c0bcf97d010e16ee4f8ee43568fd28b2', ref: (el) => (this.endCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { key: '278ae43445deae7239390b01f0a01c16f3fc0f17', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))), h("div", { key: '2528c193f264b94886be679235595c69d081800c' }, h("div", { key: '4e9a81c12822d560cb0b949b2da38b6f26204c32', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '82603d1a7ed918904df6649f76549a41a644d2ed', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '15de6f6698170ed70687516e4a15abbca041fde5', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: '0c98b239ffa8a8f6f27a9eee4e302f8daddc4c89', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        }))), h("div", { key: '47f6c2dd3072e95927d32910d1bf30cce0bde3f7', id: "error", class: "error" }, this.errorMessage), h("div", { key: '0cbdb396f7422cd1e47b299c7037f495b28ad317', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+        }))), h("div", { key: '13e1dc0b81ffedda3b7f6316ee07d2dc9a8712b9', id: "error", class: "error" }, this.errorMessage), h("span", { key: '5b8d811a975b5dec9e0e9e2c81bd56d5360f178a', id: "date-format-hint", class: "sr-only" }, this.dateFormat), h("div", { key: '0746adc5f997c314567c5f942de26216a449ce57', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
     }
     static get is() { return "wm-date-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -329,25 +329,25 @@ export class DatePicker {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '75edb60af8b727174c9e906ea4fd5655610ddd00', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '30cf18c6bdd8d2904bac07075eb7f1278a1dfadc', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'f52d76ff9670902582cff2c266804b138246137a', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '8eaad53d13c5300efcc5f2a8f0c06fb997ba2f80', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'bd29520e03f51baec0adc4be0a16c2c04651ea4a', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '997f09274b7f85aa1d2d258e09802fe38c95a062' }, h("div", { key: '127816619a523254ccf63c9e3e26b7d3a8929516', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, h("input", { key: 'b714f2bcb4e4fd8072ed1a61d5c3b9df5cd1de40', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'cecb3d7adf4bf0401fce82b131de4767837d52a2', class: "container", id: "wm-container" }, this.canOpen && (h("button", { key: '9da230049feebb37f2f087e760c2671669716e92', disabled: this.disabled, "aria-label": intl.formatMessage({
+        return (h(Host, { key: '1ae084fab8bf53b87d769a314f7e6173492d35bc', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'ff4180135e424dfdf985819781117277925cfd4e', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '62df8d9f5634d50508a7a0f47d3d9d6f3d0ad16f', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '3430b1340a0ba7355d4dc22a5bd02a800ffafa5f', id: "datepickerLabel", htmlFor: "date-input", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '625126eee314eb1ac24f82e2a7bc0e48abe8ad5d', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '39a8bc38fa6aad0a5cafd5fb3af8880229918384' }, h("div", { key: '861923fb1569879e5d8a2f593c6023f295d57e5e', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, h("input", { key: 'aa8bf537a6c1e1d50157107a0392b90e984e6ca6', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "date-format-hint error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '7c26eb7e1a11ea1ee314ccbe9e1855f5cdd3b5ec', class: "container", id: "wm-container" }, this.canOpen && (h("button", { key: '734718b3ee64ab44fcf44f0ff34f2985f57ccf66', disabled: this.disabled, "aria-label": intl.formatMessage({
                 id: "date.selectDate",
                 defaultMessage: "Select date",
                 description: "Button text for screen readers.",
-            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: 'b1c40c5c3e63e1096b9e8bcbac78cc5a2beebfd0', class: "svg-icon svg-date" }), h("span", { key: '01675fedff80453c8a8a02360dddf3658fb842c6', class: "calendar", title: intl.formatMessage({
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: 'eea61f1c8f02f89cca36f8d51f1028f1bb1f5801', class: "svg-icon svg-date" }), h("span", { key: '7910f167d9343f53b8d1df37845179d3580483f1', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) }))), h("div", { key: 'f0fc896b98dbdfb8ec5a9d3783c52ee324847d5e', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
+            }) }))), h("div", { key: '9c82f780494e23aefa7e188e060c8243ef9d6e01', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
             // @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
-            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '34543b5a222d7875938fc545751d33cd25ecf2c3', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '7e548bdcc7bccc30dbbc20b32bd594cc0d27128f', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '07ba79155102bcc5af7a7d3ff8e3252412ea816f', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '4ff2e5951eabde88a2d2efe46c671e5f87764359', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '8fd50c0d7b5d7f21aa215e71c41a4d071f76e971', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: 'dbdff9693acf1c80fc815d9ad734b009120d634e', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '6db36aebafb43d5a9fef8a108921b0a7baa5ae6b', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '8b373c91819aedd18bd23086d286ba8409daa932', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: 'f77269cd2e7bce953622c574e9541eded807f708', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '0d5de891b42a3d0b4ac38efa02eb6323719d86a3', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: 'f82d186d8f2053f13389c9de24a317bd3673a0fc', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: '8044eaab6e1ed7b14164ecbab8adccd9cf10a8e1', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), h("div", { key: 'bcf3f6665c8fa0bb4e21b8ba92f756aa8570b5c4', id: "error", class: "error" }, this.errorMessage), h("div", { key: '2b249282c6a469e6d91ecae8ac681f4ebc5816b6', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), h("div", { key: '84e8a07316eb505d1efb41426681c1c50fc57d84', id: "error", class: "error" }, this.errorMessage), h("span", { key: 'eaadadc2b5f4d7665573feff2cce7509e306b07d', id: "date-format-hint", class: "sr-only" }, this.dateFormat), h("div", { key: 'dd22ed0f5451379701210d29c460d832c388ac0d', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
     }
     static get is() { return "wm-datepicker"; }
     static get encapsulation() { return "shadow"; }

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: '98ab5904650946f09781f2e61aa6b112b7573509', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: 'aa070c8aa473a64033343eaad82537164fe40005', 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: '8f4c76557f6f8ce2d97148566c52f1584ab9d931' })), h("div", { key: '3f199eafffecbe3224a528dbb4416e4cca1ad7af', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { key: 'd1dc259bbc48591f82a0e44017349513b7e22f60', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '5ef4cd1533f03e47175ed6112996ba73a138aacd', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-label": this.optgroupLabel, ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '53014694e7dc51fbfc4fe6da9abbf0749764b4a1' })), h("div", { key: 'f3e1bb6596bd0e656eb045c5a62dad39ee266985', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     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: 'bda282fadc5398b51d54cb27eeaf1c1c1f98eb4c', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '1b2d0bc94e1d57571b1930dcf3566dd66be89ca5', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '64a9f0148d1b09eb6eac15e1049c16e45f2dd411', class: "label-wrapper" }, h("label", { key: '8e188fc0dfe16b08ac9322965c68d77a5c429e90', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: '7e8ed5b276c45f62f8d92521e65b6b6dded568db', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '8712a1df1e10912a4e69b6584b1f47670f9fe0ef', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '6a4e9d87422861362ac87b92703dd094748da7e9', class: "label-wrapper" }, h("label", { key: 'e27736516799cf708681ee19eafd179094dd5096', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.labelPosition !== "none" && this.requiredField && (h("span", { key: 'abcefcd2375d1c03236a6259cbdefd28f39d5d81', class: "required" }, h("span", { key: '00ab4df49e29a6c1c507911488d34ef2aa3a9172', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '76880a1038559104ed56daceb977425c4192825d', "aria-hidden": "true" }, "*")))), h("div", { key: 'be310db75aff587d31f10f8ba4ec4187287074e6', class: "button-wrapper" }, h("button", Object.assign({ key: '2428e385ee1b29f21314dca563d5e58281bfabd5' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '228adf62c0343582e2619628bad56acc5e44b750', class: "overflowcontrol" }, h("span", { key: 'c75274b26d3d2dc33334dc794e963c4a168859be', class: "button-text" }, this.renderButtonText())), h("div", { key: 'a2574049743302f64c3657bd3426d0c93470fa23', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'c62aef44d9f2390603a351356c0cd20eaa95a474', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'b71077c2d05939e0770f33a957fe77e1993abb56', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), h("div", { key: '9472e55d1c1f3b01a03b8d39a353d17ed21e8897', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
+        this.labelPosition !== "none" && this.requiredField && (h("span", { key: '0d6e9bc7134d9ce46d53813067eeef7f2af50e81', class: "required" }, h("span", { key: 'a4dd0ef025cf32566f863ce0119e72259d9ca50e', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '8169eaa0d995f90e49e5beb9c66dbac4cf93cc6d', "aria-hidden": "true" }, "*")))), h("div", { key: 'a84486ea919cc9cf713c3f98322b6f8f10e91e84', class: "button-wrapper" }, h("button", Object.assign({ key: 'd8605fbcab85f7c15cb030214e599654a3bbeb5e' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'ce7182acce7ac9f9bf4259fc73155ec1b8b765a2', class: "overflowcontrol" }, h("span", { key: 'dcda39e2afe152b5c3a75d92e9795f4a4fe93858', class: "button-text" }, this.renderButtonText())), h("div", { key: '8061497676ac1e2c4075f93416663f09b8687ff4', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '4a234681f6ccaf3860e46f193855b56e46e2b221', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '4a73cad886a38ba1674241b0a5147d3941c4f97e', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), h("div", { key: '4660e100c2e0c5291cced7a26a58143a25852f0a', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
             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: '2ace5086fdc7b13f1550f0e2ee4f90a5da7f70f8', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, h("slot", { key: '8912f4b90a572e2436602717660d3c3413a88290' }))), h("div", { key: '69a526ffeaa60bb10407cd116369bfc92132d5be', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: 'd1910aeeb9e3155af714be4359bbcd01202c1a8d', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        })), h("div", { key: 'cd880112ee35cdc1a2a3dafa210db9837426fc47', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, h("slot", { key: 'f617faa2bbb0f34e500ec103704d3d1298d3f08d' }))), h("div", { key: '0020de125ad2ada89d5f0b38e3af6396879b4de6', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: 'ecc4b501c84e72461319863f4e6b5c6afc3aa944', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     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: '12057d825b7564925f9d36636a6bf3854965c7af' }, h("div", { key: '8bd80f2183e39325a9069e2d763117f9572f203a', class: `list-wrapper` }, h("priv-option-list", { key: 'c7108cc9a10eb4d2e919d5a273e75f2b773a1695', 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: '46fa349a0460d0630ad53005cd5cb8513e206c46' })))));
+        return (h(Host, { key: 'f0aab9a65cc5d21105c75bdc3768e0076123c0c8' }, h("div", { key: '23429cfad03b7026205ed0aef92973353d3ccff0', class: `list-wrapper` }, h("priv-option-list", { key: '6d8d1ea6e0ab9394bec5f4cf5423941fd9979332', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", { key: 'e01aeec2a2c3cd346f821c1fe46d7e77944e4f98' })))));
     }
     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: '4453364df27300330171bf85256485c249c565b9', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '4f8abd91019d780f6ac5daacc892fa9bd0bb8551', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: 'bf57c786e8f201c6ba30d4aef82c5b8a4f0e84f1', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: 'a9d404610f78455878bbd3ec1a832f40c6570cf6', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '36e7eea2df9eb3b2ec3d65c8f872b67bd8837dd1', class: "sr-only" }, this.el.textContent)), h("div", { key: '693c57136543092bcea5ced3a0042dfcd1d732f9', class: "subinfo" }, this.subinfo)));
+        return (h(Host, { key: 'bcabbcc25798f589af99a47142426ed517e1951f', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '83c81f098705c2ef5b6b2b374cc5d680ec78e2af', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: '4cc738837041f134ef4d6ac1f541b8b0409813c6', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: '44b3d931ed548dc841033ebf4757eb400773a3a4', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '25a0ecb424a65a7d6c878ad65848ae5270ac563f', class: "sr-only" }, this.el.textContent)), h("div", { key: '4e25dd1f8e9ae5767123d136874ec1e40474c0fb', class: "subinfo" }, this.subinfo)));
     }
     static get is() { return "wm-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -323,14 +323,14 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: 'c3179dce64aec17311a05db1caf40c9046d50266', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'ffec93927e318e74ba2a65eea796a17746086101', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '05b63a73a9ba8ce393b9ab12f20e827316cdc45e', class: "label-wrapper" }, h("label", { key: '782ce6c1c996894b55829daf9737de0fe9fbb087', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: '9a7eaa936f3f0723a852f780b706ce95dc83641a', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '4ab274d8cf13b0b8702928766bcaae20fa54216e', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '983713098202b6b9774ecabdbe56a43fe21f8938', class: "label-wrapper" }, h("label", { key: '8f79bf97083e3348ef10b15b8637e501915817b2', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.labelPosition !== "none" && this.requiredField && (h("span", { key: 'cf907f7414548bfbd9c7b4e4dba50a6bb9c1e577', class: "required" }, h("span", { key: '2ecc4c811c259dd872105c61096c00ffcc8872c9', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '71ac50661c996f1a78ee63df5907f34f107c5301', "aria-hidden": "true" }, "*")))), h("div", { key: 'cb3385816a0c66c5cbe907a24b3d8945a14a8d16', class: "button-wrapper" }, h("button", { key: '79f53e40d93843d53ff28d0f7ebcfebad629605c', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "info error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: 'c6a39cf5e76b2d17a59520152ee56bc259323327', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'ba1f1804bdeb6d5deb27ef47f3c4006d0c043814', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: '6f9f8c575d4a4045b0d45db05e52e7d9ea2a5e85', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '2dcf2db70cc00e658fffc0d7003e6a52facb72d3', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'abe7e4b5febcef43ad6227fa886d5b2fef612da9', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '2bdb431c7e2b297928ac0fb8cc5e04f9a16ea833',
+        this.labelPosition !== "none" && this.requiredField && (h("span", { key: 'f8fd8c444254d6588b010277684824a4f61bd0c7', class: "required" }, h("span", { key: '4bdbbded3292fa0a7d8ac7a7a14e63c4fa06a0bf', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '6e28deddff56fc2009fdc7b7610c1f379b0e958a', "aria-hidden": "true" }, "*")))), h("div", { key: '47f1f1d2d62006f117d0be49bfccaaee71e91b76', class: "button-wrapper" }, h("button", { key: '9803fc04172c3c85241891b1abd5dedcc39d8db7', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "info error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: 'e5a794d58c1115eaeabad64349aa763b880d8650', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'be25d6a9086a68305f23604395897d8ecb19af01', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: '09e34ec7ac74982b1f6c1db55b876d4a72256446', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '75b86a8c694a6bb3e5e92744935242727d2233a7', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '365885ab0546940f1ac4970894066beddf59ac42', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'fd952f83012203e7eaba6fcb8a83b053b5b17a28',
             // 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: 'bd9a8370bb366966d81d93366f100f15946f2c4d', 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: '54216ae45b02cab8b403fe30f0c32814e5085f3a', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
                 this.dropdownEl.hidePopover();
             }, onOptionListAllSelected: () => {
                 this.returnFocus = true;
@@ -338,7 +338,7 @@ export class Select {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: '76adfa38e6831f440e65dc2965f0335c7ae89b58' }))), this.info && (h("div", { key: '661f5601227afce341989bece0f6c9ccc3bddc00', class: "info" }, this.info)), h("div", { key: 'ed2e09dc4a5c21914940473725fb0e2043a28539', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'ef299ca55165327d731b6721777c51743da1f20b', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: 'defde80bf2e3e435fccfda6b910a0d53f4df9989' }))), this.info && (h("div", { key: '464984b66832d1c978df56c53dc4099a671d75c5', class: "info" }, this.info)), h("div", { key: '3a63d5293c2c97f04bddc39a2fcf5181a245f2a3', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'a9a47c2c45f0ab1149919504b9787378ccedc3de', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -18,6 +18,8 @@ export class Button {
         this.textWrap = true;
         this.customBackground = undefined;
         this.isSubmit = false;
+        this.ariaLabelPassthrough = undefined;
+        this.ariaExpandedPassthrough = undefined;
         this.isTabbing = false;
     }
     get isDisabled() {
@@ -27,6 +29,12 @@ export class Button {
     get isTruncated() {
         return !!this.buttonEl && this.buttonType === "textonly" && this.buttonEl.offsetWidth < this.buttonEl.scrollWidth;
     }
+    get isAriaExpanded() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        if (this.ariaExpandedPassthrough === undefined)
+            return undefined;
+        return toBool(this.ariaExpandedPassthrough);
+    }
     get hasTooltip() {
         // tooltip is only rendered for icononly and navigational types, or if the button text is truncated
         return ["icononly", "navigational", "icononly-ai", "navigational-ai"].includes(this.buttonType) || this.isTruncated;
@@ -159,37 +167,37 @@ export class Button {
                     name: "--ai-gradient-start",
                     syntax: "<color>",
                     inherits: false,
-                    initialValue: "#2779C8"
+                    initialValue: "#2779C8",
                 });
                 CSS.registerProperty({
                     name: "--ai-gradient-end",
                     syntax: "<color>",
                     inherits: false,
-                    initialValue: "#6259C4"
+                    initialValue: "#6259C4",
                 });
                 CSS.registerProperty({
                     name: "--secondary-button-fill",
                     syntax: "<color>",
                     inherits: false,
-                    initialValue: "#FFFFFF"
+                    initialValue: "#FFFFFF",
                 });
                 CSS.registerProperty({
                     name: "--wmbutton-percent-1",
                     syntax: "<percentage>",
                     inherits: false,
-                    initialValue: "0%"
+                    initialValue: "0%",
                 });
                 CSS.registerProperty({
                     name: "--wmbutton-percent-2",
                     syntax: "<percentage>",
                     inherits: false,
-                    initialValue: "70.19%"
+                    initialValue: "70.19%",
                 });
                 CSS.registerProperty({
                     name: "--wmbutton-percent-3",
                     syntax: "<percentage>",
                     inherits: false,
-                    initialValue: "-50%"
+                    initialValue: "-50%",
                 });
             }
             catch (e) {
@@ -214,6 +222,8 @@ export class Button {
         this.ariaPopup = !!this.el.getAttribute("aria-haspopup");
     }
     getAriaLabel() {
+        if (this.ariaLabelPassthrough)
+            return this.ariaLabelPassthrough;
         if (this.buttonType === "icononly" ||
             this.buttonType === "navigational" ||
             this.buttonType === "icononly-ai" ||
@@ -246,7 +256,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: '7cfb3bc7bc5f2c0e00c3cb38de71ac1b5465055c', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '9010f68296e4250cdf85fa21bfeb7b3a725fa072', 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.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (h("span", { key: '5167fea2767e091408e0b452ecca6d70bce711c6', class: "button-text" }, h("slot", { key: '3a9a85455a00434c1112c6070c83469d15640e31' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'b9f5481cf0bb9fb56be6821127609eea72c788bc', class: "selector-icon svg-icon svg-expand-more" })))));
+        return (h(Host, { key: 'bfc5c1c1b69619258f1a15003de34a9884f5b09e', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '647328418473ec98db1fff54403a5915a8354668', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-expanded": this.isAriaExpanded !== undefined ? this.isAriaExpanded.toString() : undefined, "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.renderIcon(), !this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly") && (h("span", { key: '1f27aeed2c3e7f87d326c6da318f08be083c873e', class: "button-text" }, h("slot", { key: '6cce46f476c7d20aa3c48fa1e87edd495398d5c3' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: '305255c0423d2971932f3f8ccc2170075aa4dd53', class: "selector-icon svg-icon svg-expand-more" })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }
@@ -501,6 +511,40 @@ export class Button {
                 "attribute": "is-submit",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "ariaLabelPassthrough": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the button's `aria-label`. Takes priority over `label-for-identical-buttons` and over\nthe label automatically derived from `tooltip` for `icononly` and `navigational` buttons. Use\nthis prop instead of setting `aria-label` directly on `<wm-button>`."
+                },
+                "attribute": "aria-label-passthrough",
+                "reflect": false
+            },
+            "ariaExpandedPassthrough": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the button's `aria-expanded` attribute. Use on buttons that toggle a disclosure region,\nmenu, popover, or dialog. Use this prop instead of setting `aria-expanded` directly on\n`<wm-button>`."
+                },
+                "attribute": "aria-expanded-passthrough",
+                "reflect": false
             }
         };
     }

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: '223bcc417ef9cceaec684623a0bc81040406cf6c', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: 'e825957afa878743760074bf8a75afc943432249', 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: '7656e0938356e6d763e346270511ec3b4e323579', role: "list", class: "list-wrapper" }, h("slot", { key: 'f405d5f5e4b7c07bb039b43433439d533324d47e' })));
+        return (h("div", { key: '85c0c57f99ff0d6b1a3bee24b63724853f37f2b2', role: "list", class: "list-wrapper" }, h("slot", { key: 'a05f7e5ebb27e57a23713a7e029c0bdb18d89286' })));
     }
     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: 'cfd8924fd1cf44ed98e5df149922369a2eb5c022' }, h("dialog", { key: '5495313b42f63f975e4c7e45c4ee87bbe730f1c0', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'd3ae2614172a999c931af813fc4d41026ebe08d8', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: 'a5cac28eb96b2d912c9aabb68a927349b41048f4', class: "flyout-content" }, h("slot", { key: '9add65983e9c7beb596aab4b6560af007b78fb0a' })), this.renderFooter(), h("div", { key: '4d8c854f6ff110d805db90102f62a692899aaab4', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+        return (h(Host, { key: 'edef60d2bbbed2d457e1cc1b85aa3f6381084d5b' }, h("dialog", { key: 'be1c6a36c8bd59cdf45590402d24ba94271ada78', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '115b32676ca1215698eeaccac059a1730a65e16b', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '45a0bc9e0c3366d2e35409712cc4f02566659373', class: "flyout-content" }, h("slot", { key: '4613ce4d6cac4126bb70ab6b0301b68294f0244f' })), this.renderFooter(), h("div", { key: '3646f8d1604cfdbdeb0ce3872431473943978ecb', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
     }
     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: '546031078ab09fbd2d84fb125be712c8a07190fe', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'b7ac9fab6f07e86cad99545bb2ea8511ae8a43c4', class: "label-wrapper" }, h("label", { key: '2dc3d393741d0f72b0e8bc8051f63ac4670aa7fd', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: 'c6481dcee99b08d0dc5e019ad8fe5a0174206fdb', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'f7fc88562bd7c4f81f6a932e2ac044acbcdb2a1f', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '4bc330c3e6ccc46de90d3ab913e160d9dd365788', class: "inner-wrapper" }, h("div", { key: '663312589abf9ce9875c34219091ef2cfeb1690a', class: "text-after-wrapper" }, h("div", { key: '32a711b1680e6fe3d4cd004d0b9d12a497f6a4ba', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: 'ac28228f2c780da57e5b6102b4e2029c8e443d9c', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '95449d5e50f05a7ae28590561d1f2268adfe7b6f', 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: '3c8deef6390fb7aa50c57aa085cff047da8616d1', 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: '8a1fb20438d4919aeb94f194f3f132bf34d9824d', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '5dab1a773ca9223f828a431d9638874473e976ed', id: "info", class: "info" }, this.info)), h("div", { key: 'de5c031a373d6206ab355363ad1ae277d350c648', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '7337aead0388c1c097ee4a76259b121f7df1c86a', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'bce3b3c4252340f54f70ce0090ee9b43601338b3', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'eb078f570551eef008b151c6e109ab53bc2e6721', class: "label-wrapper" }, h("label", { key: '5e7890d8802f09854e353648f5e51852ec25f36a', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '29b03586a3302abb855c34740f44cb8331c433d5', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'c8fda1e852259ceeac78507cc751ff79f1573533', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '564f93368ac8a28d0bb91adc0d97e2e97d20cb21', class: "inner-wrapper" }, h("div", { key: 'ebc9be3527d6a264d4cb90bf59a51999aaf658ad', class: "text-after-wrapper" }, h("div", { key: '9f22cd67d191367ab015f1f7b18f40cd1af0296a', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '4113a8907719fb47d4cf2965c1c212d206ae1a3b', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: 'eed896950ced5aebfad101ec6559ebfd0e84e477', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '81a4a5fb4967223523b91e63775b8b4a30d951f4', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: '9c484c909d8f1097d7033576fa9f2d7b655ccf0c', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '8957eec57120ea823ecb2c0e2f6187ff7302a487', id: "info", class: "info" }, this.info)), h("div", { key: '1d9e53cc2f7c548ed8c1bafeb95da0a98eef07eb', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '88d7f2e6e22166d1f57e8f434436c065fb5aca89', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -887,37 +887,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host(:focus-visible) {
   outline: none;
 }

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

@@ -95,7 +95,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { key: '6838ceae008466f3bd6dee37624d14f3718a0c00', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'dc645e49294d5564575acd479dd34c20b9ca3fac', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '2abe28a30d6bdf5f8356544e46f0a65f76db9ba2', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: '3576abf0e512b2088c08a13a9b0da7be22fc4604', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '5ee18f1dc5bc3ce1498db2038d6e21ed9abeb951', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '1eb8c3e8db9dee82803e458dce83ea26314d454f', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
     }
     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: '6d94cacfebe8d62db1553445ba99f90d7f98c778', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'd3f1a4076529f0565ab89e4130cbb0ccfbeba9e4', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'd79f0b061536501e84f04d67067cab66df3c9451', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '00ff0c4fbe25049cc0ef30b83da98401b80c8323', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: 'e2696ae801fca202a56a0e82f4cad832e1d7e4cc', "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: 'd271a1ae0932d3d178fbc2963a022569304ce00c', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '9b9c1b5bd49ff76b6334e60bc5ada6b311913644', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '7741ec8fe680ddf5fb0aba02e894b2c3138727d1', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '35d73c0fe78849cf0ff55a33f94c69fa126844a9', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '6c322386f313e52a76fdafe0a7f56f480309b240', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
     }
     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: '85a826bb640f3bd52f2d4ea1ef024ae6aa541fae' }, h("div", { key: '78079591bba9785238ba879ca9509ae3e710b05e', class: "wm-wrapper" }, h("div", { key: '4edd001c26fbdd9c4a749cf5869891b3dc5d5b56' }, h("h2", { key: 'b532fcf221acc7955743b755c615cca9d4148e14', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '73ff408a89e266b5ff2c9a4c0ae9485b7b3c1c4f', class: "subtitle" }, this.subheading))), h("wm-button", { key: '1cc3ec26950a51c45587eec8f77bf4471157f11f', "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: 'b68657ee6be25bb1acf42a1f2ee3c3bf907b82ec' }, h("div", { key: '1cc9bff33ede81baf02895c05eda31be8902705e', class: "wm-wrapper" }, h("div", { key: '079e8e5ed17ace20380cbe720d22a58a125a52c1' }, h("h2", { key: '7d50e7cda2fff6ddb16c4cd98de0e8b5fe1df786', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '68e79ac15c7bfb59754694b5033e9a115fbed6b2', class: "subtitle" }, this.subheading))), h("wm-button", { key: '258bc2a94df987545ec32f46da2903f97dd8bf99', "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-header"; }
     static get originalStyleUrls() {