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

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

@@ -3,6 +3,12 @@ import { csvToArray, debounce, hideTooltip, intl, measureText, shouldOpenUp, sho
 import { globalMessages } from "../../global/intl";
 export class TagInput {
     constructor() {
+        this.labelPosition = "top";
+        this.requiredField = false;
+        this.tagInputType = "dropdown";
+        // dropdown variant
+        this.addNew = true;
+        this.characterLimit = 50;
         this.addNewHelpText = intl.formatMessage({
             id: "tagInput.addNewHelpText",
             defaultMessage: "Press the Enter or Comma key to add a new tag.",
@@ -34,28 +40,12 @@ export class TagInput {
         });
         this.openUp = false;
         this.inModal = false;
-        this.debouncedUpdate = debounce(() => forceUpdate(this.el), 30);
-        this.label = undefined;
-        this.errorMessage = undefined;
-        this.info = undefined;
-        this.labelPosition = "top";
-        this.maxTags = undefined;
-        this.placeholder = undefined;
-        this.requiredField = false;
-        this.tagInputType = "dropdown";
-        this.helpText = undefined;
-        this.addNew = true;
-        this.characterLimit = 50;
-        this.colHeaders = undefined;
-        this.colWidths = undefined;
-        this.colWrap = undefined;
         this.isKeying = false;
         this.isExpanded = false;
         this.liveRegionMessage = "";
-        this.focusedOption = undefined;
         this.focusedColumn = 0;
-        this.focusedTagIndex = undefined;
-        this.tagsList = [];
+        this.tagsList = []; // options to render as tags. This needs the be kept in state as tags should be shown in the order they are added
+        this.debouncedUpdate = debounce(() => forceUpdate(this.el), 30);
     }
     addNewTagMessage(newTagName) {
         return intl.formatMessage({
@@ -459,6 +449,7 @@ export class TagInput {
             case "Escape":
                 if (this.isDropdown && this.isExpanded) {
                     ev.preventDefault();
+                    ev.stopPropagation();
                     this.closeDropdown();
                 }
                 break;
@@ -469,9 +460,9 @@ export class TagInput {
         }
     }
     handleInputFocus() {
+        this.clearOptionFocus();
         if (this.isDropdown) {
             this.openDropdown();
-            this.clearOptionFocus();
         }
     }
     handleInputChanged(ev) {
@@ -616,6 +607,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();
@@ -632,6 +629,55 @@ export class TagInput {
             }
         }
     }
+    handleTableWrapperFocus() {
+        // Forward focus to first focusable table row when container receives 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;
+            }
+        }
+    }
+    handleTableWrapperKeyDown(ev) {
+        // Override browser's default scrolling behavior and delegate to our navigation
+        switch (ev.key) {
+            case "ArrowDown":
+                ev.preventDefault();
+                this.handleInputArrowDown();
+                break;
+            case "ArrowUp":
+                ev.preventDefault();
+                this.handleInputArrowUp();
+                break;
+            case "ArrowLeft":
+                ev.preventDefault();
+                this.focusPrevCell();
+                break;
+            case "ArrowRight":
+                ev.preventDefault();
+                this.focusNextCell();
+                break;
+            case "Enter":
+                ev.preventDefault();
+                this.handleInputEnter();
+                break;
+            case "Escape":
+                ev.preventDefault();
+                ev.stopPropagation();
+                // Focus back to input as a safe fallback
+                if (this.inputEl) {
+                    this.inputEl.focus();
+                }
+                break;
+        }
+    }
     focusPrevCell() {
         if (this.focusedOption) {
             if (this.focusedColumn > 0) {
@@ -788,7 +834,13 @@ export class TagInput {
             !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, this.addNewTagMessage(inputValue))));
     }
     renderTable() {
-        return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, 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)))));
+        return (h("div", { class: `table-wrapper ${this.isKeying ? "user-is-keying" : ""}`, onScroll: () => this.dismissTooltip(),
+            // 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 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) => {
@@ -864,12 +916,12 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '7d8c886c6c3e1222b5b75f39abc0675b6d3c6391', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '773290cfa1656ecf851131cb51a277f86c7958fe', class: "label-wrapper" }, h("label", { key: '1be0c47a321fb9b401e977595c1227e3f66df056', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: 'fdb58e1f11e67c041961ea773880937f5c9595a4', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'a1c677b7cdd2f2462541ee54b3c9e2b8dbf8de04', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'ddf599d183d941327bed5e2fee01e7203d18b139', class: "upper-row" }, h("div", { key: '54d35cbfd2cdd5e6d18ed96391880ffcffdbd79b', class: "svg-icon svg-search" }), h("div", { key: '259e667e4b5597b8845d7d022b66dbaeac1a2862', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '67e003d45ed9c278626de2a95e4a0fb8acbdd194', 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: 'a0fdcf2f8f9f6b919e854ddcb3db5f2f47b781a0', 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: '18d2eae04010daa298a74f78f1b9518497a4479e', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '5f4c1611560dedb1f1bf7b0ccdafd2034b64e308', id: "info", class: "info-text" }, this.info)), h("div", { key: '4e7a79722863aa2db7278bebe58dd1fbe76f6f3f', id: "error" }, this.errorMessage), h("div", { key: '10c7818043b3d9dc85341f9b0107cee9199aa780', 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"; }
@@ -888,6 +940,7 @@ export class TagInput {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -900,11 +953,13 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -917,11 +972,13 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-message",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "info": {
                 "type": "string",
+                "attribute": "info",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -934,11 +991,13 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "info",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top\" | \"left\" | \"none\"",
@@ -951,12 +1010,14 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "maxTags": {
                 "type": "number",
+                "attribute": "max-tags",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -969,11 +1030,13 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-tags",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -986,11 +1049,13 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "requiredField": {
                 "type": "boolean",
+                "attribute": "required-field",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1003,12 +1068,14 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "required-field",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "tagInputType": {
                 "type": "string",
+                "attribute": "tag-input-type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"dropdown\" | \"table\"",
@@ -1021,12 +1088,14 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tag-input-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"dropdown\""
             },
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1039,11 +1108,13 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "help-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "addNew": {
                 "type": "boolean",
+                "attribute": "add-new",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1056,12 +1127,14 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "add-new",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "characterLimit": {
                 "type": "number",
+                "attribute": "character-limit",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1074,12 +1147,14 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "character-limit",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "50"
             },
             "colHeaders": {
                 "type": "string",
+                "attribute": "col-headers",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1092,11 +1167,13 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "col-headers",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "colWidths": {
                 "type": "string",
+                "attribute": "col-widths",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1109,11 +1186,13 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "col-widths",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "colWrap": {
                 "type": "string",
+                "attribute": "col-wrap",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1126,7 +1205,8 @@ export class TagInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "col-wrap",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -3,10 +3,6 @@ export class TagOption {
     constructor() {
         this.selected = false;
         this.locked = false;
-        this.col1 = undefined;
-        this.col2 = undefined;
-        this.col3 = undefined;
-        this.col4 = undefined;
     }
     async emitSelectedEvent() {
         this.wmTagOptionSelected.emit();
@@ -28,6 +24,7 @@ export class TagOption {
         return {
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -40,12 +37,14 @@ export class TagOption {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "locked": {
                 "type": "boolean",
+                "attribute": "locked",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -58,12 +57,14 @@ export class TagOption {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "locked",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "col1": {
                 "type": "string",
+                "attribute": "col1",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -76,11 +77,13 @@ export class TagOption {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "col1",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "col2": {
                 "type": "string",
+                "attribute": "col2",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -93,11 +96,13 @@ export class TagOption {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "col2",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "col3": {
                 "type": "string",
+                "attribute": "col3",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -110,11 +115,13 @@ export class TagOption {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "col3",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "col4": {
                 "type": "string",
+                "attribute": "col4",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -127,7 +134,8 @@ export class TagOption {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "col4",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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