From ab1ad5be8f59d1df2698aaab1286a1e2e1ad6546 Mon Sep 17 00:00:00 2001
From: Becky Siegel <beckysiegel@google.com>
Date: Fri, 24 Mar 2017 14:16:35 -0700
Subject: [PATCH 1/8] 2.0-preview

---
 .gitignore            |   3 +-
 .travis.yml           |  13 +-
 bower.json            |  43 ++++--
 gold-phone-input.html | 164 +++++++++++++++++----
 test/basic.html       | 328 +++++++++++++++++++++++++-----------------
 test/index.html       |   2 +-
 6 files changed, 372 insertions(+), 181 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8d4ae25..2be39e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-bower_components
+bower_components*
+bower-*.json
diff --git a/.travis.yml b/.travis.yml
index e6132bc..cb64e3a 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,14 +1,13 @@
 language: node_js
 sudo: required
 before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
-  - polylint
+  - npm install -g bower polymer-cli@next
+  - polymer install --variants
 env:
   global:
-    - secure: >-
+    - secure:
         fviqObsjTcudSB+jLADACiHgRXQLw3s0myKUpVSbRnNlvcwzfXulFTpwV3vRftieBfj1vupwhJOTjFWtD9MYTRS6tcSSE6ShUNLOcyiZmb4kR9Ox3rQAvUfME9Yj2dh2txFYgMhhLEuGQkdM3BvxPTPmWEoKjGCSnqvga26Kddm4++GPE7+s14t5Iq0q+KWiqJ0rscaQrEwYKrBTPiv93abkPkajKN9nMZD1EfUYo03wDBMHGzF7RCV5cfZQUqhpK64DvTRpvtErZOvJX2dSz3GbhuYH1lDHMIHIEFMhGk/Ayu9lzEfnExbWYQydxW3yfmeGRmSnpmKcz3eTdlMCB9sX9k8IY8RCCjG4jS9iPpcDh/0aGHw+S7v0iyx9X7eq1hOz6n8ZouUVYGZEf7gt4EtWEsYVxSANQkvBhDhfJMCWdz/uv+AOV6SMjh9pwakifdDNGF/PifcFsfgbYaJyyEPH0faQs+0PQG+jciuUAd3W/5DO6Iilbc7rJJENaDNNucjx+eYwSNuW7vKj3XkyEMT8R1t7t041gXTgjElowI35kUkBTI7HZTI4RwTb/+rDqyncBk6x9BdYkq2EGM1zaqQzTD7PlrJ686IRRL2WmA1dOQYzlOv4muyPmnNKnRLYyMjF6niANrXXoZn7rTI6AcsieUUoyyonZ62Fg9mjcrs=
-    - secure: >-
+    - secure:
         jH5Cn/56zXgH14Y0+0X6YhqVqabe47VLWD5zPePIpRDust4SBDJ6mqalAIWfT3+RLZR5x5+dQIBO3V3BQ5KFOB5E+EEserzqNbqIEHx+crkhztg+lBmedMgGU8+gTa8D3Htd1kYNN+KMnsxShCQbWd+psIb6Uje9BhdMBVgoBAkitvTYDMI69qU14UgNYpE6qvf28K9WZBPxSWeRVa5OtS4I4QixYLRy9zcmIWWsesAqd+84Hj5hybIL9iZgo4UzddYd0GBwiaAXwIKnb7DpQDOsomuQaoKWI3HWZSlXEP+9cvWQ6UafaaeKifob5PtnPeVq2E4m8CVseuFN5h5mSnA3RX0EQUz+e6BJJeWPQ684MDrda3A3yfbG47jYrzQ8iQWY7nfUOKPR2sDdDAPBQh7kjnS8VtAvALCnlDi79y08UPSrsQXOYkJNYBSabmguGVOKNPrfFz3ct0Q9KWhCK5MEA7hArIvYW9K3YpGOYBdJmx8vr+BNGVb/45mBYh57Fgw0ij+Di37AvAR3BWJJIifBqfML8MBEUjqfr1Gkjli1rLuvgis4OFmmcIqM5ZvO8gG3gzOf1Ma/YjFraCESnoyjH30W4pF7uzeLcRjNb3clWyCQeYqptD4UgQfBH4oIyddhqwfDJOfV32zrm/woGFo0Z5vb0kD0F8uBKiodh/I=
 node_js: '6'
 addons:
@@ -19,6 +18,6 @@ addons:
     packages:
       - google-chrome-stable
 script:
-  - xvfb-run wct
-  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
+  - xvfb-run polymer test
+  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s ''default''; fi'
 dist: trusty
diff --git a/bower.json b/bower.json
index 057d9c5..56f3aea 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "gold-phone-input",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "A validating input for a phone number",
   "authors": [
     "The Polymer Authors"
@@ -21,18 +21,37 @@
   "homepage": "https://github.com/PolymerElements/gold-phone-input",
   "ignore": [],
   "dependencies": {
-    "iron-input": "PolymerElements/iron-input#^1.0.0",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
-    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
-    "paper-input": "PolymerElements/paper-input#^1.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "polymer": "Polymer/polymer#^1.2.0"
+    "iron-input": "PolymerElements/iron-input#2.0-preview",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#2.0-preview",
+    "paper-input": "PolymerElements/paper-input#2.0-preview",
+    "paper-styles": "PolymerElements/paper-styles#2.0-preview",
+    "polymer": "Polymer/polymer#^2.0.0-rc.2"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#2.0-preview",
+    "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "iron-input": "PolymerElements/iron-input#^1.0.0",
+        "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+        "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
+        "paper-input": "PolymerElements/paper-input#^1.0.0",
+        "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+        "polymer": "Polymer/polymer#^1.2.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+        "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+        "web-component-tester": "^4.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+      }
+    }
   }
 }
diff --git a/gold-phone-input.html b/gold-phone-input.html
index fe8bf22..1d3cde0 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -68,17 +68,48 @@
 
       /* TODO: This should be a dropdown */
       span {
-        @apply(--paper-font-subhead);
-        @apply(--paper-input-container-input);
+        @apply --paper-font-subhead;
+        @apply --paper-input-container-input;
       }
 
       .country-code {
         width: 40px;
-        @apply(--gold-phone-input-country-code);
+        @apply --gold-phone-input-country-code;
       }
 
       input {
-        @apply(--layout-flex);
+        @apply --layout-flex;
+      }
+      input
+      {
+        position: relative; /* to make a stacking context */
+        outline: none;
+        box-shadow: none;
+        padding: 0;
+        width: 100%;
+        max-width: 100%;
+        background: transparent;
+        border: none;
+        color: var(--paper-input-container-input-color, var(--primary-text-color));
+        -webkit-appearance: none;
+        text-align: inherit;
+        vertical-align: bottom;
+        /* Firefox sets a min-width on the input, which can cause layout issues */
+        min-width: 0;
+        @apply --paper-font-subhead;
+        @apply --paper-input-container-input;
+      }
+      input::-webkit-input-placeholder {
+        color: var(--paper-input-container-color, var(--secondary-text-color));
+      }
+      input:-moz-placeholder {
+        color: var(--paper-input-container-color, var(--secondary-text-color));
+      }
+      input::-moz-placeholder {
+        color: var(--paper-input-container-color, var(--secondary-text-color));
+      }
+      input:-ms-input-placeholder {
+        color: var(--paper-input-container-color, var(--secondary-text-color));
       }
     </style>
     <paper-input-container id="container"
@@ -87,36 +118,65 @@
         always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
         invalid="[[invalid]]">
 
