@watermarkinsights/ripple 5.16.0-alpha.3 → 5.16.0-alpha.6

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: 'c99407e9c7ad10c50dd6dd432e0d3239b7c994df', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '5ca392ca93d1ffac8a230c319220519ec0dc3a2d', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'c220ee0896616b8134018bbdff9e7711751d0397', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '302211029eb93c2808826f286b27542bca4490b6', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '224cb3bd0f006372b88952f8c1585edc75be993c', "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: '1f7745220c7ad6d0aca3efd4b3cb8c334e680127', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '88168cdc61009781665a8a9edf365fa67907a770', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '2f2314c0cb6160b86e3ce361fd3a8536e06ad154', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '8cd98e5c43a01e42c38c54f8f9421cd20db4f34a', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '3b30db05b3a1101b6865b5986452c284f16733ef', "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: '63e89303861f1ce98048eb433941db98c2d36e32' }, h("div", { key: '1777289f1b58fe62defafb7495d7a924079212db', class: "wm-wrapper" }, h("div", { key: '48a859d6712dae5f26b3c0bb41dd8ea40b0882f0' }, h("h2", { key: '2896aca5496c39929593aebd36b7b0bc13b3a8a2', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '31e62c779c355263f22567afb3cf395476df5ff7', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'df9c21a3db62893b43d400b0aed159896a186d44', "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: '6298c005e1a4cc648e1311138858845bb121729d' }, h("div", { key: 'af42c86d168c9c5e2e77c39816f74f8801b39e53', class: "wm-wrapper" }, h("div", { key: '23e83cea157490d8db35b6f5b94e4aec59adccef' }, h("h2", { key: 'a2c95748bc7296ba241a1e0c6a6db7316d8c20de', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '0aefd7af87247f19ee926ef097f4ea8f76d49faf', class: "subtitle" }, this.subheading))), h("wm-button", { key: '1a74cb3f9beb7f01a60ae686ac01659a1d8ca23c', "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-pss-header"; }
     static get originalStyleUrls() {

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

@@ -112,9 +112,9 @@ export class ModalPss {
         }
     }
     render() {
-        return (h(Host, { key: '01cbfca5fef86d2177b2156d39ddc94616fc745e', 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: 'bcd5fb7bf017cb1a5263e51a105fab47cb268bdf', 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: '61d3b91a5bc6f68c0358d1d23fa2a45a059a1cf7', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'ba39c5a0733ea1e6367299a71aecf73d5a07b0da', class: "sr-only", tabIndex: 0, onFocus: () => {
+            } }, h("div", { key: '2398829034757b569a1f4f754ba46697f72b70e0', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: '06975360afd821c91ab816a2585f89f3c9b36565', 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: '8adc5bb2b8ae09774e3ccedb46658e7b9942dae1', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '338ceadf1b7f697ddf9e01f80b9a673c8632730c', "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: '1e5f197e63d06e2ed52dff57e395b649851a1d0e', class: "svg-icon svg-menu" }))));
+        return (h(Host, { key: '2b4f6528c7ef852581d56121e8269a12129c8c1a', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'aa6041f59f4333b6ee68da53bfc7206d2733f059', "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: '6b58e7ef3f124ba2fc33437e183a9e60844a8cdc', 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: '604abe4629c0b3a2928c7d73379578d767a0decf', role: "listitem" }, h("a", { key: '7dd1a2450f12817d8bf848ee6e96e6cbbc7249b5', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '7e7aa35f823f3b6fe4898461f083756f8e89a11f', class: "icon", "aria-hidden": "true" }, h("slot", { key: 'a3f841d593124634af25763863794f5a854d6c3d' })), h("div", { key: '7ccd3d9ae4f2238e1428edd1c7c221d320493e31', class: "text" }, this.text))));
+        return (h(Host, { key: 'fa0d860cef87f2af8b3c8ed67b37a2eafd4229c9', role: "listitem" }, h("a", { key: '192898896ee4310c0fb741d8bf5ebe27e57ab8b3', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: 'b0df43e4aaa9786b2d8e57fbeb766eb5cf348336', class: "icon", "aria-hidden": "true" }, h("slot", { key: 'dd4b646b3b48155163c8816344f3c947eb58403a' })), h("div", { key: 'a195cc9d6dc724553a9240896cddcfadceb7424c', 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: '2814317e9df5355d6aa44cc1df266dfd3f2b3590', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '70c9225e6199aed113b4728f34afabf3c151ddb1', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '07ee2a1c4de3577e03969f7b1090524eb828044f', class: "tray" }, h("div", { key: 'fafec1a0a6b8b56cfc9c90f03e3b78ac068537cd', class: "toggle-wrapper" }, h("wm-button", { key: 'ebc0b699a4ffa1076f0e6bd73d47d216876192d0', 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: '4f3c6aaf5ad09e2274456a581f3cb5f1600eaac7', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '8bf94a53146229835eaec0aaf98e951b43ac799b', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'f76c5e0e70f98a4e5fa29e49509c879bac0292bf', class: "tray" }, h("div", { key: 'cfdfd3274efc3b99b0537ea7ca9bffa4f87d7b59', class: "toggle-wrapper" }, h("wm-button", { key: '96b6aa456c319bfa77d2180209c1175647404f5a', 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: '718647b0231b179e00c36545e8bc630535c15c41', class: "navlist" }, h("slot", { key: 'fcefea770f648abb858777aab111063e04bf6aac' }))), this.isCollapsible && (h("div", { key: '62559136e2753cbbe613f7e23d9914af090b0f1f', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { key: '342b7a1980f6d9d978405a8c5574ef45fca49ce4', class: "navlist" }, h("slot", { key: '33d14865bb6c4d9602769344916d7d88ecbfa661' }))), this.isCollapsible && (h("div", { key: '4d600f2eb2525ce3238dd09e102063d448ef8526', 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: '9d52ef2d181f38e3ee6ebc418e13f6760f5f5467', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
+        return (h("button", { key: '2f1ba167d864c88cbbd1f8f5f6192ba024fbb961', "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: '69ada1c549c3ac13aadcff7344161da84bd9d456', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: 'ad2a5ffde366484618d918f064b728e4f0caecb3' })));
+        return (h("div", { key: 'd79d559b7d56f0411ed7a2949c841df1975ed626', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '5004ab186708dca16f92e1b71bdd6c95d1080b7d' })));
     }
     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: 'b560fdf7586a80ce3e117d74d264e56afd7de42e', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '8d35b0f1049ac65751a14d96daef2cfcd5928765', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { key: '4915b3425f35f85d5684893fbc82e6d6a29b9d0f', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '56b83b74efa2372e03f27ea654c808a2bb86a85b', 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: 'a6a5d00652d75c3f03ca996c283c0566ad229c68' }, h("div", { key: '1e7e8a9207a2ee1d5412cb2456c1c832060ac77d', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '1f36cf57bcfed0f808ef0b222d8eb65cb6518615', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, { key: 'cd7f595a342f69a27e507f9110b1bd67ca536b14' }, h("div", { key: '613883fa806fee9b523776e2c81abcc9c7c80eaf', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '5c944cc9756d6bba9396ef768c0d26cdd4fe7b88', 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: 'bf128d74c7fdbd590989d7999b1187d34b01bb31', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '9898db1a5c0c3c0e13fb32782aa98d88f124798b', 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: 'd6dd15a45a5e449a5b177263e369d5016ae81a4d', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '4c3d42a0e159512713a54f99c403ca4a06549d06', 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

@@ -162,11 +162,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: '8c811ca49c66eccb3d4071680bccee7a7b80baf3' }, h("div", { key: '3833104505e54755fd90e25622f5e52207cd04ee', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: '9b55b8fa05817c3dd826b1318c3b7fdc35d65a51' }, h("div", { key: '8debb1dfc460b20abdc86238a5850e44949364cc', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { key: '6d011c99adc5a69e2687014854d324d5e97e06d8', 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: 'bd51da7d83c448ea676f4f2530dd3ad8ac529c2f', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js

@@ -40,7 +40,7 @@ export class TabItem {
                 "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
             };
         }
-        return (h(Host, { key: '1711c11246e52e27e71f30e566ab41683ee23cd4', role: "presentation" }, h("li", { key: 'f57bc99f98ff481689a68889e81c5925aa68892c', class: "tab-item", role: "presentation" }, h("a", { key: '76e051b18c17ea8367f74cc9a2b7b2b84d2ef990', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", { key: 'e834ebba3c6c512ef7b1093d3c1ea298745fbf85' })))));
+        return (h(Host, { key: 'bcfcc1fcb3cd91456ea38458f7eb26200f27dabb', role: "presentation" }, h("li", { key: '9ece015d01a832e52af9b520695cc303a674a22e', class: "tab-item", role: "presentation" }, h("a", { key: '8b43cebd1ff8a19aa81b23db7ce0265525f79a8a', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", { key: 'b04fa980a8eaffd3ffb64258941e943e14343cfc' })))));
     }
     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

@@ -160,7 +160,7 @@ export class TabList {
             } }, t.textContent)));
     }
     render() {
-        return h(Host, { key: '457d95719d7ab99677336d44c5bff02f5780a6af', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+        return h(Host, { key: 'd4a1e7380e109d5707d2215418d980a9fe319f40', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
     }
     static get is() { return "wm-tab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js

@@ -12,7 +12,7 @@ export class TabPanel {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return h(Host, { key: '0b7f81b627ce53b1ce496c4babd16bf74c57275c', role: "tabpanel", class: { "tab-hidden": !this.active } });
+        return h(Host, { key: '760cc80a7e445fa0edae74157392fb49afb10fb0', role: "tabpanel", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {

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

@@ -895,21 +895,28 @@
   flex-direction: column;
   font-size: 0.875rem;
 }
+:host .wrapper .label-wrapper {
+  display: flex;
+}
 :host .wrapper .label {
-  display: block;
+  display: inline-block;
   line-height: normal;
   font-weight: 600;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin-bottom: 0.25rem;
 }
-:host .wrapper .label .required {
+:host .wrapper .required {
+  display: inline-block;
   color: var(--wmcolor-text-required);
 }
 :host .wrapper.label-left {
   flex-direction: row;
 }
 :host .wrapper.label-left .label-wrapper {
-  line-height: 2.5rem;
+  height: fit-content;
+  margin-right: 0.75rem;
 }
 :host .wrapper.label-left .label-wrapper .label {
   display: flex;
@@ -917,7 +924,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 :host .wrapper.label-none label {
   position: absolute !important;
@@ -931,11 +937,11 @@
   white-space: nowrap !important;
   margin: -1px !important;
 }
-:host .wrapper.invalid .label {
+:host .wrapper.invalid .label-wrapper {
   color: var(--wmcolor-text-error);
   position: relative;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   content: "";
   display: block;
   background-color: var(--icon-fill, currentColor);
@@ -944,14 +950,14 @@
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   display: inline-block;
   margin-inline-start: 0.25rem;
-  vertical-align: middle;
+  align-self: center;
   flex-shrink: 0;
   transform: translateY(-1px);
 }

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

@@ -459,6 +459,7 @@ export class TagInput {
             case "Escape":
                 if (this.isDropdown && this.isExpanded) {
                     ev.preventDefault();
+                    ev.stopPropagation();
                     this.closeDropdown();
                 }
                 break;
@@ -616,6 +617,12 @@ export class TagInput {
             }
         }
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
     handleTagAreaFocus(ev) {
         if (this.isDropdown) {
             this.closeDropdown();
@@ -634,24 +641,17 @@ export class TagInput {
     }
     handleTableWrapperFocus() {
         // Forward focus to first focusable table row when container receives focus
-        if (this.isTable) {
-            // First try filtered options, then fall back to all options
-            let targetOptions = this.filteredOptionEls;
-            if (targetOptions.length === 0) {
-                targetOptions = this.optionEls;
-            }
-            if (targetOptions.length > 0) {
-                const firstOption = targetOptions[0];
-                const firstRow = this.elFromTagOption(firstOption);
-                if (firstRow) {
-                    this.focusOption(firstRow);
-                    return; // Successfully handled focus
-                }
-            }
-            // Fallback: if we can't find any options or rows, keep focus on input
-            // This prevents focus from going to body
-            if (this.inputEl) {
-                this.inputEl.focus();
+        // First try filtered options, then fall back to all options
+        let targetOptions = this.filteredOptionEls;
+        if (targetOptions.length === 0) {
+            targetOptions = this.optionEls;
+        }
+        if (targetOptions.length > 0) {
+            const firstOption = targetOptions[0];
+            const firstRow = this.elFromTagOption(firstOption);
+            if (firstRow) {
+                this.focusOption(firstRow);
+                return;
             }
         }
     }
@@ -680,6 +680,7 @@ export class TagInput {
                 break;
             case "Escape":
                 ev.preventDefault();
+                ev.stopPropagation();
                 // Focus back to input as a safe fallback
                 if (this.inputEl) {
                     this.inputEl.focus();
@@ -847,8 +848,9 @@ export class TagInput {
             // browsers will make this container tabbable if it scrolls
             // this handler will forward focus to the appropriate element within the table...
             onFocus: () => this.handleTableWrapperFocus(),
-            // ...and for consistency, the table, whether it scrolls or not, should always be tabbable
-            tabindex: "0", onKeyDown: (ev) => this.handleTableWrapperKeyDown(ev) }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
+            // ...and for consistency, the table, whether it scrolls or not, should be tabbable
+            // as long as it's not empty
+            tabindex: this.filteredOptionEls.length ? "0" : undefined, onKeyDown: (ev) => this.handleTableWrapperKeyDown(ev) }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
     }
     renderTableHeaders() {
         return (h("tr", { class: "headers", role: "row" }, csvToArray(this.colHeaders).map((header, idx) => {
@@ -924,12 +926,12 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '2ecf43909d7b33ae442023e42a8162ec5eb3deb3', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'aadff4afd7225a2bbc757a585d345e94c8652064', class: "label-wrapper" }, h("label", { key: '20e0d1966830066c4db67d991cce7dc2322094db', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: 'c013775443661d3e5f98f2ce259bae9fc59ae08e', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '2ab61c94bc55b5f68d993cd2878e4c724b035e1a', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '5c35b0bd70b897e681af469104506cb6be081ff4', class: "upper-row" }, h("div", { key: 'ae3297af3dec9bd908245c27f5483948d2423962', class: "svg-icon svg-search" }), h("div", { key: 'b6b58d51c8aca99a4e97573731c53a6090458672', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '18c07a881e9d6f48965ca7405ecaeb19215162be', 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: 'da4fae0604edc5cd9bc7724967b86d29f2022f98', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'e0a85a87c35585625ba0f6afcc5828a6da335f94', class: "label-wrapper" }, h("label", { key: '96b7f0453c064abaec364997778a1e09ce8d1d73', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { key: '6c0fab88d092e7a8b4bba0c7422b8e8bb2abb0c3', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '92cb4eec063d59b7e00085f2fbeec71e1a5f101f', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '50aedc08e2a887cab27eb6b1743e656dd266bff5', class: "upper-row" }, h("div", { key: '4c37ae703e3055e8d6c975ff482259f0fa8652f3', class: "svg-icon svg-search" }), h("div", { key: '8e2542afd89ad63091d0f114d159e9fbeb4b5168', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '7d1923e7e26f7f0580f6db07a8c0bb9e0b91ddd2', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: 'e1b79915b6b0de7225d2cb5013ec9ef5f8dbb48b', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: '7e157fb49f0398fa7c04cb52d502b9c9fb49940b', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
                 this.handleBlur(ev);
-            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: 'a8a3ccc82727d47ac87be930746c0c3df628c8e7', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '191a7c49678f7bb0114914adb3938feaa02ae279', id: "info", class: "info-text" }, this.info)), h("div", { key: '67f0b265d92698899b8a3b7c593c516bfe8b406a', id: "error" }, this.errorMessage), h("div", { key: 'dd9582149fab980572c32fb15c6d759f43360204', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: 'b1d9146b38bb147be3604654577ffae68bc1627b', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '993aefd066e3d11ff106e6ee6e7da09c0a4ccafc', id: "info", class: "info-text" }, this.info)), h("div", { key: 'e962129e9720eea0f8c8b38236e1931ee1031a3d', id: "error" }, this.errorMessage), h("div", { key: '7cf6b126c7e38f5205562fb4326922903fef4081', 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.css

@@ -869,21 +869,28 @@
   flex-direction: column;
   font-size: 0.875rem;
 }
+:host .wrapper .label-wrapper {
+  display: flex;
+}
 :host .wrapper .label {
-  display: block;
+  display: inline-block;
   line-height: normal;
   font-weight: 600;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin-bottom: 0.25rem;
 }
-:host .wrapper .label .required {
+:host .wrapper .required {
+  display: inline-block;
   color: var(--wmcolor-text-required);
 }
 :host .wrapper.label-left {
   flex-direction: row;
 }
 :host .wrapper.label-left .label-wrapper {
-  line-height: 2.5rem;
+  height: fit-content;
+  margin-right: 0.75rem;
 }
 :host .wrapper.label-left .label-wrapper .label {
   display: flex;
@@ -891,7 +898,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 :host .wrapper.label-none label {
   position: absolute !important;
@@ -905,11 +911,11 @@
   white-space: nowrap !important;
   margin: -1px !important;
 }
-:host .wrapper.invalid .label {
+:host .wrapper.invalid .label-wrapper {
   color: var(--wmcolor-text-error);
   position: relative;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   content: "";
   display: block;
   background-color: var(--icon-fill, currentColor);
@@ -918,14 +924,14 @@
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   display: inline-block;
   margin-inline-start: 0.25rem;
-  vertical-align: middle;
+  align-self: center;
   flex-shrink: 0;
   transform: translateY(-1px);
 }

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { handleDisabledAttribute, toBool } from "../../global/functions";
+import { handleDisabledAttribute, toBool, showTooltip, hideTooltip } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Textarea {
     constructor() {
@@ -58,6 +58,12 @@ export class Textarea {
         }
         this.previousValue = this.value;
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
     announce(message) {
         if (this.liveRegionEl.textContent === message) {
             message += "\u00A0";
@@ -65,7 +71,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: '51737864a8a2007cd82214adfb9917318eac76ae', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '5dd0a741e86fd626019c3ccfb25cb2741c405a65', class: "label-wrapper" }, h("label", { key: 'a3843d5240a623a31725bb94d73a80616a6c7f70', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '5d9e488db01668a794bdaa1c0b8b2d29c94874b4', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: 'cfca0f1f18ddc808dd90d300d35de54918aaea80', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '3d91905f9dd67127c4f84ecc4d5bc8eb011a12e0', class: "inner-wrapper" }, h("div", { key: '603c2ed498216be12a757d1725c96d25a726f1fa', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: 'cdeaa4d4dd779682a7bcc9118119ce120d82489e', 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: '32e14b8d7bc414f4d75d6dbce66805c6c8658574', id: "info", class: "info" }, this.info)), h("div", { key: '6bb6d301754a4305704eab7db1285e60d6ebae91', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '9c01d2c255d163bc461cd8cffdf8530831b6858e', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: '5bd7daf935fa75bec3fccc000c4674b23da1c043', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '52f18f7ef95fb4505f19ec57b3328db9706af750', class: "label-wrapper" }, h("label", { key: '510bf29970364b1caacfd1eef164a2f766217df2', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '47024a21e0940c6c40dde2b131c337636fe1bbdf', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: 'dff37fb5a589b44b4eb249b0b3a572e9944a15cb', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '8dda587667514bbf0db310491cf58d2b3ea00fea', class: "inner-wrapper" }, h("div", { key: '8782435cdc9150197ac29a09fd6b3d6b95413c59', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '3d7a017570a79669f03914e00be725a633717c66', 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: '7cfb20e30f1413096a861089e932aabc46be0593', id: "info", class: "info" }, this.info)), h("div", { key: '2f450eb52e3bf5e805e125f19e59766c4d45a75c', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '024947b6fa1ef096bb09c1c9183984e647ed5432', 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.css

@@ -890,21 +890,28 @@
   flex-direction: column;
   font-size: 0.875rem;
 }
+:host .wrapper .label-wrapper {
+  display: flex;
+}
 :host .wrapper .label {
-  display: block;
+  display: inline-block;
   line-height: normal;
   font-weight: 600;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin-bottom: 0.25rem;
 }
-:host .wrapper .label .required {
+:host .wrapper .required {
+  display: inline-block;
   color: var(--wmcolor-text-required);
 }
 :host .wrapper.label-left {
   flex-direction: row;
 }
 :host .wrapper.label-left .label-wrapper {
-  line-height: 2.5rem;
+  height: fit-content;
+  margin-right: 0.75rem;
 }
 :host .wrapper.label-left .label-wrapper .label {
   display: flex;
@@ -912,7 +919,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 :host .wrapper.label-none label {
   position: absolute !important;
@@ -926,11 +932,11 @@
   white-space: nowrap !important;
   margin: -1px !important;
 }
-:host .wrapper.invalid .label {
+:host .wrapper.invalid .label-wrapper {
   color: var(--wmcolor-text-error);
   position: relative;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   content: "";
   display: block;
   background-color: var(--icon-fill, currentColor);
@@ -939,14 +945,14 @@
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   display: inline-block;
   margin-inline-start: 0.25rem;
-  vertical-align: middle;
+  align-self: center;
   flex-shrink: 0;
   transform: translateY(-1px);
 }

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { intl, shouldOpenUp, toBool, handleDisabledAttribute } from "../../global/functions";
+import { intl, shouldOpenUp, toBool, handleDisabledAttribute, showTooltip, hideTooltip } from "../../global/functions";
 export class Timepicker {
     constructor() {
         this.twelveHrValid = /^(0?[0-9]|1[0-2])\s*:?\s*([0-5][0-9])?\s?(a|p|am|pm)?$/i;
@@ -168,6 +168,12 @@ export class Timepicker {
         this.wmTimepickerInputBlurred.emit();
         this.tpWrapper.classList.remove("focus");
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
     generateTimeIntervals() {
         let timeIntervals = [];
         let startTime = 0;
@@ -275,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: '75c58eb3889b4608731626a626c3e258d0ec847f', onBlur: () => this.close(false) }, h("div", { key: 'ca41df7312aee146f9bba55a014db11a4bc7bdca', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '9b23e549863796691cd801d1f7dc4aa2647cd500', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '0a2962b5f6012d7e574a7514c754fd50c6d799a3', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '4dd27ce330c1576bcd95c414686504e843b7f383', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: 'f25c696ee97660f53339083b8fd8350c6fef3709' }, h("div", { key: '09a6c2e7d95170af417bfb9ec25ba8a57532d666', class: "inner-wrapper" }, h("input", { key: 'c5ab576ef84f9909530fd0ab04f634019ce8ac9a', 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: '9669a42ba3897487e8c5ba2096ccbd69431ed6d0', 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: 'fd0acc447628174ea8551c1ea7cafdc8b0b6ec74', onBlur: () => this.close(false) }, h("div", { key: 'a8c7c453558df7a33fc42d71eff78894a36306d6', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '9f259605e513d12e32716f12b4d5dee9fb97d10a', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '1b1b596a992a66f6738cab61086c9d7298934e8c', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '4fc12427a1b3c62b9a6e7cd53c83cec311b46f1e', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '6f299347f62dd5299f0223bbdee82fc55dafe06a' }, h("div", { key: 'd78e3b28b110714558d94ba03bedc4d63e8a41d7', class: "inner-wrapper" }, h("input", { key: '1af64c4c0ab7bd983d3e926ad1ea146bed0dadea', 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: 'a99cd67d7bfa17c4ba512b73097b5987b8d5d4f8', 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: '1895dd0bb547ff6538c7c9c71ef908789cf0a063', class: "svg-icon svg-time" })), h("ul", { key: 'ff29ad47af475536ee5ff28b331d119a1a62d34f', 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: '1bfc84ec0632852c000dc94ef8e63ec55689174e', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'd7c1b581e3441cadeb547f29399aee7412011670', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: 'd50582487d9860716e0bdc67b99ac75b346d62aa', class: "svg-icon svg-time" })), h("ul", { key: '63a9ed95dc1c238d12d84150c406e5ff877d71b3', 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: '25ea586bea9676a7d18c2fdeada1dcaf0a224471', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '4985d6ee5df49f687eaeeb06a1b5a0c8b14b7119', 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

@@ -221,9 +221,9 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: '5d8d7bd25f7ed0e9626944a09f18c7a534b35181', class: `size-${this.targetSize}` }, h("button", { key: '414f8f09f3a1d20b9e8641cab03632ccd91f8f71', class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        return (h(Host, { key: '653e8a3a21b1a63ebae98f4813393ae2c3020aa0', class: `size-${this.targetSize}` }, h("button", { key: '15a4de61c15d32091643bbabaf438f5116e5bea9', 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: '8d032e897502ded7631b494314f201d35dd3acb3', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: '4cc15a0db02fb19faa8d8ac7e9253c29e74e7ac5', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            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: '96e4c18106ed35a41a0fc4ff2ea2b239cac541e1', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: 'd6cf716efcd55983e0b86854eac118a9bbb01d76', 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"; }