From 6833d8b2a87e3a74441aa9188435caafa2738d7a Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Fri, 21 Jul 2017 22:04:10 -0400
Subject: [PATCH 01/13] Specifications for `email-recipient`

---
 examples/email-recipients/index.html | 87 ++++++++++++++++++++++++++++
 examples/email-recipients/style.css  | 70 ++++++++++++++++++++++
 2 files changed, 157 insertions(+)
 create mode 100644 examples/email-recipients/index.html
 create mode 100644 examples/email-recipients/style.css

diff --git a/examples/email-recipients/index.html b/examples/email-recipients/index.html
new file mode 100644
index 0000000000..6ca4fed208
--- /dev/null
+++ b/examples/email-recipients/index.html
@@ -0,0 +1,87 @@
+<title>&lt;email&gt;</title>
+
+<link rel=stylesheet href=email/style.css>
+
+<email-recipients>
+
+  <template name=recipients>
+  <address>
+    <button id={#}
+      onclick=onremove
+      title='Remove <{self}> from recipients'>x</button>
+
+    <label>
+      <input name=recipients[] type=checkbox value={self} checked>
+      {self}
+    </label>
+  </address>
+  </template>
+
+  <input
+    name=address
+    list=contacts
+    onchange=addrecipient
+    placeholder=email@example.com>
+
+  <datalist id=contacts>
+  <template name=contacts>
+  <option value={email}>{name} &lt;{email}&gt;
+  </template>
+  </datalist>
+
+</email-recipients>
+
+<script src=/snuggsi.es></script>
+<script defer>
+
+Element `email-recipients`
+
+(class extends HTMLElement {
+
+  initialize () {
+    this.context.recipients =
+      ['angelo@isawesome.com', 'snuggs@isawesome.com']
+  }
+
+  onconnect () {
+    this.context
+      .contacts = [
+        { name: 'Tim', email: 'tim@isawesome.com' },
+        { name: 'Rob Cole', email: 'robcole@isawesome.com' }
+      ]
+  }
+
+  // use Array.prototype.splice
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
+  onremove (event, id = event.target.id, address) {
+    address =
+      this.context
+        .recipients.splice
+          (event.target.id, 1)
+
+    this.select
+      `input[name=address]`.focus()
+  }
+
+  addrecipient (event, input = event.target) {
+    this.context
+      .recipients.push
+        (input.value)
+
+    input.value = ''
+  }
+
+  get recipients ()
+    { return this.context.recipients }
+
+  get contacts ()
+    { return this.context.contacts }
+})
+
+</script>
+
+<script src=/browser-sync.es></script>
+<script
+  name=polyfill
+  src=//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js>
+</script>
diff --git a/examples/email-recipients/style.css b/examples/email-recipients/style.css
new file mode 100644
index 0000000000..0bae507629
--- /dev/null
+++ b/examples/email-recipients/style.css
@@ -0,0 +1,70 @@
+:root {
+  --email-recipients-corner-radius: 1vw;
+}
+
+email-recipients > address:hover,
+email-recipients {
+  box-shadow: 0 0 0.28em rgba(40,40,40,0.8);
+  border-radius: var(--email-recipients-corner-radius)
+}
+
+email-recipients {
+  padding: 1em;
+  display: flex;
+  flex-basis: auto;
+  flex-flow: row wrap;
+}
+
+email-recipients > * {
+  font-size: 90%;
+  line-height: 1.612em;
+}
+
+email-recipients > address {
+  display: flex;
+  cursor: pointer;
+  margin: 0;
+  font-style: normal;
+  align-items: center;
+  flex-flow: row nowrap;
+  font-family: sans-serif;
+}
+email-recipients > address::after {
+  content: ", ";
+  margin-top: -0.4em;
+  font-size: 2em;
+  color: rgba(50,50,50,0.7);
+}
+email-recipients > address:hover {
+  background: rgba(220,220,220,0.9)
+}
+email-recipients > address button {
+  opacity: 0;
+  border: none;
+  background: none;
+  margin-right: 0.12em;
+  padding: 0 0.12em 0 0.2em;
+  border-right: 1px solid red;
+}
+
+email-recipients > address:hover button {
+  opacity: 0.5;
+  font-size: 80%;
+  cursor: pointer;
+  color: rgba(230,0,0,0.9);
+}
+email-recipients > address button:hover {
+  opacity: 1.0
+}
+
+email-recipients input[name='recipients[]'] {
+  display: none;
+}
+email-recipients input[name=address] {
+  flex: 0;
+  border: none;
+  outline: none;
+  background; yellow;
+  line-height: 1em;
+  align-items: flex-start;
+}

From 504008b6f63a85b8cc1a0e11d7e6326532e4a80b Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Fri, 21 Jul 2017 22:10:38 -0400
Subject: [PATCH 02/13] Fix broken stylesheet

---
 examples/email-recipients/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/email-recipients/index.html b/examples/email-recipients/index.html
index 6ca4fed208..7c1434ec78 100644
--- a/examples/email-recipients/index.html
+++ b/examples/email-recipients/index.html
@@ -1,6 +1,6 @@
 <title>&lt;email&gt;</title>
 
-<link rel=stylesheet href=email/style.css>
+<link rel=stylesheet href=style.css>
 
 <email-recipients>
 

From 53324444035dc0f372fc4468d40eb28bb192314a Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Fri, 21 Jul 2017 22:19:32 -0400
Subject: [PATCH 03/13] Convert input to type search

---
 examples/email-recipients/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/email-recipients/index.html b/examples/email-recipients/index.html
index 7c1434ec78..425dc1a25a 100644
--- a/examples/email-recipients/index.html
+++ b/examples/email-recipients/index.html
@@ -18,6 +18,7 @@
   </template>
 
   <input
+    type=search
     name=address
     list=contacts
     onchange=addrecipient

From 80108c448f060f012dd65d2acd3e8afe60de3fe8 Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Fri, 21 Jul 2017 22:25:01 -0400
Subject: [PATCH 04/13] Fix formatting of templates

---
 examples/email-recipients/index.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/examples/email-recipients/index.html b/examples/email-recipients/index.html
index 425dc1a25a..ec2c3e7a92 100644
--- a/examples/email-recipients/index.html
+++ b/examples/email-recipients/index.html
@@ -5,16 +5,16 @@
 <email-recipients>
 
   <template name=recipients>
-  <address>
-    <button id={#}
-      onclick=onremove
-      title='Remove <{self}> from recipients'>x</button>
-
-    <label>
-      <input name=recipients[] type=checkbox value={self} checked>
-      {self}
-    </label>
-  </address>
+    <address>
+      <button id={#}
+        onclick=onremove
+        title='Remove <{self}> from recipients'>x</button>
+
+      <label>
+        <input name=recipients[] type=checkbox value={self} checked>
+        {self}
+      </label>
+    </address>
   </template>
 
   <input
@@ -25,9 +25,9 @@
     placeholder=email@example.com>
 
   <datalist id=contacts>
-  <template name=contacts>
-  <option value={email}>{name} &lt;{email}&gt;
-  </template>
+    <template name=contacts>
+      <option value={email}>{name} &lt;{email}&gt;
+    </template>
   </datalist>
 
 </email-recipients>

From f7839117ee8be06cbe187ef172770d6ce18cba61 Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 22 Jul 2017 05:15:54 -0400
Subject: [PATCH 05/13] Add spaces between color values as per @brandondees
 request

---
 examples/email-recipients/style.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/email-recipients/style.css b/examples/email-recipients/style.css
index 0bae507629..ce5730d763 100644
--- a/examples/email-recipients/style.css
+++ b/examples/email-recipients/style.css
@@ -4,7 +4,7 @@
 
 email-recipients > address:hover,
 email-recipients {
-  box-shadow: 0 0 0.28em rgba(40,40,40,0.8);
+  box-shadow: 0 0 0.28em rgba(40, 40, 40, 0.8);
   border-radius: var(--email-recipients-corner-radius)
 }
 
@@ -33,10 +33,10 @@ email-recipients > address::after {
   content: ", ";
   margin-top: -0.4em;
   font-size: 2em;
-  color: rgba(50,50,50,0.7);
+  color: rgba(50, 50, 50, 0.7);
 }
 email-recipients > address:hover {
-  background: rgba(220,220,220,0.9)
+  background: rgba(220, 220, 220, 0.9)
 }
 email-recipients > address button {
   opacity: 0;
@@ -51,7 +51,7 @@ email-recipients > address:hover button {
   opacity: 0.5;
   font-size: 80%;
   cursor: pointer;
-  color: rgba(230,0,0,0.9);
+  color: rgba(230, 0, 0, 0.9)
 }
 email-recipients > address button:hover {
   opacity: 1.0

From d2859d3b5ae03f58cc57ae72408a8853bcbfa4bb Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 22 Jul 2017 14:13:29 -0400
Subject: [PATCH 06/13] Add comment on fallback input type=checkbox usage

---
 examples/email-recipients/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/email-recipients/index.html b/examples/email-recipients/index.html
index ec2c3e7a92..6580c49d06 100644
--- a/examples/email-recipients/index.html
+++ b/examples/email-recipients/index.html
@@ -11,6 +11,7 @@
         title='Remove <{self}> from recipients'>x</button>
 
       <label>
+        <!-- `recipients` values when used  within `<form>` -->
         <input name=recipients[] type=checkbox value={self} checked>
         {self}
       </label>

From bcebf26c3d29b38e691686a6cc0a5a04e9bdc35c Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 22 Jul 2017 14:14:57 -0400
Subject: [PATCH 07/13] Migrate contacts to initialize

---
 examples/email-recipients/index.html | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/examples/email-recipients/index.html b/examples/email-recipients/index.html
index 6580c49d06..0c28408ac5 100644
--- a/examples/email-recipients/index.html
+++ b/examples/email-recipients/index.html
@@ -43,14 +43,11 @@
   initialize () {
     this.context.recipients =
       ['angelo@isawesome.com', 'snuggs@isawesome.com']
-  }
 
-  onconnect () {
-    this.context
-      .contacts = [
-        { name: 'Tim', email: 'tim@isawesome.com' },
-        { name: 'Rob Cole', email: 'robcole@isawesome.com' }
-      ]
+    this.context.contacts = [
+      { name: 'Tim', email: 'tim@isawesome.com' },
+      { name: 'Rob Cole', email: 'robcole@isawesome.com' }
+    ]
   }
 
   // use Array.prototype.splice

From cd2e7188568110dcd672f7631f17ec84a078e3c3 Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 22 Jul 2017 14:15:20 -0400
Subject: [PATCH 08/13] Refactor to Tsu patterns

---
 examples/email-recipients/index.html | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/examples/email-recipients/index.html b/examples/email-recipients/index.html
index 0c28408ac5..f6086fb2bc 100644
--- a/examples/email-recipients/index.html
+++ b/examples/email-recipients/index.html
@@ -52,20 +52,17 @@
 
   // use Array.prototype.splice
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
-  onremove (event, id = event.target.id, address) {
-    address =
-      this.context
-        .recipients.splice
-          (event.target.id, 1)
+  onremove (event, id = event.target.id) {
+    this.context.recipients
+      .splice (id, 1)
 
     this.select
-      `input[name=address]`.focus()
+      `input[name=address]`.focus ()
   }
 
   addrecipient (event, input = event.target) {
-    this.context
-      .recipients.push
-        (input.value)
+    this.context.recipients
+      .push (input.value)
 
     input.value = ''
   }

From d2df475d916bd69c9dfe34ebb311305bdcc96fa2 Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 22 Jul 2017 14:51:49 -0400
Subject: [PATCH 09/13] Add reference to react typeahead

---
 examples/email-recipients/index.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/examples/email-recipients/index.html b/examples/email-recipients/index.html
index f6086fb2bc..64972a448c 100644
--- a/examples/email-recipients/index.html
+++ b/examples/email-recipients/index.html
@@ -33,6 +33,14 @@
 
 </email-recipients>
 
+<footer>
+<header>Comparable Examples</header>
+
+<ul>
+  <li>
+    <a href=https://github.com/ericgio/react-bootstrap-typeahead>React Typeahead</a>
+</footer>
+
 <script src=/snuggsi.es></script>
 <script defer>
 

From 653a03d82670d67c16e46ce7ef4228190f8444fa Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 22 Jul 2017 16:16:21 -0400
Subject: [PATCH 10/13] Remove box-shadow from address

---
 examples/email-recipients/style.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/examples/email-recipients/style.css b/examples/email-recipients/style.css
index ce5730d763..bd43bb4f45 100644
--- a/examples/email-recipients/style.css
+++ b/examples/email-recipients/style.css
@@ -2,17 +2,17 @@
   --email-recipients-corner-radius: 1vw;
 }
 
-email-recipients > address:hover,
-email-recipients {
-  box-shadow: 0 0 0.28em rgba(40, 40, 40, 0.8);
-  border-radius: var(--email-recipients-corner-radius)
-}
+email-recipients,
+email-recipients
+  > address:hover
+  { border-radius: var(--email-recipients-corner-radius) }
 
 email-recipients {
   padding: 1em;
   display: flex;
   flex-basis: auto;
   flex-flow: row wrap;
+  box-shadow: 0 0 0.28em rgba(40, 40, 40, 0.8)
 }
 
 email-recipients > * {

From 4987974c0d3701cc6934d3ddd1b095823326311a Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 22 Jul 2017 16:16:36 -0400
Subject: [PATCH 11/13] Change comma sizing after address

---
 examples/email-recipients/style.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/email-recipients/style.css b/examples/email-recipients/style.css
index bd43bb4f45..8329d11a0e 100644
--- a/examples/email-recipients/style.css
+++ b/examples/email-recipients/style.css
@@ -31,8 +31,9 @@ email-recipients > address {
 }
 email-recipients > address::after {
   content: ", ";
-  margin-top: -0.4em;
-  font-size: 2em;
+  font-size: 1.6em;
+  font-weight: 300;
+  margin-top: -0.3em;
   color: rgba(50, 50, 50, 0.7);
 }
 email-recipients > address:hover {

From 98bebf61476632a8dc6c205518ecd9c1a93642bf Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 22 Jul 2017 16:17:05 -0400
Subject: [PATCH 12/13] Lighten background color for address

---
 examples/email-recipients/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/email-recipients/style.css b/examples/email-recipients/style.css
index 8329d11a0e..eee4c6e9f7 100644
--- a/examples/email-recipients/style.css
+++ b/examples/email-recipients/style.css
@@ -37,7 +37,7 @@ email-recipients > address::after {
   color: rgba(50, 50, 50, 0.7);
 }
 email-recipients > address:hover {
-  background: rgba(220, 220, 220, 0.9)
+  background: rgba(220, 220, 220, 0.5)
 }
 email-recipients > address button {
   opacity: 0;

From a08ecf649b33a1e72008db5ed412a09b06cd7725 Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 22 Jul 2017 16:17:22 -0400
Subject: [PATCH 13/13] Add magin to address search input

---
 examples/email-recipients/style.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/examples/email-recipients/style.css b/examples/email-recipients/style.css
index eee4c6e9f7..d77fb1c33d 100644
--- a/examples/email-recipients/style.css
+++ b/examples/email-recipients/style.css
@@ -65,7 +65,6 @@ email-recipients input[name=address] {
   flex: 0;
   border: none;
   outline: none;
-  background; yellow;
   line-height: 1em;
-  align-items: flex-start;
+  margin-left: 0.7em;
 }