@watermarkinsights/ripple 5.21.0-alpha.1 → 5.21.0-alpha.3

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

@@ -1277,13 +1277,16 @@
   flex-basis: 42px;
 }
 .popup-wrapper .month-view .months {
-  border-top: 2px solid;
-  border-top-color: var(--wmcolor-datepicker-month-border);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   flex-wrap: wrap;
+  gap: 0.125rem;
+  background-color: var(--wmcolor-datepicker-month-border);
+  border-top: 0.125rem solid;
+  border-bottom: 0.125rem solid;
+  border-color: transparent;
 }
 .popup-wrapper .month-view .month-row {
   display: -webkit-box;
@@ -1295,8 +1298,7 @@
   -webkit-justify-content: space-between;
   justify-content: space-between;
   width: 100%;
-  border-bottom: 2px solid;
-  border-bottom-color: var(--wmcolor-datepicker-month-border);
+  gap: 0.125rem;
 }
 .popup-wrapper .month-view .month {
   border: none;
@@ -1309,12 +1311,7 @@
   font-weight: 500;
   color: var(--wmcolor-datepicker-month-text);
 }
-.popup-wrapper .month-view .month:not(:last-child) {
-  border-right: 2px solid;
-  border-right-color: var(--wmcolor-datepicker-month-border);
-}
 .popup-wrapper .month-view .month:hover {
-  border-right-color: transparent;
   background-color: var(--wmcolor-datepicker-month-background-hover);
 }
 .popup-wrapper .month-view .month:active, .popup-wrapper .month-view .month.selected {
@@ -1326,8 +1323,8 @@
 .popup-wrapper .date-cell:focus-visible:not(.preview-start, .preview-end) {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: -2px;
-  border: none;
   z-index: 11;
+  box-shadow: inset 0 0 0 4px #ffffff;
 }
 .popup-wrapper button:focus-visible:not(.preview-start, .preview-end)[aria-selected=true],
 .popup-wrapper .month.focused:focus-visible:not(.preview-start, .preview-end)[aria-selected=true],

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

@@ -176,7 +176,7 @@ export class PrivCalendar {
                     classesArr.push("preview-end");
             }
             const classes = classesArr.join(" ");
-            return (h("div", { role: "gridcell", id: `cell-${date}`, class: classes, "aria-selected": selected, "aria-label": `${isToday
+            return (h("div", { role: "gridcell", id: `cell-${date}-${this.uid}`, class: classes, "aria-selected": selected, "aria-label": `${isToday
                     ? `${intl.formatMessage({
                         id: "date.today",
                         defaultMessage: "today",
@@ -237,10 +237,10 @@ export class PrivCalendar {
                 newCell.tabIndex = 0;
         }
         else {
-            const oldMonthEl = this.el.querySelector(`#month-${dateFind.month.asInt(oldVal)}`);
+            const oldMonthEl = this.el.querySelector(`#month-${dateFind.month.asInt(oldVal)}-${this.uid}`);
             if (oldMonthEl)
                 oldMonthEl.tabIndex = -1;
-            const newMonthEl = this.el.querySelector(`#month-${dateFind.month.asInt(newVal)}`);
+            const newMonthEl = this.el.querySelector(`#month-${dateFind.month.asInt(newVal)}-${this.uid}`);
             if (newMonthEl)
                 newMonthEl.tabIndex = 0;
             //monthToFocus.focus();
@@ -447,7 +447,7 @@ export class PrivCalendar {
         return [...cellsBefore, ...dates, ...cellsAfter];
     }
     getCell(date) {
-        return this.el.querySelector(`#cell-${date}`);
+        return this.el.querySelector(`#cell-${date}-${this.uid}`);
     }
     async focusFirstFocusable() {
         this.prevBtnEl.focus();
@@ -484,7 +484,7 @@ export class PrivCalendar {
         this.el.querySelector("#wm-container").setAttribute("aria-busy", state);
     }
     renderMonth(month, index) {
-        return (h("button", { id: `month-${index + 1}`, 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: () => {
+        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);
                 this.view = "day";
                 this.focusCell();
@@ -500,14 +500,14 @@ export class PrivCalendar {
                 else if (this.view == "month") {
                     this._focus.year.decrease(1);
                 }
-            }, class: "header-btn arw-btn", ref: (el) => (this.prevBtnEl = el), "aria-label": previousButtonLabel, onMouseOver: () => showTooltip("right", this.prevBtnEl, previousButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("right", this.prevBtnEl, previousButtonLabel), onBlur: () => hideTooltip() }, h("span", { class: "svg-icon svg-previous" })), h("span", { class: "header-title" }, calendar_months[this._focus.month.asInt() - 1], " ", this._focus.year.asString()), this.renderToggleButton(), h("button", { onClick: () => {
+            }, 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);
                 }
                 else if (this.view == "month") {
                     this._focus.year.increase(1);
                 }
-            }, "aria-label": nextButtonLabel, class: "header-btn arw-btn", ref: (el) => (this.nextBtnEl = el), onMouseOver: () => showTooltip("right", this.nextBtnEl, nextButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("right", this.nextBtnEl, nextButtonLabel), onBlur: () => hideTooltip() }, h("span", { class: "svg-icon svg-next" }))));
+            }, "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() {
         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({
@@ -567,11 +567,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: '5ac1252b33ef3a43fecf9c3221938389cf1d3681', onMouseOut: (ev) => {
+        return (h(Host, { key: '3787997230f2db89ba8e051b757d986a1b41f51d', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": "application" }, h("div", { key: 'e92179ff0e073bb0713728d6781ac4d040543169', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: 'c16391c078271ae7fef7fdb55ac268b746d06124', id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
+            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: 'c82e165ff59c7e1fb5f955410c8db3d7c604c285', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: '2e5e1276ed683f6893bec62dd461cc250b61a7b8', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions)));
     }
     static get is() { return "priv-calendar"; }
     static get originalStyleUrls() {

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

@@ -176,6 +176,10 @@ export class DateRange {
                 }
             }
         }
+        window.setTimeout(() => {
+            // ensure focused element is visible if popup opens below the fold
+            this.startCalEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }, 250);
     }
     handleFocus() {
         this.wrapperEl.classList.add("focus");
@@ -440,23 +444,23 @@ export class DateRange {
         }
     }
     render() {
-        return (h(Host, { key: 'e15e7d0122385b7038ab66267c6bd97a0484403e', "aria-busy": "false" }, h("div", { key: '1074c893c309a965181575e65ddab158e7b34661', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '318998d9218b262a13c2842a03c8e493f889b327', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: 'e2df44669d920d0fa287d3020a0ad29485cd03d7', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '34bdc1d6844cfca7b50c79c7dd2f7115889665a2', ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: '50d76500d1ddd31478ec3a1fb737fca8a2957e24', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: 'e7d8fcb4399881832d7a37042aee7a820512e2f0', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '86b127ee4ecc42fca26521bf19777553c55bdc79', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '14ccfb0e9fee57f645112e1925b47e6697852f76', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '4fbee8adcdd045ff543c530dcce96b8e1c812561', 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: '8532a1ee3ab5ed0eb678e0626d15ed59a30b159d', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '5083b4873f884f26221b756f1ab2b39f359aecdd', 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: '4c6fefec380fae6c6964e10bc2e6eeae1dbb560a', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: 'dd11cd572ddf6ce4c44af9bdffc6a129174ede8b', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
+        return (h(Host, { key: '3ef7ed01702cd08cb88153b157c05870f357b83d', "aria-busy": "false" }, h("div", { key: 'a26ffe7e83d668c81c361a2baf5111d338074f4f', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '5110a41705760e61460ae63222d33983f50cbbcc', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: 'cd73ac4cd1156a08f8433cd5172c308e73f468e5', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '7fa4734f43aecd6a5cb73d93c1162fd5783ad2ac', ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: 'be4ad3de3b7b1fa8b1f20ae86502e661d5561f9c', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '274e44b68f05bdc28ab25836ee5162876ba2dc37', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '439389958522c3245d79cf03ad3f8abf621adfdd', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '20a1a75cfc195d9503d7f079d56435f3ac7a3ce2', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: 'c850bd46e4835f8878e2c7d39fe930e38917671c', 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: '4cb1a5498a6378b08915563e628f45367892fe4d', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: 'a321356204252e7c57dff7b3b392f44d6d0b9cf3', 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: 'f6be34dda1f360b99a3708545a151c004b479635', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: '5af514ad9b7fd30f5e83ebe83fd35890fdb53ee5', disabled: this.disabled, onClick: this.togglePopup.bind(this), "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" }, h("span", { key: '4539c027127c567bfd09039e63975e849dd96fae', class: "svg-icon svg-date" }), h("span", { key: '0fcd41cd2415908975cc8b8f7cebd4bd47f01d3e', class: "calendar", title: intl.formatMessage({
+            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: 'ed9caf670fd667a9959363834c1accebfb0b82cb', class: "svg-icon svg-date" }), h("span", { key: '10bc0a7086071adad12d6cbe5c5c92a82260a619', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })))), this.renderCalendars()), h("div", { key: '96d2b3a31aafb89abdbd80e58ecc0efab1a582c4' }, h("div", { key: '75a3aca3bd7ef18924b81f47ab017eef108c10df', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'f7af6d97177bdf7cef6516950eee49e242826e06', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })))), this.renderCalendars()), h("div", { key: '6bcacc7025eef282cacfdc9c8ba44c88d01dfb3c' }, h("div", { key: '45942b8f722908db886d39fe23c7ae2e9c39eca5', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'f3613e50ea33148b7027b2fbb9147f8eee2c98a5', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: 'aab9385f49a28dc1306e59451234a9a7368aca4d', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: 'ca798dd858d872a87852078781058699e3ebc5f6', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        }))), h("div", { key: '21c76d46ebc51dbfd8b2658512f7e6f7ef4f4ae7', id: "error", class: "error" }, this.errorMessage), h("div", { key: '0312341364d0cf20c63be7f38724b64b13ffd424', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+        }))), h("div", { key: 'e77548bc61a4d4c9bf0b0985694aa298383caf3e', id: "error", class: "error" }, this.errorMessage), h("div", { key: 'ec8b80ac48c0c65cfa7be019dc242e8fa7901332', 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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { intl, toBool, handleDisabledAttribute, hasRoomRight, shouldOpenUp, dateToISO, showTooltip, hideTooltip, findAllScrollableParents, debounce } from "../../global/functions";
+import { intl, toBool, handleDisabledAttribute, hasRoomRight, shouldOpenUp, dateToISO, showTooltip, hideTooltip, findAllScrollableParents, debounce, } from "../../global/functions";
 export class DatePicker {
     constructor() {
         this.openUp = false;
@@ -95,6 +95,10 @@ export class DatePicker {
         this.calEl.focusDate = this.calendarDate;
         this.calEl.startDate = this.calendarDate;
         this.calEl.focusCell();
+        window.setTimeout(() => {
+            // ensure focused element is visible if popup opens below the fold
+            this.calEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }, 250);
     }
     handleInput(ev) {
         // keep component's value in sync with input's value
@@ -240,23 +244,23 @@ export class DatePicker {
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (h(Host, { key: '3c8895164cdab98f5ecbf5bfdbaad38d37fe9a62', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '9ea9a8570ecc5fcdc0ebf6adb6a266199c809ee7', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '6375fe774de6a4caf93a7ba25745c02b0ec0ba57', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: 'b83dc110a272f295447cd0d48e2b9147d53fbb8d', 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: '6518e85a7c9ac42309cdd47b74d6bfa8014b7540', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: 'd38f3a0672cabd82b946c2b28c56130983279b18' }, h("div", { key: 'c80b4383962d36bb2a4740886b9044095ba8beaa', class: "single-wrapper input" }, h("input", { key: '52c6aed0fcf11c86855876156c5391667337c3f4', 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: '85b5cf801ba5db08d0e3196b037aa2c1453365cc', ref: (el) => (this.buttonContainerEl = el), class: "container", id: "wm-container" }, h("button", { key: '33f8a6090fe54b4ef47aad312045582a1ae58ed8', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
+        return (h(Host, { key: 'e708a7b702e16ab896628a40da86ab055f470239', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '95a725cba2a6584498d6b4bdd06528b6f503b0e6', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'd9c06fd00f24195c975098879221347aa3d15bf4', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: 'a0415f77ff7b905e046b683c0f812207b33cd9b5', 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: 'f9f5b2dffd291ad9ef8efa549cbe188cdd91ab46', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '5de094b2394f9517aafbf2a354e08b8d28812d54' }, h("div", { key: '2db3f838409242080ca11817e6e7edd74cd63f5f', class: "single-wrapper input" }, h("input", { key: 'cf2d4bee304b2c8fe8f0ed17265d94a8e0c7f750', 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: '95a4200f59d4e590440ca26e1778a07e65cad511', ref: (el) => (this.buttonContainerEl = el), class: "container", id: "wm-container" }, h("button", { key: 'fef2ff2c96d6f4acabaeeb41f777268ccbbdafbb', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
                 id: "date.selectDate",
                 defaultMessage: "Select date",
                 description: "Button text for screen readers.",
-            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: '491cb3be198abee09df7ec1fe34bdda86ddf6707', class: "svg-icon svg-date" }), h("span", { key: 'b2deeff0a5822ca585fdc3e3ed9ad7d5f7996bcc', class: "calendar", title: intl.formatMessage({
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: '8840e4a6e51836b8202e886c996c40450dff54f4', class: "svg-icon svg-date" }), h("span", { key: 'ae9853231c111e69b1fb5bc2da1ad1338a8ddff6', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })), h("div", { key: 'c7d1d49397c09c8f55bcb5a5a8fcf29736f6acd0', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { key: '958d2a839b22ccfbc8eee7d09c463444214446f3', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '404503eaa6347dc47abb6aec0b283ed069d7cfaf', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '20dfe5daec72956d0257efa8ed7eeb0aded77e61', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '02b0a0ce577a19de3388b1d0e0d31701a1c20d69', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'e037e76fb31b373ac5001fcd0665e10971e41ed4', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })), h("div", { key: '7fa85ff7fb7c8c0ef74792afbfa4963c748c6faf', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { key: 'fb71ae8319b5867b521ff45b983c8dd92368a5ff', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: 'b5d831730977c2f23013b5173bfe4819e870c7fd', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: 'e988546871ed5520f8ba1c175b144afef8e8a3da', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: 'ed118033c782ffdf40f2cec2d014215bbf8b7f8f', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '5ccca72007a577bf6c7652dcce65c38c7d6142c6', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: 'f95a9f2c09f9338484bfdc61ca1719ce1d0a0bc5', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: 'cd0f6ae54b21dff099969f83699670e324919d45', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), h("div", { key: '70885563a2af8a58e00927c6a8b9d505013c6b12', id: "error", class: "error" }, this.errorMessage), h("div", { key: '9679d419ba88cbed56fadc161ee2c18a1d733b81', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), h("div", { key: '66b8fe166a802681107b0546ec615ffaa4d6e280', id: "error", class: "error" }, this.errorMessage), h("div", { key: '71fdd1819720a5b6f91d25c37f2b1011ead21c3d', 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/wm-nested-select/wm-nested-select.css

@@ -922,7 +922,7 @@
   white-space: normal;
   margin-bottom: 0;
 }
-.wrapper.label-none label {
+.wrapper.label-none .label-wrapper label {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;

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

@@ -938,7 +938,7 @@
   white-space: normal;
   margin-bottom: 0;
 }
-.wrapper.label-none label {
+.wrapper.label-none .label-wrapper label {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;

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

@@ -917,7 +917,7 @@
   white-space: normal;
   margin-bottom: 0;
 }
-:host .wrapper.label-none label {
+:host .wrapper.label-none .label-wrapper label {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;

package/dist/collection/components/wm-tag-input/wm-tag-input.css

@@ -938,7 +938,7 @@
   white-space: normal;
   margin-bottom: 0;
 }
-:host .wrapper.label-none label {
+:host .wrapper.label-none .label-wrapper label {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;

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

@@ -912,7 +912,7 @@
   white-space: normal;
   margin-bottom: 0;
 }
-:host .wrapper.label-none label {
+:host .wrapper.label-none .label-wrapper label {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;

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

@@ -917,7 +917,7 @@
   white-space: normal;
   margin-bottom: 0;
 }
-:host .wrapper.label-none label {
+:host .wrapper.label-none .label-wrapper label {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;

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

@@ -1682,7 +1682,7 @@
   white-space: normal;
   margin-bottom: 0;
 }
-.wrapper.label-none label {
+.wrapper.label-none .label-wrapper label {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;

package/dist/esm/{app-globals-1505b33c.js → app-globals-3da2b209.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.21.0-alpha.1";
+const version = "5.21.0-alpha.3";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-1505b33c.js';
+import { g as globalScripts } from './app-globals-3da2b209.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;