Improve focus handling.

package.json

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

tp-textarea.js

@@ -110,11 +110,44 @@ class TpTextarea extends FormElement(DomQuery(ControlState(LitElement))) {
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('input', this._onInput);
+    this._boundOnFocus = this._onFocus.bind(this);
+    this._boundOnBlur = this._onBlur.bind(this);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('input', this._onInput);
+
+    if (this.textarea) {
+      this.textarea.removeEventListener('focus', this._boundOnFocus);
+      this.textarea.removeEventListener('blur', this._boundOnBlur);
+    }
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    // ControlState sets tabindex="0" on the host, but the slotted <textarea>
+    // is the real interactive element. Make the host non-tabbable so the
+    // inner textarea is the only tab stop.
+    this.setAttribute('tabindex', '-1');
+    this.textarea.addEventListener('focus', this._boundOnFocus);
+    this.textarea.addEventListener('blur', this._boundOnBlur);
+  }
+
+  focus() {
+    this.textarea.focus();
+  }
+
+  blur() {
+    this.textarea.blur();
+  }
+
+  _onFocus() {
+    this.focused = true;
+  }
+
+  _onBlur() {
+    this.focused = false;
   }
 
   updated(changes) {
@@ -179,6 +212,7 @@ class TpTextarea extends FormElement(DomQuery(ControlState(LitElement))) {
   _onInput() {
     this.$.mirror.innerHTML = this._valueForMirror();
     this.value = this.textarea.value;
+    this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true }));
   }
 
   _constrain(tokens) {