From b9cf11034348f1d4801c2399a7d0f6de45cba356 Mon Sep 17 00:00:00 2001
From: Sami Suo-Heikki <suoheikki.sami@gmail.com>
Date: Sat, 16 Jun 2018 12:51:46 +0300
Subject: [PATCH 1/2] Add basic combo-box demo

---
 demo/combo-box-basic-demos.html | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/demo/combo-box-basic-demos.html b/demo/combo-box-basic-demos.html
index d4efa74ea..8b95f99f1 100644
--- a/demo/combo-box-basic-demos.html
+++ b/demo/combo-box-basic-demos.html
@@ -6,19 +6,32 @@
       }
     </style>
 
+    <h3>Combo Box</h3>
+
+    <vaadin-demo-snippet id="combo-box-basic-combo-box">
+      <template preserve-content>
+        <vaadin-combo-box id="demo1" label="Element"></vaadin-combo-box>
+        <script>
+          window.addDemoReadyListener('#combo-box-basic-combo-box', function(document) {
+            document.querySelector('#demo1').items = ['Hydrogen', 'Helium', 'Lithium'];
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
 
     <h3>Configuring the Combo Box</h3>
 
     <vaadin-demo-snippet id="combo-box-basic-demos-configuring-the-combo-box">
       <template preserve-content>
-        <vaadin-combo-box id="demo1-1" label="Element"></vaadin-combo-box>
-        <vaadin-combo-box id="demo1-2" label="Disabled" disabled></vaadin-combo-box>
-        <vaadin-combo-box id="demo1-3" label="Read-only" value="Carbon" readonly></vaadin-combo-box>
+        <vaadin-combo-box id="demo2-1" label="Element"></vaadin-combo-box>
+        <vaadin-combo-box id="demo2-2" label="Disabled" disabled></vaadin-combo-box>
+        <vaadin-combo-box id="demo2-3" label="Read-only" value="Carbon" readonly></vaadin-combo-box>
         <script>
           window.addDemoReadyListener('#combo-box-basic-demos-configuring-the-combo-box', function(document) {
-            var combobox1 = document.querySelector('#demo1-1');
-            var combobox2 = document.querySelector('#demo1-2');
-            var combobox3 = document.querySelector('#demo1-3');
+            var combobox1 = document.querySelector('#demo2-1');
+            var combobox2 = document.querySelector('#demo2-2');
+            var combobox3 = document.querySelector('#demo2-3');
             combobox1.items = combobox2.items = combobox3.items = elements;
             combobox1.value = combobox2.value = combobox3.value = 'Carbon';
           });
@@ -30,12 +43,12 @@ <h3>Configuring the Combo Box</h3>
     <h3>Selecting a Value</h3>
     <vaadin-demo-snippet id="combo-box-basic-demos-selecting-a-value">
       <template preserve-content>
-        <vaadin-combo-box id="demo2" label="Element"></vaadin-combo-box>
+        <vaadin-combo-box id="demo3" label="Element"></vaadin-combo-box>
         <p>Selected value: <span id="selected-value"></span>.</p>
 
         <script>
           window.addDemoReadyListener('#combo-box-basic-demos-selecting-a-value', function(document) {
-            var combobox = document.querySelector('#demo2');
+            var combobox = document.querySelector('#demo3');
             combobox.items = elements;
 
             combobox.addEventListener('value-changed', function() {
@@ -110,12 +123,12 @@ <h3>Allow Custom Values</h3>
     <p>Allow the user to set any value for the field in addition to selecting a value from the dropdown menu.</p>
     <vaadin-demo-snippet id="combo-box-basic-demos-allow-custom-values">
       <template preserve-content>
-        <vaadin-combo-box id="demo1" label="Element" allow-custom-value></vaadin-combo-box>
+        <vaadin-combo-box id="demo6" label="Element" allow-custom-value></vaadin-combo-box>
         <p>Selected value: <span id="selected-value2"></span></p>
 
         <script>
           window.addDemoReadyListener('#combo-box-basic-demos-allow-custom-values', function(document) {
-            var combobox = document.querySelector('#demo1');
+            var combobox = document.querySelector('#demo6');
             combobox.items = elements;
 
             combobox.addEventListener('value-changed', function() {

From d2a0b1f7501401e1a29098ce54ebf67d97803007 Mon Sep 17 00:00:00 2001
From: Sami Suo-Heikki <suoheikki.sami@gmail.com>
Date: Sat, 16 Jun 2018 18:50:51 +0300
Subject: [PATCH 2/2] Re-organize demo structure

---
 demo/combo-box-advanced-demos.html      |  87 --------------
 demo/combo-box-basic-demos.html         |  83 +------------
 demo/combo-box-filtering-demos.html     |  30 ++---
 demo/combo-box-item-template-demos.html | 153 ------------------------
 demo/combo-box-objects-demos.html       | 115 ------------------
 demo/combo-box-styling-demos.html       | 117 ++++++++++++++++++
 demo/combo-box-validation-demos.html    |  49 ++++++++
 demo/demos.json                         |  31 ++---
 8 files changed, 194 insertions(+), 471 deletions(-)
 delete mode 100644 demo/combo-box-advanced-demos.html
 delete mode 100644 demo/combo-box-item-template-demos.html
 delete mode 100644 demo/combo-box-objects-demos.html
 create mode 100644 demo/combo-box-styling-demos.html
 create mode 100644 demo/combo-box-validation-demos.html

diff --git a/demo/combo-box-advanced-demos.html b/demo/combo-box-advanced-demos.html
deleted file mode 100644
index 6e7fde29c..000000000
--- a/demo/combo-box-advanced-demos.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<dom-module id="combo-box-advanced-demos">
-  <template>
-    <style include="vaadin-component-demo-shared-styles">
-      :host {
-        display: block;
-      }
-    </style>
-
-
-    <h3>Configuring Icons</h3>
-    <vaadin-demo-snippet id="combo-box-advanced-demos-configuring-icons">
-      <template preserve-content>
-        <style>
-          paper-icon-button {
-            opacity: 0.4;
-            width: 24px;
-            height: 24px;
-            padding: 2px;
-          }
-        </style>
-        <vaadin-combo-box-light id="demo2">
-          <vaadin-text-field label="Custom Icons">
-            <paper-icon-button slot="suffix" icon="remove-circle" class="clear-button"></paper-icon-button>
-            <paper-icon-button slot="suffix" icon="search" class="toggle-button"></paper-icon-button>
-          </vaadin-text-field>
-        </vaadin-combo-box-light>
-        <script>
-          window.addDemoReadyListener('#combo-box-advanced-demos-configuring-icons', function(document) {
-            var combobox = document.querySelector('#demo2');
-            // Array of String values.
-            combobox.items = elements;
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-    <h3>Replacing the Input with an &lt;iron-input></h3>
-    <vaadin-demo-snippet id="combo-box-advanced-demos-replacing-the-input-with-an-iron-input">
-      <template preserve-content>
-        <vaadin-combo-box-light id="demo3" attr-for-value="bind-value">
-          <iron-input>
-            <input>
-          </iron-input>
-        </vaadin-combo-box-light>
-        <script>
-          window.addDemoReadyListener('#combo-box-advanced-demos-replacing-the-input-with-an-iron-input', function(document) {
-            var combobox = document.querySelector('#demo3');
-            // Array of String values.
-            combobox.items = elements;
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-    <h3>Replacing the Input with a &lt;paper-input></h3>
-    <vaadin-demo-snippet id="combo-box-advanced-demos-replacing-the-input-with-a-paper-input">
-      <template preserve-content>
-        <vaadin-combo-box-light id="demo4">
-          <paper-input label="Elements" class="input">
-            <iron-icon icon="toll" slot="prefix"></iron-icon>
-            <paper-button slot="suffix" class="clear-button">Clear</paper-button>
-            <paper-button slot="suffix" class="toggle-button">Toggle</paper-button>
-          </paper-input>
-        </vaadin-combo-box-light>
-        <script>
-          window.addDemoReadyListener('#combo-box-advanced-demos-replacing-the-input-with-a-paper-input', function(document) {
-            var combobox = document.querySelector('#demo4');
-            // Array of String values.
-            combobox.items = elements;
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-  </template>
-  <script>
-    class ComboBoxAdvancedDemos extends DemoReadyEventEmitter(ComboBoxDemo(Polymer.Element)) {
-      static get is() {
-        return 'combo-box-advanced-demos';
-      }
-    }
-    customElements.define(ComboBoxAdvancedDemos.is, ComboBoxAdvancedDemos);
-  </script>
-</dom-module>
diff --git a/demo/combo-box-basic-demos.html b/demo/combo-box-basic-demos.html
index 8b95f99f1..9c271823f 100644
--- a/demo/combo-box-basic-demos.html
+++ b/demo/combo-box-basic-demos.html
@@ -40,95 +40,16 @@ <h3>Configuring the Combo Box</h3>
     </vaadin-demo-snippet>
 
 
-    <h3>Selecting a Value</h3>
-    <vaadin-demo-snippet id="combo-box-basic-demos-selecting-a-value">
-      <template preserve-content>
-        <vaadin-combo-box id="demo3" label="Element"></vaadin-combo-box>
-        <p>Selected value: <span id="selected-value"></span>.</p>
-
-        <script>
-          window.addDemoReadyListener('#combo-box-basic-demos-selecting-a-value', function(document) {
-            var combobox = document.querySelector('#demo3');
-            combobox.items = elements;
-
-            combobox.addEventListener('value-changed', function() {
-              document.querySelector('#selected-value').innerHTML = combobox.value;
-            });
-            combobox.value = 'Carbon';
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-    <h3>Using as a Form Field</h3>
-    <vaadin-demo-snippet id="combo-box-basic-demos-using-as-a-form-field">
-      <template preserve-content>
-        <iron-form>
-          <form method="post">
-            <vaadin-combo-box name="name" required error-message="This field is required"></vaadin-combo-box>
-            <vaadin-button>Submit</vaadin-button>
-          </form>
-        </iron-form>
-
-        <script>
-          window.addDemoReadyListener('#combo-box-basic-demos-using-as-a-form-field', function(document) {
-            var form = document.querySelector('iron-form');
-            var combobox = form.querySelector('vaadin-combo-box');
-            combobox.items = elements;
-
-            form.addEventListener('iron-form-submit', function() {
-              alert('Form submitted with name: ' + form.serializeForm().name);
-              return false;
-            });
-
-            var button = document.querySelector('vaadin-button');
-            button.addEventListener('click', function() {
-              form.submit();
-            });
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-    <h3>Change Event</h3>
-    <vaadin-demo-snippet id="combo-box-basic-demos-change-event">
-      <template preserve-content>
-        <vaadin-combo-box id="changeEventDemo"></vaadin-combo-box>
-        <vaadin-button id="setRandomValue">Set random value</vaadin-button>
-        <script>
-          window.addDemoReadyListener('#combo-box-basic-demos-change-event', function(document) {
-            var combobox = document.querySelector('#changeEventDemo');
-            combobox.items = elements;
-
-            combobox.addEventListener('change', function(e) {
-              if (combobox.value) {
-                alert('User selected value ' + combobox.value);
-              } else {
-                alert('User has cleared the value');
-              }
-            });
-
-            document.querySelector('#setRandomValue').addEventListener('click', function() {
-              combobox.value = combobox.items[Math.floor(Math.random() * combobox.items.length)];
-            });
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
     <h3>Allow Custom Values</h3>
     <p>Allow the user to set any value for the field in addition to selecting a value from the dropdown menu.</p>
     <vaadin-demo-snippet id="combo-box-basic-demos-allow-custom-values">
       <template preserve-content>
-        <vaadin-combo-box id="demo6" label="Element" allow-custom-value></vaadin-combo-box>
+        <vaadin-combo-box id="demo2" label="Element" allow-custom-value></vaadin-combo-box>
         <p>Selected value: <span id="selected-value2"></span></p>
 
         <script>
           window.addDemoReadyListener('#combo-box-basic-demos-allow-custom-values', function(document) {
-            var combobox = document.querySelector('#demo6');
+            var combobox = document.querySelector('#demo2');
             combobox.items = elements;
 
             combobox.addEventListener('value-changed', function() {
diff --git a/demo/combo-box-filtering-demos.html b/demo/combo-box-filtering-demos.html
index 665b6dacd..cca385835 100644
--- a/demo/combo-box-filtering-demos.html
+++ b/demo/combo-box-filtering-demos.html
@@ -7,7 +7,7 @@
     </style>
 
 
-    <h3>Remote Data Source</h3>
+    <h3>Filtering with a Remote Data Source</h3>
     <vaadin-demo-snippet id="combo-box-filtering-demos-remote-data-source">
       <template preserve-content>
         <dom-bind>
@@ -23,7 +23,7 @@ <h3>Remote Data Source</h3>
 
 
     <h3>Custom Filtering</h3>
-
+    <p>Example uses case-sensitive starts-with filtering</p>
     <vaadin-demo-snippet id="combo-box-filtering-demos-custom-filtering">
       <template preserve-content>
         <custom-filter></custom-filter>
@@ -34,20 +34,22 @@ <h3>Custom Filtering</h3>
           </template>
           <script>
             window.addDemoReadyListener('#combo-box-filtering-demos-custom-filtering', function(document) {
-              Polymer({
-                is: 'custom-filter',
+              if (!customElements.get('custom-filter')) {
+                Polymer({
+                  is: 'custom-filter',
 
-                properties: {
-                  items: Array,
-                },
+                  properties: {
+                    items: Array,
+                  },
 
-                _filterChanged: function(e) {
-                  // case-sensitive starts-with filtering
-                  this.items = elements.filter(function(el) {
-                    return el.indexOf(e.detail.value) === 0;
-                  });
-                }
-              });
+                  _filterChanged: function(e) {
+                    // case-sensitive starts-with filtering
+                    this.items = elements.filter(function(el) {
+                      return el.indexOf(e.detail.value) === 0;
+                    });
+                  }
+                });
+              }
             });
           </script>
         </dom-module>
diff --git a/demo/combo-box-item-template-demos.html b/demo/combo-box-item-template-demos.html
deleted file mode 100644
index f12b998e5..000000000
--- a/demo/combo-box-item-template-demos.html
+++ /dev/null
@@ -1,153 +0,0 @@
-<dom-module id="combo-box-item-template-demos">
-  <template>
-    <style include="vaadin-component-demo-shared-styles">
-      :host {
-        display: block;
-      }
-    </style>
-
-
-    <h3>Custom Item Template</h3>
-
-    <vaadin-demo-snippet id="combo-box-item-template-demos-custom-item-template">
-      <template preserve-content>
-        <vaadin-combo-box id="elements-template-box" label="Element" item-label-path="name" item-value-path="symbol" style="width: 240px;">
-          <template>
-            <b>[[item.name]], <sub>[[item.number]]</sub>[[item.symbol]]</b><br>
-            array index: [[index]]
-          </template>
-        </vaadin-combo-box>
-
-        <script>
-          window.addDemoReadyListener('#combo-box-item-template-demos-custom-item-template', function(document) {
-            var elementsTemplateBox = document.querySelector('#elements-template-box');
-            // elementsJson is an Array of Objects. Item object format:
-            //   {name: 'Hydrogen', symbol: 'H', number: 1}
-            elementsTemplateBox.items = elementsJson;
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-    <h3>Focused and Selected Flags</h3>
-
-    <vaadin-demo-snippet id="combo-box-item-template-demos-focused-and-selected-flags">
-      <template preserve-content>
-        <vaadin-combo-box id="elements-selected-box" label="Element" value="Carbon" style="display: block; max-width: 320px;">
-          <template>
-            <b>[[item]]</b><br>
-            selected: [[selected]], focused: [[focused]]
-          </template>
-        </vaadin-combo-box>
-
-        <script>
-          window.addDemoReadyListener('#combo-box-item-template-demos-focused-and-selected-flags', function(document) {
-            var elementsSelectedBox = document.querySelector('#elements-selected-box');
-            elementsSelectedBox.items = elements;
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-    <h3>Styling Items with Custom Item Element</h3>
-
-    <vaadin-demo-snippet id="combo-box-item-template-demos-styling-items-with-custom-item-element">
-      <template preserve-content>
-        <!-- Step 1: Define a custom element with your template and item styles -->
-
-        <dom-module id="my-item">
-          <template preserve-content>
-            <style>
-              :host {
-                display: flex;
-              }
-
-              :host([selected]) {
-                color: var(--accent-color, deeppink);
-              }
-
-              span {
-                flex: 1 0 90px;
-                padding: 0 8px;
-              }
-
-              #symbol {
-                flex: 0 0 4em;
-                font-weight: bold;
-              }
-
-              #index {
-                text-align: right;
-              }
-            </style>
-
-            <span id="symbol">
-              <sub>[[item.number]]</sub>[[item.symbol]]
-            </span>
-            <span>[[item.name]]</span>
-            <span id="index">[[index]]</span>
-          </template>
-
-          <script>
-            Polymer({
-              is: 'my-item',
-              properties: {index: Number, item: Object}
-            });
-          </script>
-        </dom-module>
-
-        <!-- Step 2: Use your custom element in the item template of <vaadin-combo-box> -->
-
-        <vaadin-combo-box id="elements-my-item-box" label="Element" item-label-path="name" item-value-path="symbol" style="width: 240px;">
-          <template>
-            <my-item index="[[index]]" item="[[item]]" selected$="[[selected]]"></my-item>
-          </template>
-        </vaadin-combo-box>
-
-        <script>
-          window.addDemoReadyListener('#combo-box-item-template-demos-styling-items-with-custom-item-element', function(document) {
-            var elementsMyItemBox = document.querySelector('#elements-my-item-box');
-            elementsMyItemBox.items = elementsJson;
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-    <h3>Item Template with Paper Item Elements</h3>
-
-    <vaadin-demo-snippet id="combo-box-item-template-demos-item-template-with-paper-item-elements">
-      <template preserve-content>
-        <vaadin-combo-box id="elements-paper-item" item-value-path="email" item-label-path="email" style="display: block; max-width: 400px;">
-          <template>
-            <paper-icon-item>
-              <img src="[[item.picture.thumbnail]]" style="border-radius: 50%; width: 48px; height: 48px;" slot="item-icon">
-              <paper-item-body two-line style="min-height: 0">
-                <div style="text-transform: capitalize">[[item.name.first]] [[item.name.last]]</div>
-                <div secondary>[[item.email]]</div>
-              </paper-item-body>
-            </paper-icon-item>
-          </template>
-        </vaadin-combo-box>
-
-        <script>
-          window.addDemoReadyListener('#combo-box-item-template-demos-item-template-with-paper-item-elements', function(document) {
-            document.querySelector('#elements-paper-item').items = users;
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-  </template>
-  <script>
-    class ComboBoxItemTemplateDemos extends DemoReadyEventEmitter(ComboBoxDemo(Polymer.Element)) {
-      static get is() {
-        return 'combo-box-item-template-demos';
-      }
-    }
-    customElements.define(ComboBoxItemTemplateDemos.is, ComboBoxItemTemplateDemos);
-  </script>
-</dom-module>
diff --git a/demo/combo-box-objects-demos.html b/demo/combo-box-objects-demos.html
deleted file mode 100644
index c21c6351a..000000000
--- a/demo/combo-box-objects-demos.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<dom-module id="combo-box-objects-demos">
-  <template>
-    <style include="vaadin-component-demo-shared-styles">
-      :host {
-        display: block;
-      }
-    </style>
-
-
-    <h3>Default Label and Value</h3>
-
-    <vaadin-demo-snippet id="combo-box-objects-demos-default-label-and-value">
-      <template preserve-content>
-        <vaadin-combo-box id="numbers-box" label="Number"></vaadin-combo-box>
-        <p>Selected item: <span id="selected-item"></span>.</p>
-        <p>Value: <span id="value"></span>.</p>
-
-        <script>
-          window.addDemoReadyListener('#combo-box-objects-demos-default-label-and-value', function(document) {
-            var combobox = document.querySelector('#numbers-box');
-            combobox.items = [
-              {label: 'One', value: 1},
-              {label: 'Two', value: 2},
-              {label: 'Three', value: 3}
-            ];
-
-            combobox.addEventListener('selected-item-changed', function() {
-              document.querySelector('#selected-item').innerHTML = JSON.stringify(combobox.selectedItem);
-            });
-
-            combobox.addEventListener('value-changed', function() {
-              document.querySelector('#value').innerHTML = combobox.value;
-            });
-
-            combobox.value = 1;
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-    <h3>Setting Label and Value Path</h3>
-
-    <vaadin-demo-snippet id="combo-box-objects-demos-setting-label-and-value-path">
-      <template preserve-content>
-        <vaadin-combo-box id="elements-box" label="Element" item-label-path="name" item-value-path="symbol"></vaadin-combo-box>
-        <p>Selected element name: <span id="element-name"></span>.</p>
-        <p>Value: <span id="element-value"></span>.</p>
-
-        <script>
-          window.addDemoReadyListener('#combo-box-objects-demos-setting-label-and-value-path', function(document) {
-            var combobox = document.querySelector('#elements-box');
-
-            // elementsJson is an Array of Objects. Item object format:
-            //   {name: 'Hydrogen', symbol: 'H', number: 1}
-            combobox.items = elementsJson;
-
-            combobox.addEventListener('selected-item-changed', function() {
-              document.querySelector('#element-name').innerHTML = combobox.selectedItem && combobox.selectedItem.name;
-            });
-
-            combobox.addEventListener('value-changed', function() {
-              document.querySelector('#element-value').innerHTML = combobox.value;
-            });
-
-            combobox.value = 'C';
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-    <h3>Object Items with the Same Value</h3>
-
-    <vaadin-demo-snippet id="combo-box-objects-demos-object-items-with-the-same-value">
-      <template preserve-content>
-        <vaadin-combo-box id="country-synonyms-box" label="Element"></vaadin-combo-box>
-        <p>Selected Item: <span id="country-selected-item"></span>.</p>
-        <p>Value: <span id="country-value"></span>.</p>
-
-        <script>
-          window.addDemoReadyListener('#combo-box-objects-demos-object-items-with-the-same-value', function(document) {
-            var countrySynonymsBox = document.querySelector('#country-synonyms-box');
-
-            countrySynonymsBox.items = [
-              {value: 'US', label: 'United States of America'},
-              {value: 'US', label: 'U.S.A.'}
-            ];
-
-            countrySynonymsBox.addEventListener('selected-item-changed', function() {
-              var selectedItemAsString = JSON.stringify(countrySynonymsBox.selectedItem);
-              document.querySelector('#country-selected-item').innerText = selectedItemAsString;
-            });
-
-            countrySynonymsBox.addEventListener('value-changed', function() {
-              document.querySelector('#country-value').innerText = countrySynonymsBox.value;
-            });
-
-            countrySynonymsBox.value = 'US'; // selects first matching item
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
-  </template>
-  <script>
-    class ComboBoxObjectsDemos extends DemoReadyEventEmitter(ComboBoxDemo(Polymer.Element)) {
-      static get is() {
-        return 'combo-box-objects-demos';
-      }
-    }
-    customElements.define(ComboBoxObjectsDemos.is, ComboBoxObjectsDemos);
-  </script>
-</dom-module>
diff --git a/demo/combo-box-styling-demos.html b/demo/combo-box-styling-demos.html
new file mode 100644
index 000000000..839332cb1
--- /dev/null
+++ b/demo/combo-box-styling-demos.html
@@ -0,0 +1,117 @@
+<dom-module id="combo-box-styling-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+
+
+    <h3>Customizing Item Template</h3>
+    <vaadin-demo-snippet id="combo-box-styling-demos-custom-item-template">
+      <template preserve-content>
+        <vaadin-combo-box id="elements-template-box" label="Element" item-label-path="name" item-value-path="symbol" style="width: 240px;">
+          <template>
+            <b>[[item.name]], <sub>[[item.number]]</sub>[[item.symbol]]</b><br>
+            array index: [[index]]
+          </template>
+        </vaadin-combo-box>
+        <script>
+          window.addDemoReadyListener('#combo-box-styling-demos-custom-item-template', function(document) {
+            var elementsTemplateBox = document.querySelector('#elements-template-box');
+            // elementsJson is an Array of Objects. Item object format:
+            //   {name: 'Hydrogen', symbol: 'H', number: 1}
+            elementsTemplateBox.items = elementsJson;
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
+
+    <h3>Configuring Icons</h3>
+    <vaadin-demo-snippet id="combo-box-styling-demos-configuring-icons">
+      <template preserve-content>
+        <style>
+          paper-icon-button {
+            opacity: 0.4;
+            width: 24px;
+            height: 24px;
+            padding: 2px;
+          }
+        </style>
+        <vaadin-combo-box-light id="demo2">
+          <vaadin-text-field label="Custom Icons">
+            <paper-icon-button slot="suffix" icon="remove-circle" class="clear-button"></paper-icon-button>
+            <paper-icon-button slot="suffix" icon="search" class="toggle-button"></paper-icon-button>
+          </vaadin-text-field>
+        </vaadin-combo-box-light>
+        <script>
+          window.addDemoReadyListener('#combo-box-styling-demos-configuring-icons', function(document) {
+            var combobox = document.querySelector('#demo2');
+            // Array of String values.
+            combobox.items = elements;
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Replacing the Input</h3>
+    <p>
+      If you are using other custom input fields like &lt;iron-input>, you
+      need to define the name of the bindable property with the `attrForValue` attribute.
+    </p>
+    <vaadin-demo-snippet id="combo-box-styling-demos-replacing-the-input-with-an-iron-input">
+      <template preserve-content>
+        <vaadin-combo-box-light id="demo3" attr-for-value="bind-value">
+          <iron-input>
+            <input>
+          </iron-input>
+        </vaadin-combo-box-light>
+        <script>
+          window.addDemoReadyListener('#combo-box-styling-demos-replacing-the-input-with-an-iron-input', function(document) {
+            var combobox = document.querySelector('#demo3');
+            // Array of String values.
+            combobox.items = elements;
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
+
+    <h3>Using Focused and Selected Flags</h3>
+    <vaadin-demo-snippet id="combo-box-styling-demos-focused-and-selected-flags">
+      <template preserve-content>
+        <vaadin-combo-box id="elements-selected-box" label="Element" value="Carbon">
+          <template>
+            <style>
+              span[focused] {
+                color: var(--lumo-primary-color);
+              }
+
+              span[selected] {
+                font-weight: bold;
+              }
+            </style>
+            <span selected$="[[selected]]" focused$="[[focused]]">[[item]]</span>
+          </template>
+        </vaadin-combo-box>
+
+        <script>
+          window.addDemoReadyListener('#combo-box-styling-demos-focused-and-selected-flags', function(document) {
+            var elementsSelectedBox = document.querySelector('#elements-selected-box');
+            elementsSelectedBox.items = elements;
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
+  </template>
+  <script>
+    class ComboBoxStylingDemos extends DemoReadyEventEmitter(ComboBoxDemo(Polymer.Element)) {
+      static get is() {
+        return 'combo-box-styling-demos';
+      }
+    }
+    customElements.define(ComboBoxStylingDemos.is, ComboBoxStylingDemos);
+  </script>
+</dom-module>
diff --git a/demo/combo-box-validation-demos.html b/demo/combo-box-validation-demos.html
new file mode 100644
index 000000000..9cf6bb58d
--- /dev/null
+++ b/demo/combo-box-validation-demos.html
@@ -0,0 +1,49 @@
+<dom-module id="combo-box-validation-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+
+
+    <h3>Using as a Form Field</h3>
+    <vaadin-demo-snippet id="combo-box-validation-demos-using-as-a-form-field">
+      <template preserve-content>
+        <iron-form>
+          <form method="post">
+            <vaadin-combo-box name="name" required error-message="This field is required"></vaadin-combo-box>
+            <vaadin-button>Submit</vaadin-button>
+          </form>
+        </iron-form>
+
+        <script>
+          window.addDemoReadyListener('#combo-box-validation-demos-using-as-a-form-field', function(document) {
+            var form = document.querySelector('iron-form');
+            var combobox = form.querySelector('vaadin-combo-box');
+            combobox.items = elements;
+
+            form.addEventListener('iron-form-submit', function() {
+              alert('Form submitted with name: ' + form.serializeForm().name);
+              return false;
+            });
+
+            var button = document.querySelector('vaadin-button');
+            button.addEventListener('click', function() {
+              form.submit();
+            });
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
+  </template>
+  <script>
+    class ComboBoxValidationDemos extends DemoReadyEventEmitter(ComboBoxDemo(Polymer.Element)) {
+      static get is() {
+        return 'combo-box-validation-demos';
+      }
+    }
+    customElements.define(ComboBoxValidationDemos.is, ComboBoxValidationDemos);
+  </script>
+</dom-module>
diff --git a/demo/demos.json b/demo/demos.json
index 13dd07ab4..afed2bda6 100644
--- a/demo/demos.json
+++ b/demo/demos.json
@@ -13,44 +13,33 @@
   }
   ,
   {
-    "name": "Object Items",
-    "url": "combo-box-objects-demos",
-    "src": "combo-box-objects-demos.html",
+    "name": "Validation",
+    "url": "combo-box-validation-demos",
+    "src": "combo-box-validation-demos.html",
     "meta": {
-      "title": "Vaadin Combo Box Object Items Examples",
+      "title": "Vaadin Combo Validation Examples",
       "description": "",
       "image": ""
      }
   }
   ,
   {
-    "name": "Item Template Demos",
-    "url": "combo-box-item-template-demos",
-    "src": "combo-box-item-template-demos.html",
-    "meta": {
-      "title": "Vaadin Combo Box Object Items Examples",
-      "description": "",
-      "image": ""
-     }
-  }
-  ,
-  {
-    "name": "Remote and Custom Filtering",
+    "name": "Filtering",
     "url": "combo-box-filtering-demos",
     "src": "combo-box-filtering-demos.html",
     "meta": {
-      "title": "Vaadin Combo Box Remote and Custom Filtering Examples",
+      "title": "Vaadin Combo Box Filtering Examples",
       "description": "",
       "image": ""
      }
   }
   ,
   {
-    "name": "Advanced Demos",
-    "url": "combo-box-advanced-demos",
-    "src": "combo-box-advanced-demos.html",
+    "name": "Styling",
+    "url": "combo-box-styling-demos",
+    "src": "combo-box-styling-demos.html",
     "meta": {
-      "title": "Vaadin Combo Box Advanced Examples",
+      "title": "Vaadin Combo Box Styling Examples",
       "description": "",
       "image": ""
      }