@watermarkinsights/ripple 5.22.0-alpha.1 → 5.22.0-alpha.3

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

@@ -27,9 +27,6 @@ export class TabList {
         const tabIds = this.tabItems.map((t) => t.tabId);
         return allPanels.filter((p) => tabIds.includes(p.tabId));
     }
-    getPanel(tabId) {
-        return this.panels.find((p) => p.tabId === tabId);
-    }
     setSelected(id) {
         this.tabItems.map((tab) => (tab.selected = tab.tabId === id));
         const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;
@@ -70,7 +67,7 @@ export class TabList {
         this.handleTabFocused(ev.detail.tabItem);
     }
     setAriaOnPanelAndTab(tab) {
-        const panel = this.getPanel(tab.tabId);
+        const panel = this.panels.find((p) => p.tabId === tab.tabId);
         // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.
         if (!panel) {
             if (this.panels.length === 1) {
@@ -104,23 +101,26 @@ export class TabList {
     }
     handleKeydown(ev) {
         const key = ev.detail.key;
-        const index = this.tabItems.indexOf(ev.detail.tabItem);
-        if (key === "ArrowLeft" || key === "ArrowRight") {
-            this.handleLeftRightArrow(index, key);
-        }
-    }
-    handleLeftRightArrow(index, key) {
-        if (key) {
-            index = key === "ArrowLeft" ? index - 1 : index + 1;
-        }
-        if (index < 0) {
-            index = this.tabItems.length - 1;
+        let index = this.tabItems.indexOf(ev.detail.tabItem);
+        // focusing panel on down arrow
+        if (key === "ArrowDown") {
+            const activePanel = this.panels.filter((p) => p.active)[0];
+            activePanel && activePanel.focus();
         }
-        else if (index === this.tabItems.length) {
-            index = 0;
+        else if (key === "ArrowLeft" || key === "ArrowRight") {
+            // focusing prev/next tab item on right/left arrow
+            if (key) {
+                index = key === "ArrowLeft" ? index - 1 : index + 1;
+            }
+            if (index < 0) {
+                index = this.tabItems.length - 1;
+            }
+            else if (index === this.tabItems.length) {
+                index = 0;
+            }
+            const tabToFocus = this.tabItems[index];
+            this.getLinkEl(tabToFocus).focus({ preventScroll: true });
         }
-        const tabToFocus = this.tabItems[index];
-        this.getLinkEl(tabToFocus).focus({ preventScroll: true });
     }
     handleTabFocused(tabItem, alignment = "auto") {
         // Calculate and apply scroll position
@@ -257,15 +257,15 @@ export class TabList {
         this.announcement = message;
     }
     render() {
-        return (h(Host, { key: 'fb6f216a7c2b9008565d2084751daf40267aa43e' }, h("div", { key: '6d8ade20d79c1d3e152cdf01bad10c3b7494a8a6', class: "component-wrapper" }, h("wm-button", { key: '70be40893bb3ececa751eaccf86e33c9035e01b5', 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: '30a4176c4ba68f4a30c269d0998f7634b66ebc0c', 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: 'd3225fe95f7c09287d79886a8a22cf80aab18bb7' })), h("wm-button", { key: 'ef52e8c658dbe0a968bb89c8b3ff15a981d83d23', 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: 'cc2cf63d5f82dbf25b93888e13cde3fdab9453dc', "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.css

@@ -862,6 +862,7 @@
 
 wm-tab-panel {
   visibility: inherit;
+  display: block;
 }
 wm-tab-panel.tab-hidden {
   display: none;
@@ -872,6 +873,7 @@ wm-tab-panel:active {
 wm-tab-panel:focus {
   outline: none;
 }
-wm-tab-panel.user-is-tabbing:focus {
-  outline: -webkit-focus-ring-color auto 5px;
+wm-tab-panel:focus-visible, wm-tab-panel.user-is-tabbing:focus {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: -3px;
 }

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: 'a7969f5c022d18fc579947c557b8177fdee413b4', role: "tabpanel", 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 = [
+      { label: "Marine Biology", amount: 250, whatever: "whatever", color: "wmcolor-border" },
+      { label: "Organic Chemistry", amount: 500 },
+      { label: "Aeronautical Engineering", amount: 982 },
+      { label: "Pure Mathematics", amount: 100 },
+      { label: "Astrophysics", amount: 500, popoverTitle: "Astrophysics", popoverText: "Astrophysics description set by the data", popoverButtonText: "View Astrophysics Details" },
+      { label: "Social Psychology", amount: 900 },
+      { label: "Urban Sociology", amount: 500 },
+      { label: "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-209e6bae.js → app-globals-213e1dce.js}

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

package/dist/esm/{chartFunctions-02a60556.js → chartFunctions-f22160b5.js}

@@ -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 };