github
diff --git a/‎.eslintrc.json
Lines changed: 4 additions & 2 deletions b/‎.eslintrc.json
Lines changed: 4 additions & 2 deletions
diff --git a/‎.flowconfig
Lines changed: 0 additions & 9 deletions b/‎.flowconfig
Lines changed: 0 additions & 9 deletions
diff --git a/‎.github/workflows/nodejs.yml
Lines changed: 2 additions & 6 deletions b/‎.github/workflows/nodejs.yml
Lines changed: 2 additions & 6 deletions
diff --git a/‎README.md
Lines changed: 12 additions & 0 deletions b/‎README.md
Lines changed: 12 additions & 0 deletions
diff --git a/‎examples/index.html
Lines changed: 16 additions & 11 deletions b/‎examples/index.html
Lines changed: 16 additions & 11 deletions
diff --git a/‎index.d.ts
Lines changed: 0 additions & 12 deletions b/‎index.d.ts
Lines changed: 0 additions & 12 deletions
@@ -2,16 +2,18 @@
   "extends": [
     "plugin:github/browser",
     "plugin:github/es6",
-    "plugin:github/flow"
+    "plugin:github/typescript"
   ],
+  "globals": {
+    "TextExpanderElement": "readable"
+  },
   "rules": {
     "no-invalid-this": "off"
   },
   "overrides": [
     {
       "files": "test/**/*.js",
       "rules": {
-        "flowtype/require-valid-file-annotation": "off",
         "github/unescaped-html-literal": "off"
       }
     },
 
@@ -9,16 +9,12 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [8.x, 10.x, 12.x]
-
     steps:
     - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: '12.x'
     - name: npm install, build, and test
       run: |
         npm install
 
@@ -10,10 +10,22 @@ $ npm install --save @github/text-expander-element
 
 ## Usage
 
+### Script
+
+Import as ES modules:
+
 ```js
 import '@github/text-expander-element'
 ```
 
+With a script tag:
+
+```html
+<script type="module" src="./node_modules/@github/text-expander-element/dist/bundle.js">
+```
+
+### Markup
+
 ```html
 <text-expander keys=": @ #">
   <textarea></textarea>
 
@@ -3,10 +3,13 @@
 <head>
   <meta charset="utf-8">
   <title>text-expander demo</title>
+  <style>
+    [aria-selected="true"] {background: #eee;}
+  </style>
 </head>
 <body>
   <text-expander keys=":">
-    <textarea autofocus></textarea>
+    <textarea autofocus rows="10" cols="40"></textarea>
   </text-expander>
 
   <script type="text/javascript">
@@ -15,22 +18,24 @@
       const {key, provide} = event.detail
       if (key === ':') {
         const menu = document.createElement('ul')
-        const item = document.createElement('li')
-        item.setAttribute('role', 'option')
-        item.textContent = '🐈'
-        menu.append(item)
+        menu.role = 'listbox'
+        for (const emoji of ['🐈', '🐕']) {
+          const item = document.createElement('li')
+          item.setAttribute('role', 'option')
+          item.textContent = emoji
+          item.id = `option-${emoji}`
+          menu.append(item)
+        }
         provide(Promise.resolve({matched: true, fragment: menu}))
       }
     })
+
     expander.addEventListener('text-expander-value', function(event) {
       const {key, item}  = event.detail
-      if (key === ':') {
-        event.detail.value = '🐈'
-      }
+      if (key === ':') event.detail.value = item.textContent
     })
   </script>
-  <script type="text/javascript" src="https://unpkg.com/@github/combobox-nav@latest"></script>
-  <script type="text/javascript" src="https://unpkg.com/@github/text-expander-element@latest"></script>
-  <!-- <script src="../dist/index.umd.js"></script> -->
+  <script type="module" src="https://unpkg.com/@github/text-expander-element@latest/dist/bundle.js"></script>
+  <!-- <script src="../dist/bundle.js" type="module"></script> -->
 </body>
 </html>