No bg color for the error message by default

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-textarea",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "tp-textarea.js",
   "scripts": {

tp-textarea.js

@@ -6,16 +6,16 @@ This program is available under Apache License Version 2.0
 
 import { FormElement } from '@tp/helpers/form-element.js';
 import { DomQuery } from '@tp/helpers/dom-query.js';
+import { ControlState } from '@tp/helpers/control-state.js';
 import { LitElement, html, css } from 'lit';
 
-class TpElement extends FormElement(DomQuery(LitElement)) {
+class TpTextarea extends FormElement(DomQuery(ControlState(LitElement))) {
   static get styles() {
     return [
       css`
         :host {
-          display: inline-block;
+          display: block;
           position: relative;
-          width: 400px;
           border: solid 1px #9E9E9E;
           overflow: hidden;
         }
@@ -37,7 +37,6 @@ class TpElement extends FormElement(DomQuery(LitElement)) {
           text-overflow: ellipsis;
           white-space: nowrap;
           pointer-events: none;
-          background: #ffffff;
         }
 
         :host([invalid]) .error-message {
@@ -50,11 +49,13 @@ class TpElement extends FormElement(DomQuery(LitElement)) {
           left: 0;
           right: 0;
           bottom: 0;
+          padding: var(--tp-textarea-padding, 0);
         }
 
         .mirror-text {
           visibility: hidden;
           word-wrap: break-word;
+          padding: var(--tp-textarea-padding, 0);
         }
 
         .wrap ::slotted(textarea) {
@@ -82,37 +83,41 @@ class TpElement extends FormElement(DomQuery(LitElement)) {
     const { errorMessage } = this;
 
     return html`
-      <div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
+      <div id="mirror" class="mirror-text" part="mirror" aria-hidden="true">&nbsp;</div>
 
-      <div class="wrap">
+      <div class="wrap" part="wrap">
         <slot></slot>
       </div>
 
-      <div class="error-message">${errorMessage}</div>
+      <div class="error-message" part="error-message">${errorMessage}</div>
     `;
   }
 
   static get properties() {
     return {
       readonly: { type: Boolean },
+      required: { type: Boolean },
       errorMessage: { type: String },
       invalid: { type: Boolean, reflect: true },
     };
   }
 
+  constructor() {
+    super();
+    this.value = '';
+  }
+
   connectedCallback() {
     super.connectedCallback();
-
-    this.addEventListener('input', this.onInput);
+    this.addEventListener('input', this._onInput);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-
-    this.removeEventListener('input', this.onInput);
+    this.removeEventListener('input', this._onInput);
   }
 
-  shouldUpdate(changes) {
+  updated(changes) {
     if (changes.has('value')) {
       this._syncToTextarea();
     }
@@ -120,8 +125,6 @@ class TpElement extends FormElement(DomQuery(LitElement)) {
     if (changes.has('readonly')) {
       this._readOnlyChanged();
     }
-
-    return true;
   }
 
   get textarea() {
@@ -145,8 +148,6 @@ class TpElement extends FormElement(DomQuery(LitElement)) {
       // Empty, required input is invalid
       if (this.required && this.value === '') {
         valid = false;
-      } else if (this.hasValidator()) {
-        valid = IronValidatableBehavior.validate.call(this, this.value);
       }
     }
 
@@ -210,4 +211,4 @@ class TpElement extends FormElement(DomQuery(LitElement)) {
   }
 }
 
-window.customElements.define('tp-element', TpElement);
+window.customElements.define('tp-textarea', TpTextarea);