@watermarkinsights/ripple 5.3.0-9 → 5.3.0

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

@@ -351,12 +351,16 @@
 .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start {
   background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px), var(--range-background-hover);
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end) {
+.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:focus-visible, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:focus-visible {
+  outline: none;
+  border: none;
+}
+.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
   background-image: radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
   background-position: -5px center, center left 17px;
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end):hover {
+.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end):hover {
   background-image: radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
   background-position: center, -5px center, center left 17px;
   background-repeat: no-repeat;
@@ -394,6 +398,15 @@
   font-weight: 600;
   color: var(--wmcolor-datepicker-day-text-selected);
 }
+.popup-wrapper .day-view .date-grid .date-cell.range-start:focus-visible, .popup-wrapper .day-view .date-grid .date-cell.range-end:focus-visible {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: -2px;
+  border: none;
+  z-index: 11;
+}
+.popup-wrapper .day-view .date-grid .date-cell.range-start:focus-visible[aria-selected=true], .popup-wrapper .day-view .date-grid .date-cell.range-end:focus-visible[aria-selected=true] {
+  outline-offset: 2px;
+}
 .popup-wrapper .day-view .date-grid .date-cell.range-start {
   background-image: var(--range-start-svg);
   padding-inline-end: 2px;
@@ -470,26 +483,19 @@
   background-color: var(--wmcolor-datepicker-month-background-selected);
   color: var(--wmcolor-datepicker-month-text-selected);
 }
-.popup-wrapper .month.focused:focus-visible {
-  outline: 3px solid var(--wmcolor-interactive-focus);
-  outline-offset: -2px;
-  border: none;
-  z-index: 11;
-}
-.popup-wrapper .month.focused:focus-visible[aria-selected=true] {
-  outline-offset: 2px;
-}
-.popup-wrapper button:focus-visible,
-.popup-wrapper .title-box:focus-visible,
-.popup-wrapper .date-cell:focus-visible {
+.popup-wrapper button:focus-visible:not(.preview-start, .preview-end),
+.popup-wrapper .title-box:focus-visible:not(.preview-start, .preview-end),
+.popup-wrapper .month.focused:focus-visible:not(.preview-start, .preview-end),
+.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;
 }
-.popup-wrapper button:focus-visible[aria-selected=true],
-.popup-wrapper .title-box:focus-visible[aria-selected=true],
-.popup-wrapper .date-cell:focus-visible[aria-selected=true] {
+.popup-wrapper button:focus-visible:not(.preview-start, .preview-end)[aria-selected=true],
+.popup-wrapper .title-box:focus-visible:not(.preview-start, .preview-end)[aria-selected=true],
+.popup-wrapper .month.focused:focus-visible:not(.preview-start, .preview-end)[aria-selected=true],
+.popup-wrapper .date-cell:focus-visible:not(.preview-start, .preview-end)[aria-selected=true] {
   outline-offset: 2px;
 }
 

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

@@ -111,7 +111,7 @@ export class PrivCalendar {
             const monthOfDate = dateFind.month.asInt(date);
             const dayOfDate = dateFind.day.asInt(date);
             const yearOfDate = dateFind.year.asInt(date);
-            const isStartDate = this.startDate && this.startDate === date;
+            const isStartDate = eitherStart && eitherStart === date;
             let selected = isStartDate ? "true" : "false";
             const classesArr = ["date-cell"];
             const isFocused = date === this.focusDate;
@@ -119,7 +119,7 @@ export class PrivCalendar {
             if (isToday)
                 classesArr.push("today");
             if (this.calType === "range") {
-                const isEndDate = eitherStart && this.endDate && this.endDate === date && eitherStart < this.endDate;
+                const isEndDate = eitherStart && eitherEnd && eitherEnd === date && eitherStart < eitherEnd;
                 selected = isEndDate ? "true" : selected;
                 const isFirstOfMonth = dayOfDate === 1;
                 const isLastOfMonth = dayOfDate === getMonthLength(monthOfDate, yearOfDate);
@@ -133,7 +133,7 @@ export class PrivCalendar {
                 if (isLastOfMonth)
                     classesArr.push("last-of-month");
                 if (isStartDate) {
-                    if (isInRangePreview && !isEndDate && this.hoverDate && this.hoverDate < this.startDate) {
+                    if (isInRangePreview && !isEndDate && this.hoverDate && this.hoverDate < eitherStart) {
                         // invert the arrow direction if user mouses over a prior date
                         classesArr.push("range-end");
                     }
@@ -360,42 +360,42 @@ export class PrivCalendar {
     }
     isInRange(date) {
         if (this.otherCalEl) {
-            const _startDate = this.startDate || this.otherCalEl.startDate;
-            const _endDate = this.endDate || this.otherCalEl.endDate;
-            if (_startDate && _endDate) {
+            const eitherStart = this.startDate || this.otherCalEl.startDate;
+            const eitherEnd = this.endDate || this.otherCalEl.endDate;
+            if (eitherStart && eitherEnd) {
                 // if both dates exist the range is shown
-                return _startDate <= date && date <= _endDate;
+                return eitherStart <= date && date <= eitherEnd;
             }
         }
         return false;
     }
     isInRangePreview(date) {
         if (this.otherCalEl) {
-            const _startDate = this.startDate || this.otherCalEl.startDate;
-            const _endDate = this.endDate || this.otherCalEl.endDate;
+            const eitherStart = this.startDate || this.otherCalEl.startDate;
+            const eitherEnd = this.endDate || this.otherCalEl.endDate;
             // no preview if there's an existing range
-            if (_startDate && _endDate)
+            if (eitherStart && eitherEnd)
                 return false;
-            if (_startDate && this.hoverDate) {
+            if (eitherStart && this.hoverDate) {
                 // if only startDate exists, the hovered date functions as the other end of the range
-                if (this.hoverDate > _startDate) {
-                    return _startDate <= date && date <= this.hoverDate;
+                if (this.hoverDate > eitherStart) {
+                    return eitherStart <= date && date <= this.hoverDate;
                 }
-                else if (this.hoverDate < _startDate) {
+                else if (this.hoverDate < eitherStart) {
                     // user is mousing over a date prior to the start date
                     // start date considered as end of range
-                    return this.hoverDate <= date && date <= _startDate;
+                    return this.hoverDate <= date && date <= eitherStart;
                 } // if neither < or > then it's the same date and should return false
             }
-            else if (_endDate && this.hoverDate) {
+            else if (eitherEnd && this.hoverDate) {
                 // if only endDate exists, the hovered date functions as the other end of the range
-                if (this.hoverDate < _endDate) {
-                    return this.hoverDate <= date && date <= _endDate;
+                if (this.hoverDate < eitherEnd) {
+                    return this.hoverDate <= date && date <= eitherEnd;
                 }
-                else if (this.hoverDate > _endDate) {
+                else if (this.hoverDate > eitherEnd) {
                     // user is mousing over a date later than the end date
                     // end date considered as beggining of range
-                    return _endDate <= date && date <= this.hoverDate;
+                    return eitherEnd <= date && date <= this.hoverDate;
                 }
             }
         }
@@ -540,11 +540,11 @@ export class PrivCalendar {
             }), class: "header-btn arw-btn" }, h("span", { class: "mdi" }, "\uF142"))), 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: 'e1269b7069d6b870cd9e873a046b24ddff6ac6cb', onMouseOut: (ev) => {
+        return (h(Host, { key: '14af9cecf405ac061fd2345488fda226bb068a40', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { key: '3cf3a1b225b865ae1f02367ac318fb29b70a3acd', id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
+            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { key: 'dd1583339054b245d006f4ea3caa7efab5f31e4a', id: "application", 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

@@ -3,7 +3,7 @@ import { intl, dateFind, toBool, handleDisabledAttribute, getContextMeasurements
 export class DateRange {
     constructor() {
         this.openUp = false;
-        this.calWidth = 689; // 673 + 16px of room
+        this.calWidth = 681; // 673 + 8px of room
         this.popupClicked = false;
         this.toggleButtonClicked = false;
         this.formats = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
@@ -68,11 +68,10 @@ export class DateRange {
         }
         return [startFocusDate, endFocusDate];
     }
+    // same month of the same year
     isSameMonth(date1, date2) {
         if (date1 && date2) {
-            let month1 = parseInt(date1.split("-")[1]);
-            let month2 = parseInt(date2.split("-")[1]);
-            return month1 == month2;
+            return date1.slice(0, -3) === date2.slice(0, -3);
         }
         else {
             return false;
@@ -138,11 +137,11 @@ export class DateRange {
         // display stuff
         this.openUp = shouldOpenUp(this.el, this.popupEl.clientHeight, this.labelEl.clientHeight);
         const { spaceLeft, spaceRight } = getContextMeasurements(this.el);
-        if (spaceRight >= this.popupEl.clientWidth - this.el.clientWidth) {
+        if (spaceRight >= this.calWidth - this.el.clientWidth) {
             this.popupEl.style.left = "0";
             this.popupEl.style.right = "auto";
         }
-        else if (spaceLeft >= this.popupEl.clientWidth - this.el.clientWidth) {
+        else if (spaceLeft >= this.calWidth - this.el.clientWidth) {
             this.popupEl.style.right = "0";
             this.popupEl.style.left = "auto";
         }
@@ -430,19 +429,19 @@ export class DateRange {
         }
     }
     render() {
-        return (h(Host, { key: 'c8ee78e09b05449c681fea2ea5a064b5eeff22e5', "aria-busy": "false" }, h("div", { key: '2588083ea551e01c5a1ab4906429a859a04fc03f', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '0573dfe24615b350cccffdbf9ef0358c559e5dab', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: '868cfed611d9a1cc3630ee906fb12f7be8b9d044', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: 'cbb42aadae04f6f5ab50b62badcec2a409949b9d', 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: '74c4ea8490034f91a946a1211f3040a7c6de0f4b', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: 'efaede127efa467ce29d25cc4b397ac026ff03b2', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: 'aebf7fde248cbf2383cbe94ed0c91359eef0d225', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: 'd4868b1308157bcc9093d1eb175d0f864b77f544', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '800611750297f6e069ec856f64d93e13ea87bc53', 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: 'e3a9711e8567dd53d0794d552b7f84d40a4d6026', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '4832ed27ee1778ae660ed6f8e69f47ad23642779', 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: '42b8f7fda08a52dc06c6a8cbabc20d17fa58dd59', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: 'd2055576c63588cca32bf40a0d3809b948ffbf1a', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: '3d3b757175a7787a97c398bcf61b67d9c8e69191', class: "calendar", title: intl.formatMessage({
+        return (h(Host, { key: 'e8d0c88743871493bcaeec068d48ed08f62dbf8c', "aria-busy": "false" }, h("div", { key: '012aa6b6f18636b2a55d4ecc6b7e2bd307b04fd0', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: 'f68a445295c7814e5fb115173be6eded33abefc5', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: 'fd65dbfd86ac7f806113326ce94f49c6bae21691', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: 'f51549404052afb0dd1544357ed2f944483c3af7', 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: 'd282d9ba284721c504b317acb8ce37e2de076c8f', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: 'cbaf22798e7cf3acaf94a4f67177afa7197ca77f', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: 'fc357775e90200781de3e686eba882c9a66fdb00', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '5783a070decbfb54d88faff089735ca423d74ef6', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '7f870e1939e080424fb4ebbf0f01f85f2d4a307b', 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: 'f5e41de3464ae45a9d8566d8b02e9d917ced63c2', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '65d107a3e0133ee4fe9bbfcbd26c36c75959b026', 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: 'aee8fbed7434ab65b2f3a2bb8a7e227691f722ae', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: '42575a1737f65a4d01e12e6403175afad1f39fa0', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: '7267cb592ea8959f1823b6ed6c2656213bf3ba76', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })))), this.renderCalendars()), h("div", { key: '318b774e9f84d6ed89d0d34fe2b9ebd578627337' }, h("div", { key: '61c9df900ecbcb149de590e09002c6fd1e3ffeb2', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '9588e46e1c698a7c0a047acc0e65676f6f9799e9', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })))), this.renderCalendars()), h("div", { key: 'b4ed550eb26261f2a140998229dc902e72eb8642' }, h("div", { key: '98a4a27732bd274be45d451487f1e11ccced0008', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'f9749b90e500acf87127d4310f9312023f6982dc', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '7432ef70a4f6992ab9be5a873095593aec574775', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: 'bc2e1261fed2cf3a3a294d19354eb9bf4c627e46', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        }))), h("div", { key: 'f0e89cde22b914445e0279739c035a262cb466ca', id: "error", class: "error" }, this.errorMessage), h("div", { key: 'aa811ebc7506aadd8a9b494f7c1e5b83c07327b3', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+        }))), h("div", { key: 'f82463f10d1a9fb7a4474149c65d535bf4e8b963', id: "error", class: "error" }, this.errorMessage), h("div", { key: '7500d9fd2ebb57e01629e4abc8913c5f3766ed60', 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/wm-snackbar/wm-snackbar.css

@@ -38,7 +38,7 @@
   --wmcolor-snackbar-text: var(--wmcolor-text-ondark);
   position: fixed;
   bottom: 0;
-  left: 1.25rem;
+  left: 0;
   right: 1.25rem;
   z-index: 2001;
 }
@@ -51,9 +51,9 @@
   max-width: 35.5rem;
   max-height: 17.5rem;
   overflow: auto;
-  padding: 0.25rem 0.625rem 1.875rem;
+  padding: 1.875rem;
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   gap: 1.25rem;
 }
 :host .wm-snack-wrapper {
@@ -101,6 +101,21 @@
     transform: scale(1);
   }
 }
+:host .wm-snack-wrapper .wm-snackbar.shrink {
+  animation: shrink 0.25s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in-out;
+}
+@keyframes shrink {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
 :host .wm-snack-wrapper .wm-snackbar .link {
   letter-spacing: 0;
   text-transform: none;
@@ -145,7 +160,7 @@
 :host .wm-snack-wrapper .wm-snackbar.active:not(button) {
   opacity: 1;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -162,31 +177,31 @@
   position: relative;
   padding: 0;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   width: 100%;
   align-items: center;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .msg {
   display: block;
   flex: 0 0 0;
   min-width: fit-content;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg.long {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .msg.long {
   min-width: 216px;
   flex: 1 0 0;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .link {
   display: flex;
   flex: 0 0 auto;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link span {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .link span {
   display: block;
   white-space: nowrap;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
@@ -207,7 +222,7 @@
   text-align: center;
   letter-spacing: normal;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:before {
   display: inline-block;
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
@@ -218,18 +233,18 @@
   content: "\f156";
   font-size: 1.12rem;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:hover {
   background-color: var(--wmcolor-snackbar-close-background-hover);
   color: var(--wmcolor-snackbar-close-icon-hover);
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus {
   outline: none;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack::-moz-focus-inner {
   border: 0;
   outline: none;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:active {
   -ms-transform: scale(0.9, 0.9);
   -webkit-transform: scale(0.9, 0.9);
   -moz-transform: scale(0.9, 0.9);
@@ -264,11 +279,11 @@
   left: 0;
 }
 
-.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) {
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus:not(:active) {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 0;
 }
-.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) > .tooltip {
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus:not(:active) > .tooltip {
   clip: auto;
   width: auto;
   height: auto;
@@ -281,13 +296,13 @@
   transform: translateX(-50%);
 }
 @media screen and (min-width: 48rem) {
-  .user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) > .tooltip {
+  .user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus:not(:active) > .tooltip {
     top: 2.0625rem;
     left: auto;
   }
 }
 
-.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active) {
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .link:focus:not(:active) {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
 }

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

@@ -25,11 +25,13 @@ export class Snackbar {
     updateSnacks(newValue) {
         const prevParsedNotifications = [...this.parsedNotifications];
         this.parsedNotifications = [...JSON.parse(newValue)];
-        this.refreshUpdatedNotifications(prevParsedNotifications);
+        this.resetUpdatedNotifications(prevParsedNotifications);
         if (prevParsedNotifications.length < this.parsedNotifications.length) {
             const latestNotification = this.parsedNotifications[0];
-            const newTimer = window.setTimeout(() => this.snackExpired(latestNotification.id), 6000);
-            this.timers = Object.assign({ [latestNotification.id]: newTimer }, this.timers);
+            if (!latestNotification.link) {
+                const newTimer = window.setTimeout(() => this.snackExpired(latestNotification.id), 6000);
+                this.timers = Object.assign({ [latestNotification.id]: newTimer }, this.timers);
+            }
             // don't announce link if user is tabbing because link is focused after announcement
             this.announce(`${latestNotification.message} ${this.isTabbing ? "" : latestNotification.link}`);
             if (this.isTabbing && latestNotification.link) {
@@ -44,7 +46,19 @@ export class Snackbar {
         }
         this.setMinWidths();
     }
-    refreshUpdatedNotifications(prevNotifications) {
+    setMinWidths() {
+        // wait for render to get updated scrollWidth
+        requestAnimationFrame(() => {
+            const msgEls = this.el.shadowRoot.querySelectorAll(".msg");
+            msgEls.forEach((msgEl) => {
+                msgEl.classList.remove("long");
+                if (msgEl.scrollWidth > 216) {
+                    msgEl.classList.add("long");
+                }
+            });
+        });
+    }
+    resetUpdatedNotifications(prevNotifications) {
         let updatedNotifications = [];
         prevNotifications.forEach((prevNotification) => {
             this.parsedNotifications.forEach((newNotification) => {
@@ -60,8 +74,10 @@ export class Snackbar {
                 window.requestAnimationFrame(() => notifEl.classList.add("grow"));
             }
             this.stopTimer(updatedNotification);
-            const newTimer = window.setTimeout(() => this.snackExpired(updatedNotification.id), 6000);
-            this.timers = Object.assign({ [updatedNotification.id]: newTimer }, this.timers);
+            if (!updatedNotification.link) {
+                const newTimer = window.setTimeout(() => this.snackExpired(updatedNotification.id), 6000);
+                this.timers = Object.assign({ [updatedNotification.id]: newTimer }, this.timers);
+            }
             this.announce(`${updatedNotification.message} ${this.isTabbing ? "" : updatedNotification.link}`);
         });
     }
@@ -93,12 +109,17 @@ export class Snackbar {
     endSnack(notification) {
         //App listens for wmSnackbarSnackFinished event and deletes the emitted notification.
         this.stopTimer(notification);
-        this.wmSnackbarSnackFinished.emit({
-            id: notification.id,
-            message: notification.message,
-            link: notification.link,
-            newWindow: notification.newWindow,
-        });
+        const notifEl = this.el.shadowRoot.querySelector(`#snack-${notification.id}`);
+        notifEl.classList.add("shrink");
+        setTimeout(() => {
+            // wait for animation to complete, then emit event for removal
+            this.wmSnackbarSnackFinished.emit({
+                id: notification.id,
+                message: notification.message,
+                link: notification.link,
+                newWindow: notification.newWindow,
+            });
+        }, 250);
     }
     snackLinkClicked(notification) {
         //App listens for wmSnackbarActionTriggered event, deletes emitted notification, and takes over focus.
@@ -117,18 +138,6 @@ export class Snackbar {
             delete this.timers[notification.id];
         }
     }
-    setMinWidths() {
-        // wait for render to get updated scrollWidth
-        requestAnimationFrame(() => {
-            const msgEls = this.el.shadowRoot.querySelectorAll(".msg");
-            msgEls.forEach((msgEl) => {
-                msgEl.classList.remove("long");
-                if (msgEl.scrollWidth > 216) {
-                    msgEl.classList.add("long");
-                }
-            });
-        });
-    }
     announce(message) {
         if (this.liveRegionEl.textContent === message) {
             message += "\u00A0";
@@ -136,15 +145,15 @@ export class Snackbar {
         this.announcement = message;
     }
     renderSnackbars() {
-        return [...this.parsedNotifications].reverse().map((notification) => (h("div", { class: "wm-snack-wrapper" }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "wm-snackbarmsg" }, h("div", { class: "msgtext" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
+        return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper", key: `snack-${notification.id}` }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "content-wrapper" }, h("div", { class: "msg-wrapper" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
                 this.snackLinkClicked(notification);
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link)))), h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() })), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: '67f36569152cc7f7df8e17a48b72737cf06b2249' }, h("div", { key: '2646611246f9ab87624bb1ad2bad217c364d89e7', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: '55f568def0428fb9d6fe5864415e2adafadc06c0' }, h("div", { key: '388c19a486841d23408bcf24340a07238c834cc7', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
-            } }, this.renderSnackbars()), h("div", { key: '26284c415d2be1b8e944d7c2830c8eada5030fe3', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, this.renderSnackbars()), h("div", { key: '512e8c965a31cb73e95eb7a09a4ac6a9d50bc932', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/esm/{app-globals-17afed20.js → app-globals-4021eaa9.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.3.0-9";
+const version = "5.3.0";
 
 // 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-17afed20.js';
+import { g as globalScripts } from './app-globals-4021eaa9.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;