⚠️ 📖 DRAFT: <tag-complete>

examples/email-recipients/index.html

@@ -0,0 +1,91 @@
+<title>&lt;email&gt;</title>
+
+<link rel=stylesheet href=style.css>
+
+<email-recipients>
+
+  <template name=recipients>
+    <address>
+      <button id={#}
+        onclick=onremove
+        title='Remove <{self}> from recipients'>x</button>
+
+      <label>
+        <!-- `recipients` values when used  within `<form>` -->
+        <input name=recipients[] type=checkbox value={self} checked>
+        {self}
+      </label>
+    </address>
+  </template>
+
+  <input
+    type=search
+    name=address
+    list=contacts
+    onchange=addrecipient
+    [email protected]>
+
+  <datalist id=contacts>
+    <template name=contacts>
+      <option value={email}>{name} &lt;{email}&gt;
+    </template>
+  </datalist>
+
+</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>
+
+Element `email-recipients`
+
+(class extends HTMLElement {
+
+  initialize () {
+    this.context.recipients =
+      ['[email protected]', '[email protected]']
+
+    this.context.contacts = [
+      { name: 'Tim', email: '[email protected]' },
+      { name: 'Rob Cole', email: '[email protected]' }
+    ]
+  }
+
+  // use Array.prototype.splice
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
+  onremove (event, id = event.target.id) {
+    this.context.recipients
+      .splice (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>

examples/email-recipients/style.css

@@ -0,0 +1,70 @@
+:root {
+  --email-recipients-corner-radius: 1vw;
+}
+
+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 > * {
+  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: ", ";
+  font-size: 1.6em;
+  font-weight: 300;
+  margin-top: -0.3em;
+  color: rgba(50, 50, 50, 0.7);
+}
+email-recipients > address:hover {
+  background: rgba(220, 220, 220, 0.5)
+}
+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;
+  line-height: 1em;
+  margin-left: 0.7em;
+}