@watermarkinsights/ripple 5.2.0 → 5.3.0-0

package/dist/collection/components/{wm-datepicker → datepickers}/wm-datepicker.js

@@ -1,7 +1,11 @@
 import { h, Host } from "@stencil/core";
-import { toBool, handleDisabledAttribute } from "../../global/functions";
+import { intl, toBool, handleDisabledAttribute, hasRoomRight, shouldOpenUp, dateToISO } from "../../global/functions";
 export class DatePicker {
     constructor() {
+        this.openUp = false;
+        this.popupClicked = false;
+        this.buttonClicked = false;
+        this.isExpanded = false;
         this.value = "";
         this.disabled = false;
         this.dateFormat = "mm/dd/yyyy";
@@ -16,17 +20,17 @@ export class DatePicker {
         return toBool(this.disabled);
     }
     get calendarDate() {
-        let calendarDate = new Date().toISOString();
+        let calendarDate = dateToISO(new Date());
         const dateFormatUnits = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
-        if (this.preselected) {
-            calendarDate = this.preselected;
-        }
-        else if (this.value &&
+        if (this.value &&
             dateFormatUnits[this.dateFormat] &&
             this.isValidIsoInternal(this.reformatDateInternal(dateFormatUnits[this.dateFormat], "ISO", this.value))) {
             // if component has value, and value can be parsed to valid ISO
             calendarDate = this.reformatDateInternal(dateFormatUnits[this.dateFormat], "ISO", this.value);
         }
+        else if (this.preselected) {
+            calendarDate = this.preselected;
+        }
         return calendarDate;
     }
     handleDisabledChange() {
@@ -40,33 +44,81 @@ export class DatePicker {
             setTimeout(() => this.announce(this.errorMessage), 100);
         }
     }
+    togglePopup() {
+        this.isExpanded ? this.closePopup() : this.openPopup();
+        this.buttonClicked = true;
+    }
+    closePopup(returnFocus = false) {
+        this.isExpanded = false;
+        this.popupEl.classList.remove("open");
+        window.setTimeout(() => {
+            //not using display none in order to get measurements of the popup while hidden
+            this.popupEl.style.visibility = "hidden";
+        }, 250);
+        //Reset values so that menu reopens to day view with selected date in focus
+        if (returnFocus) {
+            this.toggleEl.focus();
+        }
+    }
+    openPopup() {
+        this.openUp = shouldOpenUp(this.el, this.popupEl.clientHeight, this.labelWrapperEl.clientHeight);
+        if (hasRoomRight(this.el, 336)) {
+            this.popupEl.style.left = "0";
+            this.popupEl.style.right = "auto";
+        }
+        else {
+            this.popupEl.style.right = "0";
+            this.popupEl.style.left = "auto";
+        }
+        this.popupEl.style.visibility = "visible";
+        window.requestAnimationFrame(() => {
+            this.popupEl.classList.add("open");
+        });
+        this.isExpanded = true;
+        this.calEl.focusDate = this.calendarDate;
+        this.calEl.startDate = this.calendarDate;
+        this.calEl.focusCell();
+    }
     handleInput(ev) {
         // keep component's value in sync with input's value
         this.value = ev.target.value;
     }
     handleInputBlur() {
-        this.dpWrapper.classList.remove("focus");
+        this.dpWrapperEl.classList.remove("focus");
         this.wmDatepickerInputBlurred.emit();
     }
     handleInputFocus() {
-        this.dpWrapper.classList.add("focus");
+        this.dpWrapperEl.classList.add("focus");
     }
     handleInputChange() {
         // forward change externally
         const event = new CustomEvent("change");
         this.el.dispatchEvent(event);
     }
-    handlePopupBlurred(ev) {
-        // emit blur event when leaving component from priv-datepicker
-        if (ev.detail.relatedTarget !== this.el) {
-            const event = new CustomEvent("blur");
-            // @ts-ignore
-            event.relatedTarget = ev.detail.relatedTarget;
-            this.el.dispatchEvent(event);
+    handleKey(ev) {
+        switch (ev.key) {
+            case "Escape":
+                ev.preventDefault();
+                ev.stopPropagation(); // prevents closing of parent modal
+                this.closePopup(true);
+                break;
+        }
+    }
+    blurHandler() {
+        if (!this.popupClicked && !this.buttonClicked && this.isExpanded) {
+            this.closePopup();
+        }
+        this.popupClicked = false;
+        this.buttonClicked = false;
+    }
+    // for cases where the user clicks or uses a shortcut to leave the document
+    handleBlurOnWindow() {
+        if (this.isExpanded) {
+            this.closePopup();
         }
     }
     handleCellTriggered(ev) {
-        let dateElement = ev.detail;
+        let dateElement = ev.detail.cell;
         let isoDate = dateElement.getAttribute("data-year") +
             "-" +
             dateElement.getAttribute("data-month") +
@@ -146,6 +198,11 @@ export class DatePicker {
         }
         handleDisabledAttribute(this.el, this.isDisabled);
     }
+    componentDidLoad() {
+        this.calEl.addEventListener("click", () => {
+            this.popupClicked = true;
+        });
+    }
     announce(message) {
         // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
         if (this.liveRegionEl.textContent === message) {
@@ -154,19 +211,31 @@ export class DatePicker {
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (h(Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapper = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, 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: "inner-wrapper" }, h("input", { disabled: this.isDisabled, type: "text", id: "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-controls": "popup", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("priv-datepicker", { disabled: this.isDisabled, date: new Date(this.calendarDate) })), h("div", { id: "error", class: "error" }, this.errorMessage), h("div", { ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        return (h(Host, { key: 'dc02ac52c52f2146b6818cfb44399df8a87f2eaf', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'b06cb70e114f2ce2cf1705a8e917e43d570e19c8', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '59d5e72dd35e30cdaf7c2e8b13b2725bdfab2c15', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: '4d0dda8003a5b162a0fbf213e274fbf83bd749fb', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { key: '9d8e26dceb6a9887e092fd14a1d1609c7a7a2035', "aria-hidden": "true", class: "required" }, "*"))))), h("div", { key: 'f50032f60bdd107f7863a922e342f0f0660da780' }, h("div", { key: 'ceb8ed6366d193974a9e0bf60564e2e8679ac95a', class: "single-wrapper input" }, h("input", { key: 'f827817fbca9ca48384b1f622606860d2b4c2427', 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: '55fe08e3fe5837a630b1c295fe871dd5fa716fcc', class: "container", id: "wm-container" }, h("button", { key: '7984c6a08ec8e61dd9fc57cbd5f219e1bb01822d', 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: 'd9767516cdfec1535d9085e8f1892a460a4236c3', class: "calendar", title: intl.formatMessage({
+                id: "date.calendarView",
+                defaultMessage: "Calendar View",
+                description: "Calendar button",
+            }) })), h("div", { key: '940e5e487e2b2a695b3e47aff7a0d8efc065a15c', 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: '65b02880a0a9b4f2fe50854a7ad0fd669a2b4b43', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '7354b8532fc298fbec125623ef91cbcc880d0c16', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '4a6b82416033fcc71588280ccd7aa59a3b8db264', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '48aa408267854e62134274f0e089b6fdae5ec247', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '6bb2169b1738e6e8b83c6c6cdc5bf2936cafcb64', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            id: "date.selectMonth",
+            defaultMessage: "Activate to select a month.",
+            description: "Calendar button",
+        })), h("div", { key: 'd7e7703c661440d8cd86959cfb31bd18cb65fd1b', id: "year-title", class: "sr-only" }, intl.formatMessage({
+            id: "date.selectYear",
+            defaultMessage: "Activate to select a year.",
+            description: "Calendar button",
+        })))), h("div", { key: '2eb5183a34668d6fdc04960a3212f96998c80c9c', id: "error", class: "error" }, this.errorMessage), h("div", { key: '3a077f86b2332175c0ff853e13d5b903d7e0165f', 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"; }
     static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
-            "$": ["wm-datepicker.scss"]
+            "$": ["datepicker.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["wm-datepicker.css"]
+            "$": ["datepicker.css"]
         };
     }
     static get properties() {
@@ -354,14 +423,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": {
@@ -380,8 +452,9 @@ export class DatePicker {
                 "complexType": {
                     "signature": "(input?: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "input",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -413,11 +486,23 @@ export class DatePicker {
     }
     static get listeners() {
         return [{
-                "name": "popupBlurred",
-                "method": "handlePopupBlurred",
+                "name": "keydown",
+                "method": "handleKey",
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "click",
+                "method": "blurHandler",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "blur",
+                "method": "handleBlurOnWindow",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }, {
                 "name": "cellTriggered",
                 "method": "handleCellTriggered",

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: '6aee949227af6689ef42c0602952f4a5c29c28fc', onBlur: () => this.close(false) }, h("div", { key: '3bbf25118ba469fb27d2016caf29f007bbf608ea', class: getTextDir() }, h("wm-button", { key: '2d763a0dfcabcfa2eab89f2872f033d7e2ef4d4c', "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: '4c02118bca8582715ed3903efb8bb9d01ce79cbd', 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: '5c4449c6c3cf44d419a541497f704cf576f8459c' })))));
     }
     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: '694b33a6186e02f844e83001bf66b4296687a889', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '21196e15c07331fcab0f70a67d50fe8f95834642', 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: 'ae1db2e7a0cf98269b2817c241b2c9bf6dbcad98', class: "mdi", style: this.iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`)))), h("span", { key: '99258f3fa73098dd63c6c398c18ed1687e48d6c8', class: "button-text" }, h("slot", { key: '386583c36cd66b7f66d02bac3c5a33d3264d1340' })))));
     }
     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: 'ad4adea14b53d45d3e05793d42f8cf3d9bd73ccf', 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

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 export class FileList {
     constructor() {
-        this.showInfo = "time";
+        this.showInfo = "last-updated";
     }
     render() {
-        return (h("div", { role: "list", class: "list-wrapper" }, h("slot", null)));
+        return (h("div", { key: 'b89090890295428f5bebf1b79f209ac3289f0ac8', role: "list", class: "list-wrapper" }, h("slot", { key: 'd59cef60abfacc55d0620c0013c7026bd4b4b3af' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }
@@ -25,8 +25,8 @@ export class FileList {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"size\" | \"time\" | \"none\"",
-                    "resolved": "\"none\" | \"size\" | \"time\"",
+                    "original": "\"size\" | \"last-updated\" | \"uploaded-by\" | \"all\" | \"none\"",
+                    "resolved": "\"all\" | \"last-updated\" | \"none\" | \"size\" | \"uploaded-by\"",
                     "references": {}
                 },
                 "required": false,
@@ -37,7 +37,7 @@ export class FileList {
                 },
                 "attribute": "show-info",
                 "reflect": false,
-                "defaultValue": "\"time\""
+                "defaultValue": "\"last-updated\""
             }
         };
     }

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: 'b9598ed315d13b3f054d4155499dc00f6b8cc855', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '90b5fe4c5b579e1a520179db171a1d68e4bb7a9c', class: "label-wrapper" }, h("label", { key: '03f832e30622f6fd32178fa95c327feb7ea6638a', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '73d65801ae9fa94b946306076bf3622a40d56527', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '382a3b7293ba2f580ffd1f1e920bb392e872ce84', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '2463e3168a84fcf47b624ba3507afaf7c47726da', class: "inner-wrapper" }, h("div", { key: '3f4cf72b7af8dd980e4d0f34a7337addca76d170', class: "text-after-wrapper" }, h("div", { key: '6e7812958b117361e821a48926eb6347b0158da4', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '2839c13d5312ba38205d6d1aa82d3a9654d5f06c', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '741abc0a84608038a13f6432f28f02adc5dc4395', 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: '55ec76f3a809ca1491592875518c8e647843ac99', 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: '908591d6da6542bb2350aa7813429f451611734e', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '5dbc627b5db96879daf8c2335f7ae3bb9517e767', id: "info", class: "info" }, this.info)), h("div", { key: 'df38dbf928f9990d5a9d2c6ddaba67d49686f6e4', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'c08662f28c17c7eda3809fb73c2badecf8e42c49', 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: '3976c5086e875303992f8d492b5e35a6634685b8', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'f89220d2428b80ea543aa7727f1945cca2b3351d', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("span", { key: '21ac7d547e0a2ebc9bc285f3561278d373a70560', 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: '6a5fc998c2cb415c166bce85dc52d6e6e6e3a230', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '3b9447834530659308618cdcd0bfb78e6ae5ee07', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '1eba03d1acf2ff2ff063778d7c44586f0bb1cf4c', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '804287ec369acc9f27f58cd3778b8bb28b0c45b1', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '15b323af0a56f8ef60d4d09432fb9354b35d2cee', "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: 'f5719a0f2056c801f776efdc8c4b2c7c414627d4' }, h("div", { key: 'e5695a8b2d36f4f62cc0662e28ca54c28a865921', class: "wm-wrapper" }, h("div", { key: 'a6854d72f3972eeaf13667f04c8ec87773c4dd65' }, h("h2", { key: '5c2f249dd7467787c6fe7a68810f12c709084121', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'f8bde096f7807b4989249a2f85ed34d3eebeb0a5', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'be27899f16d1c740c5d4b918939ee4fac281dbfe', "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.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: '124097f92fff611f4f56f9ad3238517fd0dda19e', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'd367e02d045c1c563ff6c310ec158b8a7b4e0287', 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: 'b6905495813d6e12e2690331fd3a5212c0769ba3', class: "wm-tooltip" }), h("slot", { key: '2360294f11e3ba94727b17df927aa37aea6ecdb3' }), h("div", { key: '51d05952f3e1b145e943e44d245cf9ed31e7f07e', 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: 'c35b1c8c6558c87923c15e7b74575420d6263c9f', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '723b8603c13abf75a32f1d688c626b64efd8b32e', "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: '51e767410bc8436af9a6d8e56ed53485cb8b0350', 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: '130176ebd99c30c1c764436948a854f216d68e37', role: "listitem" }, h("a", { key: '1bd91657782fafe9fbb80e1efa87d2293f9c0cba', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '86bbd36f36f1559fd928880ce5cc916becab32bb', class: "icon", "aria-hidden": "true" }, h("slot", { key: 'd69b35303521eb558aba65dbd5846458f4c80641' })), h("div", { key: '22e322f554019928b41df9e6e56e8d83447de161', 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: '7c5f113bb05143c981df504301dab0f30d3e0b81', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '05ab60106ff3b97cfe670ce6d12bad6905ae6f45', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'ec3c3ebca88625ce03b0316acf7a45fe62c51644', class: "tray" }, h("div", { key: '6a6b9a0b8d0c0837d9dd7a18db84880b864b1bad', class: "toggle-wrapper" }, h("wm-button", { key: '261142287e111991df7647368b25fafbd036d8cc', 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: 'fc16fa9a144d04ae0c9052c8e35c4d0255c38540', class: "navlist" }, h("slot", { key: 'd8fbddab73f4614c544f59ceb7ac148306b2a67d' }))), this.isCollapsible && (h("div", { key: '7ee6cfee0409440f75a118dcf930aca526ceb60e', 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: '174beff7daf4010b9d65bbf18c7a98ef1e7c8dfd', "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: '05691ffdf9c186c891e5a3131e2eb76872936bc7', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '6a14e7dc6a2a102fe713d42d93db48626870c6b5' })));
     }
     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: 'b2816c0c9c04ab1feca35230961976a1054eec07', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '859702c06a2851a94a693916de1c8c6eeaa30ee0', class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, h("span", { key: 'ee3c7fcefdcb4931f0880a92056bd5d99fd2f42c', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: 'ff7ffd26cedafdc7cd45301f6e0089a226961fed', class: "sr-only" }, this.el.textContent)), h("div", { key: 'cd936714d6decfd809ddb70cb7c2ffa1e338a840', 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: '279170ea9344595421f6cb90c653cedc52d20e1a', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '445afa781358c9257568cedec5390067198bcbc2', 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: 'e5b19fdc5722fca49420d60834e85cc8305fcd97' }, h("div", { key: 'd4d57d6dec48789a48fd897a69b99987068aedd9', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '652943e2d751527e32f956e93b70926065fa03ea', 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: '290040dd6d1b910b40a926cac13eda3f6ca44828', class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '4c2f62844d8b63944935f27a53a8d5581fcf1a25', 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: 'e651ddc3d8ef856813389575f7b6679ab8efdc75', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'ea379cea56ae179278c07f9e1ca022eb9837cec6', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '06e4827c277dbdb42986722a43308fe9341c51d9', class: "label-wrapper" }, h("label", { key: '1a68ef76157e903107ede9ce317c3fb5177743fc', 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: 'ddfbfffbcc93c0e778917208f24b3d92f1a547ff', class: "button-wrapper" }, h("button", Object.assign({ key: '1208579a1a9d35b6feafddba0073f89030118542' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { key: '62695c0ee2a634936402ba71463478e61e78b09c', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '1b2be4467c3026556c0cc1208864ab29f9d573fa', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'd23922289761d2fff3103b265f0d60585b4b3980', class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { key: '9a10eb9f5b4541fcdc5a5c9d5a299e8ae91694d3', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { key: 'bcbc50fb07fb114635c128761b8c45bc5f081f9f', 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: '28774d9210a5e9cf05d4db1ccaabf1642ad472f8' }))), h("div", { key: 'c9e85ecbcd361b2196aa7e3224b96437eda59f9e', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '55954488bfc277fd13521ebbfd6f9f03a3e3d022', 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.js

@@ -105,11 +105,11 @@ export class Snackbar {
             }, 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("div", { class: {
+        return (h("div", { key: '623edefbaaa6e52e2f55e3fdcd105f6cec89b37e', class: {
                 "wm-snackbars": true,
                 empty: this.parsedNotifications.length === 0,
                 "user-is-tabbing": this.isTabbing,
-            } }, h("div", { 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: '87c6400cb6682fb06d871e05c40b7c4d3ba7fdae', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement), this.renderSnackbars()));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js

@@ -40,7 +40,7 @@ export class TabItem {
                 "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
             };
         }
-        return (h(Host, { role: "presentation" }, h("li", { class: "tab-item", role: "presentation" }, h("a", { class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", null)))));
+        return (h(Host, { key: '0d9c95f25f36cd8e37bdacdfc73c9032ab11f8b9', role: "presentation" }, h("li", { key: '6d83fae63842be52110fdcaf1797767c8defa24e', class: "tab-item", role: "presentation" }, h("a", { key: '399e8aa507afa3b70b925969c9fd4508345098fb', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", { key: '3571988e318de8baa6a9d82c464d101f38d12a51' })))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js

@@ -155,7 +155,7 @@ export class TabList {
             } }, t.textContent)));
     }
     render() {
-        return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+        return h(Host, { key: 'c768cc9153a707b6093d82b387d33df4b67f9adf', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
     }
     static get is() { return "wm-tab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js

@@ -12,7 +12,7 @@ export class TabPanel {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
+        return h(Host, { key: '83da2497d78709f8b891e4c3735508b992fc6a90', role: "tabpanel", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {