@watermarkinsights/ripple 5.22.1 → 5.23.0-alpha.1

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", { key: 'f3ed1135a2ccfa49c16dd66daece5bfb993c7534', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '4403427b56f79606065a754d646bf18bc912db9e', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '36862f60cdcacb441672d34120f6badc3bee9048', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '07cba5e6270813ccd39429e8924bdc57f686ef5d', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '05b061ea376bd9b309158b5e59f1058c351efb22', "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: 'c5e96e3dd8c5607dbc7ce556f867ee5064b71be7', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'f04c0f6aac32c7c22ec20314e6b9e668edf6c86d', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'bf253fca85c19b0a1912cc741fd2f2dca6704255', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'bad452e32beeeec8eb979abb6ad3bb22a3d6028e', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '1ed0e75f8941402d946ca43706130e886d888ef4', "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, { key: '92583f333f5795b01afa63e9cf083f04a4f563bf' }, h("div", { key: '70e0f04cc75aaed989f813d9a14c741aaee77701', class: "wm-wrapper" }, h("div", { key: '6f1831c376e983766e60257aec2ced5e99b3996d' }, h("h2", { key: 'a1c39702cd6a48914180013835572e4fbead6ed8', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '30ad4c11aad67657ac9d8ac97c91cc1a419bbf79', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'b2bc0b091b769973801080ae1ee63a7b13ffcee9', "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: 'dbff7f22b3dd304ba864e9716d0fea9c5eab2e24' }, h("div", { key: 'c2babf72f0672eb88841914f8e34d30748fb13e1', class: "wm-wrapper" }, h("div", { key: 'fda1bc5a5614d73cb220da1c76a72bb08dae4c46' }, h("h2", { key: 'b2d78431c14859efd96e004b99147578feab4b8b', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'eb069b112055c5c585473327080e8206e8f98c46', class: "subtitle" }, this.subheading))), h("wm-button", { key: '5e90a81ddea508b3a3d17566da1a0f80cad65476', "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

@@ -115,9 +115,9 @@ export class ModalPss {
         }
     }
     render() {
-        return (h(Host, { key: 'ddf77d980c1751926c10fe86afebb9eef85dc9ac', 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: 'ac6959242ec893f9709b2416201a9ba597eef2ce', 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: '0f422c764810c173e093a0c1c92a5248446b3a75', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'b15e362f110ca21ca9ba554b9b884c9db4af9138', class: "sr-only", tabIndex: 0, onFocus: () => {
+            } }, h("div", { key: 'd8f3e674a939cab6868715f716f49d5ba6da1e9f', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'f387fc9ad112426746c263c87ae5b9a184a031a1', 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, { key: 'a43f96c6c9277bcbc28db3f54c1e6dac5a12c711', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'e8d172739a625abdd185201609f43660a43d92b4', "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: '1e6cf4f1d121a4e5b04dcece6a00ac5cffbaecbb', class: "svg-icon svg-menu" }))));
+        return (h(Host, { key: '1b169365ecef2816543910f270889a1921ed3502', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '8148f5deb298b9c2a143db9984e36733b03d0a35', "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: '32f5160cab5eb1dc34275dd9cbb7a78cd2990b6e', 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, { key: 'bf087268732555bdbe50c267f97c9f0858bba980', role: "listitem" }, h("a", { key: '2b6086ffd77e24e73ea262a9c730825cd9050e94', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '3e2e6f675ad123a095e2ca41f575e988c7949395', class: "icon", "aria-hidden": "true" }, h("slot", { key: '7733614fd071798abf4f8b254293d34cacfd6c5c' })), h("div", { key: 'a5312a7a50264dbfa191ed1136e6433609c337a6', class: "text" }, this.text))));
+        return (h(Host, { key: '02bd2737c6645d35a8731940821624db4d63e1d6', role: "listitem" }, h("a", { key: '8fdb541089718f0ac0549da6ab4415389c010c36', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '910e96868afc97cb19dc91aade7626e39b750e2e', class: "icon", "aria-hidden": "true" }, h("slot", { key: '5ddbe770001cac5df79b16249141364db172d256' })), h("div", { key: '6e4428b3292d847e79d7159149cece72dee59fcc', 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, { key: '2d7f11924052f4438243237f1d38141f6652b944', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'f92b7cab8cd7e1c63e59cac31afd9efcfda4234f', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '7fec0055e808b49676b8b589e59244b884545ea1', class: "tray" }, h("div", { key: '8ac1ae8da1054a6dceda08f751768de718080bde', class: "toggle-wrapper" }, h("wm-button", { key: 'e36fcb93366baef360df96298cb35c4576a9a916', 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: '815117725f45f3fae04ee2ac4f573cf7ccb8885c', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '59416405b9566485d64ba1311e7f24dfca6d91a9', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '98eee20d96ed81347847d7af866d9d5f48010638', class: "tray" }, h("div", { key: 'c65e733eac1eb49b69254bb19330226679e407e3', class: "toggle-wrapper" }, h("wm-button", { key: '2b8b764b6250a88959e4b263f81d6676b419f04e', 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", { key: '22ba6ec5ce572f1c04ccb45301659dde791f3115', class: "navlist" }, h("slot", { key: '3fa52b5bbe4e1346d90e5a556eeeabfeb9a7f4a0' }))), this.isCollapsible && (h("div", { key: 'e7738e6001e65f8e4fecdd775ea40d93b84cd4b4', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { key: 'ae95f619a097413291d70f930f0fc4e97f5a5e37', class: "navlist" }, h("slot", { key: '833f7502a28f7ff833f7bdac17ad62e3dca9d12b' }))), this.isCollapsible && (h("div", { key: 'fdb8e1288416191cebc3557c79c089359634d315', 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", { key: '37826c509d1b35d0e5ef9915749d521941251722', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
+        return (h("button", { key: '574e7f4c213bb38d21c4efb62b73d3179799cbba', "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", { key: '7dba57536d9412d9f8865433056a2bcbde2f95aa', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: 'fcfc79489b88184203d8e4163f256e531de9bc67' })));
+        return (h("div", { key: 'd4247a1db863b58ea1204298648b99b59ce02387', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '8e315a87aa1ab54c5a81e708c46194b59de6ee6b' })));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -203,7 +203,7 @@ export class Pagination {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (h("nav", { key: '6be7673743d44ea45076ea3a7a6bcd4e48d4837d', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: 'd67e8a638a0aad67828a625ac07e5559876b15e8', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { key: '34ffd75c251b8044ceb255a113c71cd796ed3cc1', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '4d60c8ad94a519dc78f670c93a8d09f722861698', 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

@@ -168,10 +168,10 @@ export class Search {
      * End search and find render helpers
      */
     render() {
-        return (h(Host, { key: '54839cc6b1e6c142e3f60d01572f4645816ccf08' }, h("div", { key: '19d72e8d5c578328ca64819a289e974a279ee352', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '1cf69b8f9d3ec4e7fdb0fa6a391fd71c920c7c74', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, { key: 'a3636bdd9326beaba25db7b470d27cdbeb8403f9' }, h("div", { key: '2f1f51709653b0c56d003b05562a0a874451c5c5', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '57671b412397741fe67d1fff8ca5795532ea6e22', 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", { key: '3495eb2351e9e51a114cb8680206196752623135', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '837a9c6a9c68d19c9bf4cb09158b22867036c128', 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: '6240e8b26fb69ee46e6942dc69cbdd4feca6b6a3', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: 'f7cc16ffc7a7b03850a9dca6ac2cc2ee53833c51', 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"; }

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

@@ -145,11 +145,11 @@ export class Snackbar {
             }, 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, { key: 'd3e6bea353d66664559f6dce9fa1d3301f99e3db' }, h("div", { key: 'be5bf8d2ebbab807af66cc479929c3b696537fd8', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: '94ada273fd2638ee9e4ccec7915a8011628d0009' }, h("div", { key: '28d0856fbaf88e90aee407d6b3524ea19dfd42c0', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { key: 'defc7a78c6a890a4a9566f57ec55352ecc91dfa0', 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: '43445193d9a2eaef7492bbc63bf60a5cc44216cf', 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

@@ -27,9 +27,9 @@ export class TabItem {
     }
     render() {
         const isDark = this.parentTabList && this.parentTabList.customBackground == "dark";
-        return (h(Host, { key: '32c6aac6411c25d4b82107b6334b1732a0ef2ffa', role: "presentation" }, h("li", { key: 'f6fc4ae969e7a767389b9addf613fb83f8185bae', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: '250ad48a22872b09adbf5bac7de1779ecc3a8a9b', class: `tab`, role: "tab", ref: (el) => (this.linkEl = el), id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onClick: this.tabClicked, onFocus: () => {
+        return (h(Host, { key: '0be5770e4b97845cae75e961888707fa0424cf51', role: "presentation" }, h("li", { key: '8dc34fc09ad87c512c0fde04b4ac615030c1441e', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: 'd8441f0971202b13685c5ce1183aafbcc20233e2', class: `tab`, role: "tab", ref: (el) => (this.linkEl = el), id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onClick: this.tabClicked, onFocus: () => {
                 this.wmIntTabFocused.emit({ tabItem: this.el });
-            } }, h("slot", { key: 'ab90abb21cb8617a158aa3dff4d77c7ac4d49b96' })))));
+            } }, h("slot", { key: '439a5046d729d0a6a82c1edb6def57c8fbf2e761' })))));
     }
     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

@@ -257,15 +257,15 @@ export class TabList {
         this.announcement = message;
     }
     render() {
-        return (h(Host, { key: 'e0c149eea66c9d126ad6efd28fcb261bb3e97002' }, h("div", { key: 'a82977738037c8eabb48c74a3893668d8a7e4c34', class: "component-wrapper" }, h("wm-button", { key: '533f416a6beb4fb87ab2213a29e1786b064cee77', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
+        return (h(Host, { key: '3e844b43073845226e927d8ef8635b629b3078c6' }, h("div", { key: '4cdc200ade5f6d9ae92b4132086ddd24997422d5', class: "component-wrapper" }, h("wm-button", { key: 'f9291d8039bbcf4164bff13b7874a05e82c34d8b', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
                 id: "tabs.showPreviousTabs",
                 defaultMessage: "Show previous tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: '1cb5ae17170fe3776749dde6a2f26d8ea4868a09', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: '5a629e3ebc7486619801f778ace79f280b9a4998' })), h("wm-button", { key: 'e9c3a8c1ce09faa3b1738047931a2971a71757e3', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
+            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: 'e2e62316b668212193e4d8d6309a774970af94c6', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: '444cbb46870cc96072430fdd7f85deea1e6f3375' })), h("wm-button", { key: '8a84f4d13a0b25cb6c1a3ccc9fe18a4a55ac067a', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
                 id: "tabs.showNextTabs",
                 defaultMessage: "Show next tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: '4466ae59f3e70c5ce2b6eda1936842498ce62d84', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: '0cde8bc3411cba96074d0389ce5ea93b06f61855', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     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, { key: 'ceb067c79994366c790a73ea7277750436abc477', role: "tabpanel", tabIndex: "-1", class: { "tab-hidden": !this.active } });
+        return h(Host, { key: '3258381fdf315b45be5bad6ee1a21420c3fe22f5', role: "tabpanel", tabIndex: "-1", 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

@@ -927,10 +927,10 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '1ea7a4e18d1edcd6c3e66f7b1a7426058b03e1a1', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'd0779f651e99b8f5bdbb6986daf70e7701f83d81', class: "label-wrapper" }, h("label", { key: '80465bcd2dcedd108c353fd95b57163e84ad266d', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { key: '2758d90e08028cac91b7b5894a9bdb919cfa9fe7', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '5d6454cab0ae655c9ad9e5155a2737807552641d', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '66e23fb5d85d8133e1907f12f354caff5b4f8b09', class: "upper-row" }, h("div", { key: '6b27e970920af73e50e1e6ae04c721f8899bb53b', class: "svg-icon svg-search" }), h("div", { key: 'c67fe9b9a364cb09224abcec3caca9979bcd66a1', class: `tags-and-input-wrapper` }, h("ul", { key: '26e53e16f3498add3b64461b9ad0cc414e7b9cd0', 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: '5b248aedb7263d9980f4af6d0763741e9562a707', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '48494c601e624476c500a3bf32c13c8b58d1e487', class: "label-wrapper" }, h("label", { key: 'f7d1d542f51a4898ac6fe6fc321e95a5446d190c', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { key: '5be180e4c932103ee24912b86853ce297d6ea8bc', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '66ccdfd87612cffdca65f4c0c3fdb9f8b6f50f66', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '3c7c91d6673811a7b5ac54611a5c3db9a5ba3fa4', class: "upper-row" }, h("div", { key: 'b209dd69743057be72a1b4fd8ee71bce0dda3e1e', class: "svg-icon svg-search" }), h("div", { key: '1bb2e1873e45f7e2cfba59c97d96e16e24797976', class: `tags-and-input-wrapper` }, h("ul", { key: '329924434065ec18b590434b9a3504e5e709540b', 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()), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'bcb6e30890a2198f54b955a54226f25e1e7e887e', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'a00c7fe46e44c232ead4f1ab80f507850dec3185', id: "info", class: "info-text" }, this.info)), h("div", { key: 'de82e4d355b12f88db7b4054f1f318a2452cd4d7', id: "error" }, this.errorMessage), h("div", { key: '318a2efc15622295f94236615d1f6b3e369e77ea', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: '54a6ebcc34496f2eb510631739955caf4d5da467', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '39d887a94835cff9f18e2534a709a06c882959f7', id: "info", class: "info-text" }, this.info)), h("div", { key: '4ff8006f313cd5caa9a3fbd6991bd78d3c5180e6', id: "error" }, this.errorMessage), h("div", { key: 'b592c8b5dac99392607b46ea26d47995d28f7050', 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

@@ -71,7 +71,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: '4d66731ba9bd4ba435090f31acc86b7eae07ea25', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '642ce791dc16814534694b36dab601777dc655de', class: "label-wrapper" }, h("label", { key: '2a60aa3829eed6a377f5daecaa9d264dc715b38d', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '76b6ad6c0a639f6fae230a7c1bd13f102fe747c7', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: '0d47f3ef8ff15e2c4110cc279f29434f1c1c55ee', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '060b640fcdb2b4a6fc0b310fb152b4a5736a8797', class: "inner-wrapper" }, h("div", { key: '26ec20786b6b6cf22a3b5b042478e8057fcaa471', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '15cc0321f901bd8db6aa9fb8f26ee3906b72d7c7', 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: '13f454a13e63f3f583011ab43c7b22409f934a2e', id: "info", class: "info" }, this.info)), h("div", { key: '281885a5098b169ba5f192f5056c7ab14c8d944c', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '32a259bfdda78dc540e71140a4d8fbd1b7e46143', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: '74ce1775cef448b2f48729d0adf522f742b93594', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'f5c3a71608d00e886adb1ba46bf2d47284d9f948', class: "label-wrapper" }, h("label", { key: '952f29910b017b9d39ee0397a903d7904499e1ab', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '90abb8fdf937f9972128fc5d9b37662eff4fc082', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: 'd13ca26a2c58f5be069299a1e9359bc723a0ef72', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ba9c3724f5becfbc62ed7e18310a41dfd82740e4', class: "inner-wrapper" }, h("div", { key: '3961695bbd77d01d70b81f6457943a11e504a925', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: 'b988435aae6274ca12527280f3d2d23cb7287380', 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: '316d16bf981d25bf81838166adf3b762a8cdd029', id: "info", class: "info" }, this.info)), h("div", { key: '17cce3c54e284a9348a1270541b84f076d88998c', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '08451b1914a7629d7d16d99e3e78712f10b9f627', 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

@@ -281,13 +281,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, { key: '8d1fed516e7969fa0e9684d455ed3bd01e9cd040', onBlur: () => this.close(false) }, h("div", { key: '4cb010201d91dec397fd717848e68c98ebd14106', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: 'da58fa1acc6136025158d957e59b45455b5ebeca', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '0dcfe28b0917725ed47c3dfb5da1303f137b0ada', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '9ad3ded1b7adc2d3427bfb7170ad8de29675aebd', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '6ab239767fbe02e97602ad7b758bc5cc83bdced9' }, h("div", { key: '8d194e417f8af4d3c3af3973fac98cfe44fb10f4', class: "inner-wrapper" }, h("input", { key: '13b6ba2e040cfc5857bcd93381873b75422cad92', 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: '01af343694382e726544e6c15fec61ffe8f94a52', 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: 'da0fd0b1de084487ba4e32bbd53dcd514ed112bc', onBlur: () => this.close(false) }, h("div", { key: '2837930a62ea26bdca45bb69b45a94153104d791', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '1db04c5e13d756802e2dc2edaeefd494e1499044', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '38c1b82f7191dbf174aa4779f63fc4efac24a328', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '7d6148e99816e4cb49165f9cc0876c617f9c9d0e', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: 'ecc849f353c72d8809e497f514fc1efffa3bc00e' }, h("div", { key: 'ad87235c16f4fc6135a8e91d7e35a81d80bc5a3c', class: "inner-wrapper" }, h("input", { key: '3af501242d00b1ced5ba7ee3405a08c9d11126bc', 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: '947d9b23d656482ecc38faa792cd387f15566c1f', 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", { key: '9021fa1d31cc4601e36705e23c81bd64a7079de3', class: "svg-icon svg-time" })), h("ul", { key: '070568110a252cfcbeed0db9a650c5aa33f3d6fa', 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: '219fedbed0146e2dedb2e2bfb2ac8df4d1fa75bf', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'dd3b6ebb4f17f49ecb18f361500073ab11cbdeac', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: 'ca1897c49182b7a78d78bc3920cee38a3b43baab', class: "svg-icon svg-time" })), h("ul", { key: 'c2b449f07c3b5dba20b4f9ffc825216398532752', 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: 'fe8a9b32c74d40068500979a5af7fd3e4486428a', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '3e1e3afd35c19dc2dc7a5635445ec3c5722f2f13', 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"; }

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

@@ -229,11 +229,11 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: 'c11bb0162cedb31f4acf39a61319c6827f5ebe75', class: `size-${this.targetSize}` }, h("button", { key: '9560429d4dec4e97069adf77f36ac98cf385087e', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        return (h(Host, { key: '4ef06e1cd3a72fe9b8234aa549116d2e4f7f266c', class: `size-${this.targetSize}` }, h("button", { key: '727cec9a9da8fd7377f9ec09aef1da2f0901d6ae', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: 'f76ca5ac9fc02c2c7de7365a699b73f543ec1efd', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: 'bbdfe9919e65a2fbd6876376f23496feb4adf5e1', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
             // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
-            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '37c35790aafadbee0ee979ac5b1dcf28a4f29de5', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '57aedc6a3d1d383d1a2f1143a1ce3ea29fd7ee5d', 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"; }

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

@@ -316,9 +316,9 @@ export class Uploader {
         return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
     }
     render() {
-        return (h(Host, { key: 'd00c00331919db5cfc64993ff9994af5412d5de7', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'f7013a127e18f9de001ca3b47d4c320e2718accf', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, { key: '59756938b72985042da259a2a5fe24a88cbdb67d', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '34a9ec3ff46f4bb24a8e5aae14aa59b1e8c8f5ae', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { key: '535047222b8d454c5fdbd0183b2259714f21a5ad', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { key: '6c3ff3066826855a6fa062fecfa6c01f37e9640e', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/dev/chart-bar.js

@@ -0,0 +1,110 @@
+const barChart1 = document.getElementById("bar-chart-1");
+
+// Event listener for popover button triggered
+barChart1.addEventListener("wmPopoverButtonClick", (ev) => {
+    console.log("wmPopoverButtonClick: ", ev.detail);
+    document.body.style.backgroundColor = `var(--${ev.detail.color})`;
+});
+
+// Setup chart data
+setTimeout(() => {
+
+    barChart1.config = {
+      label: "Number of Students by Department",
+      subinfo: "University of Education",
+      labelPosition: "top",
+      labelWidth: "150px",
+      valueAxisLabel: "Students",
+      categoryAxisLabel: "University Departments",
+      printMode: true,
+      printModeFormat: "percentage",
+      gridMax: 1000,
+      popoverTitle: "Config Title",
+      popoverText: "Description set by the config",
+      popoverButtonText: "View Details",
+    };
+
+    barChart1.data = [
+      { barLegend: "Marine Biology", amount: 250, whatever: "whatever", color: "wmcolor-border" },
+      { barLegend: "Organic Chemistry", amount: 500 },
+      { barLegend: "Aeronautical Engineering", amount: 982 },
+      { barLegend: "Pure Mathematics", amount: 100 },
+      { barLegend: "Astrophysics", amount: 500, popoverTitle: "Astrophysics", popoverText: "Astrophysics description set by the data", popoverButtonText: "View Astrophysics Details" },
+      { barLegend: "Social Psychology", amount: 900 },
+      { barLegend: "Urban Sociology", amount: 500 },
+      { barLegend: "Behavioral Economics & Economy Sciences", amount: 250 },
+    ];
+}, 1000);
+
+////////////////////////////////////////////////////////////
+// Control Panel
+////////////////////////////////////////////////////////////
+
+// Value format control
+const valueFormatAmount = document.getElementById("value-format-amount");
+const valueFormatPercentage = document.getElementById("value-format-percentage");
+
+valueFormatAmount.addEventListener("change", () => {
+    barChart1.config = {...barChart1.config, valueFormat: "amount"};
+});
+
+valueFormatPercentage.addEventListener("change", () => {
+    barChart1.config = {...barChart1.config, valueFormat: "percentage"};
+});
+
+// Pattern control
+const patternDiscrete = document.getElementById("pattern-discrete");
+const patternSemantic = document.getElementById("pattern-semantic");
+
+patternDiscrete.addEventListener("change", () => {
+    barChart1.config = {...barChart1.config, colors: "discrete"};
+});
+
+patternSemantic.addEventListener("change", () => {
+    barChart1.config = {...barChart1.config, colors: "semantic"};
+});
+
+// Sort control
+const sortAscending = document.getElementById("sort-ascending");
+const sortDescending = document.getElementById("sort-descending");
+sortAscending.addEventListener("change", updateSort);
+sortDescending.addEventListener("change", updateSort);
+
+function updateSort() {
+    barChart1.config = {...barChart1.config, sort: document.querySelector("input[name='sort']:checked").value};
+}
+
+const sortNone = document.getElementById("sort-none");
+
+sortNone.addEventListener("change", () => {
+    barChart1.config = {...barChart1.config, sort: null};
+});
+
+// Chart label control
+const chartLabelInput = document.getElementById("chart-label-input");
+chartLabelInput.addEventListener("change", (ev) => {
+    barChart1.config = {...barChart1.config, label: ev.target.value};
+});
+
+// Axis label control
+const axisLabelInput = document.getElementById("axis-label-input");
+axisLabelInput.addEventListener("change", (ev) => {
+    barChart1.config = {...barChart1.config, valueAxisLabel: ev.target.value};
+});
+
+// Legend position control
+function updateLegendPosition() {
+    barChart1.config = {...barChart1.config, showLegend: document.querySelector("input[name='legend']:checked").value};
+}
+
+const legendTop = document.getElementById("legend-top");
+const legendBottom = document.getElementById("legend-bottom");
+const legendLeft = document.getElementById("legend-left");
+const legendRight = document.getElementById("legend-right");
+const legendNone = document.getElementById("legend-none");
+
+legendTop.addEventListener("change", updateLegendPosition);
+legendBottom.addEventListener("change", updateLegendPosition);
+legendLeft.addEventListener("change", updateLegendPosition);
+legendRight.addEventListener("change", updateLegendPosition);
+legendNone.addEventListener("change", updateLegendPosition);

package/dist/collection/global/interfaces.js

@@ -49,3 +49,22 @@ export const getWmMode = (ref) => {
         document.documentElement.getAttribute("mode") ||
         defaultMode);
 };
+export const chartPaletteDiscrete = [
+    "wmcolor-dataviz-discrete-01",
+    "wmcolor-dataviz-discrete-02",
+    "wmcolor-dataviz-discrete-03",
+    "wmcolor-dataviz-discrete-04",
+    "wmcolor-dataviz-discrete-05",
+    "wmcolor-dataviz-discrete-06",
+    "wmcolor-dataviz-discrete-07",
+];
+export const chartPaletteSemantic = [
+    "wmcolor-dataviz-semantic-positive-01",
+    "wmcolor-dataviz-semantic-positive-02",
+    "wmcolor-dataviz-semantic-negative-01",
+    "wmcolor-dataviz-semantic-negative-02",
+    "wmcolor-dataviz-semantic-neutral-01",
+    "wmcolor-dataviz-semantic-neutral-02",
+    "wmcolor-dataviz-semantic-neutral-03",
+    "wmcolor-dataviz-semantic-unspecified",
+];

package/dist/esm/{app-globals-92dbbc0c.js → app-globals-2d0df1cb.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.22.1";
+const version = "5.23.0-alpha.1";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/{chartFunctions-a834e2a9.js → chartFunctions-9c95674d.js}

@@ -1,5 +1,5 @@
 import { h } from './index-130e07bb.js';
-import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-9df607f2.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-2cfbd8c7.js';
 
 const colors = {
     salmon: "#ff5f4e",
@@ -721,5 +721,40 @@ function renderHiddenValuesMessage() {
         h("br", null),
         seeDetailsMessage));
 }
+function formatDisplayValue(amount, amountTotal, valueFormat) {
+    switch (valueFormat) {
+        case "amount":
+            return amount.toLocaleString();
+        case "percentage":
+            return `${Math.round((amount / amountTotal) * 100).toFixed(0)}%`;
+        default:
+        case "none":
+            return "";
+    }
+}
+function isNiceInterval(interval, niceValues = [1, 1.5, 2, 2.5, 3, 5, 10]) {
+    const magnitude = Math.pow(10, Math.floor(Math.log10(interval)));
+    const normalized = interval / magnitude;
+    const normalizedComparision = niceValues.some((nice) => Math.abs(normalized - nice) < 0.0001); // check equality with floating point tolerance
+    return normalizedComparision;
+}
+function suffixNumber(value) {
+    if (value >= 1000000)
+        return `${(value / 1000000).toFixed(value % 1000000 === 0 ? 0 : 1)}M`;
+    if (value >= 1000)
+        return `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}K`;
+    return value.toString();
+}
+function findLargestNiceInterval(maxIntervals, total) {
+    // Given a max number of intervals and a total, iterate down until a nice way to divide the total is found.
+    // Otherwise, return 1 interval
+    for (let intervals = maxIntervals; intervals >= 1; intervals--) {
+        const candidateInterval = total / intervals;
+        if (isNiceInterval(candidateInterval)) {
+            return { numIntervals: intervals, interval: candidateInterval };
+        }
+    }
+    return { numIntervals: 1, interval: total };
+}
 
-export { allChartsDetails as a, renderSimpleBar as b, renderStackedBar as c, renderDoughnut as d, renderInstructionsText as e, renderLegend as f, getDetails as g, handleChartKeydown as h, renderHiddenValuesMessage as i, exitChart as j, amountToPercent as k, renderCompletionMessage as l, renderLegendItem as m, abbrNumber as n, getInterval as o, removeSegmentInfoHighlight as r };
+export { allChartsDetails as a, renderSimpleBar as b, renderStackedBar as c, renderDoughnut as d, renderInstructionsText as e, renderLegend as f, getDetails as g, handleChartKeydown as h, renderHiddenValuesMessage as i, exitChart as j, amountToPercent as k, renderCompletionMessage as l, renderLegendItem as m, formatDisplayValue as n, findLargestNiceInterval as o, getMaxTicks as p, abbrNumber as q, removeSegmentInfoHighlight as r, suffixNumber as s, getInterval as t };

package/dist/esm/{functions-9df607f2.js → functions-2cfbd8c7.js}

@@ -10662,4 +10662,4 @@ const weekdays = [
     intl.formatMessage({ id: "date.saturday", defaultMessage: "Saturday" }),
 ];
 
-export { findPrev as A, getTextDir as B, throttle as C, getContextMeasurements as D, dateFind as E, calendar_months as F, findParentWithHiddenOverflow as G, transposeMatrix as H, wrapAround as I, getSmallestSkipInterval as J, calcPercentageInRange as K, isElOrChild as L, makeISO as M, clampDate as N, getMonthLength as O, weekdays as P, handleDisabledAttribute as a, triggerFormSubmit as b, checkForActiveElInShadow as c, debounce as d, safeMultiplyFloat as e, getPosition as f, generateId as g, hideTooltip as h, intl as i, findAllScrollableParents as j, dateToISO as k, shouldOpenUp as l, hasRoomRight as m, truncateText as n, getLastFocusableDescendant as o, csvToArray as p, snakeCaseToCamelCase as q, getNewIndexToFocus as r, showTooltip as s, toBool as t, getCumulativeScrollOffset as u, shouldOpenDown as v, shouldShiftRight as w, shouldShiftLeft as x, measureText as y, findNext as z };
+export { findPrev as A, getTextDir as B, throttle as C, isElOrChild as D, getContextMeasurements as E, dateFind as F, calendar_months as G, findParentWithHiddenOverflow as H, transposeMatrix as I, wrapAround as J, getSmallestSkipInterval as K, calcPercentageInRange as L, makeISO as M, clampDate as N, getMonthLength as O, weekdays as P, handleDisabledAttribute as a, triggerFormSubmit as b, checkForActiveElInShadow as c, debounce as d, safeMultiplyFloat as e, getPosition as f, generateId as g, hideTooltip as h, intl as i, findAllScrollableParents as j, dateToISO as k, shouldOpenUp as l, hasRoomRight as m, truncateText as n, getLastFocusableDescendant as o, csvToArray as p, snakeCaseToCamelCase as q, getNewIndexToFocus as r, showTooltip as s, toBool as t, getCumulativeScrollOffset as u, shouldOpenDown as v, shouldShiftRight as w, shouldShiftLeft as x, measureText as y, findNext as z };

package/dist/esm/index-130e07bb.js

@@ -152,6 +152,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './wm-tab-item_3.entry.js').then(processMod, consoleError);
+                case 'wm-chart-bar':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './wm-chart-bar.entry.js').then(processMod, consoleError);
                 case 'wm-chart-slice':
                     return import(
                       /* webpackMode: "lazy" */
@@ -172,6 +176,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './wm-optgroup.entry.js').then(processMod, consoleError);
+                case 'priv-chart-popover_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './priv-chart-popover_2.entry.js').then(processMod, consoleError);
                 case 'priv-navigator-button':
                     return import(
                       /* webpackMode: "lazy" */
@@ -184,10 +192,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './priv-calendar.entry.js').then(processMod, consoleError);
-                case 'priv-chart-popover':
+                case 'priv-chart-popover-old':
                     return import(
                       /* webpackMode: "lazy" */
-                      './priv-chart-popover.entry.js').then(processMod, consoleError);
+                      './priv-chart-popover-old.entry.js').then(processMod, consoleError);
                 case 'priv-option-list':
                     return import(
                       /* webpackMode: "lazy" */

package/dist/esm/{interfaces-cc5b177f.js → interfaces-30d10bc0.js}

@@ -30,5 +30,24 @@ const getWmMode = (ref) => {
         document.documentElement.getAttribute("mode") ||
         defaultMode);
 };
+const chartPaletteDiscrete = [
+    "wmcolor-dataviz-discrete-01",
+    "wmcolor-dataviz-discrete-02",
+    "wmcolor-dataviz-discrete-03",
+    "wmcolor-dataviz-discrete-04",
+    "wmcolor-dataviz-discrete-05",
+    "wmcolor-dataviz-discrete-06",
+    "wmcolor-dataviz-discrete-07",
+];
+const chartPaletteSemantic = [
+    "wmcolor-dataviz-semantic-positive-01",
+    "wmcolor-dataviz-semantic-positive-02",
+    "wmcolor-dataviz-semantic-negative-01",
+    "wmcolor-dataviz-semantic-negative-02",
+    "wmcolor-dataviz-semantic-neutral-01",
+    "wmcolor-dataviz-semantic-neutral-02",
+    "wmcolor-dataviz-semantic-neutral-03",
+    "wmcolor-dataviz-semantic-unspecified",
+];
 
-export { getWmMode as a, getIconCodeFromName as g };
+export { getWmMode as a, chartPaletteDiscrete as b, chartPaletteSemantic as c, getIconCodeFromName as g };

package/dist/esm/{intl-86bec8ef.js → intl-23d21b06.js}

@@ -1,4 +1,4 @@
-import { i as intl } from './functions-9df607f2.js';
+import { i as intl } from './functions-2cfbd8c7.js';
 
 const globalMessages = {
     characterLimitReached: intl.formatMessage({