Remaining work for v1.2 release

bower.json

@@ -33,5 +33,8 @@
     "paper-input": "PolymerElements/paper-input#^2.0.0",
     "iron-input": "PolymerElements/iron-input#^2.0.0",
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0"
+  },
+  "resolutions": {
+    "webcomponentsjs": "^0.7.24"
   }
 }

demo/index.html

@@ -39,6 +39,25 @@
       z-index: 1;
       margin: 0 4px 0 0;
     }
+    #input > input {
+        position: relative; /* to make a stacking context */
+        outline: none;
+        box-shadow: none;
+        margin: 0;
+        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;
+      }
   </style>
 
 </head>
@@ -109,16 +128,14 @@ <h3>Example chip input field using paper-input-container</h3>
     <template>
       <template is="dom-bind" id="chipInputDemo">
         <paper-input-container id="tags">
-          <label slot="label">Tags</label>
-          <!-- a hidden iron-input holds the bind-value value for paper-input-container -->
-          <iron-input><input is="iron-input" type="hidden" bind-value="{{tagsString}}" slot="input"></iron-input>
+          <label for="input" slot="label">Tags</label>
           <div class="tags-input layout horizontal wrap" slot="input">
             <template is="dom-repeat" items="{{tags}}">
               <paper-chip removable single-line>
                 <span slot="label">{{item}}</span>
               </paper-chip>
             </template>
-            <input id="tagInput" type="text" class="flex">
+            <iron-input bind-value="{{value}}" class="flex" id="input" slot="input"><input id="tagInput" /></iron-input>
           </div>
         </paper-input-container>
       </template>

paper-chip.html

@@ -44,6 +44,31 @@
       <div slot="label">[email protected]</div>
     </paper-chip>
 
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-chip` | Mixin applied to the host | {}
+`--paper-chip-label` | Mixin applied to the slotted label | {}
+`--paper-chip-caption` | Mixin applied to the slotted caption | {}
+`--paper-chip-removebtn` | Mixin applied to the remove button | {}
+`--paper-chip-removebtn-icon` | Mixin applied to the icon for the remove button | {}
+`--paper-chip-content` | Mixin applied to the content | {}
+`--paper-chip-label-opened` | Mixin applied to the label while open | {}
+`--paper-chip-background-color` | The background color applied to the chip | `--paper-grey-200`
+`--paper-chip-secondary-text-color` | The default text color applied to the chip, caption, and label | `--secondary-text-color`
+`--paper-chip-icon-background-color` | The background color applied to the slotted icon | `--paper-grey-500`
+`--paper-chip-icon-text-color` | The default text color applied to the slotted icon | `--text-primary-color`
+`--paper-chip-removebtn-background-color` | The background color applied to the remove button | `--paper-grey-400`
+`--paper-chip-removebtn-icon-color` | The color applied to the remove buttons icon | `--text-primary-color`
+`--paper-chip-pressed-background-color` | The main background color while pressed | `--paper-grey-300`
+`--paper-chip-opened-background-color` | The main background color while opened | `--paper-grey-50`
+`--paper-chip-primary-text-color` | The text color applied to the slotted label | `--primary-text-color`
+`--paper-chip-active-color` | The background color applied to slots and the remove button while active | `--accent-color`
+`--paper-chip-active-text-color` | The text color applied to slots and the remove button while active | `--text-primary-color`
+`--paper-chip-active-secondary-text-color` | The text color applied to slotted h2 elements within the label while active | `--text-primary-color`
+`--paper-chip-hover-background-color` | Background color used when hovering a removable chip | `--paper-grey-600`
+`--paper-chip-hover-text-color` | Text color used when hovering a removable chip | #FFF
 
 @element paper-chip
 @blurb A basic "chip" element representing an icon/image and a short piece of text.
@@ -221,7 +246,7 @@
         border-radius: 0;
       }
       :host([opened]) #icon ::slotted([slot=icon]),
-      :host([opened]) #icon ::slotted(iron-icon.icon svg) { /* FIXME: only top-level selectors allowed)
+      :host([opened]) #icon ::slotted(iron-icon.icon svg) { /* FIXME: only top-level selectors allowed) */
         font-size: 20px;
         width: 40px;
         height: 40px;
@@ -254,6 +279,17 @@
       :host([opened][active]) #chip #label ::slotted(h2) {
         color: var(--paper-chip-active-secondary-text-color, --text-primary-color);
       }
+
+      :host(:not([opened])[removable]:hover) #main,
+      :host(:not([opened])[removable]:hover) #label ::slotted([slot="label"]),
+      :host(:not([opened])[removable]:hover) #label ::slotted([slot="caption"]) {
+        background-color: var(--paper-chip-hover-background-color, --paper-grey-600);
+        color: var(--paper-chip-hover-text-color, #FFF);
+      }
+      :host(:not([opened])[removable]:hover) #removeBtn {
+        background-color: var(--paper-chip-hover-text-color, #FFF);
+        color: var(--paper-chip-hover-background-color, --paper-grey-600);
+      }
     </style>
     <paper-material id="shadow" elevation="{{_elevation}}" animated$="{{animated}}">
       <div id="main">