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

package/dist/collection/components/datepickers/datepicker.css

@@ -892,21 +892,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;
@@ -914,7 +921,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 :host .wrapper.label-none label {
   position: absolute !important;
@@ -928,11 +934,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);
@@ -941,14 +947,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/datepickers/wm-datepicker.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { intl, toBool, handleDisabledAttribute, hasRoomRight, shouldOpenUp, dateToISO } from "../../global/functions";
+import { intl, toBool, handleDisabledAttribute, hasRoomRight, shouldOpenUp, dateToISO, showTooltip, hideTooltip } from "../../global/functions";
 export class DatePicker {
     constructor() {
         this.openUp = false;
@@ -97,6 +97,12 @@ export class DatePicker {
         const event = new CustomEvent("change");
         this.el.dispatchEvent(event);
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
     handleKey(ev) {
         if (ev.key === "Escape" && this.isExpanded) {
             ev.preventDefault();
@@ -212,23 +218,23 @@ export class DatePicker {
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (h(Host, { key: '85687dcb3b87ff6b660797b7e8ceef84a9710deb', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'c64159f0ecc1ce84fda38106b54d7fa49a79fc65', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '43bed05cd8ddf12279fd007fac3be60ce20864f8', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: '9acaee7a5ed8a29971813a06a5051c2838c13065', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { key: 'f3e1f8719fcc6ead12968215e2731d95b2603956', "aria-hidden": "true", class: "required" }, "*"))))), h("div", { key: '0c041afacda26e06e15275eb92f430f7d9a16520' }, h("div", { key: '25af5c4db0a4efa3310c039046541651c2f58a25', class: "single-wrapper input" }, h("input", { key: 'ba297de98ddb0c85ddac0b20f5f177b186956ded', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'd4c145ebda9243d464b077a250ea272090e1e9bd', class: "container", id: "wm-container" }, h("button", { key: '630191453f20cbe48e919a91928c2120ca41f66e', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
+        return (h(Host, { key: 'a39778334c75f23ba1899c09be30532159690702', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '6ee4980b6e71aee501d915f3c4dbbb3fbaf22734', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'a3d835b3dbb22d46ad8b0bf4fb99c37655294739', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: '9a103f811a1cc1aec926e226bd5d74025a9722b7', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '670aee88b2b537798b586adc7514bd707292ef30', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '5df7831267c9cc092485cdace4b6e0cf635aa436' }, h("div", { key: 'c1b475da0779513a06ef7c38dcfbde9a63fcfa55', class: "single-wrapper input" }, h("input", { key: '51f641e88d0a25894cb9b33c7bf5c0ba720a4767', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'b319f80dc709f9e9521adbbf3d5031d918d095d2', class: "container", id: "wm-container" }, h("button", { key: '0db3bd1fcce0f0633959eeadc5d7571bcbce45d2', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
                 id: "date.selectDate",
                 defaultMessage: "Select date",
                 description: "Button text for screen readers.",
-            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: '8d418c81d6dcb4ab2155729be5634ee7a2566048', class: "svg-icon svg-date" }), h("span", { key: '5100cad9f4ed307d753499710853de95e81c04e8', class: "calendar", title: intl.formatMessage({
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: '4d8d16c3ea0974d6481f7fa3b4ad39de90f6dce9', class: "svg-icon svg-date" }), h("span", { key: '37f0b3146399bb1935445fe0f2f153dc87a77aa8', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })), h("div", { key: '36d24aeb7e59ae59284596ad362eb5459a9ad1de', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { key: '52e0c98a890204e111f6c508177181bf69c5af28', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '12ed17f4c034aff9be9421046d52ffc4e745c929', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: 'c4b913e51442e1e57805934fd9071cc8796ca551', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '4194d3665db2426ea6600f01f014735c6f49c7c4', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '538a624beb90096a1368873b8f044b0ff32bf125', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })), h("div", { key: 'f89faa98af2d531bf0f24446ad25b57b209b37ed', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { key: 'c77b6b59dd6e9920b6c34e13d87dd103d4410c33', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '97bf11cc5619baaf7f673f5889e70a3f021f42fa', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: 'a78912a544b826d5c32ed29979ee01c1354c8151', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '6c2e4c630b6e90d721eb5c37bf09be1ec3edac02', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '28049bae95cbebe75888cc5c13c2886a0da11918', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '37b0366f3742eff0d38993c60e132759683cfc18', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: 'e018b23145de450cb77fade79734c714ea78d06c', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), h("div", { key: 'b21dcace67f1f10949bfa1ed0238ddbff738a2f5', id: "error", class: "error" }, this.errorMessage), h("div", { key: 'cf362caa31e7a5951365a3e3a63d119d58f746f5', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), h("div", { key: '88a57912e4573d3b76bdbc108bb77c680b30422d', id: "error", class: "error" }, this.errorMessage), h("div", { key: '665e1a5e3a697d34a8e102baf101a137647a4584', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
     }
     static get is() { return "wm-datepicker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.css

@@ -879,21 +879,28 @@
   flex-direction: column;
   font-size: 0.875rem;
 }
+.wrapper .label-wrapper {
+  display: flex;
+}
 .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;
 }
-.wrapper .label .required {
+.wrapper .required {
+  display: inline-block;
   color: var(--wmcolor-text-required);
 }
 .wrapper.label-left {
   flex-direction: row;
 }
 .wrapper.label-left .label-wrapper {
-  line-height: 2.5rem;
+  height: fit-content;
+  margin-right: 0.75rem;
 }
 .wrapper.label-left .label-wrapper .label {
   display: flex;
@@ -901,7 +908,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 .wrapper.label-none label {
   position: absolute !important;
@@ -915,11 +921,11 @@
   white-space: nowrap !important;
   margin: -1px !important;
 }
-.wrapper.invalid .label {
+.wrapper.invalid .label-wrapper {
   color: var(--wmcolor-text-error);
   position: relative;
 }
-.wrapper.invalid .label:after {
+.wrapper.invalid .label-wrapper:after {
   content: "";
   display: block;
   background-color: var(--icon-fill, currentColor);
@@ -928,14 +934,14 @@
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }
-.wrapper.invalid .label:after {
+.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");
 }
-.wrapper.invalid .label:after {
+.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/selects/wm-nested-select/wm-nested-select.js

@@ -1,5 +1,5 @@
 import { h, Host, forceUpdate } from "@stencil/core";
-import { getContextMeasurements, getTextDir, isElOrChild, shouldOpenUp, toBool } from "../../../global/functions";
+import { getContextMeasurements, getTextDir, isElOrChild, shouldOpenUp, toBool, showTooltip, hideTooltip } from "../../../global/functions";
 import { globalMessages, selectMessages } from "../../../global/intl";
 export class NestedSelect {
     constructor() {
@@ -217,6 +217,12 @@ export class NestedSelect {
             this.wmNestedSelectBlurred.emit();
         }
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
     handleOptgroupExpanded() {
         this.menuEl.classList.add("hidden");
         this.optListWrapperEl.classList.remove("hidden");
@@ -286,16 +292,16 @@ export class NestedSelect {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { key: 'ce60d79e0fb0863d45b2b28048e98271a099edd5', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'e0a67750ecb44f69cf3af589b0ca440c3107e824', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'cc9d739f3764b34f0939ed647e0a2dacff17df93', class: "label-wrapper" }, h("label", { key: '04fc5577d90c0787f84c9ad57bfaf66103765f60', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: '5f959093568bc000490f93b887bc0c6cea467c39', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'a83e7570a7cfeb417728d4e94cadcd7b44c4a52c', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '880400f61bc3c1ab3bcbc3bb2d414f05af37c20b', class: "label-wrapper" }, h("label", { key: '776e280c3535923d6c39d4d345c50d2b552b25e6', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: 'ef502276893cf2a32bae092dec64d1136ac45e6f', class: "button-wrapper" }, h("button", Object.assign({ key: '688ef0f973c9e5c124ce0f582a8c7a302d59c371' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '9dc2d3d3ffc0a2709e40ca00e1196f49e26ab336', class: "overflowcontrol" }, h("span", { key: '76fab0f2cb0ae0c3ae8a810ebe06a9a55118c41f', class: "button-text" }, this.renderButtonText())), h("div", { key: 'b00bc698a8e1f22ebeb83f1f19a677806d5ef321', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '3f40f30b75e68f7f79101867a84f53cd48575272', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '7efc505a77195eb037bc3ac3e86ac4ebe5024052', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: 'd47f4f2434ae3a5228e12878f98a78250405d891', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : ("")), h("div", { key: 'e9d9fba2781c3c0abf101d4027c3f48e585dcdb4', class: "button-wrapper" }, h("button", Object.assign({ key: 'c40510c5476a961a5ec60e8f6cf1eb8fb68e236d' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '466733e138ca9162ca35cc145ac2b15600d9a381', class: "overflowcontrol" }, h("span", { key: 'b4e2134d076ab22c5baaa87f8fbe5bb022ee822f', class: "button-text" }, this.renderButtonText())), h("div", { key: '05b13a8f7aef21c663f408d48488843fa8da8be9', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '16d82a9457d895a592890d874f8dc7245478fb73', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '4b0375b2acef34d7607c3fa23d741843d3005017', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: '52ecc936ebdb87eae9bb2de5551c075bc75bb2fc', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
             return (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;
                         forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("div", { class: "option-text" }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")), h("div", { class: "svg-icon svg-next" })));
-        })), h("div", { key: '96ac597ab2d5c6e9b48b5a7c1c46f04fb5caa053', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: 'fe57143f81a19a1e0e76d21a09f51398d6c668d4' }))), h("div", { key: '1e6f66b0a4e6bd0cd1d780fb3248ff8feaa413a9', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '949ff809135fffead8b8701aa02d2b104add38b2', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        })), h("div", { key: '3861f21a5798af5cabbcdc37dd06b41db59a450f', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '1e9c15552d06669d790b8490d84da4855a0c841d' }))), h("div", { key: 'ca12e1f32d3d8e57bc562538d3959d7fc8f78575', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: 'd9d2aa31d14f78158a69aadb981df4063dcc9c82', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selects/wm-select/wm-select.css

@@ -891,21 +891,28 @@
   flex-direction: column;
   font-size: 0.875rem;
 }
+.wrapper .label-wrapper {
+  display: flex;
+}
 .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;
 }
-.wrapper .label .required {
+.wrapper .required {
+  display: inline-block;
   color: var(--wmcolor-text-required);
 }
 .wrapper.label-left {
   flex-direction: row;
 }
 .wrapper.label-left .label-wrapper {
-  line-height: 2.5rem;
+  height: fit-content;
+  margin-right: 0.75rem;
 }
 .wrapper.label-left .label-wrapper .label {
   display: flex;
@@ -913,7 +920,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 .wrapper.label-none label {
   position: absolute !important;
@@ -927,11 +933,11 @@
   white-space: nowrap !important;
   margin: -1px !important;
 }
-.wrapper.invalid .label {
+.wrapper.invalid .label-wrapper {
   color: var(--wmcolor-text-error);
   position: relative;
 }
-.wrapper.invalid .label:after {
+.wrapper.invalid .label-wrapper:after {
   content: "";
   display: block;
   background-color: var(--icon-fill, currentColor);
@@ -940,14 +946,14 @@
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }
-.wrapper.invalid .label:after {
+.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");
 }
-.wrapper.invalid .label:after {
+.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/selects/wm-select/wm-select.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute } from "../../../global/functions";
+import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute, showTooltip, hideTooltip } from "../../../global/functions";
 import { globalMessages, selectMessages } from "../../../global/intl";
 export class Select {
     constructor() {
@@ -172,6 +172,12 @@ export class Select {
             this.wmSelectBlurred.emit();
         }
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
     setButtonText() {
         this.displayedOptions = this.childOptions.filter((x) => x.selected);
         // handle overflow + counter for multiselect
@@ -228,9 +234,9 @@ export class Select {
             ["aria-expanded"]: this.isExpanded ? "true" : "false",
             onClick: () => (this.isExpanded ? this.close() : this.open()),
         };
-        return (h(Host, { key: 'e37a1ce52a903991570fbf06cad2b17ccae703de', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '973d0197afb6fef37768c0ea86002b9be4a4e50e', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '7632bd4f20bc49fbfc3b4e7a9c8ed63d7a7a6f44', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: '20caf14eab2111ba2b8f86519e2ba99be2eee496', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: '27f57d30b836eac8dc27ae98a425015d86a0948b', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '8f48d8e8d616244350e61d6e81f350640131bbf0', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '39d3bcec9b67d671a6bdbb6a3ee738832189ea51', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: 'b0bb90a215ac20de94afa8dba56e839bdc590dc1', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: 'a527d782f81eeeb771164cc0b7449b696f34196d', class: "button-wrapper" }, h("button", Object.assign({ key: '39ed454cbff5e73d98d36eefd6fb79320f0dc517' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '658551325b10ae492b13018e57a7871497972f8f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '425e8afaf12ee7921219e5b2076156459570fc72', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'c6bfe3c261ece6a4dfd6489fae77dd91b7730629', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'f9d3c5405c82d7724b074a197ca9c6f17acc1042', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '8452deceae0ecbcbf96a64c2d406aea66023b6ef', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'e5beb9e541348fe6127a058e60c4a292cbabb264', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '2ff10a32e89a597176a96ac852dd6e1fe118fc74', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: '947c0114cae3a41d14f5d0ecfaf72a6e4c61f411' }))), h("div", { key: '50b156927292a726eac80a6035db6185483cdf35', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'de0b2e27d65056a691182397405c6eec7cb38fcf', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField && (h("span", { key: '4a5648503a023ff1eba34db936d49709e14da9f1', class: "required" }, h("span", { key: '3fe783c7174d3d827b20589cad412d32fa4cd978', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '85ac4ca35f1077ade1bdda403b8888cc206ff28e', "aria-hidden": "true" }, "*")))), h("div", { key: 'c2e70d87db2d533713ac9c5a877ddba98a9a9a2f', class: "button-wrapper" }, h("button", Object.assign({ key: '460c6ac5cde8637b0098201966ca4268301ac2b7' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '3af3357f45ceacc5689e90e2bdc6459cab591c2f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'bd9869db1146e54cc47c2965ebe2776873e2a18e', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'b22d952625e93fab98ebb1b688101fd8891a4af7', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '1f6448ee167d1847eff8fb5bc7a30e0a964e6efe', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '0d550b97a3e08e9b708f2f4c3d91f9cac76ba5d8', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '59cc7fcfa25d9d3eab8e4d70cdcd365e36e160ad', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '9fb7d0396527bc18bb8f5d00d64c858470d0698d', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: '4c307bca5104ec962ca050b46adf882fb78bb74a' }))), h("div", { key: '06f11b61b475cc6cd78c2a8278b8455a79405e17', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '86cf865fbb7fd0e2c88290fe92e6062ada7d9ab6', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-action-menu/wm-action-menu.js

@@ -190,7 +190,7 @@ export class ActionMenu {
         return null;
     }
     render() {
-        return (h(Host, { key: 'c6dfb14c3fe2e1a65238554ca585e94c7a5e8ed8', onBlur: () => this.close(false) }, h("div", { key: 'ae43b9b2e4da167c035ab018620f55f06cfdf17d', class: getTextDir() }, h("wm-button", { key: '22fbc47fb5e2430e2607bce4e820066906959ab7', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "#more-options" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: '90dd3b0691b50a06eb8cc4c27d2f7febdc6a00a4', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: '5c6eeb1aa8b90c2b679d593d81f90cde7d10ff79' })))));
+        return (h(Host, { key: '6a2551f3260b0ab3a606174243d89bfc7daa68e5', onBlur: () => this.close(false) }, h("div", { key: '1dc817e8a83608d514b45aa00c4c00031ba3019d', class: getTextDir() }, h("wm-button", { key: '4d9bb231cef8871774fbe03c71a0c3e203c0dd99', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "#more-options" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: 'c9c33887915c59b82c2b87fd65e39059a6f84bd5', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: '0c5a25373176ffa495a75a0e91ab6e71e45d3bbf' })))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -249,7 +249,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'ed44edc43c12cbbc088b6a2872e1e26d816c1cba', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '0b94c327dd29d98e981a72fe38b122cc06313aa1', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, (this.icon || this.buttonType.endsWith("-ai")) && this.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (h("span", { key: 'c31ae6ac51a1aee66734f3501e49cf9cde1bfc7a', class: "button-text" }, h("slot", { key: 'd75aa45be52f340e755bd96ea029bd51fdd69150' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: '8d510ff0af0bdbd882214d09b41a26d344591b55', class: "selector-icon svg-icon svg-expand-more" })))));
+        return (h(Host, { key: 'd122993141c67e59f1b99fcc574772c7c35be7a7', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '6c6cb49fa724cb4e317a3a7c7fdc32e9d1ca43f6', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, (this.icon || this.buttonType.endsWith("-ai")) && this.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (h("span", { key: '164207b617f46f932f462f15fb22529885a64e86', class: "button-text" }, h("slot", { key: '9e2831478378a258a8fd83405d0a1509e0e56697' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'f0a5ebc4c97bd184a7e14171aaa0f103fd8c0c35', class: "selector-icon svg-icon svg-expand-more" })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -171,7 +171,7 @@ export class File {
         return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: "right-group" }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText)), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { key: '534c481a5423a9f1a1ec811ec6b736e462a981ea', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '62b766d8fcbf74186344e2186df66554055465a6', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-file-list/wm-file-list.js

@@ -4,7 +4,7 @@ export class FileList {
         this.showInfo = "last-updated";
     }
     render() {
-        return (h("div", { key: '69e557483f15721fc39315353da4cc1db7b6405d', role: "list", class: "list-wrapper" }, h("slot", { key: '1f00bd3aa0961aa99298eacb90b65717e8a5fd87' })));
+        return (h("div", { key: 'bc22d0fa97458ed4323d6bba8d13966a68e9f5c4', role: "list", class: "list-wrapper" }, h("slot", { key: '105cb8fc11a0d9349ac2e38951cf0a2245b69bd8' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -154,7 +154,7 @@ export class Flyout {
         }
     }
     render() {
-        return (h(Host, { key: '0eeee311c251933d5f3d7aa2ab65558011668c3d' }, h("dialog", { key: '11876657f5bfd7e1bda8937e886198320731b5b2', ref: (el) => (this.dialogEl = el), class: "flyout", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '7535397d18ca997953cf6d5be82c68500d733c84', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '96ee05df3eaf54bc78ff2f002024b42c3c11d50b', class: "flyout-content" }, h("slot", { key: '2883623f6062eade04c5c9dedb6e5a6a1e8ffd41' })), this.renderFooter(), h("div", { key: 'b3188ebad66c7228ad6611f182263bdfa9deff8f', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+        return (h(Host, { key: '8894995294b9021b86d1b4ebc86f2cb2bd60871a' }, h("dialog", { key: '63be3184845ad41d03dd2ebdc990a65f7a48e27c', ref: (el) => (this.dialogEl = el), class: "flyout", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '3786a4603653d069fcb7e92ca0a4d05d98d0a286', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '5704a2497b84e2cbdac8199bb93abca519c97b68', class: "flyout-content" }, h("slot", { key: '7baba513445a86f677b71073870c7319d88d1e6b' })), this.renderFooter(), h("div", { key: 'df34388640730eca6f00cd2a9bb632e8e29467ce', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
     }
     static get is() { return "wm-flyout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -874,21 +874,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;
@@ -896,7 +903,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 :host .wrapper.label-none label {
   position: absolute !important;
@@ -910,11 +916,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);
@@ -923,14 +929,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-input/wm-input.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { triggerFormSubmit, toBool, handleDisabledAttribute } from "../../global/functions";
+import { triggerFormSubmit, toBool, handleDisabledAttribute, hideTooltip, showTooltip } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Input {
     constructor() {
@@ -58,6 +58,12 @@ export class Input {
             this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
         }
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", labelEl, this.label);
+        }
+    }
     handleKeyDown(ev) {
         // in most browsers, onInput doesn't fire if the input's maxLength is reached
         // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used
@@ -101,7 +107,7 @@ export class Input {
             : `info error`;
     }
     render() {
-        return (h("div", { key: 'd71203fd94d6401d49f9c06976da6f380525ea4f', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'ec03133431899acf8fb285d695daf5f9887398e8', class: "label-wrapper" }, h("label", { key: '561a5b17203fc6cf2a1bfb3a5dd9d75ba4cf1e66', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '74f070797a03ce7ea64efcace7f8b6e0eae189ab', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '0a2daea4a0454cfec2678c50bb685f93a162cd20', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'feaa267cd1a3b47fbd6cf666eeee9b73183494ea', class: "inner-wrapper" }, h("div", { key: 'c4f4ac493a9c26644c665bc5dd910c9d2609a9b4', class: "text-after-wrapper" }, h("div", { key: '444b80038a8593d24c84c12e13831c603852306b', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '0a112d83390a206888a73d49185e1e0006d6745c', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '93748d9f8ac38974b6b354dcc7e6b5bcd9993bab', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '2495e1224e1555fbaad0b9eeac0ef6d49c329237', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: '382f7ee32c78e0457e25d003a8f3b6762fb99753', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '0fec1367ee0864a15510c3198818c5d06ec01975', id: "info", class: "info" }, this.info)), h("div", { key: '6f91548dd75581fd91e2b6a789c442607c2bf749', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'e2bb78875e9b03f4b45476eedc900cc4498ef1d3', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'abe39d76f1df8098aad09d37dae556ffafed9de3', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'f6ebdff5ee4efb2f6ce435848379e8f63bcb3f71', class: "label-wrapper" }, h("label", { key: 'b3a7708e8f5660b68cf81fe260986373c31f6fa4', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '5b6a934fddfbea75e3314ef472b49197de32d81f', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '248913cb6fd3c8103dae938698945d10ddf427e7', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '4e4769f816f738fcea46360db28de7e84279dd93', class: "inner-wrapper" }, h("div", { key: 'c322e3fe0685bae536d60bbd839300a6bd98278c', class: "text-after-wrapper" }, h("div", { key: '73367c2ca11589b5a9824d9c75df21b5e4782a60', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '1c9f9f9c4919ee35b568552e0f64c5e932527e39', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '06ae1732dd7113f7b64bc5dc1d87cb20b54c2cae', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '1e2d0a079adf0afe217a2eaf83c5e5dcf288177f', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: '486e6a2a5fd06134b8ecf7304cd36f316f52ea6f', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: 'e4187262201b8fc564f61c3c22c9636a06defba8', id: "info", class: "info" }, this.info)), h("div", { key: 'd366fcd90b17967c499dbfecde85873059ee74f2', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '778b3161f6e91606e7c8d8e372afd9df59f77916', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -98,7 +98,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { key: '16c2fc6ddfd8439be81e11534f9a7303c121c6f8', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '138d8175228c5de3132e2b8c491baf5ea4ffeaaf', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, this.icon && this.renderIcon(), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: 'e6315d1845768369730087b4e9e0cb52224af68a', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'a1e8dc4267cf04c0ec5678744e2928acb39102c0', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, this.icon && this.renderIcon(), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
     }
     static get is() { return "wm-menuitem"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class ModalFooter {
         }
     }
     render() {
-        return (h("div", { key: '2aa2375ddaf321da10aabcf7012fa2defa56850e', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '345a8ffefc4289177f042777b47310fc2c912211', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '613e9b2ba1bdcd2d76ab79614fd4b184b186f270', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '0bbc068278eb0c926512d7789838bf06ded15f3b', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '2e495877bb9902f5cd3b977fcb99411764ffd16c', "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 (h("div", { key: '019e3ea4b92089f44320cc3f9d256f7cea96cfbc', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'e5c34592f8a374bc016fc6cb6125a864f99d17bd', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '6349bd48d3aab79be1f33438f904d758a48066fd', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '4154880503f788a9ea023fe4f0ce05b5f67b0f41', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: 'a48b61feaf42d6da0b237a68af68d5ac8ae49642', "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))));
     }
     static get is() { return "wm-modal-footer"; }
     static get originalStyleUrls() {

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

@@ -22,7 +22,7 @@ export class ModalHeader {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (h(Host, { key: '95b62f6d1ee25e0de5c0977fad860b86eb874a0d' }, h("div", { key: 'c6e396538d6d511c1338e465829438a7de6ca20f', class: "wm-wrapper" }, h("div", { key: 'bf862bb24264b4379895a8168d07a3220582dc2c' }, h("h2", { key: '386f918c359859b2ae8db14db83097dd985f29c6', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '404136724b15cae9ade28f7852934181f22fa010', class: "subtitle" }, this.subheading))), h("wm-button", { key: '0748b3b6ba6e0aaf371435615c818e511f059ec5', "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, { key: 'ebb2d8038aa0ac395c53d4f0d91499919aa932f6' }, h("div", { key: '1f5486f23c9a9a32e5e33e47b6edc31c37c37821', class: "wm-wrapper" }, h("div", { key: 'a1192d79c1d5d7fed157386cc6acb92522e14cf7' }, h("h2", { key: 'bf4b908dad455408550d5a2695d3c4fcfcd75c3b', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '32347ba7f539174fee47edfce977f7c8426a3298', class: "subtitle" }, this.subheading))), h("wm-button", { key: '04324e5098e8580bcc3e44a107a348ff6fe5c9df', "button-type": "navigational", icon: "#close", 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-header"; }
     static get originalStyleUrls() {

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

@@ -108,11 +108,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '6e922556c88e5eb0bebc59264dddaaa08c899df6', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '27b1e5ab577d061836a3e3e2d6b7fb01fedc96db', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: '37c9534a1839dc5c6e2be8ca838fa9da956d34ba', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'ce59adc5fa795c32da6fd374468c451147ccca38', 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 && h("div", { key: '113b03cdb98de4c9f29b515fa7c6b91fb443ada8', class: "wm-tooltip" }), h("slot", { key: 'a82dbd2e8b1018a2f06db0f30995e6f0ec45d359' }), h("div", { key: '272478190ff26a0e7777ea64ab20f26f1fb260e1', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: 'c62753c1bba03d72707398899b68fe318d285bc8', class: "wm-tooltip" }), h("slot", { key: '24f8462de2987ddadc5a4573bb9ff0a4ad42d95a' }), h("div", { key: '390395f0b4bc778d6811276f2a7facfe3fd8f9da', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }