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

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

@@ -895,21 +895,28 @@
   flex-direction: column;
   font-size: 0.875rem;
 }
+:host .wrapper .label-wrapper {
+  display: flex;
+}
 :host .wrapper .label {
-  display: block;
+  display: inline-block;
   line-height: normal;
   font-weight: 600;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin-bottom: 0.25rem;
 }
-:host .wrapper .label .required {
+:host .wrapper .required {
+  display: inline-block;
   color: var(--wmcolor-text-required);
 }
 :host .wrapper.label-left {
   flex-direction: row;
 }
 :host .wrapper.label-left .label-wrapper {
-  line-height: 2.5rem;
+  height: fit-content;
+  margin-right: 0.75rem;
 }
 :host .wrapper.label-left .label-wrapper .label {
   display: flex;
@@ -917,7 +924,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 :host .wrapper.label-none label {
   position: absolute !important;
@@ -931,11 +937,11 @@
   white-space: nowrap !important;
   margin: -1px !important;
 }
-:host .wrapper.invalid .label {
+:host .wrapper.invalid .label-wrapper {
   color: var(--wmcolor-text-error);
   position: relative;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   content: "";
   display: block;
   background-color: var(--icon-fill, currentColor);
@@ -944,14 +950,14 @@
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   display: inline-block;
   margin-inline-start: 0.25rem;
-  vertical-align: middle;
+  align-self: center;
   flex-shrink: 0;
   transform: translateY(-1px);
 }
@@ -1258,10 +1264,6 @@
   box-shadow: inset 0 0 0 1px var(--wmcolor-taginput-row-border-selected);
   font-weight: 500;
 }
-:host .table-wrapper tr.focused {
-  background-color: var(--wmcolor-taginput-row-background-focus);
-  box-shadow: none;
-}
 :host .table-wrapper tr:hover:not(.locked) {
   background-color: var(--wmcolor-taginput-row-background-hover);
   box-shadow: none;
@@ -1274,21 +1276,25 @@
   color: var(--wmcolor-taginput-tag-text);
   margin-inline-end: 0.5rem;
 }
+:host .table-wrapper.user-is-keying:focus-visible tr.focused {
+  background-color: var(--wmcolor-taginput-row-background-focus);
+  box-shadow: none;
+}
 :host .table-wrapper td {
   height: 3.75rem;
   vertical-align: middle;
   padding: 0 1.5rem;
   cursor: pointer;
 }
-:host .table-wrapper td.focused {
-  outline: 3px solid var(--wmcolor-interactive-focus);
-  outline-offset: -3px;
-}
 :host .table-wrapper td .cell-content-wrapper.trunc {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+:host .table-wrapper.user-is-keying:focus-visible td.focused {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: -3px;
+}
 :host .description {
   display: none;
 }

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;
@@ -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();
@@ -634,24 +631,17 @@ export class TagInput {
     }
     handleTableWrapperFocus() {
         // Forward focus to first focusable table row when container receives focus
-        if (this.isTable) {
-            // First try filtered options, then fall back to all options
-            let targetOptions = this.filteredOptionEls;
-            if (targetOptions.length === 0) {
-                targetOptions = this.optionEls;
-            }
-            if (targetOptions.length > 0) {
-                const firstOption = targetOptions[0];
-                const firstRow = this.elFromTagOption(firstOption);
-                if (firstRow) {
-                    this.focusOption(firstRow);
-                    return; // Successfully handled focus
-                }
-            }
-            // Fallback: if we can't find any options or rows, keep focus on input
-            // This prevents focus from going to body
-            if (this.inputEl) {
-                this.inputEl.focus();
+        // First try filtered options, then fall back to all options
+        let targetOptions = this.filteredOptionEls;
+        if (targetOptions.length === 0) {
+            targetOptions = this.optionEls;
+        }
+        if (targetOptions.length > 0) {
+            const firstOption = targetOptions[0];
+            const firstRow = this.elFromTagOption(firstOption);
+            if (firstRow) {
+                this.focusOption(firstRow);
+                return;
             }
         }
     }
@@ -680,6 +670,7 @@ export class TagInput {
                 break;
             case "Escape":
                 ev.preventDefault();
+                ev.stopPropagation();
                 // Focus back to input as a safe fallback
                 if (this.inputEl) {
                     this.inputEl.focus();
@@ -843,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(), onFocus: () => this.handleTableWrapperFocus(), 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)))));
+        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) => {
@@ -919,12 +916,12 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '01e06180a6a01df582f810c719445fbeed00fe4a', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'f6afeda4ee70df39da5d27bf785f4fc2fd0d72c0', class: "label-wrapper" }, h("label", { key: 'c2c81afa191d66c6d33f1b717844b947200e86e0', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: '1da48d6c19e59a014f1aedc0ab33554e64756576', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'ddf3c89a5af6c8c734e537be9f01fd1b306a7b49', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'c332f024838f3b710abe7721a1761d917f4cc34e', class: "upper-row" }, h("div", { key: 'bc81483ffa3695189828215c79ab362b8374f4a7', class: "svg-icon svg-search" }), h("div", { key: '668bdcfc8a6b06e14469fc0f977f79f444773b3f', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '6ea2700c19f37305e2ae8e067eea61bff23b8dc8', 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: 'b99ca40b61d052f9fe7a30881f1479abf22925b6', 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: 'a2f6daf9eab25e6dcd9ead5a70dc66b0afe1ede9', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '3a733a7064be0b93ece1c7f0ed2cb3165184b3c3', id: "info", class: "info-text" }, this.info)), h("div", { key: '2d8435c9aa077e8902a9cccf1c1057e48926240a', id: "error" }, this.errorMessage), h("div", { key: 'd9a7d93201d0d7ef4ec5f7ee708ddfe41dad7da4', 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"; }
@@ -943,6 +940,7 @@ export class TagInput {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -955,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",
@@ -972,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",
@@ -989,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\"",
@@ -1006,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",
@@ -1024,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",
@@ -1041,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",
@@ -1058,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\"",
@@ -1076,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",
@@ -1094,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",
@@ -1111,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",
@@ -1129,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",
@@ -1147,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",
@@ -1164,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",
@@ -1181,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);
 }