-      <label hidden$="[[!label]]">[[label]]</label>
+      <label slot="label" hidden$="[[!label]]">[[label]]</label>
 
-      <span prefix class="country-code">+[[countryCode]]</span>
+      <span slot="prefix" prefix class="country-code">+[[countryCode]]</span>
 
-      <input is="iron-input" id="input"
-        aria-labelledby$="[[_ariaLabelledBy]]"
-        aria-describedby$="[[_ariaDescribedBy]]"
-        required$="[[required]]"
-        bind-value="{{value}}"
-        name$="[[name]]"
-        allowed-pattern="[0-9\-]"
-        autocomplete="tel"
-        type="tel"
-        prevent-invalid-input
-        disabled$="[[disabled]]"
-        invalid="{{invalid}}"
-        autofocus$="[[autofocus]]"
-        inputmode$="[[inputmode]]"
-        placeholder$="[[placeholder]]"
-        readonly$="[[readonly]]"
-        maxlength$="[[maxlength]]"
-        size$="[[size]]">
+      <span id="template-placeholder"></span>
 
       <template is="dom-if" if="[[errorMessage]]">
-        <paper-input-error id="error">[[errorMessage]]</paper-input-error>
+        <paper-input-error slot="add-on" id="error">
+          [[errorMessage]]
+        </paper-input-error>
       </template>
 
     </paper-input-container>
   </template>
 
+  <template id="v0">
+    <input is="iron-input" id="input" slot="input"
+          aria-labelledby$="[[_ariaLabelledBy]]"
+          aria-describedby$="[[_ariaDescribedBy]]"
+          required$="[[required]]"
+          bind-value="{{value}}"
+          name$="[[name]]"
+          allowed-pattern="[0-9\-]"
+          autocomplete="tel"
+          type="tel"
+          disabled$="[[disabled]]"
+          invalid="{{invalid}}"
+          autofocus$="[[autofocus]]"
+          inputmode$="[[inputmode]]"
+          placeholder$="[[placeholder]]"
+          readonly$="[[readonly]]"
+          maxlength$="[[maxlength]]"
+          size$="[[size]]">
+  </template>
+  <template id="v1">
+    <iron-input id="input" slot="input"
+        bind-value$="{{value}}"
+        invalid$="{{invalid}}"
+        allowed-pattern="[0-9\-]"
+        maxlength$="[[maxlength]]">
+      <input id="nativeInput"
+          aria-labelledby$="[[_ariaLabelledBy]]"
+          aria-describedby$="[[_ariaDescribedBy]]"
+          invalid="{{invalid}}"
+          required="[[required]]"
+          type="tel"
+          autocomplete="tel"
+          maxlength="[[maxlength]]"
+          name="[[name]]"
+          value="{{value}}"
+          disabled="[[disabled]]"
+          autofocus="[[autofocus]]"
+          inputmode="[[inputmode]]"
+          placeholder="[[placeholder]]"
+          readonly="[[readonly]]"
+          size="[[size]]">
+    </iron-input>
+  </template>
+
   <script>
   Polymer({
 
@@ -156,7 +216,8 @@
 
       value: {
         type: String,
-        observer: '_onValueChanged'
+        observer: '_onValueChanged',
+        value: '',
       },
 
       /**
@@ -167,11 +228,11 @@
       internationalValue: {
         type: String,
         computed: '_computeInternationalValue(countryCode, value)'
-      }
+      },
     },
 
     observers: [
-      '_onFocusedChanged(focused)'
+      '_onFocusedChanged(focused)',
     ],
 
     ready: function() {
@@ -180,13 +241,54 @@
         this._handleAutoValidate();
     },
 
+    // TODO: remove this when 2.0 adds beforeRegister back to legacy
+    registered: function() {
+      if (Polymer.Element) {
+        this._beforeRegister();
+      }
+    },
+    beforeRegister: function() {
+      this._beforeRegister();
+    },
+    _beforeRegister: function() {
+      var template = Polymer.DomModule.import('gold-phone-input', 'template');
+      var version = Polymer.Element ? 'v1' : 'v0';
+      var inputTemplate = Polymer.DomModule.import('gold-phone-input', 'template#' + version);
+      var inputPlaceholder = template.content.querySelector('#template-placeholder');
+      inputPlaceholder.parentNode.replaceChild(inputTemplate.content, inputPlaceholder);
+    },
+    /**
+    * Returns a reference to the focusable element. Overridden from PaperInputBehavior
+    * to correctly focus the native input.
+    */
+    get _focusableElement() {
+      return Polymer.Element ? this.inputElement._inputElement : this.inputElement;
+    },
+
+    // Note: This event is only available in the 1.0 version of this element.
+    // In 2.0, the functionality of `_onIronInputReady` is done in
+    // PaperInputBehavior::attached.
+    listeners: {
+      'iron-input-ready': '_onIronInputReady'
+    },
+    _onIronInputReady: function() {
+      // Only validate when attached if the input already has a value.
+      if (!!this.inputElement.bindValue) {
+        this.$.container._handleValueAndAutoValidate(this.inputElement);
+      }
+    },
+
     _phoneNumberPatternChanged: function() {
       // Transform the pattern into a regex the iron-input understands.
       var regex = '';
       regex = this.phoneNumberPattern.replace(/\s/g, '\\s');
       regex = regex.replace(/X/gi, '\\d');
       regex = regex.replace(/\+/g, '\\+');
-      this.$.input.pattern = regex;
+      if (this.$.nativeInput) {
+        this.$.nativeInput.pattern = regex;
+      } else {
+        this.$.input.pattern = regex;
+      }
     },
 
     /**
@@ -236,7 +338,8 @@
       this.updateValueAndPreserveCaret(formattedValue.trim());
 
       // Advance or back up the caret based on the change that happened before it.
-      this.$.input.selectionStart = this.$.input.selectionEnd = start + dashesDifference;
+      this.$.input.selectionStart =
+          this.$.input.selectionEnd = start + dashesDifference;
 
       this._handleAutoValidate();
     },
@@ -247,6 +350,7 @@
     validate: function() {
       // Update the container and its addons (i.e. the custom error-message).
       var valid = this.$.input.validate()
+
       this.$.container.invalid = !valid;
       this.$.container.updateAddons({
         inputElement: this.$.input,
diff --git a/test/basic.html b/test/basic.html
index 131ca01..8291ca5 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -42,103 +42,146 @@
   </test-fixture>
 
   <script>
-
+    function getIronInput(paperInput) {
+      return paperInput.inputElement;
+    }
+    function getNativeInput(paperInput) {
+       return Polymer.Element ?
+          paperInput.inputElement.inputElement : paperInput.inputElement;
+    }
     suite('basic', function() {
-      test('input is spaced out correctly', function() {
+      test('input is spaced out correctly', function(done) {
         var input = fixture('basic');
-        input.value ='1231112222';
-        assert.equal(input.value, '123-111-2222');
+
+        Polymer.Base.async(function() {
+          input.value='1234';
+          input.value ='1231112222';
+          assert.equal(input.value, '123-111-2222');
+          done();
+        }, 1);
       });
 
-      test('setting the value to undefined resets it to the empty string', function() {
+      test('setting the value to undefined resets it to the empty string', function(done) {
         var input = fixture('basic');
-        input.value = undefined;
-        assert.equal(input.value, '');
+
+        Polymer.Base.async(function() {
+          input.value = undefined;
+          assert.equal(input.value, '');
+          done();
+        }, 1);
       });
 
-      test('invalid input is not ok', function() {
+      test('invalid input is not ok', function(done) {
         var input = fixture('required');
-        input.value='1234';
-        forceXIfStamp(input);
 
-        var container = Polymer.dom(input.root).querySelector('paper-input-container');
-        assert.ok(container, 'paper-input-container exists');
-        assert.isTrue(container.invalid);
+        Polymer.Base.async(function() {
+          input.value='1234';
+          forceXIfStamp(input);
 
-        var error = Polymer.dom(input.root).querySelector('paper-input-error');
-        assert.ok(error, 'paper-input-error exists');
-        assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden');
+          var container = Polymer.dom(input.root).querySelector('paper-input-container');
+          assert.ok(container, 'paper-input-container exists');
+          assert.isTrue(container.invalid);
+
+          var error = Polymer.dom(input.root).querySelector('paper-input-error');
+          assert.ok(error, 'paper-input-error exists');
+          assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden');
+          done();
+        }, 1);
       });
 
-      test('valid input is ok', function() {
+      test('valid input is ok', function(done) {
         var input = fixture('required');
-        input.value='1231112222';
-        forceXIfStamp(input);
 
-        var container = Polymer.dom(input.root).querySelector('paper-input-container');
-        assert.ok(container, 'paper-input-container exists');
-        assert.isFalse(container.invalid);
+        Polymer.Base.async(function() {
+          input.value='1231112222';
+          forceXIfStamp(input);
+
+          var container = Polymer.dom(input.root).querySelector('paper-input-container');
+          assert.ok(container, 'paper-input-container exists');
+          assert.isFalse(container.invalid);
 
-        var error = Polymer.dom(input.root).querySelector('paper-input-error');
-        assert.ok(error, 'paper-input-error exists');
-        assert.equal(getComputedStyle(error).visibility, 'hidden', 'error is visibility:hidden');
+          var error = Polymer.dom(input.root).querySelector('paper-input-error');
+          assert.ok(error, 'paper-input-error exists');
+          assert.equal(getComputedStyle(error).visibility, 'hidden', 'error is visibility:hidden');
+          done();
+        }, 1);
       });
 
-      test('empty required input shows error on blur', function() {
+      test('empty required input shows error on blur', function(done) {
         var input = fixture('required');
-        forceXIfStamp(input);
-
-        var container = Polymer.dom(input.root).querySelector('paper-input-container');
-        var error = Polymer.dom(input.root).querySelector('paper-input-error');
-        assert.ok(error, 'paper-input-error exists');
-        assert.equal(getComputedStyle(error).visibility, 'hidden', 'error is visibility:hidden');
-        assert.isFalse(container.invalid);
-
-        MockInteractions.focus(input);
-        MockInteractions.blur(input);
-
-        assert(!input.focused, 'input is blurred');
-        assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden');
-        assert.isTrue(container.invalid);
+        Polymer.Base.async(function() {
+          forceXIfStamp(input);
+
+          var container = Polymer.dom(input.root).querySelector('paper-input-container');
+          var error = Polymer.dom(input.root).querySelector('paper-input-error');
+          assert.ok(error, 'paper-input-error exists');
+          assert.equal(getComputedStyle(error).visibility, 'hidden', 'error is visibility:hidden');
+          assert.isFalse(container.invalid);
+
+          MockInteractions.focus(input);
+          MockInteractions.blur(input);
+
+          assert(!input.focused, 'input is blurred');
+          assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden');
+          assert.isTrue(container.invalid);
+          done();
+        }, 1);
       });
 
-      test('international value properly computed', function() {
+      test('international value properly computed', function(done) {
         var input = fixture('basic');
-        input.countryCode = '33';
-        input.phoneNumberPattern = 'X-XX-XX-XX-XX';
-        input.value = '123456789';
-        assert.equal(input.internationalValue, '+(33)1-23-45-67-89');
+        Polymer.Base.async(function() {
+          input.countryCode = '33';
+          input.phoneNumberPattern = 'X-XX-XX-XX-XX';
+          input.value = '123456789';
+          assert.equal(input.internationalValue, '+(33)1-23-45-67-89');
+          done();
+        }, 1);
       });
-      
-      test('international value is read only', function() {
+
+      test('international value is read only', function(done) {
         var input = fixture('basic');
-        input.countryCode = '33';
-        input.phoneNumberPattern = 'X-XX-XX-XX-XX';
-        input.value = '123456789';
-        input.internationalValue = '+(32)2-345-67-89';
-        assert.equal(input.internationalValue, '+(33)1-23-45-67-89');
+        Polymer.Base.async(function() {
+          input.countryCode = '33';
+          input.phoneNumberPattern = 'X-XX-XX-XX-XX';
+          input.value = '123456789';
+          input.internationalValue = '+(32)2-345-67-89';
+          assert.equal(input.internationalValue, '+(33)1-23-45-67-89');
+          done();
+        }, 1);
       });
 
-      test('gets the value without country code if it is not set', function() {
+      test('gets the value without country code if it is not set', function(done) {
         var input = fixture('basic');
-        input.countryCode = '';
-        input.phoneNumberPattern = 'X-XX-XX-XX-XX';
-        input.value = '123456789';
-        assert.equal(input.internationalValue, '1-23-45-67-89');
+        Polymer.Base.async(function() {
+          input.countryCode = '';
+          input.phoneNumberPattern = 'X-XX-XX-XX-XX';
+          input.value = '123456789';
+          assert.equal(input.internationalValue, '1-23-45-67-89');
+          done();
+        }, 1);
       });
     });
 
     suite('a11y', function() {
-      test('has aria-labelledby', function() {
+      test('has aria-labelledby', function(done) {
         var input = fixture('basic');
-        assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
-        assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+        Polymer.Base.async(function() {
+          var nativeInput = getNativeInput(input);
+          assert.isTrue(nativeInput.hasAttribute('aria-labelledby'))
+          assert.equal(nativeInput.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+          done();
+        }, 1);
       });
 
-      test('required and error has aria-labelledby', function() {
+      test('required and error has aria-labelledby', function(done) {
         var input = fixture('required');
-        assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
-        assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+        Polymer.Base.async(function() {
+          var nativeInput = getNativeInput(input);
+          assert.isTrue(nativeInput.hasAttribute('aria-labelledby'))
+          assert.equal(nativeInput.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+          done();
+        }, 1);
       });
     });
 
@@ -146,6 +189,7 @@
       var input, ironInput;
 
       function pretendToTypeACharacter(input, text, caret) {
+        ironInput = getIronInput(input);
         // When typing a character in an input, the browser natively advances
         // the caret from its original location.
         ironInput.value = text;
@@ -157,6 +201,7 @@
       }
 
       function pretendToDeleteACharacter(input, text, caret) {
+        ironInput = getIronInput(input);
         // When typing a character in an input, the browser natively moves back
         // the caret from its original location.
         ironInput.value = text;
@@ -169,103 +214,126 @@
 
       setup(function () {
         input = fixture('basic');
-        ironInput = Polymer.dom(input.root).querySelector('input[is="iron-input"]');
+        ironInput = getIronInput(input);
       });
 
-      test('001-0: adding a character after the 1', function() {
-        input.value ='001-0';
-
-        var caret = 3;
-        pretendToTypeACharacter(input, '0012-0', caret);
-        assert.equal(input.value, '001-20');
-
-        // The cursor advaces by the one character you typed, and the one dash.
-        assert.equal(ironInput.selectionStart, caret + 2, 'selectionStart is preserved');
-        assert.equal(ironInput.selectionEnd, caret + 2, 'selectionEnd is preserved');
+      test('001-0: adding a character after the 1', function(done) {
+        Polymer.Base.async(function() {
+          input.value ='001-0';
+          var caret = 3;
+          pretendToTypeACharacter(input, '0012-0', caret);
+          assert.equal(input.value, '001-20');
+
+          // The cursor advaces by the one character you typed, and the one dash.
+          assert.equal(ironInput.selectionStart, caret + 2, 'selectionStart is preserved');
+          assert.equal(ironInput.selectionEnd, caret + 2, 'selectionEnd is preserved');
+          done();
+        }, 1);
       });
 
-      test('000-1: adding a character after the 1', function() {
-        input.value ='000-1';
+      test('000-1: adding a character after the 1', function(done) {
+        Polymer.Base.async(function() {
+          input.value ='000-1';
 
-        var caret = 5;
-        pretendToTypeACharacter(input, '000-12', caret);
-        assert.equal(input.value, '000-12');
+          var caret = 5;
+          pretendToTypeACharacter(input, '000-12', caret);
+          assert.equal(input.value, '000-12');
 
-        // The cursor just advances by the one character you typed.
-        assert.equal(ironInput.selectionStart, caret + 1, 'selectionStart is preserved');
-        assert.equal(ironInput.selectionEnd, caret + 1, 'selectionEnd is preserved');
+          // The cursor just advances by the one character you typed.
+          assert.equal(ironInput.selectionStart, caret + 1, 'selectionStart is preserved');
+          assert.equal(ironInput.selectionEnd, caret + 1, 'selectionEnd is preserved');
+          done();
+        }, 1);
       });
 
-      test('000-001: adding a character after the 1', function() {
-        input.value ='000-001';
+      test('000-001: adding a character after the 1', function(done) {
+        Polymer.Base.async(function() {
+          input.value ='000-001';
 
-        var caret = 7;
-        pretendToTypeACharacter(input, '000-0012', caret);
-        assert.equal(input.value, '000-001-2');
+          var caret = 7;
+          pretendToTypeACharacter(input, '000-0012', caret);
+          assert.equal(input.value, '000-001-2');
 
-        // The cursor advaces by the one character you typed, and the one new dash.
-        assert.equal(ironInput.selectionStart, caret + 2, 'selectionStart is preserved');
-        assert.equal(ironInput.selectionEnd, caret + 2, 'selectionEnd is preserved');
+          // The cursor advaces by the one character you typed, and the one new dash.
+          assert.equal(ironInput.selectionStart, caret + 2, 'selectionStart is preserved');
+          assert.equal(ironInput.selectionEnd, caret + 2, 'selectionEnd is preserved');
+          done();
+        }, 1);
       });
 
-      test('000-000-0001: adding a character after the 1', function() {
-        input.value ='000-000-0001';
+      test('000-000-0001: adding a character after the 1', function(done) {
+        Polymer.Base.async(function() {
+          input.value ='000-000-0001';
 
-        var caret = 12;
-        pretendToTypeACharacter(input, '000-000-00012', caret);
-        assert.equal(input.value, '00000000012');
+          var caret = 12;
+          pretendToTypeACharacter(input, '000-000-00012', caret);
+          assert.equal(input.value, '00000000012');
 
-        // The cursor advaces by the one character you typed, but you lose 2 dashes
-        assert.equal(ironInput.selectionStart, caret - 1, 'selectionStart is preserved');
-        assert.equal(ironInput.selectionEnd, caret - 1, 'selectionEnd is preserved');
+          // The cursor advaces by the one character you typed, but you lose 2 dashes
+          assert.equal(ironInput.selectionStart, caret - 1, 'selectionStart is preserved');
+          assert.equal(ironInput.selectionEnd, caret - 1, 'selectionEnd is preserved');
+          done();
+        }, 1);
       });
 
-      test('001-20: removing the 2', function() {
-        input.value ='001-20';
+      test('001-20: removing the 2', function(done) {
+        Polymer.Base.async(function() {
+          input.value ='001-20';
 
-        var caret = 5;
-        pretendToDeleteACharacter(input, '001-0', caret);
-        assert.equal(input.value, '001-0');
+          var caret = 5;
+          pretendToDeleteACharacter(input, '001-0', caret);
+          assert.equal(input.value, '001-0');
 
-        // The cursor goes back by the one character you deleted.
-        assert.equal(ironInput.selectionStart, caret - 1, 'selectionStart is preserved');
-        assert.equal(ironInput.selectionEnd, caret - 1, 'selectionEnd is preserved');
+          // The cursor goes back by the one character you deleted.
+          assert.equal(ironInput.selectionStart, caret - 1, 'selectionStart is preserved');
+          assert.equal(ironInput.selectionEnd, caret - 1, 'selectionEnd is preserved');
+          done();
+        }, 1);
       });
 
-      test('000-12: removing the 2', function() {
-        input.value ='000-12';
+      test('000-12: removing the 2', function(done) {
+        Polymer.Base.async(function() {
+          input.value ='000-12';
 
-        var caret = 5;
-        pretendToDeleteACharacter(input, '000-1', caret);
-        assert.equal(input.value, '000-1');
+          var caret = 5;
+          pretendToDeleteACharacter(input, '000-1', caret);
+          assert.equal(input.value, '000-1');
 
-        // The cursor goes back by the one character you deleted.
-        assert.equal(ironInput.selectionStart, caret - 1, 'selectionStart is preserved');
-        assert.equal(ironInput.selectionEnd, caret - 1, 'selectionEnd is preserved');
+          // The cursor goes back by the one character you deleted.
+          assert.equal(ironInput.selectionStart, caret - 1, 'selectionStart is preserved');
+          assert.equal(ironInput.selectionEnd, caret - 1, 'selectionEnd is preserved');
+          done();
+        }, 1);
       });
 
-      test('000-001-2: removing the 2', function() {
-        input.value ='000-001-2';
+      test('000-001-2: removing the 2', function(done) {
+        Polymer.Base.async(function() {
+          input.value ='000-001-2';
 
-        var caret = 9;
-        pretendToDeleteACharacter(input, '000-001-', caret);
-        assert.equal(input.value, '000-001');
+          var caret = 9;
+          pretendToDeleteACharacter(input, '000-001-', caret);
+          assert.equal(input.value, '000-001');
 
-        // The cursor goes back by the one character you deleted, and the one dash.
-        assert.equal(ironInput.selectionStart, caret - 2, 'selectionStart is preserved');
-        assert.equal(ironInput.selectionEnd, caret - 2, 'selectionEnd is preserved');
+          // The cursor goes back by the one character you deleted, and the one dash.
+          assert.equal(ironInput.selectionStart, caret - 2, 'selectionStart is preserved');
+          assert.equal(ironInput.selectionEnd, caret - 2, 'selectionEnd is preserved');
+          done();
+        }, 1);
       });
 
-      test('00000000012: removing the 2', function() {
-        input.value ='00000000012';
+      test('00000000012: removing the 2', function(done) {
+        Polymer.Base.async(function() {
+          input.value ='00000000012';
 
-        var caret = 11;
-        pretendToDeleteACharacter(input, '0000000001', caret);
-        assert.equal(input.value, '000-000-0001');
+          var caret = 11;
+          pretendToDeleteACharacter(input, '0000000001', caret);
+          assert.equal(input.value, '000-000-0001');
 
-        // The cursor goes back by the one character you deleted, but gains two dashes.
-        assert.equal(ironInput.selectionStart, caret + 1, 'selectionStart is preserved');
-        assert.equal(ironInput.selectionEnd, caret + 1, 'selectionEnd is preserved');
+          // The cursor goes back by the one character you deleted, but gains two dashes.
+          assert.equal(ironInput.selectionStart, caret + 1, 'selectionStart is preserved');
+          assert.equal(ironInput.selectionEnd, caret + 1, 'selectionEnd is preserved');
+          done();
+        }, 1);
       });
     });
 
diff --git a/test/index.html b/test/index.html
index 8878cc8..5def247 100644
--- a/test/index.html
+++ b/test/index.html
@@ -15,7 +15,7 @@
 <body>
   <script>
     WCT.loadSuites([
-      'basic.html',
+      'basic.html?wc-shadydom=true&wc-ce=true',
       'basic.html?dom=shadow'
     ]);
   </script>

From 78897d9b4763c1ebce8bc3a430022dbdfce7afbe Mon Sep 17 00:00:00 2001
From: Polymer Format Bot <format-bot@polymer-project.org>
Date: Thu, 6 Apr 2017 17:18:08 -0700
Subject: [PATCH 2/8] Update travis config

---
 .travis.yml | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index cb64e3a..1ec5a69 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,21 +3,25 @@ sudo: required
 before_script:
   - npm install -g bower polymer-cli@next
   - polymer install --variants
+  - sudo mv /usr/bin/google-chrome /usr/bin/google-chrome-old
+  - sudo mv /usr/bin/google-chrome-beta /usr/bin/google-chrome
 env:
   global:
-    - secure:
+    - secure: >-
         fviqObsjTcudSB+jLADACiHgRXQLw3s0myKUpVSbRnNlvcwzfXulFTpwV3vRftieBfj1vupwhJOTjFWtD9MYTRS6tcSSE6ShUNLOcyiZmb4kR9Ox3rQAvUfME9Yj2dh2txFYgMhhLEuGQkdM3BvxPTPmWEoKjGCSnqvga26Kddm4++GPE7+s14t5Iq0q+KWiqJ0rscaQrEwYKrBTPiv93abkPkajKN9nMZD1EfUYo03wDBMHGzF7RCV5cfZQUqhpK64DvTRpvtErZOvJX2dSz3GbhuYH1lDHMIHIEFMhGk/Ayu9lzEfnExbWYQydxW3yfmeGRmSnpmKcz3eTdlMCB9sX9k8IY8RCCjG4jS9iPpcDh/0aGHw+S7v0iyx9X7eq1hOz6n8ZouUVYGZEf7gt4EtWEsYVxSANQkvBhDhfJMCWdz/uv+AOV6SMjh9pwakifdDNGF/PifcFsfgbYaJyyEPH0faQs+0PQG+jciuUAd3W/5DO6Iilbc7rJJENaDNNucjx+eYwSNuW7vKj3XkyEMT8R1t7t041gXTgjElowI35kUkBTI7HZTI4RwTb/+rDqyncBk6x9BdYkq2EGM1zaqQzTD7PlrJ686IRRL2WmA1dOQYzlOv4muyPmnNKnRLYyMjF6niANrXXoZn7rTI6AcsieUUoyyonZ62Fg9mjcrs=
-    - secure:
+    - secure: >-
         jH5Cn/56zXgH14Y0+0X6YhqVqabe47VLWD5zPePIpRDust4SBDJ6mqalAIWfT3+RLZR5x5+dQIBO3V3BQ5KFOB5E+EEserzqNbqIEHx+crkhztg+lBmedMgGU8+gTa8D3Htd1kYNN+KMnsxShCQbWd+psIb6Uje9BhdMBVgoBAkitvTYDMI69qU14UgNYpE6qvf28K9WZBPxSWeRVa5OtS4I4QixYLRy9zcmIWWsesAqd+84Hj5hybIL9iZgo4UzddYd0GBwiaAXwIKnb7DpQDOsomuQaoKWI3HWZSlXEP+9cvWQ6UafaaeKifob5PtnPeVq2E4m8CVseuFN5h5mSnA3RX0EQUz+e6BJJeWPQ684MDrda3A3yfbG47jYrzQ8iQWY7nfUOKPR2sDdDAPBQh7kjnS8VtAvALCnlDi79y08UPSrsQXOYkJNYBSabmguGVOKNPrfFz3ct0Q9KWhCK5MEA7hArIvYW9K3YpGOYBdJmx8vr+BNGVb/45mBYh57Fgw0ij+Di37AvAR3BWJJIifBqfML8MBEUjqfr1Gkjli1rLuvgis4OFmmcIqM5ZvO8gG3gzOf1Ma/YjFraCESnoyjH30W4pF7uzeLcRjNb3clWyCQeYqptD4UgQfBH4oIyddhqwfDJOfV32zrm/woGFo0Z5vb0kD0F8uBKiodh/I=
-node_js: '6'
+node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
       - google-chrome
     packages:
-      - google-chrome-stable
+      - google-chrome-beta
 script:
   - xvfb-run polymer test
-  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s ''default''; fi'
+  - >-
+    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
+    fi
 dist: trusty

From b99107d5fe474b3461c83e3e3b36719c64ecf9e3 Mon Sep 17 00:00:00 2001
From: Becky Siegel <beckysiegel@google.com>
Date: Fri, 21 Apr 2017 06:54:10 -0700
Subject: [PATCH 3/8] 2.0-preview fixes

---
 .idea/gold-phone-input.iml |   9 ++
 .idea/misc.xml             |  42 ++++++++
 .idea/modules.xml          |   8 ++
 .idea/vcs.xml              |   6 ++
 .idea/workspace.xml        | 195 +++++++++++++++++++++++++++++++++++++
 .travis.yml                |   2 +-
 gold-phone-input.html      |  79 +++++++++++++--
 7 files changed, 330 insertions(+), 11 deletions(-)
 create mode 100644 .idea/gold-phone-input.iml
 create mode 100644 .idea/misc.xml
 create mode 100644 .idea/modules.xml
 create mode 100644 .idea/vcs.xml
 create mode 100644 .idea/workspace.xml

diff --git a/.idea/gold-phone-input.iml b/.idea/gold-phone-input.iml
new file mode 100644
index 0000000..d6ebd48
--- /dev/null
+++ b/.idea/gold-phone-input.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..b47f194
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ClientPropertiesManager">
+    <properties class="javax.swing.AbstractButton">
+      <property name="hideActionText" class="java.lang.Boolean" />
+    </properties>
+    <properties class="javax.swing.JComponent">
+      <property name="html.disable" class="java.lang.Boolean" />
+    </properties>
+    <properties class="javax.swing.JEditorPane">
+      <property name="JEditorPane.w3cLengthUnits" class="java.lang.Boolean" />
+      <property name="JEditorPane.honorDisplayProperties" class="java.lang.Boolean" />
+      <property name="charset" class="java.lang.String" />
+    </properties>
+    <properties class="javax.swing.JList">
+      <property name="List.isFileList" class="java.lang.Boolean" />
+    </properties>
+    <properties class="javax.swing.JPasswordField">
+      <property name="JPasswordField.cutCopyAllowed" class="java.lang.Boolean" />
+    </properties>
+    <properties class="javax.swing.JSlider">
+      <property name="Slider.paintThumbArrowShape" class="java.lang.Boolean" />
+      <property name="JSlider.isFilled" class="java.lang.Boolean" />
+    </properties>
+    <properties class="javax.swing.JTable">
+      <property name="Table.isFileList" class="java.lang.Boolean" />
+      <property name="JTable.autoStartsEdit" class="java.lang.Boolean" />
+      <property name="terminateEditOnFocusLost" class="java.lang.Boolean" />
+    </properties>
+    <properties class="javax.swing.JToolBar">
+      <property name="JToolBar.isRollover" class="java.lang.Boolean" />
+    </properties>
+    <properties class="javax.swing.JTree">
+      <property name="JTree.lineStyle" class="java.lang.String" />
+    </properties>
+    <properties class="javax.swing.text.JTextComponent">
+      <property name="caretAspectRatio" class="java.lang.Double" />
+      <property name="caretWidth" class="java.lang.Integer" />
+    </properties>
+  </component>
+  <component name="ProjectRootManager" version="2" default="true" />
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..47fa05d
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/gold-phone-input.iml" filepath="$PROJECT_DIR$/.idea/gold-phone-input.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..641a217
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,195 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="aa0a1fcc-379f-4c5c-9ea4-d69888ba2309" name="Default" comment="" />
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="TRACKING_ENABLED" value="true" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="CreatePatchCommitExecutor">
+    <option name="PATCH_PATH" value="" />
+  </component>
+  <component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
+  <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
+  <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
+  <component name="JsGulpfileManager">
+    <detection-done>true</detection-done>
+    <sorting>DEFINITION_ORDER</sorting>
+  </component>
+  <component name="ProjectFrameBounds">
+    <option name="x" value="10" />
+    <option name="y" value="43" />
+    <option name="width" value="1260" />
+    <option name="height" value="733" />
+  </component>
+  <component name="ProjectView">
+    <navigator currentView="ProjectPane" proportions="" version="1">
+      <flattenPackages />
+      <showMembers />
+      <showModules />
+      <showLibraryContents />
+      <hideEmptyPackages />
+      <abbreviatePackageNames />
+      <autoscrollToSource />
+      <autoscrollFromSource />
+      <sortByType />
+      <manualOrder />
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="Scope" />
+      <pane id="PackagesPane" />
+      <pane id="ProjectPane" />
+      <pane id="Scratches" />
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="aspect.path.notification.shown" value="true" />
+  </component>
+  <component name="RunManager">
+    <configuration default="true" type="#org.jetbrains.idea.devkit.run.PluginConfigurationType" factoryName="Plugin">
+      <module name="" />
+      <option name="VM_PARAMETERS" value="-Xmx512m -Xms256m -XX:MaxPermSize=250m -ea" />
+      <option name="PROGRAM_PARAMETERS" />
+      <predefined_log_file id="idea.log" enabled="true" />
+      <method />
+    </configuration>
+    <configuration default="true" type="Applet" factoryName="Applet">
+      <option name="HTML_USED" value="false" />
+      <option name="WIDTH" value="400" />
+      <option name="HEIGHT" value="300" />
+      <option name="POLICY_FILE" value="$APPLICATION_HOME_DIR$/bin/appletviewer.policy" />
+      <module />
+      <method />
+    </configuration>
+    <configuration default="true" type="Application" factoryName="Application">
+      <extension name="coverage" enabled="false" merge="false" sample_coverage="true" runner="idea" />
+      <option name="MAIN_CLASS_NAME" />
+      <option name="VM_PARAMETERS" />
+      <option name="PROGRAM_PARAMETERS" />
+      <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
+      <option name="ALTERNATIVE_JRE_PATH_ENABLED" value="false" />
+      <option name="ALTERNATIVE_JRE_PATH" />
+      <option name="ENABLE_SWING_INSPECTOR" value="false" />
+      <option name="ENV_VARIABLES" />
+      <option name="PASS_PARENT_ENVS" value="true" />
+      <module name="" />
+      <envs />
+      <method />
+    </configuration>
+    <configuration default="true" type="JUnit" factoryName="JUnit">
+      <extension name="coverage" enabled="false" merge="false" sample_coverage="true" runner="idea" />
+      <module name="" />
+      <option name="ALTERNATIVE_JRE_PATH_ENABLED" value="false" />
+      <option name="ALTERNATIVE_JRE_PATH" />
+      <option name="PACKAGE_NAME" />
+      <option name="MAIN_CLASS_NAME" />
+      <option name="METHOD_NAME" />
+      <option name="TEST_OBJECT" value="class" />
+      <option name="VM_PARAMETERS" value="-ea" />
+      <option name="PARAMETERS" />
+      <option name="WORKING_DIRECTORY" value="$MODULE_DIR$" />
+      <option name="ENV_VARIABLES" />
+      <option name="PASS_PARENT_ENVS" value="true" />
+      <option name="TEST_SEARCH_SCOPE">
+        <value defaultName="singleModule" />
+      </option>
+      <envs />
+      <patterns />
+      <method />
+    </configuration>
+    <configuration default="true" type="Remote" factoryName="Remote">
+      <option name="USE_SOCKET_TRANSPORT" value="true" />
+      <option name="SERVER_MODE" value="false" />
+      <option name="SHMEM_ADDRESS" value="javadebug" />
+      <option name="HOST" value="localhost" />
+      <option name="PORT" value="5005" />
+      <method />
+    </configuration>
+    <configuration default="true" type="TestNG" factoryName="TestNG">
+      <extension name="coverage" enabled="false" merge="false" sample_coverage="true" runner="idea" />
+      <module name="" />
+      <option name="ALTERNATIVE_JRE_PATH_ENABLED" value="false" />
+      <option name="ALTERNATIVE_JRE_PATH" />
+      <option name="SUITE_NAME" />
+      <option name="PACKAGE_NAME" />
+      <option name="MAIN_CLASS_NAME" />
+      <option name="METHOD_NAME" />
+      <option name="GROUP_NAME" />
+      <option name="TEST_OBJECT" value="CLASS" />
+      <option name="VM_PARAMETERS" value="-ea" />
+      <option name="PARAMETERS" />
+      <option name="WORKING_DIRECTORY" value="$MODULE_DIR$" />
+      <option name="OUTPUT_DIRECTORY" />
+      <option name="ANNOTATION_TYPE" />
+      <option name="ENV_VARIABLES" />
+      <option name="PASS_PARENT_ENVS" value="true" />
+      <option name="TEST_SEARCH_SCOPE">
+        <value defaultName="singleModule" />
+      </option>
+      <option name="USE_DEFAULT_REPORTERS" value="false" />
+      <option name="PROPERTIES_FILE" />
+      <envs />
+      <properties />
+      <listeners />
+      <method />
+    </configuration>
+  </component>
+  <component name="ShelveChangesManager" show_recycled="false">
+    <option name="remove_strategy" value="false" />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="aa0a1fcc-379f-4c5c-9ea4-d69888ba2309" name="Default" comment="" />
+      <created>1493193570149</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1493193570149</updated>
+    </task>
+    <servers />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="10" y="43" width="1260" height="733" extended-state="0" />
+    <editor active="false" />
+    <layout>
+      <window_info id="Palette" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
+      <window_info id="Nl-Palette" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Palette&#9;" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Image Layers" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Capture Analysis" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
+      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
+      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Properties" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Capture Tool" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Designer" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Project" active="true" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
+      <window_info id="Database" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
+      <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
+      <window_info id="UI Designer" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Theme Preview" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
+      <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
+      <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
+      <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
+      <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
+      <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
+      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
+      <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
+    </layout>
+  </component>
+  <component name="VcsContentAnnotationSettings">
+    <option name="myLimit" value="2678400000" />
+  </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager />
+    <watches-manager />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
index 1ec5a69..7eaa88c 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -24,4 +24,4 @@ script:
   - >-
     if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
     fi
-dist: trusty
+dist: trusty
\ No newline at end of file
diff --git a/gold-phone-input.html b/gold-phone-input.html
index 1d3cde0..e1de532 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -167,6 +167,7 @@
           autocomplete="tel"
           maxlength="[[maxlength]]"
           name="[[name]]"
+          prevent-invalid-input
           value="{{value}}"
           disabled="[[disabled]]"
           autofocus="[[autofocus]]"
@@ -175,6 +176,60 @@
           readonly="[[readonly]]"
           size="[[size]]">
     </iron-input>
+      <span id="template-placeholder"></span>
+
+      <template is="dom-if" if="[[errorMessage]]">
+        <paper-input-error slot="add-on" id="error">
+          [[errorMessage]]
+        </paper-input-error>
+      </template>
+
+    </paper-input-container>
+  </template>
+
+  <template id="v0">
+    <input is="iron-input" id="input" slot="input"
+          aria-labelledby$="[[_ariaLabelledBy]]"
+          aria-describedby$="[[_ariaDescribedBy]]"
+          required$="[[required]]"
+          bind-value="{{value}}"
+          name$="[[name]]"
+          allowed-pattern="[0-9\-]"
+          autocomplete="tel"
+          type="tel"
+          disabled$="[[disabled]]"
+          invalid="{{invalid}}"
+          autofocus$="[[autofocus]]"
+          inputmode$="[[inputmode]]"
+          placeholder$="[[placeholder]]"
+          readonly$="[[readonly]]"
+          maxlength$="[[maxlength]]"
+          size$="[[size]]">
+  </template>
+
+  <template id="v1">
+    <iron-input id="input" slot="input"
+        allowed-pattern="[0-9\-]"
+        bind-value$="{{value}}"
+        disabled$="[[disabled]]"
+        invalid$="{{invalid}}"
+        maxlength$="[[maxlength]]">
+      <input id="nativeInput"
+          aria-labelledby$="[[_ariaLabelledBy]]"
+          aria-describedby$="[[_ariaDescribedBy]]"
+          invalid$="{{invalid}}"
+          required$="[[required]]"
+          type="tel"
+          prevent-invalid-input
+          autocomplete$="tel"
+          maxlength$="[[maxlength]]"
+          name$="[[name]]"
+          autofocus$="[[autofocus]]"
+          inputmode$="[[inputmode]]"
+          placeholder$="[[placeholder]]"
+          readonly$="[[readonly]]"
+          size$="[[size]]">
+    </iron-input>
   </template>
 
   <script>
@@ -216,8 +271,7 @@
 
       value: {
         type: String,
-        observer: '_onValueChanged',
-        value: '',
+        observer: '_onValueChanged'
       },
 
       /**
@@ -235,12 +289,6 @@
       '_onFocusedChanged(focused)',
     ],
 
-    ready: function() {
-      // If there's an initial input, validate it.
-      if (this.value)
-        this._handleAutoValidate();
-    },
-
     // TODO: remove this when 2.0 adds beforeRegister back to legacy
     registered: function() {
       if (Polymer.Element) {
@@ -271,10 +319,21 @@
     listeners: {
       'iron-input-ready': '_onIronInputReady'
     },
+
+    ready: function() {
+      if (this.value && !Polymer.Element) {
+          this._handleAutoValidate();
+      }
+    },
+
     _onIronInputReady: function() {
       // Only validate when attached if the input already has a value.
       if (!!this.inputElement.bindValue) {
-        this.$.container._handleValueAndAutoValidate(this.inputElement);
+        this._handleAutoValidate();
+      // Assign an empty string value if no value so if it becomes time
+      // to validate it is not undefined.
+      } else {
+        this.value = '';
       }
     },
 
@@ -349,7 +408,7 @@
      */
     validate: function() {
       // Update the container and its addons (i.e. the custom error-message).
-      var valid = this.$.input.validate()
+      var valid = this.$.input.validate();
 
       this.$.container.invalid = !valid;
       this.$.container.updateAddons({

From 8eb1fc1936f56a37bef79a50ec3bf5ea17d3aaa0 Mon Sep 17 00:00:00 2001
From: Gurpreet Atwal <git@gatwal.com>
Date: Mon, 14 Aug 2017 18:42:05 -0700
Subject: [PATCH 4/8] update the dependencies to match range 1 - 2

---
 bower.json | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/bower.json b/bower.json
index 56f3aea..839db50 100644
--- a/bower.json
+++ b/bower.json
@@ -21,26 +21,26 @@
   "homepage": "https://github.com/PolymerElements/gold-phone-input",
   "ignore": [],
   "dependencies": {
-    "iron-input": "PolymerElements/iron-input#2.0-preview",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
-    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#2.0-preview",
-    "paper-input": "PolymerElements/paper-input#2.0-preview",
-    "paper-styles": "PolymerElements/paper-styles#2.0-preview",
-    "polymer": "Polymer/polymer#^2.0.0-rc.2"
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#1 - 2",
+    "iron-input": "PolymerElements/iron-input#1 - 2",
+    "paper-input": "PolymerElements/paper-input#1 - 2",
+    "paper-styles": "PolymerElements/paper-styles#1 - 2",
+    "polymer": "Polymer/polymer#1.9 - 2"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#2.0-preview",
+    "iron-component-page": "PolymerElements/iron-component-page#1 - 2",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#1 - 2",
     "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
-    "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
   },
   "variants": {
     "1.x": {
       "dependencies": {
-        "iron-input": "PolymerElements/iron-input#^1.0.0",
         "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
         "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
+        "iron-input": "PolymerElements/iron-input#^1.0.0",
         "paper-input": "PolymerElements/paper-input#^1.0.0",
         "paper-styles": "PolymerElements/paper-styles#^1.0.0",
         "polymer": "Polymer/polymer#^1.2.0"

From 4bc016668e227ebb21ebb19f69176c69e136c161 Mon Sep 17 00:00:00 2001
From: Gurpreet Atwal <git@gatwal.com>
Date: Mon, 14 Aug 2017 18:44:16 -0700
Subject: [PATCH 5/8] fix stylistic issues

---
 gold-phone-input.html | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/gold-phone-input.html b/gold-phone-input.html
index e1de532..bc6c79c 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -243,6 +243,7 @@
     ],
 
     properties: {
+
       /**
        * The label for this input.
        */
@@ -282,11 +283,11 @@
       internationalValue: {
         type: String,
         computed: '_computeInternationalValue(countryCode, value)'
-      },
+      }
     },
 
     observers: [
-      '_onFocusedChanged(focused)',
+      '_onFocusedChanged(focused)'
     ],
 
     // TODO: remove this when 2.0 adds beforeRegister back to legacy
@@ -296,15 +297,13 @@
       }
     },
     beforeRegister: function() {
-      this._beforeRegister();
-    },
-    _beforeRegister: function() {
       var template = Polymer.DomModule.import('gold-phone-input', 'template');
       var version = Polymer.Element ? 'v1' : 'v0';
       var inputTemplate = Polymer.DomModule.import('gold-phone-input', 'template#' + version);
       var inputPlaceholder = template.content.querySelector('#template-placeholder');
       inputPlaceholder.parentNode.replaceChild(inputTemplate.content, inputPlaceholder);
     },
+
     /**
     * Returns a reference to the focusable element. Overridden from PaperInputBehavior
     * to correctly focus the native input.

From cae0713ecca4ac3b363d7a4eb8b9b03e2207a564 Mon Sep 17 00:00:00 2001
From: Gurpreet Atwal <git@gatwal.com>
Date: Mon, 14 Aug 2017 19:09:10 -0700
Subject: [PATCH 6/8] clean up templates

---
 gold-phone-input.html | 100 ++++++++++--------------------------------
 1 file changed, 22 insertions(+), 78 deletions(-)

diff --git a/gold-phone-input.html b/gold-phone-input.html
index bc6c79c..417f334 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -135,101 +135,45 @@
 
   <template id="v0">
     <input is="iron-input" id="input" slot="input"
-          aria-labelledby$="[[_ariaLabelledBy]]"
-          aria-describedby$="[[_ariaDescribedBy]]"
-          required$="[[required]]"
-          bind-value="{{value}}"
-          name$="[[name]]"
-          allowed-pattern="[0-9\-]"
-          autocomplete="tel"
-          type="tel"
-          disabled$="[[disabled]]"
-          invalid="{{invalid}}"
-          autofocus$="[[autofocus]]"
-          inputmode$="[[inputmode]]"
-          placeholder$="[[placeholder]]"
-          readonly$="[[readonly]]"
-          maxlength$="[[maxlength]]"
-          size$="[[size]]">
+        aria-labelledby$="[[_ariaLabelledBy]]"
+        aria-describedby$="[[_ariaDescribedBy]]"
+        required$="[[required]]"
+        bind-value="{{value}}"
+        name$="[[name]]"
+        allowed-pattern="[0-9\-]"
+        autocomplete="tel"
+        type="tel"
+        prevent-invalid-input
+        disabled$="[[disabled]]"
+        invalid="{{invalid}}"
+        autofocus$="[[autofocus]]"
+        inputmode$="[[inputmode]]"
+        placeholder$="[[placeholder]]"
+        readonly$="[[readonly]]"
+        maxlength$="[[maxlength]]"
+        size$="[[size]]">
   </template>
+
   <template id="v1">
     <iron-input id="input" slot="input"
         bind-value$="{{value}}"
-        invalid$="{{invalid}}"
         allowed-pattern="[0-9\-]"
-        maxlength$="[[maxlength]]">
+        invalid$="{{invalid}}">
       <input id="nativeInput"
           aria-labelledby$="[[_ariaLabelledBy]]"
           aria-describedby$="[[_ariaDescribedBy]]"
-          invalid="{{invalid}}"
           required="[[required]]"
-          type="tel"
-          autocomplete="tel"
-          maxlength="[[maxlength]]"
           name="[[name]]"
-          prevent-invalid-input
-          value="{{value}}"
+          autocomplete="tel"
+          type="tel"
           disabled="[[disabled]]"
           autofocus="[[autofocus]]"
           inputmode="[[inputmode]]"
           placeholder="[[placeholder]]"
           readonly="[[readonly]]"
+          maxlength="[[maxlength]]"
           size="[[size]]">
     </iron-input>
-      <span id="template-placeholder"></span>
-
-      <template is="dom-if" if="[[errorMessage]]">
-        <paper-input-error slot="add-on" id="error">
-          [[errorMessage]]
-        </paper-input-error>
-      </template>
-
-    </paper-input-container>
-  </template>
-
-  <template id="v0">
-    <input is="iron-input" id="input" slot="input"
-          aria-labelledby$="[[_ariaLabelledBy]]"
-          aria-describedby$="[[_ariaDescribedBy]]"
-          required$="[[required]]"
-          bind-value="{{value}}"
-          name$="[[name]]"
-          allowed-pattern="[0-9\-]"
-          autocomplete="tel"
-          type="tel"
-          disabled$="[[disabled]]"
-          invalid="{{invalid}}"
-          autofocus$="[[autofocus]]"
-          inputmode$="[[inputmode]]"
-          placeholder$="[[placeholder]]"
-          readonly$="[[readonly]]"
-          maxlength$="[[maxlength]]"
-          size$="[[size]]">
-  </template>
-
-  <template id="v1">
-    <iron-input id="input" slot="input"
-        allowed-pattern="[0-9\-]"
-        bind-value$="{{value}}"
-        disabled$="[[disabled]]"
-        invalid$="{{invalid}}"
-        maxlength$="[[maxlength]]">
-      <input id="nativeInput"
-          aria-labelledby$="[[_ariaLabelledBy]]"
-          aria-describedby$="[[_ariaDescribedBy]]"
-          invalid$="{{invalid}}"
-          required$="[[required]]"
-          type="tel"
-          prevent-invalid-input
-          autocomplete$="tel"
-          maxlength$="[[maxlength]]"
-          name$="[[name]]"
-          autofocus$="[[autofocus]]"
-          inputmode$="[[inputmode]]"
-          placeholder$="[[placeholder]]"
-          readonly$="[[readonly]]"
-          size$="[[size]]">
-    </iron-input>
   </template>
 
   <script>

From e8b3433baf46cfbc3bfcd4c126ccc9ac7fd005a6 Mon Sep 17 00:00:00 2001
From: Gurpreet Atwal <git@gatwal.com>
Date: Mon, 14 Aug 2017 19:12:19 -0700
Subject: [PATCH 7/8] add guard around inputPlaceholder, fix comment

---
 gold-phone-input.html | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/gold-phone-input.html b/gold-phone-input.html
index 417f334..31609c6 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -234,18 +234,14 @@
       '_onFocusedChanged(focused)'
     ],
 
-    // TODO: remove this when 2.0 adds beforeRegister back to legacy
-    registered: function() {
-      if (Polymer.Element) {
-        this._beforeRegister();
-      }
-    },
     beforeRegister: function() {
       var template = Polymer.DomModule.import('gold-phone-input', 'template');
       var version = Polymer.Element ? 'v1' : 'v0';
       var inputTemplate = Polymer.DomModule.import('gold-phone-input', 'template#' + version);
       var inputPlaceholder = template.content.querySelector('#template-placeholder');
-      inputPlaceholder.parentNode.replaceChild(inputTemplate.content, inputPlaceholder);
+      if (inputPlaceholder) {
+        inputPlaceholder.parentNode.replaceChild(inputTemplate.content, inputPlaceholder);
+      }
     },
 
     /**
@@ -256,8 +252,8 @@
       return Polymer.Element ? this.inputElement._inputElement : this.inputElement;
     },
 
-    // Note: This event is only available in the 1.0 version of this element.
-    // In 2.0, the functionality of `_onIronInputReady` is done in
+    // Note: This event is only available in the 2.0 version of this element.
+    // In 1.0, the functionality of `_onIronInputReady` is done in
     // PaperInputBehavior::attached.
     listeners: {
       'iron-input-ready': '_onIronInputReady'

From e06a65f3956db239dfaa9a7ba10cde85366ce3a8 Mon Sep 17 00:00:00 2001
From: Gurpreet Atwal <git@gatwal.com>
Date: Mon, 14 Aug 2017 19:13:43 -0700
Subject: [PATCH 8/8] fix readme

---
 README.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 31cc154..9231b05 100644
--- a/README.md
+++ b/README.md
@@ -13,11 +13,9 @@ thing! https://github.com/PolymerLabs/tedium/issues
 -->
 
 [![Build status](https://travis-ci.org/PolymerElements/gold-phone-input.svg?branch=master)](https://travis-ci.org/PolymerElements/gold-phone-input)
+[![Demo and API Docs](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/gold-phone-input)
 
-_[Demo and API docs](https://elements.polymer-project.org/elements/gold-phone-input)_
-
-
-##&lt;gold-phone-input&gt;
+## &lt;gold-phone-input&gt;
 
 `<gold-phone-input>` is a single-line text field with Material Design styling
 for entering a phone number.