@watermarkinsights/ripple 5.23.0-alpha.0 → 5.23.0-alpha.4

package/dist/cjs/wm-modal_3.cjs.entry.js

@@ -131,11 +131,11 @@ const Modal = class {
         }
     }
     render() {
-        return (index.h("dialog", { key: '79bdf56bcea90cc9848bf4027e0a2552eee31709', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("div", { key: '5fda5d81c1b468c883316d319a6975852106de5d', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (index.h("dialog", { key: '7e79523b945c00909991a3dcfecfda79e92c882b', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("div", { key: 'c032006260d0c083a5b796e20705cb99f6fa44b9', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && index.h("div", { key: '0255a1dda891b5e69874cc02f4579fac9ec5de04', class: "wm-tooltip" }), index.h("slot", { key: 'e861a82a26202beb548db440a9e708f6c4fdad84' }), index.h("div", { key: 'ad5fc44a752fb903338b175cf3eee115e416047f', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && index.h("div", { key: '384ed4e4fa347e50d1f9c78a3c1d84d6dab9f34a', class: "wm-tooltip" }), index.h("slot", { key: '6ec6ba8b0b90db721ff1e29db8f259d2f1cff6d0' }), index.h("div", { key: '3795b7025286e5d4f542cfccad9c6851d2f22a8d', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }
@@ -182,7 +182,7 @@ const ModalFooter = class {
         }
     }
     render() {
-        return (index.h("div", { key: '491f1ad5bb178b42c9e51c4d0879070e77a7f2a9', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { key: 'b6c785db316aba6a14f6f2ffe6b54e496fc46f80', class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { key: '5a73e1f8579637c8c0f16d1fd98daa1059b70ca4', class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { key: '26c0c6eefd2ef6e0d3ebb87d6d79c1ea4237be3b', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), index.h("wm-button", { key: '61832b3a218df2e001b532bb2c3968de0665a9db', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
+        return (index.h("div", { key: '09a767c503fd0c29d548b626ce5d4e9f2dc05fab', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { key: '2fb279caa8ab8d71959d218dbae28c614acce8e5', class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { key: '5f182514fc8bfa243ff630f6638ae27500f89c21', class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { key: 'b27dc355a2794a0ca63774a80132aee49809762a', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), index.h("wm-button", { key: 'd03404a339209bae2fbd181227ac18c547667570', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
     }
     get el() { return index.getElement(this); }
 };
@@ -214,7 +214,7 @@ const ModalHeader = class {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (index.h(index.Host, { key: '85348ecf5ef8d53807c965890fe245a6f5962003' }, index.h("div", { key: '48f782896bd53234c601b5ff853ed7ec0d077357', class: "wm-wrapper" }, index.h("div", { key: '1297ffe9269d4866ae6d343dfb37b50ea7cb1733' }, index.h("h2", { key: '6b777b66f9aec32bdbe1a2464b709d4a7d8c7add', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { key: '415004f8cd63c2ac1a2beab4fe2d732edd3b06c8', class: "subtitle" }, this.subheading))), index.h("wm-button", { key: '342a5de331967b530ce75b074016ec724099bfe0', "button-type": "navigational", icon: "#close", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (index.h(index.Host, { key: 'fdd199695b2ceb94f64a277ceae16c596b406071' }, index.h("div", { key: '40e435da7701bf5a174028a153b5a040338ec0ed', class: "wm-wrapper" }, index.h("div", { key: '51f7b66ec56a8e977bdc75e84734a63b869ba53b' }, index.h("h2", { key: '23abdc0aba1d5ee84a66c6cf9facaf6c61f8ccc2', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { key: 'bcbb5454236dc3e51f66e08ce156a28a13335eb7', class: "subtitle" }, this.subheading))), index.h("wm-button", { key: '9390af056a9a0ce8da6d8387409c73d6b5535942', "button-type": "navigational", icon: "#close", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/wm-navigation_3.cjs.entry.js

@@ -106,9 +106,9 @@ const Navigation = class {
             } }));
     }
     render() {
-        return (index.h(index.Host, { key: '815117725f45f3fae04ee2ac4f573cf7ccb8885c', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { key: '59416405b9566485d64ba1311e7f24dfca6d91a9', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { key: '98eee20d96ed81347847d7af866d9d5f48010638', class: "tray" }, index.h("div", { key: 'c65e733eac1eb49b69254bb19330226679e407e3', class: "toggle-wrapper" }, index.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 ? intl.globalMessages.close : intl.globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (index.h(index.Host, { key: '40e8ea08dd4de4b325b8157563b2053448ca90f5', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { key: '906975fbaad775dde78cf94e7ace20caa32027f6', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { key: '29a269e61ef8ca8bcccf1d4bbfe7d3c6f8ba2758', class: "tray" }, index.h("div", { key: '38b207f710cc26163b7eff2ad3eca963f5bdab3c', class: "toggle-wrapper" }, index.h("wm-button", { key: 'f5bae797529433205ec8abd0f025db335277e3df', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? intl.globalMessages.close : intl.globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), index.h("ul", { key: 'ae95f619a097413291d70f930f0fc4e97f5a5e37', class: "navlist" }, index.h("slot", { key: '833f7502a28f7ff833f7bdac17ad62e3dca9d12b' }))), this.isCollapsible && (index.h("div", { key: 'fdb8e1288416191cebc3557c79c089359634d315', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), index.h("ul", { key: '956f80bb6f1f873186e9787836c0748fbd6de708', class: "navlist" }, index.h("slot", { key: '4846ab62c5a8cd2d76b3b74f6fa9370ea12ff7de' }))), this.isCollapsible && (index.h("div", { key: '9639e7b704cc88fd8227aa4a30cd88d21951c015', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -157,7 +157,7 @@ const NavigationHamburger = class {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '1b169365ecef2816543910f270889a1921ed3502', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, index.h("button", { key: '8148f5deb298b9c2a143db9984e36733b03d0a35', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => functions.showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => this.isTabbing && functions.showTooltip("right", this.el, this.showNavMessage), onBlur: () => functions.hideTooltip(), onClick: () => this.handleClick() }, index.h("span", { key: '32f5160cab5eb1dc34275dd9cbb7a78cd2990b6e', class: "svg-icon svg-menu" }))));
+        return (index.h(index.Host, { key: '37f512ffa18761c2a10204012171d5ba352c28ef', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, index.h("button", { key: '755bce6170da2475c2bf6ef648cf16498ab60eeb', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => functions.showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => this.isTabbing && functions.showTooltip("right", this.el, this.showNavMessage), onBlur: () => functions.hideTooltip(), onClick: () => this.handleClick() }, index.h("span", { key: 'e66062eb9341bad68269b6e446a7b07478e9221a', class: "svg-icon svg-menu" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -176,7 +176,7 @@ const NavigationItem = class {
         this.active = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '02bd2737c6645d35a8731940821624db4d63e1d6', role: "listitem" }, index.h("a", { key: '8fdb541089718f0ac0549da6ab4415389c010c36', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, index.h("div", { key: '910e96868afc97cb19dc91aade7626e39b750e2e', class: "icon", "aria-hidden": "true" }, index.h("slot", { key: '5ddbe770001cac5df79b16249141364db172d256' })), index.h("div", { key: '6e4428b3292d847e79d7159149cece72dee59fcc', class: "text" }, this.text))));
+        return (index.h(index.Host, { key: '4e606df3119b6f8ccaed56affc38852ceaea8c41', role: "listitem" }, index.h("a", { key: '7a29df7fc9f86c11322f05aef0640bd734074b36', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, index.h("div", { key: 'd3d72b08a32e41f4fb27122d5dda1ca1a456e822', class: "icon", "aria-hidden": "true" }, index.h("slot", { key: 'a92895fc556c0013348b5053c5eb53f18f70a8d5' })), index.h("div", { key: '341345b952f853c45253f61debed8cbff5bd5bdd', class: "text" }, this.text))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-nested-select.cjs.entry.js

@@ -301,16 +301,16 @@ const NestedSelect = class {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (index.h(index.Host, { key: '0a1e350bb54bd55cd63453bc7a62c79f9fe2cffe', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: 'c39f5c39105186a6becbcd06f93ae62b75e06f5a', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '3a8893cd1ad69abafc85987001a82e1801879895', class: "label-wrapper" }, index.h("label", { key: 'a2214f07dcc56e805cea3308b1c8ad8c4de1c1ef', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), 
+        return (index.h(index.Host, { key: 'f9d5f5938c7616ca8a21830e26fa97389bedce0e', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: '101141bb02e455b57b0fc7a32cd14767281de1fe', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'deb21859c85dfdae5e9449785417142463fa653d', class: "label-wrapper" }, index.h("label", { key: 'ec765e72aac1232a99585c65d4187a390f675235', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField ? (index.h("span", { class: "required" }, index.h("span", { class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { "aria-hidden": "true" }, "*"))) : ("")), index.h("div", { key: '41d6a46a4d6875205a5c7000915cfa79828199e7', class: "button-wrapper" }, index.h("button", Object.assign({ key: 'f52847e0ce5a0c85d4c5753a5922da146cbb25a5' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), index.h("span", { key: 'ea3b300e83dfd659fa728ea8826f8663b7b509a3', class: "overflowcontrol" }, index.h("span", { key: '7b40fea61b005aede5173690b8ac056209b27587', class: "button-text" }, this.renderButtonText())), index.h("div", { key: '09c0b29901123c4b00e32a375e17218d68af0a19', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '2912d5c58cfffc0ee1d9e2d681b89f70f6a1bb68', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: '64e5c65e8af0445cdd2933ee7e8027d10c03d829', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), index.h("div", { key: 'ba31768e22153c41c2eecb6de7e9de5420bc446a', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
+        this.requiredField ? (index.h("span", { class: "required" }, index.h("span", { class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { "aria-hidden": "true" }, "*"))) : ("")), index.h("div", { key: '0735159dcea1c3cdf9145e18b224fedf90cd3ed7', class: "button-wrapper" }, index.h("button", Object.assign({ key: '4326702188583f9c210257f7e95dcee3d501825e' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), index.h("span", { key: 'f3fb5f069b0ec70419c0ade0a1c520e8da79c453', class: "overflowcontrol" }, index.h("span", { key: '4da352b8a0312287ae27205731c7d46ff2cac88e', class: "button-text" }, this.renderButtonText())), index.h("div", { key: 'f85e648f0da497df4d906a262bba62b2fbe3c5db', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '7ab45a7201b3375d59ddef5ac86a2c0fea438662', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: 'a3153d330243404ed4c4dd931a182cc47f2a5672', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), index.h("div", { key: 'e106169ebfbe226b886d972f41e3a93d88ed8f26', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
             return (index.h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         index.forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, index.h("div", { class: "option-text" }, index.h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && index.h("div", { class: "disabled-indication" }, "Disabled")), index.h("div", { class: "svg-icon svg-next" })));
-        })), index.h("div", { key: '02a98c5b1defbea903b342f8b38f39986c687170', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, index.h("slot", { key: '79dd9780df96268a4c2c04ef78d45b14462ab3e5' }))), index.h("div", { key: '2ebac56be3a30480d4f1d476ef8fc241169e1075', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), index.h("div", { key: '6842a3f6062ba4d79e2d539f88d187d51478c72b', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        })), index.h("div", { key: 'ba3ad38b66537f365379921ebcec8f630c934a93', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, index.h("slot", { key: 'b0083c7e49ba59f7a36459b599f79a89121c09e5' }))), index.h("div", { key: '4ccb451822e5ace5e34a96f2560d936b6c02b9ad', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), index.h("div", { key: 'cdca96e717a912c022096a9c781199fabc040a43', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-optgroup.cjs.entry.js

@@ -61,7 +61,7 @@ const Optgroup = class {
         functions.handleDisabledAttribute(this.el, this.isDisabled);
     }
     render() {
-        return (index.h(index.Host, { key: '7c310f384ca367c49fea1dfee2638ba4fb00eba5' }, index.h("div", { key: '58f81aa34832a2dff3e1eb4d65e3b212a00521b4', class: `list-wrapper` }, index.h("priv-option-list", { key: 'd3a618f8369f3bf7d589f33c858de9354a65adb2', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, index.h("slot", { key: 'ebbc67c87d1745350c2aff0c69fcc411f69a5b06' })))));
+        return (index.h(index.Host, { key: 'f26edb066ca14bbad62dc07198651d180be2ed3b' }, index.h("div", { key: '202a27a0d33c34b861e28cfe08407225589905e9', class: `list-wrapper` }, index.h("priv-option-list", { key: '68a0f5992c24ee62ca7539ba900afeda25f313e5', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, index.h("slot", { key: '8f445e06b048ccd6e49627beb989be9b6c55d651' })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-option_2.cjs.entry.js

@@ -166,7 +166,7 @@ const Option = class {
         this.parentOptionList.addEventListener("optionListSearchChanged", (ev) => this.handleSearch(ev));
     }
     render() {
-        return (index.h(index.Host, { key: 'd26e8bfc356e68f71747c97ec999ebfe80aa81f9', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, index.h("div", { key: 'b20cd4ea1e33c17c5603e4439465239d2983a7af', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (index.h("div", { key: 'e8f9195ee5f0e773ac0beeda221a4ef696ce2ae9', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), index.h("span", { key: '3ddca0ac8271eaefcea4f15ee6f68eb5101876bd', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), index.h("span", { key: '059df85edccf6a947f9c281835325a6eeeaa0457', class: "sr-only" }, this.el.textContent)), index.h("div", { key: '615335972019fe8c39dd287211ce3ee39770ff13', class: "subinfo" }, this.subinfo)));
+        return (index.h(index.Host, { key: '0a31affb1b8ed02ba38fce11d11b4b0919b97d5c', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, index.h("div", { key: 'b7ad9eef86983ba3ace177522f3a42a55a71bfdc', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (index.h("div", { key: '5876611c20af1169794db93b30577e48a6ce63df', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), index.h("span", { key: 'aef00aca54b33552892d73c51f70c273d9ad4088', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), index.h("span", { key: 'fb6306f9014205ce6f1d2a39ecdbd3f36141584d', class: "sr-only" }, this.el.textContent)), index.h("div", { key: 'af1894e912632a93255b5f90412990f6c0f0924b', class: "subinfo" }, this.subinfo)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -455,55 +455,74 @@ const Select = class {
         }
         this.announcement = message;
     }
-    renderButtonText() {
-        this.displayedOptions = this.childOptions.filter((x) => x.selected);
-        if (this.multiple && this.displayedOptions.length < 1) {
-            return index.h("span", null, this.placeholder);
+    handleOverflow() {
+        // handle overflow + counter for multiselect
+        // this is a fixed measurement accounting for the max width of a 3 character overflow counter
+        const overflowCounterWidth = 38;
+        const computedStyle = window.getComputedStyle(this.buttonEl);
+        // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+        const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
+        const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
+        const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
+        this.overflowCount = 0;
+        this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+        let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+        while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+            this.overflowCount++;
+            this.displayedOptions.pop();
+            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+            optionsTotalWidth = this.measurementAreaEl.clientWidth;
         }
-        else if (this.multiple && this.allSelected && this.overflowCount > 0) {
-            return this.allSelectedMessage;
+    }
+    setButtonText() {
+        if (!this.multiple) {
+            const selEl = this.childOptions.filter((x) => x.selected)[0];
+            return selEl ? selEl.textContent : "";
         }
         else {
-            // handle overflow + counter for multiselect
-            // only bother if things have changed
+            this.displayedOptions = this.childOptions.filter((x) => x.selected);
             const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
-            if (this.multiple && hasChanged) {
-                // this is a fixed measurement accounting for the max width of a 3 character overflow counter
-                const overflowCounterWidth = 38;
-                const computedStyle = window.getComputedStyle(this.buttonEl);
-                // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
-                const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
-                const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
-                const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-                this.overflowCount = 0;
-                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-                let optionsTotalWidth = this.measurementAreaEl.clientWidth;
-                while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
-                    this.overflowCount++;
-                    this.displayedOptions.pop();
-                    this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-                    optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            const noDisplayedOptions = this.displayedOptions.length < 1;
+            if (noDisplayedOptions) {
+                return this.placeholder;
+            }
+            else if (!this.buttonEl) {
+                index.forceUpdate(this.el);
+                return "";
+            }
+            else if (hasChanged) {
+                this.handleOverflow();
+                // we need to calc overflowcount as we only want to display allSelected message if there is an overflow...
+                if (this.overflowCount > 0 && this.allSelected) {
+                    // ...but it should be reset so it isn't displayed in that case
+                    this.overflowCount = 0;
+                    this.buttonText = this.allSelectedMessage;
+                }
+                else {
+                    this.buttonText = this.displayedOptions.map((x) => x.textContent).join(", ");
                 }
-                this.previousDisplayedOptions = this.displayedOptions;
             }
-            return this.displayedOptions.map((x, idx) => (index.h("span", null, idx > 0 ? ", " : "", x.textContent)));
+            this.previousDisplayedOptions = this.displayedOptions;
+            // the reason for setting a global variable and returning it
+            // is that we need the stored value when displayedOptions haven't changed.
+            return this.buttonText; // multiselect value
         }
     }
     renderOverflowCount() {
-        if (this.overflowCount > 0 && !this.allSelected) {
+        if (this.overflowCount > 0) {
             return (index.h("span", null, index.h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
         }
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (index.h(index.Host, { key: 'e58f2afa4361d7e27f94175a32acb0f93701cf76', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: '13de69b572a4af34c1abc0002bbc8a87dc7d521a', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'd234f604a3f94f843617733f6a8f5baaabc098d3', class: "label-wrapper" }, index.h("label", { key: '9dac4166a74898241e6422cd93023e5980d015bf', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), 
+        return (index.h(index.Host, { key: '32eda81294981e2d46b283c469f7373f9984dbdd', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: 'dc3e7f782326beda2517cf8878516d4d23576bf3', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '0ddf3269d861b1d252876b587346739e978117fe', class: "label-wrapper" }, index.h("label", { key: '78493121ecada1718c1f0de42cdc09289d000bc9', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField && (index.h("span", { key: '788b4c52a1e59bfb425f909374f722b5856b8fb3', class: "required" }, index.h("span", { key: '95cbdb98f925a5b80579a77147151903f2f63618', class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { key: 'ca3dacb55461f2cd7f5b81c746e5b70d8bd82f27', "aria-hidden": "true" }, "*")))), index.h("div", { key: '65cb0cbfe742c251b082adc84af5648a54ff4f12', class: "button-wrapper" }, index.h("button", { key: '8731a753912360eeb0ed4b60019463bf4398f8ae', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, index.h("span", { key: 'e8d751bedfcc1922416fc177f43153ed2dfa0f84', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { key: '104277dfd731f7138889d573ad33ab7e5f8f4ffe', class: "button-text" }, this.renderButtonText()), showSubinfo && index.h("span", { key: 'cddb5d3cb91877c2adf73978e2e3114e3a148999', class: "subinfo" }, this.selectedOptions[0].subinfo)), index.h("div", { key: 'e4e76e115d85e4a3d24a17d762dec65091c14c69', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '910df5182752522e9a709afbbb9d885b4cb93f46', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: '620f6414a70890323eb11958ff2c17415a86e437',
+        this.requiredField && (index.h("span", { key: 'dfa3603962893e5fe6542924561fbe31828b694b', class: "required" }, index.h("span", { key: '478a6d2c7e9bb56dea7165a1e762bc3a136c7c1d', class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { key: '8f3115f4a09dc109ed4580be49e3a704bd643ca0', "aria-hidden": "true" }, "*")))), index.h("div", { key: 'cbe6cc0600f11352dfc81a5a991805e757256906', class: "button-wrapper" }, index.h("button", { key: 'e943b99068a8822a65d8cc8ae6ab61999ac8a511', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, index.h("span", { key: 'e914e5cc9eabfe311e4ed57ee92744b14e3828e4', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { key: '095981a63cea28e0dbcdc269401eb511694739f6', class: "button-text" }, this.setButtonText()), showSubinfo && index.h("span", { key: 'd006aadc9c414abf0dfefc05d8fbff9c0fc1c370', class: "subinfo" }, this.selectedOptions[0].subinfo)), index.h("div", { key: '77054ec91448bc021ce4a4bacfa5a1a8130e34d3', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '1719132ac678c1a8a530e3b7f2fc3c67cd7c73ae', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: 'dc968de113b89cdf848d7a231b097a4d2308b357',
             // is-open is for the CSS transition in modern browsers
             // hidden is to wait for position calculations in Firefox
             class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
             // @ts-ignore -- don't tell typescript but we're in the future
-            onToggle: (ev) => this.handleToggle(ev) }, index.h("priv-option-list", { key: 'a059818c76eaad5b43895e30cc9a40ada0bc3ffa', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+            onToggle: (ev) => this.handleToggle(ev) }, index.h("priv-option-list", { key: '64518e2aa66f3373417506a4126fcec27de552f5', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
                 this.dropdownEl.hidePopover();
             }, onOptionListAllSelected: () => {
                 this.returnFocus = true;
@@ -511,7 +530,7 @@ const Select = class {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, index.h("slot", { key: 'a8f910407e5bbba4b5d6e004f2114f2519c56454' }))), index.h("div", { key: '13651a1650697c9860718e4665dbf300ab6e5faa', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), index.h("div", { key: 'f627a9e7035ea2f2df40493242965d2e15184de9', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, index.h("slot", { key: '138d16484638a094fd0664982e30149888cc3270' }))), index.h("div", { key: 'fc644fe425fc73337558af6dc809893e0574ba9a', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), index.h("div", { key: 'a6f373b32a1dc83a788bfd17ee410e23a6d53001', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-pagination.cjs.entry.js

@@ -214,7 +214,7 @@ const Pagination = class {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (index.h("nav", { key: '34ffd75c251b8044ceb255a113c71cd796ed3cc1', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), index.h("div", { key: '4d60c8ad94a519dc78f670c93a8d09f722861698', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (index.h("nav", { key: '0dd1e2de8fe412fcdb1e9dd55ae0aa50182bdc5f', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), index.h("div", { key: 'a2b34da3b059df6b42522d19ee4841fc02553fcf', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-search.cjs.entry.js

@@ -179,10 +179,10 @@ const Search = class {
      * End search and find render helpers
      */
     render() {
-        return (index.h(index.Host, { key: 'a3636bdd9326beaba25db7b470d27cdbeb8403f9' }, index.h("div", { key: '2f1f51709653b0c56d003b05562a0a874451c5c5', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, index.h("input", { key: '57671b412397741fe67d1fff8ca5795532ea6e22', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${functions.intl.formatMessage({
+        return (index.h(index.Host, { key: '0badc426e30ae7a816fb78fd187060c615adf238' }, index.h("div", { key: '66fe953f705a2c90c628855c0864477e62b3ebf3', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, index.h("input", { key: '52c205e6873386f5cb270666eb0e6f86aa635549', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${functions.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 }), index.h("span", { key: '6240e8b26fb69ee46e6942dc69cbdd4feca6b6a3', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), index.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()));
+            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), index.h("span", { key: '71dbaea311e49a6a576787232a10a66da287eb09', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), index.h("div", { key: '3e0ede8efc35452092bd42e684a4be6287118e44', 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 delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-snackbar.cjs.entry.js

@@ -156,11 +156,11 @@ const Snackbar = class {
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && index.h("div", { class: "svg-icon svg-open-in-new" })))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onMouseLeave: () => functions.hideTooltip(), onFocus: (ev) => this.isTabbing && functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onBlur: () => functions.hideTooltip() }, index.h("div", { class: "svg-icon svg-close" }))), index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (index.h(index.Host, { key: '94ada273fd2638ee9e4ccec7915a8011628d0009' }, index.h("div", { key: '28d0856fbaf88e90aee407d6b3524ea19dfd42c0', ref: (el) => (this.snackAreaEl = el), class: {
+        return (index.h(index.Host, { key: '84273f446de24a6f61ae4e057e49d3da182149ce' }, index.h("div", { key: '7adcbc01ac51d68ccdc6e5c1e6876adb9fdb956d', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), index.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)));
+            } }, this.renderSnackbars()), index.h("div", { key: '3314ee4b261b884600ff98ae8e9a1087f66b7d12', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/wm-tab-item_3.cjs.entry.js

@@ -41,9 +41,9 @@ const TabItem = class {
     }
     render() {
         const isDark = this.parentTabList && this.parentTabList.customBackground == "dark";
-        return (index.h(index.Host, { key: '0be5770e4b97845cae75e961888707fa0424cf51', role: "presentation" }, index.h("li", { key: '8dc34fc09ad87c512c0fde04b4ac615030c1441e', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, index.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: () => {
+        return (index.h(index.Host, { key: 'a3428f7215247e174dd989f31df553ec7c2e76bf', role: "presentation" }, index.h("li", { key: '351d39f9a6fe217ca4d43d7421d20979e5c6a5df', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, index.h("a", { key: 'b0934afc00da6283016f2245840f7c98eba023e0', 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 });
-            } }, index.h("slot", { key: '439a5046d729d0a6a82c1edb6def57c8fbf2e761' })))));
+            } }, index.h("slot", { key: 'b1f7659a3f4d34d3ba80acaf04bd7403765c120f' })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -311,15 +311,15 @@ const TabList = class {
         this.announcement = message;
     }
     render() {
-        return (index.h(index.Host, { key: '3e844b43073845226e927d8ef8635b629b3078c6' }, index.h("div", { key: '4cdc200ade5f6d9ae92b4132086ddd24997422d5', class: "component-wrapper" }, index.h("wm-button", { key: 'f9291d8039bbcf4164bff13b7874a05e82c34d8b', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: functions.intl.formatMessage({
+        return (index.h(index.Host, { key: '4d96241689596a458d8d51e03e4c68c503fbde32' }, index.h("div", { key: '97c6656543c22d7970403f3dc4233a78ef63b74d', class: "component-wrapper" }, index.h("wm-button", { key: '713d8219abec2f3743d95022302ae6083c538446', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: functions.intl.formatMessage({
                 id: "tabs.showPreviousTabs",
                 defaultMessage: "Show previous tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), index.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 }, index.h("slot", { key: '444cbb46870cc96072430fdd7f85deea1e6f3375' })), index.h("wm-button", { key: '8a84f4d13a0b25cb6c1a3ccc9fe18a4a55ac067a', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: functions.intl.formatMessage({
+            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), index.h("ul", { key: 'fe8e2e2ae3d7b13f0f55167da243a60c35df3144', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, index.h("slot", { key: 'ec32591d2a5668df5088be59b13846f5fd356b42' })), index.h("wm-button", { key: '3918f7e86164e23294c48b209fea2ce91103f76f', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: functions.intl.formatMessage({
                 id: "tabs.showNextTabs",
                 defaultMessage: "Show next tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleRightArrowClick(ev) }), index.h("span", { key: '0cde8bc3411cba96074d0389ce5ea93b06f61855', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+            }), onClick: (ev) => this.handleRightArrowClick(ev) }), index.h("span", { key: '96fb1196fcddd7b3454bce22f4febe0d57e9a40a', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -346,7 +346,7 @@ const TabPanel = class {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return index.h(index.Host, { key: '3258381fdf315b45be5bad6ee1a21420c3fe22f5', role: "tabpanel", tabIndex: "-1", class: { "tab-hidden": !this.active } });
+        return index.h(index.Host, { key: '385e332f10a9fc6221353fb83be59b0037ffefc2', role: "tabpanel", tabIndex: "-1", class: { "tab-hidden": !this.active } });
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/wm-tag-input.cjs.entry.js

@@ -937,10 +937,10 @@ const TagInput = class {
         }
     }
     render() {
-        return (index.h("div", { key: '5b248aedb7263d9980f4af6d0763741e9562a707', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '48494c601e624476c500a3bf32c13c8b58d1e487', class: "label-wrapper" }, index.h("label", { key: 'f7d1d542f51a4898ac6fe6fc321e95a5446d190c', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), this.requiredField && (index.h("div", { key: '5be180e4c932103ee24912b86853ce297d6ea8bc', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '66ccdfd87612cffdca65f4c0c3fdb9f8b6f50f66', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: '3c7c91d6673811a7b5ac54611a5c3db9a5ba3fa4', class: "upper-row" }, index.h("div", { key: 'b209dd69743057be72a1b4fd8ee71bce0dda3e1e', class: "svg-icon svg-search" }), index.h("div", { key: '1bb2e1873e45f7e2cfba59c97d96e16e24797976', class: `tags-and-input-wrapper` }, index.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) => {
+        return (index.h("div", { key: 'bc7ceb341af4255f65128f6a525a3e20e12167c5', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'f6fdfac85220dfd3b631243fca8cadb4597d6bc8', class: "label-wrapper" }, index.h("label", { key: 'f9e85609dd7073deed0387a7a067d3d5d4a758ee', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), this.requiredField && (index.h("div", { key: '43019cbc3f96e62f9777747ef549453cad428b84', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: 'be53d57e66fafb2c8d6e8df43a37f494a35083d4', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: 'a61a1bd233e6fcc89aaa0487931c2c451ebaf98b', class: "upper-row" }, index.h("div", { key: 'fb86580cf7cbaf89d7cad4410d619ef1e73aa9b0', class: "svg-icon svg-search" }), index.h("div", { key: 'b4e1479be2e46d37be3fddbc165a48730beabaad', class: `tags-and-input-wrapper` }, index.h("ul", { key: 'a650280f8c311c0b8ce2e5fca09fd943583eabec', 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 && (index.h("div", { key: '54a6ebcc34496f2eb510631739955caf4d5da467', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: '39d887a94835cff9f18e2534a709a06c882959f7', id: "info", class: "info-text" }, this.info)), index.h("div", { key: '4ff8006f313cd5caa9a3fbd6991bd78d3c5180e6', id: "error" }, this.errorMessage), index.h("div", { key: 'b592c8b5dac99392607b46ea26d47995d28f7050', 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 && (index.h("div", { key: 'c76ccb17e08ff237a00fc56e592cd8453582f654', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: '329efa16d0e5cbb0d7d9c527675340493baf2bca', id: "info", class: "info-text" }, this.info)), index.h("div", { key: '650c06b1b0380ef7cc5fd32eb91159754ac7da38', id: "error" }, this.errorMessage), index.h("div", { key: 'd4dcdd58f76c5a81e7480973a366e80fb6be51cd', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-textarea.cjs.entry.js

@@ -81,7 +81,7 @@ const Textarea = class {
         this.announcement = message;
     }
     render() {
-        return (index.h("div", { key: '74ce1775cef448b2f48729d0adf522f742b93594', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'f5c3a71608d00e886adb1ba46bf2d47284d9f948', class: "label-wrapper" }, index.h("label", { key: '952f29910b017b9d39ee0397a903d7904499e1ab', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label, this.characterLimit && (index.h("span", { key: '90abb8fdf937f9972128fc5d9b37662eff4fc082', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (index.h("span", { key: 'd13ca26a2c58f5be069299a1e9359bc723a0ef72', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: 'ba9c3724f5becfbc62ed7e18310a41dfd82740e4', class: "inner-wrapper" }, index.h("div", { key: '3961695bbd77d01d70b81f6457943a11e504a925', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, index.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" ? (index.h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { key: '316d16bf981d25bf81838166adf3b762a8cdd029', id: "info", class: "info" }, this.info)), index.h("div", { key: '17cce3c54e284a9348a1270541b84f076d88998c', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: '08451b1914a7629d7d16d99e3e78712f10b9f627', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (index.h("div", { key: '98a1bc4a7b2d670703dda7312b3f54e243a42ca4', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'cd0bb8321d1986dc0c0289fed28b6edca0106a9b', class: "label-wrapper" }, index.h("label", { key: '26ea0c3c4f0d337ce17a94994bc9c84e7260a931', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label, this.characterLimit && (index.h("span", { key: '3771ee7ef88d6a067fd27e7ab19d946ab5284044', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (index.h("span", { key: 'a7d6d49787677a5adbf3280ade5a40b5480c26a1', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '73318c22acbc096af93935b9ffd4907ccd978e3f', class: "inner-wrapper" }, index.h("div", { key: 'dc51d20aa1ac358c7c4b4b75f007a37e7f557bab', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, index.h("textarea", { key: '4515ea10856ef034f4aca1d71ec82a11b3db75c5', 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" ? (index.h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { key: 'c7fe059676f069e8fcdfe9cb3140261857da96c7', id: "info", class: "info" }, this.info)), index.h("div", { key: 'ef21da1faba7f0f7441baa2023c9de9a63c91d22', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: 'c4cbc2ffd6efa2456618d97974ca14a51a970223', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/wm-timepicker.cjs.entry.js

@@ -292,13 +292,13 @@ const Timepicker = class {
         return this.times.map((time, index$1) => (index.h("li", { id: `option${index$1 + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (index.h(index.Host, { key: 'da0fd0b1de084487ba4e32bbd53dcd514ed112bc', onBlur: () => this.close(false) }, index.h("div", { key: '2837930a62ea26bdca45bb69b45a94153104d791', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { key: '1db04c5e13d756802e2dc2edaeefd494e1499044', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: '38c1b82f7191dbf174aa4779f63fc4efac24a328', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '7d6148e99816e4cb49165f9cc0876c617f9c9d0e', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: 'ecc849f353c72d8809e497f514fc1efffa3bc00e' }, index.h("div", { key: 'ad87235c16f4fc6135a8e91d7e35a81d80bc5a3c', class: "inner-wrapper" }, index.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") }), index.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()),
+        return (index.h(index.Host, { key: 'f98804829acffe149895961cd4886b3474f6faf5', onBlur: () => this.close(false) }, index.h("div", { key: '8cf42648463b6a583a80a1aea2c0557d05b212bb', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { key: 'e95387c48dfaa41cfae939a34a491ab2f6068252', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: 'b2320f7692e4f53ef8650496b4ace2c0f895133e', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: 'f203eda85f04e464b6ebbf4d083ab2a57c38e552', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: 'e111ce9e656608013a06e35d03c2a94b0a131c20' }, index.h("div", { key: '5247aef8ff1ea9b8852d7a5f37e279832bc97396', class: "inner-wrapper" }, index.h("input", { key: 'bd9d8ed36234a3e27fdc4e13a52e94a9939f6327', 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") }), index.h("button", { key: 'a9b02c4853528bb5175f6002ac2f5acf6f7b132e', 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();
-            } }, index.h("span", { key: 'ca1897c49182b7a78d78bc3920cee38a3b43baab', class: "svg-icon svg-time" })), index.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())), index.h("div", { key: 'fe8a9b32c74d40068500979a5af7fd3e4486428a', id: "error", class: "error" }, this.errorMessage)), index.h("div", { key: '3e1e3afd35c19dc2dc7a5635445ec3c5722f2f13', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, index.h("span", { key: '5a056cfb78d1cbe04dcb406a193ef4805ad307da', class: "svg-icon svg-time" })), index.h("ul", { key: '5dea217b8288309b4928f5ac796770f35980c57a', 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())), index.h("div", { key: 'aef93e8dab933cdfa73fa63fd223c76f8b739285', id: "error", class: "error" }, this.errorMessage)), index.h("div", { key: '03be6148df4a4b474c91b03dbd1764b01b841e18', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-toggletip.cjs.entry.js

@@ -238,11 +238,11 @@ const Toggletip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '4ef06e1cd3a72fe9b8234aa549116d2e4f7f266c', class: `size-${this.targetSize}` }, index.h("button", { key: '727cec9a9da8fd7377f9ec09aef1da2f0901d6ae', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        return (index.h(index.Host, { key: '56260e54c520a577c7aea91ab8bc96f17c289a31', class: `size-${this.targetSize}` }, index.h("button", { key: '6607e14bc37144ca2fe0e8d2625772510faa9ea0', 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 && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: 'bbdfe9919e65a2fbd6876376f23496feb4adf5e1', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: '8771bfc3780775227334f2fb23df98fe8df6f191', 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), index.h("div", { key: '57aedc6a3d1d383d1a2f1143a1ce3ea29fd7ee5d', 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), index.h("div", { key: 'cc3081f4a2446a79f05a057cb42bf4057c1a3047', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-uploader.cjs.entry.js

@@ -326,9 +326,9 @@ const Uploader = class {
         return (index.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" && (index.h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, index.h("span", { class: "upload-arrow" }), index.h("span", null, "Drop to Upload")))));
     }
     render() {
-        return (index.h(index.Host, { key: '59756938b72985042da259a2a5fe24a88cbdb67d', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.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
+        return (index.h(index.Host, { key: '2845280b1c6de75ac92b5ca4c331c5ab7d783e66', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: '23f86b3cd9edf9123c5c0f8a625cf04649a863bc', 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" }), index.h("div", { key: '6c3ff3066826855a6fa062fecfa6c01f37e9640e', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), index.h("div", { key: '7f42eefcc7e94e67ec3821d6b2c2db61e901b571', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.js

@@ -128,7 +128,7 @@ export class ChartPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "ChartData",
-                    "resolved": "undefined | { [key: string]: any; label: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
+                    "resolved": "undefined | { [key: string]: any; barLegend: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartData": {
                             "location": "import",
@@ -253,7 +253,7 @@ export class ChartPopover {
                 },
                 "complexType": {
                     "original": "ChartData",
-                    "resolved": "{ [key: string]: any; label: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
+                    "resolved": "{ [key: string]: any; barLegend: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartData": {
                             "location": "import",

package/dist/collection/components/charts/wm-chart-bar/wm-chart-bar.css

@@ -886,6 +886,7 @@
 .chart-wrapper {
   display: flex;
   container: chart-measure/inline-size;
+  gap: 0.75rem;
 }
 
 .legend.--top {
@@ -935,19 +936,22 @@
   grid-template-columns: minmax(0, max-content) auto 1fr;
   grid-template-rows: 1fr;
   margin-right: 3rem;
+  row-gap: 0.75rem;
 }
 
 .chart-right-side {
   grid-column: 4;
   grid-row: 1/-1;
 }
+.chart-right-side:empty {
+  display: none;
+}
 
 .category-axis-label {
   max-width: 9.375rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-inline-end: 0.75rem;
 }
 @container chart-measure (max-width: 414px) {
   .category-axis-label {
@@ -976,7 +980,6 @@
   grid-column: 2/-1;
   row-gap: 0.75rem;
   align-items: center;
-  margin-block-end: 0.75rem;
   grid-template-rows: repeat(var(--row-count), minmax(1.5rem, 1fr)) 0;
 }
 
@@ -1062,7 +1065,6 @@
   display: flex;
   justify-content: space-between;
   font-size: 0.75rem;
-  margin-block-end: 0.75rem;
 }
 @container chart-measure (max-width: 414px) {
   .x-axis .tick:not(:first-of-type):not(:last-of-type) {