update elements and fix some bugs

lib/src/iron-autogrow-textarea/iron-autogrow-textarea.html

 <!--
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../iron-behaviors/iron-control-state.html">
 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
 
 <!--
 `iron-autogrow-textarea` is an element containing a textarea that grows in height as more
 lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will
 never scroll.
 
 Example:
 
     <iron-autogrow-textarea></iron-autogrow-textarea>
 
 Because the `textarea`'s `value` property is not observable, you should use
 this element's `bind-value` instead for imperative updates.
 
+### Styling
+The following custom properties and mixins are available for styling:
+Custom property | Description | Default
+----------------|-------------|----------
+`--iron-autogrow-textarea` | Mixin applied to the textarea | `{}`
+
 @group Iron Elements
 @hero hero.svg
 @demo demo/index.html
 -->
 
 <dom-module id="iron-autogrow-textarea">
 
   <style>
     :host {
       display: inline-block;
@@ skipping 16 matching lines @@
       border: none;
       resize: none;
       background: inherit;
       color: inherit;
       /* see comments in template */
       width: 100%;
       height: 100%;
       font-size: inherit;
       font-family: inherit;
       line-height: inherit;
+      @apply(--iron-autogrow-textarea);
     }
 
     ::content textarea:invalid {
       box-shadow: none;
     }
 
   </style>
   <template>
     <!-- the mirror sizes the input/textarea so it grows with typing -->
     <div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
 
     <!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
     <div class="textarea-container fit">
       <textarea id="textarea"
         autocomplete$="[[autocomplete]]"
         autofocus$="[[autofocus]]"
         inputmode$="[[inputmode]]"
         placeholder$="[[placeholder]]"
         readonly$="[[readonly]]"
         required$="[[required]]"
+        disabled$="[[disabled]]"
         rows$="[[rows]]"
         maxlength$="[[maxlength]]"></textarea>
     </div>
   </template>
 </dom-module>
 
 <script>
 
   Polymer({
 
@@ skipping 176 matching lines @@
       this.fire('iron-input-validate');
       return valid;
     },
 
     _bindValueChanged: function() {
       var textarea = this.textarea;
       if (!textarea) {
         return;
       }
 
-      textarea.value = this.bindValue;
+      // If the bindValue changed manually, then we need to also update
+      // the underlying textarea's value. Otherwise this change was probably
+      // generated from the _onInput handler, and the two values are already
+      // the same.
+      if (textarea.value !== this.bindValue) {
+        textarea.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindValue;
+      }
+
       this.$.mirror.innerHTML = this._valueForMirror();
       // manually notify because we don't want to notify until after setting value
       this.fire('bind-value-changed', {value: this.bindValue});
     },
 
     _onInput: function(event) {
       this.bindValue = event.path ? event.path[0].value : event.target.value;
     },
 
     _constrain: function(tokens) {
@@ skipping 22 matching lines @@
 
     _updateCached: function() {
       this.$.mirror.innerHTML = this._constrain(this.tokens);
     },
 
     _computeValue: function() {
       return this.bindValue;
     }
   });
 </script>