@watermarkinsights/ripple 5.16.0-alpha.0 → 5.16.0-alpha.10

package/dist/collection/components/datepickers/wm-date-range.js

@@ -2,24 +2,22 @@ import { h, Host, Fragment, } from "@stencil/core";
 import { intl, dateFind, toBool, handleDisabledAttribute, getContextMeasurements, findParentWithHiddenOverflow, dateToISO, shouldOpenUp, calendar_months, } from "../../global/functions";
 export class DateRange {
     constructor() {
-        this.openUp = false;
-        this.calWidth = 681; // 673 + 8px of room
-        this.popupClicked = false;
-        this.toggleButtonClicked = false;
-        this.formats = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
         this.dateFormat = "mm/dd/yyyy";
         this.disabled = false;
-        this.errorMessage = undefined;
         this.invalidStart = false;
         this.invalidEnd = false;
         this.labelStart = "";
         this.labelEnd = "";
-        this.preselected = undefined;
         this.requiredField = false;
-        this.valueStart = "";
+        this.valueStart = ""; // in user format (INT, US...)
         this.valueEnd = "";
+        this.openUp = false;
+        this.calWidth = 681; // 673 + 8px of room
         this.availSpace = 0;
+        this.popupClicked = false;
+        this.toggleButtonClicked = false;
         this.isExpanded = false;
+        this.formats = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
     }
     get _disabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
@@ -475,6 +473,7 @@ export class DateRange {
         return {
             "dateFormat": {
                 "type": "string",
+                "attribute": "date-format",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -487,12 +486,14 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "date-format",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"mm/dd/yyyy\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -505,12 +506,14 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -523,11 +526,13 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-message",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "invalidStart": {
                 "type": "boolean",
+                "attribute": "invalid-start",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -540,12 +545,14 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "invalid-start",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "invalidEnd": {
                 "type": "boolean",
+                "attribute": "invalid-end",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -558,12 +565,14 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "invalid-end",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "labelStart": {
                 "type": "string",
+                "attribute": "label-start",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -576,12 +585,14 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-start",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "labelEnd": {
                 "type": "string",
+                "attribute": "label-end",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -594,12 +605,14 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-end",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "preselected": {
                 "type": "string",
+                "attribute": "preselected",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -612,11 +625,13 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "preselected",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "requiredField": {
                 "type": "boolean",
+                "attribute": "required-field",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -629,12 +644,14 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "required-field",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "valueStart": {
                 "type": "string",
+                "attribute": "value-start",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -647,12 +664,14 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "value-start",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "valueEnd": {
                 "type": "string",
+                "attribute": "value-end",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -665,7 +684,8 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "value-end",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             }

package/dist/collection/components/datepickers/wm-datepicker.js

@@ -1,18 +1,16 @@
 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;
-        this.popupClicked = false;
-        this.toggleButtonClicked = false;
         this.value = "";
         this.disabled = false;
         this.dateFormat = "mm/dd/yyyy";
-        this.errorMessage = undefined;
         this.labelPosition = "top";
         this.label = "";
         this.requiredField = false;
-        this.preselected = undefined;
+        this.openUp = false;
+        this.popupClicked = false;
+        this.toggleButtonClicked = false;
         this.isExpanded = false;
     }
     get isDisabled() {
@@ -97,6 +95,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 +216,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"; }
@@ -247,6 +251,7 @@ export class DatePicker {
         return {
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -259,12 +264,14 @@ export class DatePicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -277,12 +284,14 @@ export class DatePicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "dateFormat": {
                 "type": "string",
+                "attribute": "date-format",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -295,12 +304,14 @@ export class DatePicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "date-format",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"mm/dd/yyyy\""
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -313,11 +324,13 @@ export class DatePicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-message",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top\" | \"left\" | \"none\"",
@@ -330,12 +343,14 @@ export class DatePicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -348,12 +363,14 @@ export class DatePicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "requiredField": {
                 "type": "boolean",
+                "attribute": "required-field",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -366,12 +383,14 @@ export class DatePicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "required-field",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "preselected": {
                 "type": "string",
+                "attribute": "preselected",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -384,7 +403,8 @@ export class DatePicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "preselected",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

package/dist/collection/components/selects/priv-option-list/priv-option-list.js

@@ -3,6 +3,12 @@ import { debounce, isElOrChild } from "../../../global/functions";
 import { selectMessages } from "../../../global/intl";
 export class PrivOptionList {
     constructor() {
+        this.multiple = false;
+        this.search = false;
+        this.selectAll = false;
+        this.upwardsHeightLimit = null;
+        this.announcement = "";
+        this.searchTerm = "";
         this.searchIndex = 0;
         this.keysSoFar = "";
         this.debouncedSearch = debounce(() => {
@@ -18,15 +24,6 @@ export class PrivOptionList {
         this.debouncedClearKeysSoFar = debounce(() => {
             this.keysSoFar = "";
         }, 500);
-        this.multiple = false;
-        this.search = false;
-        this.selectAll = false;
-        this.searchPlaceholder = undefined;
-        this.optgroupLabel = undefined;
-        this.maxHeight = undefined;
-        this.upwardsHeightLimit = null;
-        this.announcement = "";
-        this.searchTerm = "";
     }
     get childOptions() {
         return Array.from(this.el.getRootNode().host.querySelectorAll("wm-option"));
@@ -386,6 +383,7 @@ export class PrivOptionList {
         return {
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -398,12 +396,14 @@ export class PrivOptionList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "multiple",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "search": {
                 "type": "boolean",
+                "attribute": "search",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -416,12 +416,14 @@ export class PrivOptionList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "search",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "selectAll": {
                 "type": "boolean",
+                "attribute": "select-all",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -434,12 +436,14 @@ export class PrivOptionList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "select-all",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "searchPlaceholder": {
                 "type": "string",
+                "attribute": "search-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -452,11 +456,13 @@ export class PrivOptionList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "search-placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "optgroupLabel": {
                 "type": "string",
+                "attribute": "optgroup-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -469,11 +475,13 @@ export class PrivOptionList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "optgroup-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "maxHeight": {
                 "type": "string",
+                "attribute": "max-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -486,11 +494,13 @@ export class PrivOptionList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-height",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "upwardsHeightLimit": {
                 "type": "number",
+                "attribute": "upwards-height-limit",
                 "mutable": false,
                 "complexType": {
                     "original": "number | null",
@@ -503,7 +513,8 @@ export class PrivOptionList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "upwards-height-limit",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "null"
             }

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