Update event name, documents, and remove bubbles

README.md

@@ -45,12 +45,12 @@ import '@github/task-lists-element'
 ```js
 const list = document.querySelector('task-lists')
 
-list.addEventListener('task-lists:check', function(event) {
+list.addEventListener('task-lists-check', function(event) {
   const {position, checked} = event.detail
   console.log(position, checked)
 })
 
-list.addEventListener('task-lists:move', function(event) {
+list.addEventListener('task-lists-move', function(event) {
   const {src, dst} = event.detail
   console.log(src, dst)
 })

examples/index.html

@@ -62,12 +62,12 @@
   <pre class="events"></pre>
   <script type="text/javascript">
     const events = document.querySelector('.events')
-    document.addEventListener('task-lists:check', function(event) {
-      events.append(`task-lists:check - checked: ${event.detail.checked}, position: ${event.detail.position}\n`)
+    document.addEventListener('task-lists-check', function(event) {
+      events.append(`task-lists-check - checked: ${event.detail.checked}, position: ${event.detail.position}\n`)
     })
 
-    document.addEventListener('task-lists:move', function(event) {
-      events.append(`task-lists:move - from: ${event.detail.src}, to: ${event.detail.dst}\n`)
+    document.addEventListener('task-lists-move', function(event) {
+      events.append(`task-lists-move - from: ${event.detail.src}, to: ${event.detail.dst}\n`)
     })
   </script>
 </body>

src/task-lists-element.js

@@ -14,8 +14,7 @@ export default class TaskListsElement extends HTMLElement {
       if (!checkbox.classList.contains('task-list-item-checkbox')) return
 
       this.dispatchEvent(
-        new CustomEvent('task-lists:check', {
-          bubbles: true,
+        new CustomEvent('task-lists-check', {
           detail: {
             position: position(checkbox),
             checked: checkbox.checked
@@ -207,8 +206,7 @@ function onSorted({src, dst}) {
   originalLists.delete(container)
 
   container.dispatchEvent(
-    new CustomEvent('task-lists:move', {
-      bubbles: true,
+    new CustomEvent('task-lists-move', {
       detail: {
         src: [lists.indexOf(src.list), src.index],
         dst: [lists.indexOf(dst.list), dst.index]

test/test.js

@@ -69,7 +69,7 @@ describe('task-lists element', function() {
       let called = false
 
       const list = document.querySelector('task-lists')
-      list.addEventListener('task-lists:check', function(event) {
+      list.addEventListener('task-lists-check', function(event) {
         called = true
         const {position, checked} = event.detail
         assert.deepEqual(position, [1, 1])
@@ -87,7 +87,7 @@ describe('task-lists element', function() {
       let called = false
 
       const list = document.querySelector('task-lists')
-      list.addEventListener('task-lists:check', function(event) {
+      list.addEventListener('task-lists-check', function(event) {
         called = true
         const {position, checked} = event.detail
         assert.deepEqual(position, [4, 0])