@watermarkinsights/ripple 5.7.0-7 → 5.7.0-8

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

@@ -0,0 +1,361 @@
+import { h, Host } from "@stencil/core";
+export class Modal {
+    constructor() {
+        this.bodyFocusListener = () => this.redirectFocusFromBody();
+        this.open = false;
+        this.elementToFocus = "";
+        this.modalType = "modal";
+        this.uid = undefined;
+    }
+    get focusOnOpenEl() {
+        let customElementToFocus = null;
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            customElementToFocus = this.el.querySelector(`#wm-${this.elementToFocus}-${this.uid}`);
+        }
+        else if (this.elementToFocus) {
+            customElementToFocus = this.el.querySelector("#" + this.elementToFocus);
+            !customElementToFocus &&
+                console.warn("Ripple Component Library: The modal component couldn't find an element matching the id you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
+        }
+        const closeButtonEl = this.el.querySelector(`#wm-modal-close-${this.uid}`);
+        return customElementToFocus ? customElementToFocus : closeButtonEl;
+    }
+    //App can open modal by toggling the prop
+    toggleModal() {
+        this.open ? this.showModal() : this.hideModal();
+    }
+    handleClick(ev) {
+        this.open && ev.target === this.overlayEl && this.focusOnOpenEl.focus();
+    }
+    closeModalOnEscape(ev) {
+        if (ev.key === "Escape") {
+            // stops propagation prevents nested modal from closing all at once
+            ev.stopPropagation();
+            this.wmModalCloseTriggered.emit();
+            this.open = false;
+        }
+    }
+    showModal() {
+        this.setAriaDescribedbyOnModal();
+        this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes
+        document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
+        //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios
+        document.body.tabIndex = 0;
+        document.body.removeEventListener("focus", this.bodyFocusListener, true);
+        document.body.addEventListener("focus", this.bodyFocusListener, true);
+        window.requestAnimationFrame(() => {
+            // nested requestAnimationFrames allow all elements to become visible on page before assigning focus
+            window.requestAnimationFrame(() => this.focusOnOpenEl.focus()); //Bring focus to element inside modal
+        });
+    }
+    //Close the modal and focus the triggering element when the modal buttons emit their events
+    hideModal() {
+        document.body.style.overflow = "visible";
+        document.body.tabIndex = -1;
+        document.body.removeEventListener("focus", this.bodyFocusListener, true);
+        window.requestAnimationFrame(() => this.focusOnCloseEl.focus()); //Return focus
+    }
+    componentWillLoad() {
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            if (!this.el.id) {
+                console.error("For accessibility purposes, you need to set the modal content wrapper's id to 'content-[id of wm-modal-pss]'.");
+            }
+        }
+        this.el.focus = () => {
+            this.focusOnOpenEl.focus();
+        };
+        const generatedId = "wmcl-" + Math.random().toString(36).substr(2, 10);
+        this.uid = this.el.id ? this.el.id : generatedId;
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.showModal();
+        }
+    }
+    async emitCloseEvent() {
+        this.wmModalCloseTriggered.emit();
+    }
+    async emitPrimaryEvent() {
+        this.wmModalPrimaryTriggered.emit();
+    }
+    async emitSecondaryEvent() {
+        this.wmModalSecondaryTriggered.emit();
+    }
+    setAriaDescribedbyOnModal() {
+        const modalBody = document.getElementById(`content-${this.uid}`);
+        if (!modalBody) {
+            console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.");
+        }
+        else {
+            this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
+        }
+    }
+    setElToFocusOnClose() {
+        const elToFocus = document.activeElement;
+        if (elToFocus.tagName === "WM-MENUITEM") {
+            this.focusOnCloseEl = elToFocus.parentElement;
+        }
+        else {
+            let el;
+            while (elToFocus && elToFocus.shadowRoot) {
+                el = elToFocus.shadowRoot.activeElement;
+            }
+            if (el) {
+                this.focusOnCloseEl = el;
+            }
+        }
+    }
+    redirectFocusFromBody() {
+        if (document.activeElement.tagName === "BODY") {
+            this.focusOnOpenEl.focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: '85e48c3a6876e546014d2100b5cf575ae0aa4eb8', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
+                this.focusLastElement.emit();
+            } }, h("div", { key: 'cf58003fbfc9ea4a013c3689aa93f45dca5a0358', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: '59504e363659c2393c6b7f4a10f512485291b253', class: "sr-only", tabIndex: 0, onFocus: () => {
+                this.focusFirstElement.emit();
+            } })));
+    }
+    static get is() { return "wm-modal-pss"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-modal-pss.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-modal-pss.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "elementToFocus": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"primary\" | \"secondary\" | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "element-to-focus",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "modalType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"modal\" | \"dialog\"",
+                    "resolved": "\"dialog\" | \"modal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "modal-type",
+                "reflect": true,
+                "defaultValue": "\"modal\""
+            },
+            "uid": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "uid",
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "focusLastElement",
+                "name": "focusLastElement",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "focusFirstElement",
+                "name": "focusFirstElement",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmModalCloseTriggered",
+                "name": "wmModalCloseTriggered",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmModalPrimaryTriggered",
+                "name": "wmModalPrimaryTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmModalSecondaryTriggered",
+                "name": "wmModalSecondaryTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "emitCloseEvent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "emitPrimaryEvent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "emitSecondaryEvent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "toggleModal"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "closeModalOnEscape",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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: '64106288d26853ec6dced8c379e308910d0fc241', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'f874ff163e409ae233521d4c089d8f28911fe051', "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: 'd85220650c6728633ca27259b5a370bbc7d47e02', 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: 'c4420b1e4396ac065b3674f52b124c0d25359435', role: "listitem" }, h("a", { key: 'ffd82c5f726e982e4418c8bd335c3c151ac1fbfd', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: 'fe1a4418452356a9811359ded2aac74694f9a3d2', class: "icon", "aria-hidden": "true" }, h("slot", { key: '9690f8cbfb21a229493b9b7585ccdb3e90691aa1' })), h("div", { key: 'e134a8b4ca4df635c460b87e7a87cb3909737903', 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: '4b46f2057cf47f6f2857a8c2fbd0113fbaa3d71b', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'fe2e1586827cdbc1d0de1813ca15e5dbd42d99c0', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'a65d6897042cadf2a43d99535c18ec314b6e1c54', class: "tray" }, h("div", { key: 'ff0242631c40b374c750e6377449d751ccc88d4c', class: "toggle-wrapper" }, h("wm-button", { key: 'e76ca281e2df25b9ab4169ff0aa9689ca3f71cae', 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: 'd056d10575ad4aa3deb5cf00011d3469860625e0', class: "navlist" }, h("slot", { key: '5b4be146205fec5ffbd44970e60d7aa4e00c7fc1' }))), this.isCollapsible && (h("div", { key: 'dbba46d2e9e1c70a65cc968560197a56097775fe', 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: '3ca7d2b0ff21d4b914876030af5cd167535b746e', "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: '42153239d733a5f9fdf0e968cdff02f77fe5d1a1', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '2e924f14d849e7ba04e18f66637463f3d4d2b44c' })));
     }
     static get is() { return "priv-navigator-item"; }
     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: 'ed11c99e89b41b3f6e9565525eb4a7e542355612', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '7e0cd5a74588a0e64c44874552dbcfcb2a66f2a1', 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: 'e8fadea4ee156b4a7271c8713669e189adf32d34' }, h("div", { key: '6d4290bd32864cc38c4b12e57f3baeb08819f049', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '2e2ef180f33db89d3aba91719b3db6ea454cfc6f', 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: '986eb365407500b246627f493a7e7e02361ceb23', class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '7b5d9a8c230e0a5c5138190ca845bd478b75d891', 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-snackbar/wm-snackbar.js

@@ -150,11 +150,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(Host, null, h("div", { ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: '33c5774f24dcedb900c37712612fe410faed84ab' }, h("div", { key: 'ffa02798ded28138c9bbe7a6c2f571f30bba1475', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), 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: '93adbefa63a40797446084f6ceb109b0fe896436', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/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: '95738f3913118c776e26a990cb63e41f22e7f352', role: "presentation" }, h("li", { key: 'a57605c203990a0dcc23d8dcba547f294cafe8ee', class: "tab-item", role: "presentation" }, h("a", { key: 'd299ee8e5d94f0aa5e9aea031f32ccab98a88bf9', 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: '85a2b7d56187a7ca6d7e99efd3214cd2f9cad09d' })))));
     }
     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: '9b1573d576177c3eeb42fd811118567743ee0c23', 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: 'dac02ce55774d3d4520999a92766d4488f36cf39', role: "tabpanel", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {

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

@@ -858,12 +858,12 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { key: '2aeb57973cca66667e40249f1853b0532e039972', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'dca159804772027ce49a3f6d6c68e841a9b320c2', class: "label-wrapper" }, h("label", { key: '897e559fbb81a0ede815f45a226d8d8f67990b1b', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: 'cdf63bc1dd5cf072f91d94746056675a5aed04d6', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '9370a03b002e7ccb4ff6ebfe47b9bfeaf9f262f6', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '81d03e7ea3116818dc234ec49f21a7ac24aca7b7', class: "upper-row" }, h("div", { key: 'c156c15343943a3be5e2267dfe956049da564c5e', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '3a66fab9e68db26b13f9500771c875315665afdb', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: 'dc8c31e93a6cb229320eeeaa68cf38f11c568498', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
                 this.handleBlur(ev);
-            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), h("div", { id: "error" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '3984d2faaeff36f5f2a3a6bd09be94ff4122e373', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'ddf352301e9d9c90f7766d2f9ad3d6368d03c179', id: "info", class: "info-text" }, this.info)), h("div", { key: 'f24b06ad36ee1577dbac2b5e6ccfa488533bcdf3', id: "error" }, this.errorMessage), h("div", { key: 'ff7aafe467e6ba49e3ce4b066619d8c577b3a304', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, 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: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { id: "info", class: "info" }, this.info)), h("div", { id: "error", class: "error-message" }, this.errorMessage), h("div", { id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'f2771c26fe46e837b4ff57ea9f922c1ded455901', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '97219e918f72ba4b439fe97b1ffe1ad4b05344b0', class: "label-wrapper" }, h("label", { key: '3682c7ec2bcf6060b230f69f6815a7fbcb1631bb', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: 'ac07a0a0946a53f8947a388c44757109c70ea77e', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: 'beb4e904098a3691983a2ad4d1f539611ce8688d', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'f9d914ad58aca33fa3626fc8f19e0854762a1e9a', class: "inner-wrapper" }, h("div", { key: '241c56641abb90c00ec7d220f732835f107ff9ce', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: 'affce2792cec06d20290995d0cf9631ef6943358', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: 'ecb77aa2f1ec8bf0adc46ee68bf04d517a673bb6', id: "info", class: "info" }, this.info)), h("div", { key: 'a3e9ef2cc8d20a29411887b72aa3e1a6c9538bc9', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '86cef4053bdc750a5cd3e272bbfe50ace94aca03', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -275,13 +275,13 @@ export class Timepicker {
         return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (h(Host, { onBlur: () => this.close(false) }, h("div", { class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))), h("div", null, h("div", { class: "inner-wrapper" }, h("input", { id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+        return (h(Host, { key: '6bc7678c9d7ebdb700cb285cf84e06bab254cf30', onBlur: () => this.close(false) }, h("div", { key: 'e65c6b8869ab2c45ffa7d763971e315f989c6cbc', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '7aab143d7bc8078e873bdcb0d65a43e059b1fc6b', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '18ad9a6109f0a79ac64fe14f0b2b62d58d41ce1a', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '7d41c7ea552094b3ec38e8ea16c17efdcb18ffca', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: 'aed930cc20ce7199f6bbfa833608183173ffe29f' }, h("div", { key: 'c9d9e20b0241ef6e2c89d15fcaa29318839a9e46', class: "inner-wrapper" }, h("input", { key: 'f3d3140ff49fb9d125993c9c8aeae1f27103846e', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: '7d201c36f8dc9aded13eb38ff1646edb3bf3573c', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, h("span", { class: "clock" })), h("ul", { class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { id: "error", class: "error" }, this.errorMessage)), h("div", { id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: '895dd2c39f5b8e6503f56aa9987bc254992aca23', class: "clock" })), h("ul", { key: 'c908487a11edac0b973209922f969d5c2d6aa016', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '4924844ae5eebf2e06672014d418bd52cfdbbbf8', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '7db7953b34467bb276c6b606415e988a230841b4', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -468,8 +468,9 @@ export class Timepicker {
                 "complexType": {
                     "signature": "(input: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "input",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -488,11 +489,13 @@ export class Timepicker {
                 "complexType": {
                     "signature": "(format: \"12\" | \"24\", time: TimeFormat12 | TimeFormat24) => Promise<string>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "format",
+                            "type": "\"12\" | \"24\"",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "time",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -97,9 +97,9 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { class: `size-${this.targetSize}` }, h("button", { class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
+        return (h(Host, { key: '3649c97b6ed097b840c0fbfaca36233f5c153e98', class: `size-${this.targetSize}` }, h("button", { key: '7245bb050268a782fe5ba7dbe5a72b57c5fbb4e8', class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { key: '6617109efb830c025bdf8af64144c47e48d851ac', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { key: '305954841b7f92772c778c02907b4740bafdc4d1', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }