@watermarkinsights/ripple 5.3.0-1 → 5.3.0-3

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

@@ -4,8 +4,7 @@ export class DatePicker {
     constructor() {
         this.openUp = false;
         this.popupClicked = false;
-        this.buttonClicked = false;
-        this.isExpanded = false;
+        this.toggleButtonClicked = false;
         this.value = "";
         this.disabled = false;
         this.dateFormat = "mm/dd/yyyy";
@@ -14,6 +13,7 @@ export class DatePicker {
         this.label = "";
         this.requiredField = false;
         this.preselected = undefined;
+        this.isExpanded = false;
     }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
@@ -46,10 +46,12 @@ export class DatePicker {
     }
     togglePopup() {
         this.isExpanded ? this.closePopup() : this.openPopup();
-        this.buttonClicked = true;
+        this.toggleButtonClicked = true;
     }
     closePopup(returnFocus = false) {
         this.isExpanded = false;
+        this.calEl.view = "day";
+        this.calEl.view = "day";
         this.popupEl.classList.remove("open");
         window.setTimeout(() => {
             //not using display none in order to get measurements of the popup while hidden
@@ -105,11 +107,11 @@ export class DatePicker {
         }
     }
     blurHandler() {
-        if (!this.popupClicked && !this.buttonClicked && this.isExpanded) {
+        if (!this.popupClicked && !this.toggleButtonClicked && this.isExpanded) {
             this.closePopup();
         }
         this.popupClicked = false;
-        this.buttonClicked = false;
+        this.toggleButtonClicked = false;
     }
     // for cases where the user clicks or uses a shortcut to leave the document
     handleBlurOnWindow() {
@@ -123,7 +125,7 @@ export class DatePicker {
             "-" +
             dateElement.getAttribute("data-month") +
             "-" +
-            dateElement.textContent;
+            dateElement.textContent.padStart(2, "0");
         this.wmDatepickerDateSelected.emit({ date: isoDate });
         // Create events to trigger onInput and onChange on host element, to get the updated value
         // Because there are more ways to input than just typing, we are firing this event upon cellTriggered
@@ -131,6 +133,7 @@ export class DatePicker {
         this.el.dispatchEvent(inputEvent);
         const changeEvent = new CustomEvent("change");
         this.el.dispatchEvent(changeEvent);
+        this.closePopup(true);
     }
     async reformatDate(inputFormat, outputFormat, date) {
         return this.reformatDateInternal(inputFormat, outputFormat, date);
@@ -211,19 +214,19 @@ export class DatePicker {
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (h(Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "single-wrapper input" }, h("input", { 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", { class: "container", id: "wm-container" }, h("button", { 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", { class: "calendar", title: intl.formatMessage({
+        return (h(Host, { key: 'c5739ead4cef950a636aa152ff9caa26c0af6ba7', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '87e16bb8f5ad49a6972a1cbe2c4c853d7d4959c1', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '42e447e58668e5a88edd7437047bce54a704e5f9', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: 'c803538365fbfd82aff60cb5711b640645018d04', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { key: 'fecdbe9851bead9d751458b11af3835fd693b8b6', "aria-hidden": "true", class: "required" }, "*"))))), h("div", { key: 'be0620df5dd65aa3521bc2aaa61b881239e2bc2c' }, h("div", { key: 'd07d72abb6196ba353efbabe1910c79d25ba6f0e', class: "single-wrapper input" }, h("input", { key: '1efbc40afe855b8ae5fc1e45f46598bbec95e021', 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: '790d19d2b945b7f612e02859a7b272b8ddfb474b', class: "container", id: "wm-container" }, h("button", { key: 'd68d5a01656a8b923b378ce73e0ddc58f2fdf5b2', 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: 'ca5412bd92e1cb3fcb416ad44b1faedb348c4a03', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })), h("div", { 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", { tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })), h("div", { key: '63b8992bdd6c18d6ba41961556b8987f4a5a6f59', 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: 'c37920368093dbb3413d71125cc11caa8afd9cad', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: 'c7cba9c54e9a5125fb328886ab7350600ecaf31b', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: 'd5b893546196e25eaddf0f3462f0c0e5bfb10cf7', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: 'f172e8e33ecb8360ea8bfb079aa135009b053a8e', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '52d12573fe421d84f2224643a074d1b4af232122', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: '0c795cb7c6869d75700b47fce4113f248590caef', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), h("div", { id: "error", class: "error" }, this.errorMessage), h("div", { ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), h("div", { key: '4f5913a92b1661108bcb6600afea8e13a84b2379', id: "error", class: "error" }, this.errorMessage), h("div", { key: '62836f0a396222d065026a1b277fdd89eb3162cb', 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"; }
@@ -384,6 +387,11 @@ export class DatePicker {
             }
         };
     }
+    static get states() {
+        return {
+            "isExpanded": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "wmDatepickerDateSelected",
@@ -423,14 +431,17 @@ export class DatePicker {
                 "complexType": {
                     "signature": "(inputFormat: string, outputFormat: string, date?: string) => Promise<string>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "inputFormat",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "outputFormat",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "date",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -449,8 +460,9 @@ export class DatePicker {
                 "complexType": {
                     "signature": "(input?: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "input",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -190,7 +190,7 @@ export class ActionMenu {
         return null;
     }
     render() {
-        return (h(Host, { onBlur: () => this.close(false) }, h("div", { class: getTextDir() }, h("wm-button", { "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "f1d9" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", null)))));
+        return (h(Host, { key: 'e6d63a25a3589c42657c7cf0825f9973861e92ae', onBlur: () => this.close(false) }, h("div", { key: '5744b207e0ebec31cb7a70b8c616700b9436d58b', class: getTextDir() }, h("wm-button", { key: '9509bafa8ac5acbb76aafc464d36e4b97b0a8d07', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "f1d9" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: 'e7846dd17a5b343b506a8c60176bba8ef8e8c2e0', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: 'e227cd3ea8e2093e64c4b8c335ee098768139fd3' })))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -166,7 +166,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { 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 && (h("span", { class: "mdi", style: this.iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`)))), h("span", { class: "button-text" }, h("slot", null)))));
+        return (h(Host, { key: 'c0a05cbcd26354a8ec8ce24fc560ec676dc3eedc', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'f3808a14ca42ea578fe257e7818c2b5be798b61e', 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 && (h("span", { key: '7c247a1febac517d8521a451692536f612657de9', class: "mdi", style: this.iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`)))), h("span", { key: 'f4410ed7907af38ab29eb69c90e2bbb3b2e51cb8', class: "button-text" }, h("slot", { key: '2b72eba1f3b0db9ec8a73e37044a3f371264de77' })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -168,7 +168,7 @@ export class File {
         return (h("div", { class: `file-wrapper ${this.progress === 100 ? "checked" : ""}` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: `right-group ${this.isCondensed ? "condensed" : ""}` }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '0943b20ae9ce90cb1687ff3c092622d2169f9c47', 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", { role: "list", class: "list-wrapper" }, h("slot", null)));
+        return (h("div", { key: '7517d9199e320a918e7b87501e2a6841d17e70f5', role: "list", class: "list-wrapper" }, h("slot", { key: 'c90eaf77aa45b5b146ad71cfa3891cbc0a26ab9a' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -101,7 +101,7 @@ export class Input {
             : `info error`;
     }
     render() {
-        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: "text-after-wrapper" }, h("div", { class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { 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", { 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", { class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { id: "info", class: "info" }, this.info)), h("div", { id: "error", class: "error-message" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: '6bff33a353bd632527d8ebd95031db8c8138ae87', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'c04c1edf83bb49604e4ca504abc51e6647d5487c', class: "label-wrapper" }, h("label", { key: '35d3cf8433a915d548717e7eac14308b1d7a7490', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: 'a4d9d478d893bde516031f2b0e7097fb17755b28', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '7fa0965a9c325e24aac64c522ef354d9bcf841bd', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '4df1efa5078a5d5a6edfd6538923545d3945a34c', class: "inner-wrapper" }, h("div", { key: '0c879dc570054b620eb424e0d660c930e2e580bb', class: "text-after-wrapper" }, h("div", { key: '76886618707f4ca0d5e3ef46ccc7a3561569cb8b', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: 'fe346fecf4fa7f0f030354de9d37ac03af8df5d4', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: 'd3ac5033a0aa7e49c2af2a786a3e09d46bec0e51', 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: '948bcf0ca5186a924b7b7e0099fb072ef78658e4', 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: '59ab9c5a6530828b9fbf021de2baa98e0306555b', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '981aed3eb22a54accce593c1791f496b4641bc1f', id: "info", class: "info" }, this.info)), h("div", { key: 'cb8fb8d79193f4505204d4bc1bdc62a52675387f', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'a319ec8aa8f23c7a51af1de3a65e3778b7cadb67', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -88,7 +88,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("span", { ref: (el) => (this.iconEl = el) }), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: '1b81b125825133d025c2f138c2e9d89306bd0b93', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'e820464ef57df83441622726b55098c3abdeb6e3', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("span", { key: 'd903355e81bdc504a04cb9489ecd455d6d41a1e1', ref: (el) => (this.iconEl = el) }), 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

@@ -30,7 +30,7 @@ export class ModalFooter {
         }
     }
     render() {
-        return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { "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: '09b1182d96ad0f65ad6e2d865901ca600ef6bdc6', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '1e8d2e33fb67996cf2e6d3827ad566da2af0121f', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '3ef4184bbfe126af97339c495c21f78b82f96fbc', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '3eb4cb51d51cf7d7e4d61d16399b036cccfb5825', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '449c91c2c7af5810a8f8e3ab64c63a212a2df541', "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

@@ -21,7 +21,7 @@ export class ModalHeader {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, { key: '5f19057a411235360621a94b35d8bbd0cafeb756' }, h("div", { key: 'cd92ce876d1c46693afde4216b07c975505943a0', class: "wm-wrapper" }, h("div", { key: '288de703687da76c9c19cb7c9d585291511858af' }, h("h2", { key: 'e4336d48cd65b5d2edce772ecede4d55d8742490', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '4039bf3b3193af1c15c4fa0d4127965bb4af0fdc', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'b745264b5bc4d84ce93d8f71fd6fbea9951481c5', "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-header"; }
     static get originalStyleUrls() {

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

@@ -40,7 +40,6 @@ wm-modal * {
 }
 wm-modal dialog {
   color: inherit;
-  overflow: hidden;
   padding: 0;
   width: 80vw;
   max-width: 750px;

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

@@ -108,11 +108,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: 'f9804007b3075d04567628d467538b268f2005cc', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '40c848ef5e791eeaf3fc116764f0007f3e14132d', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && h("div", { class: "wm-tooltip" }), h("slot", null), h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: '8bec0c492699e1544dde7219ec704a5ef3a3b6ee', class: "wm-tooltip" }), h("slot", { key: '2646b7ab94b1426e9166fd589680f6e1e401643f' }), h("div", { key: 'fddae069851ee02bdda40853a46e9b70bc311c99', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js

@@ -34,7 +34,7 @@ export class NavigationHamburger {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { class: "icon" }))));
+        return (h(Host, { key: 'b813a9264454c413f65eef5389e394ef1b291317', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '4e623dd65471a455bc352940ea99a2ed1e10ff63', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: '6754b962ff1a87cabe636bad94e953c7bbdde09e', class: "icon" }))));
     }
     static get is() { return "wm-navigation-hamburger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigation/wm-navigation-item.js

@@ -6,7 +6,7 @@ export class NavigationItem {
         this.active = undefined;
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { class: "icon", "aria-hidden": "true" }, h("slot", null)), h("div", { class: "text" }, this.text))));
+        return (h(Host, { key: '59d24293849944df41c1d904458413e8f201e348', role: "listitem" }, h("a", { key: '4e0e4717b961c7020ab19a5564ed8328789c5f34', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '8ce442d2d492faba715138bbc7a0e2c2d2bc1a75', class: "icon", "aria-hidden": "true" }, h("slot", { key: '898d3ec6a650f7a2e2d59f2c01d777b7d061420c' })), h("div", { key: 'e1858a03da5dbb807adbaed86e50cac95f59edc3', class: "text" }, this.text))));
     }
     static get is() { return "wm-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -96,9 +96,9 @@ export class Navigation {
             } }));
     }
     render() {
-        return (h(Host, { role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { class: "tray" }, h("div", { class: "toggle-wrapper" }, h("wm-button", { ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (h(Host, { key: '07253bd6d752aa41a1715cf2d28e600b7aae4355', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'dbb1d92bad6c1f59f159f63758cc0110e1d6b94b', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '93b63fb63bb94b32f25d250836c1d8b98cc20d08', class: "tray" }, h("div", { key: '89a4323868c66a84bb4f12921103b150068906bc', class: "toggle-wrapper" }, h("wm-button", { key: '0de023f3c6dd6e396adf0a248ca8333095a43359', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), h("ul", { class: "navlist" }, h("slot", null))), this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { key: '1d7b6fc3268583b27b2a0dc46859b6ca1c6d8e52', class: "navlist" }, h("slot", { key: '870cf6f8c01dba37611097c836880792ddddefd6' }))), this.isCollapsible && (h("div", { key: '2d89c522803c67ea290e054ac2a8040f3f257282', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get is() { return "wm-navigation"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class PrivNavigatorButton {
     }
     render() {
         const { handleClick, altText } = this;
-        return (h("button", { "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
+        return (h("button", { key: '29d02e90dbbedea053c4f04cd4d1e9fac50c2efa', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
     }
     static get is() { return "priv-navigator-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js

@@ -16,7 +16,7 @@ export class PrivNavigatorItem {
     render() {
         const selectedClass = this.selected ? "selected" : "";
         const focusedClass = this.focused ? "focused" : "";
-        return (h("div", { class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", null)));
+        return (h("div", { key: '97d4210235097624138fa3ebef82e058c505c506', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '5720a27350fed77a8501a20055b59b44ebdc32da' })));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -137,7 +137,7 @@ export class Option {
         this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
     }
     render() {
-        return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
+        return (h(Host, { key: '6d7f92d3b13121ae8ddffb4d8e6028db2171116a', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: 'd0dccae3c763686b420b0bf16d7bf2880b1cdc67', class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, h("span", { key: '6e1fbd0d49be13883048634cd54d19f19256226d', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: 'f57f7c21e833a1c03f8407eaccb0883ef6b3a79a', class: "sr-only" }, this.el.textContent)), h("div", { key: '1256826e0ddc1e3c48141e8c0f6864b3401cacf7', class: "subinfo" }, this.subinfo)));
     }
     static get is() { return "wm-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -151,7 +151,7 @@ export class Pagination {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (h("nav", { "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { key: '5c750d2aa90adcbb709fb5007862401e11e8d23d', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: 'be58da3d786e0ed7455b762f4273bbad08755196', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
     }
     static get is() { return "wm-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -166,10 +166,10 @@ export class Search {
      * End search and find render helpers
      */
     render() {
-        return (h(Host, null, h("div", { id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, { key: 'f7ac09fb284f8ef6e62cb879298972e3d52ed472' }, h("div", { key: '357cf8e3e57a90fa9a8ca75b51fcb50a16877476', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: 'db65cd0b75b1ace94c30feedb4825512f082e015', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
                 id: "search.typeToFilterResults",
                 defaultMessage: "Type to filter the results",
-            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
+            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '76d92862fd431394e6eadb3c71b8ad39d33ec0b9', class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '54ff42dd8bf9d13e2f15db19aef39a592622beb3', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
     }
     static get is() { return "wm-search"; }
     static get encapsulation() { return "shadow"; }
@@ -380,8 +380,9 @@ export class Search {
                 "complexType": {
                     "signature": "(value: string) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -553,9 +553,9 @@ export class Select {
             ["aria-expanded"]: this.isExpanded ? "true" : "false",
             onClick: () => (this.isExpanded ? this.close() : this.open()),
         };
-        return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: 'f099ef79e70921c17419b2ce8a4e917a0579e44f', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'e95c845dd404f5518b69145543113e69a40084a6', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '65dfe5aaaa9239efb0553ba1d323f1c5dc93b9fb', class: "label-wrapper" }, h("label", { key: 'ff406b387e0cd09e46e239f1c80477fe2ee80f24', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '5537fb10791108ac2bda53d3456ec048bb4cc5c4', class: "button-wrapper" }, h("button", Object.assign({ key: '7d54c69839a302ead990f41e961cce05be49f83d' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { key: 'dcb786709b87be95c28bfcd37cc8459607939f2f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'b04bbeab1666ebd4538c859356f1a3a33658c1c5', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'c5e9911d91f34c9b7c5becaa9e1127e658fd4607', class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { key: '24c47d439f6b131880a8bffe94c40539fc13d78f', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { key: 'acf189fee5add7d0c6150b44ffd9c0c26e05ade7', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: 'ff17ced6e94d7b893c407ea00ab7243176973eb5' }))), h("div", { key: 'a09f44fdf4a100f8eab7b5094fced276023812aa', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '9e55b5fdc2324b77d0a8bcf17650d937760dd941', 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-snackbar/wm-snackbar.css

@@ -36,39 +36,31 @@
   --wmcolor-snackbar-close-icon-hover: var(--wmcolor-button-icon-navigational-hover-ondark);
   --wmcolor-snackbar-close-icon: var(--wmcolor-button-icon-navigational-ondark);
   --wmcolor-snackbar-text: var(--wmcolor-text-ondark);
-}
-:host * {
-  box-sizing: border-box;
-  margin: unset;
-}
-:host .wm-snackbars {
   position: fixed;
   bottom: 0;
   left: 1.25rem;
   right: 1.25rem;
-  padding: 0.25rem 0.625rem 1.875rem;
   z-index: 2001;
+}
+:host * {
+  box-sizing: border-box;
+  margin: unset;
+}
+:host .list-wrapper {
+  -webkit-overflow-scrolling: touch;
   max-width: 35.5rem;
   max-height: 17.5rem;
-  -webkit-overflow-scrolling: touch;
   overflow: auto;
+  padding: 0.25rem 0.625rem 1.875rem;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1.25rem;
 }
-:host .wm-snackbars.empty {
-  -ms-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
-  -webkit-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
-  -moz-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
-  transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
-  padding-top: 0;
-  padding-bottom: 0;
-}
-:host .wm-snackbars .wm-snack-wrapper {
+:host .wm-snack-wrapper {
   width: 100%;
   height: 100%;
 }
-:host .wm-snackbars .wm-snack-wrapper:not(:last-child) {
-  margin-bottom: 1.25rem;
-}
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar {
+:host .wm-snack-wrapper .wm-snackbar {
   -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
@@ -86,15 +78,17 @@
   transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
   font-size: 0.875rem;
   color: var(--wmcolor-snackbar-text);
-  padding: 0.9375rem 1.875rem;
+  padding: 4px 16px;
+  min-height: 3.75rem;
   background: var(--wmcolor-snackbar-background);
   opacity: 0;
   left: 0;
   position: relative;
   font-family: inherit;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar.grow {
+:host .wm-snack-wrapper .wm-snackbar.grow {
   animation: grow 0.25s;
+  animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;
 }
 @keyframes grow {
@@ -107,7 +101,7 @@
     transform: scale(1);
   }
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link {
+:host .wm-snack-wrapper .wm-snackbar .link {
   letter-spacing: 0;
   text-transform: none;
   font-size: 0.875rem;
@@ -122,7 +116,7 @@
   font-weight: 600;
   cursor: pointer;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link.new-window::after {
+:host .wm-snack-wrapper .wm-snackbar .link.new-window::after {
   display: inline-block;
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
@@ -134,24 +128,24 @@
   content: "\f3cc";
   margin-left: 0.25rem;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover {
+:host .wm-snack-wrapper .wm-snackbar .link:hover {
   text-decoration: underline;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:focus {
+:host .wm-snack-wrapper .wm-snackbar .link:focus {
   outline: none;
   border: none;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner {
+:host .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner {
   border: 0;
   outline: none;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar:not(:last-child) {
+:host .wm-snack-wrapper .wm-snackbar:not(:last-child) {
   margin-bottom: 1.25rem;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar.active:not(button) {
+:host .wm-snack-wrapper .wm-snackbar.active:not(button) {
   opacity: 1;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -168,31 +162,31 @@
   position: relative;
   padding: 0;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   width: 100%;
   align-items: center;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg {
   display: block;
   flex: 0 0 0;
   min-width: fit-content;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg.long {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg.long {
   min-width: 216px;
   flex: 1 0 0;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link {
   display: flex;
   flex: 0 0 auto;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link span {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link span {
   display: block;
   white-space: nowrap;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
@@ -213,7 +207,7 @@
   text-align: center;
   letter-spacing: normal;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before {
   display: inline-block;
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
@@ -224,24 +218,24 @@
   content: "\f156";
   font-size: 1.12rem;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover {
   background-color: var(--wmcolor-snackbar-close-background-hover);
   color: var(--wmcolor-snackbar-close-icon-hover);
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus {
   outline: none;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner {
   border: 0;
   outline: none;
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active {
+:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active {
   -ms-transform: scale(0.9, 0.9);
   -webkit-transform: scale(0.9, 0.9);
   -moz-transform: scale(0.9, 0.9);
   transform: scale(0.9, 0.9);
 }
-:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .sr-only {
+:host .wm-snack-wrapper .wm-snackbar .sr-only {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;