Replace ControlState with custom logic to play nicely with the wrapped input.

Basically all focus handling is based on the wrapped input. tp-input is
merely a shell.

tp-input.js

@@ -7,13 +7,11 @@ This program is available under Apache License Version 2.0
 import { LitElement, html, css } from 'lit';
 import { FormElement } from '@tp/helpers/form-element.js';
 import { EventHelpers } from '@tp/helpers/event-helpers.js';
-import { ControlState } from '@tp/helpers/control-state.js';
 import { Inert } from '@tp/helpers/inert.js';
 
 const mixins = [
   FormElement,
   EventHelpers,
-  ControlState,
   Inert
 ];
 
@@ -82,10 +80,12 @@ class TpInput extends BaseElement {
 
         .prefix ::slotted([slot="prefix"]) {
           padding-right: 5px;
+          white-space: nowrap;
         }
 
         .suffix ::slotted([slot="suffix"]) {
           padding-left: 5px;
+          white-space: nowrap;
         }
       `
     ];
@@ -115,9 +115,6 @@ class TpInput extends BaseElement {
       // The value for this element.
       value: { type: String },
 
-      // If true the control can't be edited.
-      disabled: { type: Boolean, reflect: true },
-
       // If true, something invalid was entered.
       invalid: { type: Boolean, reflect: true },
 
@@ -163,6 +160,10 @@ class TpInput extends BaseElement {
 
       readonly: { type: Boolean, reflect: true },
 
+      focused: { type: Boolean, reflect: true },
+
+      disabled: { type: Boolean, reflect: true },
+
       /* @private */
       _previousValidInput: { type: String, value: '' }
     };
@@ -192,6 +193,8 @@ class TpInput extends BaseElement {
       return;
     }
 
+    this.listen(this.inputEl, 'focus', '_onFocus');
+    this.listen(this.inputEl, 'blur', '_onBlur');
     this.listen(this.inputEl, 'input', '_onInput');
     this.listen(this.inputEl, 'keypress', '_onKeypress');
 
@@ -218,6 +221,14 @@ class TpInput extends BaseElement {
     }
   }
 
+  shouldUpdate(changes) {
+    if (changes.has('disabled')) {
+      this._disabledChanged(this.disabled);
+    }
+    
+    return super.shouldUpdate(changes);
+  }
+
   updated(changes) {
     if (changes.has('optional')) {
       this._optionalChanged(changes.get('optional'));
@@ -266,6 +277,14 @@ class TpInput extends BaseElement {
     }
   }
 
+  _onFocus() {
+    this.focused = true;
+  }
+
+  _onBlur() {
+    this.focused = false;
+  }
+
   _onInput() {
     this._inputWasChanged = true;
     if (this.allowedPattern && !this._patternAlreadyChecked) {
@@ -425,6 +444,10 @@ class TpInput extends BaseElement {
     this.inputEl.focus();
   }
 
+  blur() {
+    this.inputEl.blur();
+  }
+
   /**
   * Reset the control if a parent era-form is reset.
   */
@@ -460,6 +483,15 @@ class TpInput extends BaseElement {
       this.validate();
     }
   }
+
+  _disabledChanged(disabled) {
+    this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    this.style.pointerEvents = disabled ? 'none' : '';
+    if (disabled) {
+      this.focused = false;
+      this.blur();
+    }
+  }
 }
 
 window.customElements.define('tp-input', TpInput);