@watermarkinsights/ripple 5.12.0-11 → 5.12.0-13

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

@@ -27,7 +27,7 @@ export class ModalPssFooter {
         parentModal.emitSecondaryEvent();
     }
     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) : null) }, 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) : null) }, this.primaryText))));
+        return (h("div", { key: 'd7053a0ac25d4ac0fd6a8113393610aafb01faf1', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '413ea32764100a255732fdf7a0e1eadfd3d8eabb', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '79c0c4d739c49d38e5eeaa3845432e37ee0959ce', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'cb0b336e44560a517c396e9a8452c9920c89f994', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '22815a7eadac603d768db2453cd1387626ab4b77', "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) : null) }, this.primaryText))));
     }
     static get is() { return "wm-modal-pss-footer"; }
     static get originalStyleUrls() {

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

@@ -25,7 +25,7 @@ export class ModalPssHeader {
     //   this.headingElement.focus();
     // }
     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: 'ff40133791edec6ccf46344723a61ecca7962381' }, h("div", { key: '348f09f6418d16f01aa89566999ac1a65bb73790', class: "wm-wrapper" }, h("div", { key: '45197f8c1e4b475d3227e0c0aaff01ce5bf20055' }, h("h2", { key: '299a0875fbff68154b8f370b50f9965d5e43a082', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '4ebdd6dc8a29c9615c74c33f4a85d95a26867164', class: "subtitle" }, this.subheading))), h("wm-button", { key: '157e933ac7bbbe451ede2f45e0a9840833ff4df6', "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-pss-header"; }
     static get originalStyleUrls() {

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

@@ -112,9 +112,9 @@ export class ModalPss {
         }
     }
     render() {
-        return (h(Host, { 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: () => {
+        return (h(Host, { key: '4c8851746efcbbe4b172bb27b77a71158dd6dc04', 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", { class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
+            } }, h("div", { key: 'bd96e1abafd5ee50e4c2857a81c36b885eb10423', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'e107d2cac3f3acefddd17db95e14870c503718cf', class: "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: "svg-icon svg-menu" }))));
+        return (h(Host, { key: '9d77aca16635656920d082498162a927e78680bd', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'd4cf4f5abc0a1065bbf19fceb0b3eab0b51f2e91', "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: 'd9d3bbb877f541f1809df790776f42c8f8ee4390', class: "svg-icon svg-menu" }))));
     }
     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: '9a55adf58c46f162f8a1c8aa2349585353471235', role: "listitem" }, h("a", { key: '629ff3389f4878307d70a6602237cb0e11851430', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '08c82bbb9a9ee82d3c5a152527beb1a45f3bfe37', class: "icon", "aria-hidden": "true" }, h("slot", { key: '1f84ab5e6da8642f8d2c1bfe1d7b1341c25a3bcf' })), h("div", { key: '6ee1fba226110dee9b4194bb6fae93e19e2efc62', 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 ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (h(Host, { key: '07715708e3ce55d682922a541a2eb3ebc344e3f8', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'dc1605e10718db381d62277212075d66c449203a', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '5eac009e3b8ca72758876ba2854f08c0b628272e', class: "tray" }, h("div", { key: 'e55a956593076b1256dc2f9b5afff29bbb6ee02a', class: "toggle-wrapper" }, h("wm-button", { key: '87206deed2d58e192644a29f79b7e43c62cd9527', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "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: 'd556f415a4e448737cdd4330ee3b491bdb92406d', class: "navlist" }, h("slot", { key: '4afb84723d83cff39fba23769f84cfc03ee0b83d' }))), this.isCollapsible && (h("div", { key: '2b28fde2e59ffe93d48173f30682ace5297b9266', 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: '36fe285b1142a492a6f41a7d4427f62dbd4ca938', "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: 'c0120a6e1efa71fea0ebf431fa5b8db4cd284676', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '0a76e5acbd234f0c92983a24324a7e10f53bd893' })));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,8 +1,24 @@
 import { h } from "@stencil/core";
-import { debounce } from "../../global/functions";
+import { debounce, intl } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
 export class Pagination {
     constructor() {
         this.totalPages = 0;
+        this.navigationLabel = intl.formatMessage({
+            id: "pagination.navLabel",
+            defaultMessage: "Pagination navigation.",
+            description: "Label for a navigation HTML element within a pagination UI element",
+        });
+        this.nextPageButtonLabel = intl.formatMessage({
+            id: "pagination.nextPageButtonLabel",
+            defaultMessage: "Go to next page",
+            description: "Page refers to a paginated list of items",
+        });
+        this.previousPageButtonLabel = intl.formatMessage({
+            id: "pagination.previousPageButtonLabel",
+            defaultMessage: "Go to previous page",
+            description: "Page refers to a paginated list of items",
+        });
         this.debouncedResize = debounce(() => (this.isLargeSize = this.el.clientWidth > 500), 100);
         this.getMiddlePageNums = () => {
             let coreBtns;
@@ -25,6 +41,33 @@ export class Pagination {
         this.isLargeSize = window.innerWidth > 600;
         this.srAnnouncement = "";
     }
+    pageButtonLabel(pageNum) {
+        return intl.formatMessage({
+            id: "pagination.pageButtonLabel",
+            defaultMessage: `Go to page {pageNum}`,
+            description: "Page refers to a paginated list of items",
+        }, {
+            pageNum: pageNum,
+        });
+    }
+    lastPageButtonLabel(totalPages) {
+        return intl.formatMessage({
+            id: "pagination.lastPageButtonLabel",
+            defaultMessage: `Go to last page, page {totalPages}`,
+            description: "Page refers to a paginated list of items",
+        }, {
+            totalPages: totalPages,
+        });
+    }
+    currentPageAnnouncement(currentPage) {
+        return intl.formatMessage({
+            id: "pagination.currentPageAnnouncement",
+            defaultMessage: "Current page, {currentPage}.",
+            description: "Page refers to a paginated list of items",
+        }, {
+            currentPage: currentPage,
+        });
+    }
     maintainFocusOnNumberChange(el) {
         window.requestAnimationFrame(() => {
             switch (el) {
@@ -73,7 +116,7 @@ export class Pagination {
     updatePageDisplayed(pageNum) {
         this.value = pageNum;
         this.wmPaginationPageClicked.emit();
-        this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;
+        this.srAnnouncement = `${this.currentPageAnnouncement(this.currentPage)} ${this.getCurrentPagesInView()}`;
     }
     displayShortPagination() {
         let pages = [];
@@ -97,7 +140,7 @@ export class Pagination {
                 this.currentPage = pageNum;
                 this.updatePageDisplayed(pageNum);
                 this.maintainFocusOnNumberChange("page");
-            }, value: pageNum, "aria-label": this.currentPage !== pageNum ? `Go to page ${pageNum}` : "", "aria-current": this.currentPage === pageNum ? "page" : undefined }, pageNum));
+            }, value: pageNum, "aria-label": this.currentPage !== pageNum ? this.pageButtonLabel(pageNum) : "", "aria-current": this.currentPage === pageNum ? "page" : undefined }, pageNum));
     }
     displayEllipsis() {
         return h("span", { class: "ellipsis" }, "...");
@@ -116,42 +159,51 @@ export class Pagination {
         if (end > this.totalItems) {
             end = this.totalItems;
         }
-        return "Viewing " + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);
+        return intl.formatMessage({
+            id: "pagination.pagesInView",
+            defaultMessage: "Viewing {atEnd, select, true {{itemStart}} other {{itemStart}-{itemEnd} of {totalItems}}}",
+            description: "Text indicating the range of items displayed in a list, and the total amount of items the list contains",
+        }, {
+            atEnd: begin === end,
+            itemStart: begin,
+            itemEnd: end,
+            totalItems: this.totalItems,
+        });
     }
     renderLarge() {
         return (h("div", { class: "largescreen" }, h("div", { class: "pageview" }, this.getCurrentPagesInView()), h("div", { class: "pagebtncontainer" }, h("button", { id: "previous", class: "paginationbtn previousbtn", onClick: () => {
                 this.currentPage = this.currentPage - 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("previous");
-            }, disabled: this.currentPage === 1, "aria-label": "Go to previous page", "aria-controls": "status" }, "Previous"), this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination(), h("button", { id: "next", class: "paginationbtn nextbtn", onClick: () => {
+            }, disabled: this.currentPage === 1, "aria-label": this.previousPageButtonLabel, "aria-controls": "status" }, globalMessages.previous), this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination(), h("button", { id: "next", class: "paginationbtn nextbtn", onClick: () => {
                 this.currentPage = this.currentPage + 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("next");
-            }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page", "aria-controls": "status" }, "Next"))));
+            }, disabled: this.currentPage === this.totalPages, "aria-label": this.nextPageButtonLabel, "aria-controls": "status" }, globalMessages.next))));
     }
     renderSmall() {
         return (h("div", { class: "smallscreen" }, h("div", { class: "pagebtncontainer" }, h("button", { id: "wm-1-arw", class: "paginationbtn", onClick: () => {
                 this.currentPage = 1;
                 this.updatePageDisplayed(1);
                 this.maintainFocusOnNumberChange("prev-arrow");
-            }, value: 1, "aria-current": this.currentPage === 1 ? "page" : undefined, "aria-label": `Go to page 1`, "aria-controls": "status", disabled: this.currentPage === 1 }, h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z" }))), h("button", { id: "previous-arw", class: "paginationbtn previousbtn", onClick: () => {
+            }, value: 1, "aria-current": this.currentPage === 1 ? "page" : undefined, "aria-label": this.pageButtonLabel(1), "aria-controls": "status", disabled: this.currentPage === 1 }, h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z" }))), h("button", { id: "previous-arw", class: "paginationbtn previousbtn", onClick: () => {
                 this.currentPage -= 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("prev-arrow");
-            }, disabled: this.currentPage === 1, "aria-label": "Go to previous page" }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))), "Page ", this.currentPage, " of ", this.totalPages, h("button", { id: "next-arw", class: "paginationbtn nextbtn", onClick: () => {
+            }, disabled: this.currentPage === 1, "aria-label": this.previousPageButtonLabel }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))), "Page ", this.currentPage, " of ", this.totalPages, h("button", { id: "next-arw", class: "paginationbtn nextbtn", onClick: () => {
                 this.currentPage += 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("next-arrow");
-            }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page" }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))), h("button", { id: `wm-${this.totalPages}-arw`, class: "paginationbtn", onClick: () => {
+            }, disabled: this.currentPage === this.totalPages, "aria-label": this.nextPageButtonLabel }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))), h("button", { id: `wm-${this.totalPages}-arw`, class: "paginationbtn", onClick: () => {
                 this.currentPage = this.totalPages;
                 this.updatePageDisplayed(this.totalPages);
                 this.maintainFocusOnNumberChange("next-arrow");
-            }, value: this.totalPages, "aria-current": this.currentPage === this.totalPages ? "page" : undefined, "aria-label": `Go to last page, page ${this.totalPages}`, "aria-controls": "status", disabled: this.currentPage === this.totalPages }, h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z" }))))));
+            }, value: this.totalPages, "aria-current": this.currentPage === this.totalPages ? "page" : undefined, "aria-label": this.lastPageButtonLabel(this.totalPages), "aria-controls": "status", disabled: this.currentPage === this.totalPages }, h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z" }))))));
     }
     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: 'e76650f8ad717fa94684ea00be509c33e2766b5a', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: 'd946be73cfeaeb3994a913a0fa20dac4844b209d', 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: '1ffec56e18aeda2b15741dd86adb2a0d2d131dfc' }, h("div", { key: '1253a6ac6923653d7bc5daceb3fa83f3eb3f45ea', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '20d3c4520fdf0fc511f7e2b7866e4089a4a58a71', 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: "svg-icon svg-search" }), 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: '410a1c3e881bbdf76f9b8c3a6aaf3064e200c776', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '51a68b524397adab5278394479a5059708629f2c', 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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { generateId, hideTooltip, showTooltip } from "../../global/functions";
+import { generateId, hideTooltip, intl, showTooltip } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Snackbar {
     constructor() {
@@ -7,6 +7,11 @@ export class Snackbar {
         this.uid = this.el.id ? this.el.id : generateId();
         this.focusOnDismiss = null;
         this.timers = {};
+        this.closeSnackMessage = intl.formatMessage({
+            id: "snackbar.closeNotification",
+            defaultMessage: "Close this notification",
+            description: "Notification refers to a notification UI element that can be dismissed",
+        });
         this.notifications = "[]";
         this.isTabbing = false;
         this.announcement = "";
@@ -145,16 +150,16 @@ export class Snackbar {
         this.announcement = message;
     }
     renderSnackbars() {
-        return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper", key: `snack-${notification.id}` }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "content-wrapper" }, h("div", { class: "msg-wrapper" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
+        return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper", key: `snack-${notification.id}` }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "content-wrapper" }, h("div", { class: "msg-wrapper" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `${notification.link}${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
                 this.snackLinkClicked(notification);
-            }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" })))), 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: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
+            }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" })))), h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, 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: "svg-icon svg-close" }))), 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: 'df6a4fac9fc0407b86ce48381278d98a5227cbd4' }, h("div", { key: '48fcb5222a997df655ce141faf51e9fb9ddd21d1', 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: 'a538a4a466785dba9578aafa067b46b94e3fe61a', 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: '03f7157e9d97d75d964bcf74bd3b22a6d4b134f7', role: "presentation" }, h("li", { key: '4c2f0e96555a70677c07e27a93bc8b32da016044', class: "tab-item", role: "presentation" }, h("a", { key: 'f433630cab179818bd2193b2fdac45a794e9f241', 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: 'cbfdd92ef027ae9c1b73ffe9bbce37ab71007521' })))));
     }
     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

@@ -1,7 +1,12 @@
 import { forceUpdate, h, Host } from "@stencil/core";
-import { debounce } from "../../../global/functions";
+import { debounce, intl } from "../../../global/functions";
 export class TabList {
     constructor() {
+        this.selectLabel = intl.formatMessage({
+            id: "tab.selectLabel",
+            defaultMessage: "Choose a tab",
+            description: "Tab refers to a tab UI element",
+        });
         this.debouncedSetLayout = debounce(() => {
             if (!this.listWidth) {
                 this.setListWidth();
@@ -135,7 +140,7 @@ export class TabList {
     renderMenuOrTabs() {
         if (this.menuLayout) {
             this.hideItems();
-            return (h("wm-select", { label: "Choose a tab", "label-position": "none" }, this.renderOptions()));
+            return (h("wm-select", { label: this.selectLabel, "label-position": "none" }, this.renderOptions()));
         }
         else {
             this.showItems();
@@ -155,7 +160,7 @@ export class TabList {
             } }, t.textContent)));
     }
     render() {
-        return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+        return h(Host, { key: '593d7f4f416cce70fb29b8f3098e352e6c159219', 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: '0f98f2483566f5c10062cf2413ef5a03417f2e6e', 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

@@ -6,25 +6,31 @@ export class TagInput {
         this.addNewHelpText = intl.formatMessage({
             id: "tagInput.addNewHelpText",
             defaultMessage: "Press the Enter or Comma key to add a new tag.",
-            description: "Help text appearing in a dropdown. Use imperative",
+            description: "Instructional text, where tag refers to a tag UI element that can be added to a list. Use imperative",
         });
         this.selectionHelpText = intl.formatMessage({
             id: "tagInput.selectionHelpText",
             defaultMessage: "Search and select a tag.",
-            description: "Help text appearing in a dropdown. Use imperative",
+            description: "Instructional text, where tag refers to a tag UI element that can be added to a list. Use imperative",
         });
         this.maxTagsReachedMessage = intl.formatMessage({
             id: "tagInput.maxTagsReached",
             defaultMessage: "No more tags can be added because the limit has been reached.",
+            description: "Tag refers to a tag UI element that can be added to a list.",
         });
         this.tagAreaInstructions = intl.formatMessage({
             id: "tagInput.tagAreaInstructions",
             defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
+            description: "Label for a UI element where a user can select from a list of tags.",
         });
         this.tagsAddedMessage = intl.formatMessage({
             id: "tagInput.tagsAdded",
             defaultMessage: "Tags added",
-            description: "Full message for context: 'Tags added: x/y",
+            description: "Tag refers to a tag UI element that can be added to a list. Full message for context: 'Tags added: x/y",
+        });
+        this.noResultsMessage = intl.formatMessage({
+            id: "tagInput.noResults",
+            defaultMessage: "No results match your search.",
         });
         this.openUp = false;
         this.inModal = false;
@@ -51,6 +57,13 @@ export class TagInput {
         this.focusedTagIndex = undefined;
         this.tagsList = [];
     }
+    addNewTagMessage(newTagName) {
+        return intl.formatMessage({
+            id: "tagInput.addNewTag",
+            defaultMessage: "Add {newTagName}",
+            description: "Button text to add a new tag to a list of tags",
+        }, { newTagName: newTagName });
+    }
     toggleKeyingOn() {
         this.isKeying = true;
     }
@@ -142,13 +155,6 @@ export class TagInput {
     get tagLimitReached() {
         return !!(this.maxTags && this.taggedOptions.length >= this.maxTags);
     }
-    get noResultsMessage() {
-        return intl.formatMessage({
-            id: "tagInput.noResults",
-            defaultMessage: "No results match your search.",
-            description: "Message displayed when a user's search returns empty.",
-        });
-    }
     get inputMinimumWidth() {
         if (this._tagEls) {
             // 150px is the minimum width of the input field, or the length of the placeholder text
@@ -180,28 +186,28 @@ export class TagInput {
         return intl.formatMessage({
             id: "tagInput.tagAdded",
             defaultMessage: "{tagName} added.",
-            description: "A confirmation for adding a tag.",
+            description: "Confirmation for adding a tag UI element to a list of tags.",
         }, { tagName: tag });
     }
     tagRemovedMessage(tag) {
         return intl.formatMessage({
             id: "tagInput.tagRemoved",
             defaultMessage: "{tagName} removed.",
-            description: "A confirmation for removing a tag.",
+            description: "Confirmation for removing a tag UI element from a list of tags.",
         }, { tagName: tag });
     }
     tagAlreadyAddedMessage(tag) {
         return intl.formatMessage({
             id: "tagInput.tagAlreadyAdded",
             defaultMessage: "{tagName} has already been added.",
-            description: "An alert for adding a tag that is already present.",
+            description: "Alert for adding a tag UI element that is already included in the list.",
         }, { tagName: tag });
     }
     tagLockedMessage(tag) {
         return intl.formatMessage({
             id: "tagInput.tagLocked",
             defaultMessage: "{tagName} is locked and cannot be removed.",
-            description: "An alert for when a user tries to remove a tag that is locked.",
+            description: "Alert indicating a tag UI element cannot be removed from its list.",
         }, { tagName: tag });
     }
     isElOrChild(el) {
@@ -779,7 +785,7 @@ export class TagInput {
         const optionAlreadyExists = this.isExistingTag(this.inputEl.value.trim());
         return (this.addNew &&
             hasNonWhiteSpaceCharacters &&
-            !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, "Add " + inputValue)));
+            !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, this.addNewTagMessage(inputValue))));
     }
     renderTable() {
         return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
@@ -840,7 +846,7 @@ export class TagInput {
             const classes = {
                 focused: !!this._focusedCell && cellId === this._focusedCell.id,
             };
-            return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", "aria-readonly": o.locked ? "true" : null, onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, o.locked && idx == 0 && h("div", { class: "svg-icon svg-locked" }), val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? "locked" : "")));
+            return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", "aria-readonly": o.locked ? "true" : null, onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, o.locked && idx == 0 && h("div", { class: "svg-icon svg-locked" }), val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? globalMessages.locked : "")));
         });
     }
     renderTableRow(o) {
@@ -858,12 +864,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: "svg-icon svg-search" }), 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: 'c7c6274b246a075d3dde1a85c48f74a6f81e8488', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'e111c172efb9f67de292ea97c032eb0aceb5dd7b', class: "label-wrapper" }, h("label", { key: '41022ce3f8be12acda982a6b6fddd5703004278d', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: '778554d1db5854adcc3629fa263a2c1b537bcf7f', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'e73b049d34b5de5f7599c7c09b325545a3be0c5e', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'd192eac4c59464f4002e99f77ad295c5e3917f38', class: "upper-row" }, h("div", { key: 'fde56c948d07ebfe7f0811bf516b8d466b8aaf20', class: "svg-icon svg-search" }), h("div", { key: '9831080c30d69e89aa482dc439a9210c5f6f0246', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: 'd9b2a3749cd06d1ad5ce381b99c04685cff97c62', 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: 'cd48d5e5c79157f76e67d89411e3471bd421cb82', 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: 'f2bf5d26f43064e12e4a2b51ed3b7a531e30d0f1', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'aea747efbca0eb714301678e297052c9bcfb745c', id: "info", class: "info-text" }, this.info)), h("div", { key: 'fa5e0b55abbd2f9608bbea1161a9169adeaee627', id: "error" }, this.errorMessage), h("div", { key: '3f484bbc12775a17f5af366deeb0776808b38016', 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: 'e2d740d8479a2c7fceafb2cd68d9f97eb876f785', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '2f410dc0729e16d0b18e614f376825f2046df597', class: "label-wrapper" }, h("label", { key: '42478a23be2991709f1225d29fc5b70f1c265e60', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '075b4662280aca2fd60c0d9c1c5c55943432fa40', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '04170738af7aed5c0c1c93e0514a0820ce95f45d', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '8c95a78fc48323b507f698b7a60e23ee695eafd5', class: "inner-wrapper" }, h("div", { key: 'f2d97022f110d272158a4b66b99823855e9446ee', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '53c1dfdeaee25b4ead90e5077df55c5e75860510', 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: 'e6752b037381940fd2c02fc994b018bff40d0160', id: "info", class: "info" }, this.info)), h("div", { key: '207fc1dd5736e9c9a401daab3334e52f2dbdb7b5', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'a310af56a1bf1b1ba045707ee1b5b8fb7a0bd770', 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: '6c9babdf2a8237a46321cc7fbb9185f23b6e73ee', onBlur: () => this.close(false) }, h("div", { key: '214da15a53ada6e5e1dbfb2d1d6bf73d9e0231b2', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '3179f94028e1645d63b047e33efe756cd337ce17', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '9d490705cd32b26bf5de757e6fd5889473a7c4c4', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '8e54d504e4ab76a03ef7a01cdf8e1fb161c37016', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: '22b7b8c33679f6f7c194e9d3bc3c6794af4ddedd' }, h("div", { key: '4eb746fae7776b906053429059cec00c47ce31c4', class: "inner-wrapper" }, h("input", { key: '7f17b1dfedbf3d2f574247c0fa71b256ac094a79', 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: '1c3f6a403417b9baa4e0f17644cac84d7d6ea1af', 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: "svg-icon svg-time" })), 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: 'd679e16b6d81f07ecf96a76a5adac12ac41d75a0', class: "svg-icon svg-time" })), h("ul", { key: 'cc793abe39ce5de00299e8d03051424b43cd8bcc', 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: '3a82aa292fe4d5bfa374d7bcdb8a22bf9f7b3e45', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '11c037ef9b0e95bd6262a34cbdf86be79ef23beb', 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.css

@@ -895,7 +895,6 @@
   white-space: nowrap;
 }
 :host .toggletip {
-  position: absolute;
   max-width: 13.75rem;
   width: max-content;
   overflow: visible;