Update event name and docs

README.md

@@ -1,6 +1,6 @@
 # <details-dialog> element
 
-A modal dialog that's opened with a <details> button.
+A modal dialog that's opened with a <details> button.
 
 ## Installation
 
@@ -26,17 +26,18 @@ import 'details-dialog-element'
 
 ## Events
 
-### `details-dialog:will-close`
+### `details-dialog-close`
 
-A `details-dialog:will-close` event is fired when a request to close the dialog
-is made either by pressing escape, clicking a `data-close-dialog` element,
-clicking on the `<summary>` element, or when `.toggle(false)` is called on an
-open dialog.
+`details-dialog-close` event is fired from `<details-dialog>` when a request to close the dialog is made from
 
-This event can be cancelled to keep the dialog open.
+- pressing <kbd>escape</kbd>,
+- clicking on `summary, [data-close-dialog]`, or
+- `dialog.toggle(false)`
+
+This event bubbles, and can be canceled to keep the dialog open.
 
 ```js
-document.addEventListener('details-dialog:will-close', function(event) {
+document.addEventListener('details-dialog-close', function(event) {
   if (!confirm('Are you sure?')) {
     event.preventDefault()
   }

index.js

@@ -65,7 +65,7 @@ function allowClosingDialog(details: Element): boolean {
   if (!(dialog instanceof DetailsDialogElement)) return true
 
   return dialog.dispatchEvent(
-    new CustomEvent('details-dialog:will-close', {
+    new CustomEvent('details-dialog-close', {
       bubbles: true,
       cancelable: true
     })
@@ -77,7 +77,7 @@ function onSummaryClick(event: Event): void {
   const details = event.currentTarget.closest('details[open]')
   if (!details) return
 
-  // Prevent summary click events if details-dialog:will-close was cancelled
+  // Prevent summary click events if details-dialog-close was cancelled
   if (!allowClosingDialog(details)) {
     event.preventDefault()
     event.stopPropagation()

test/test.js

@@ -88,7 +88,7 @@ describe('details-dialog-element', function() {
       assert.equal(document.activeElement, document.querySelector(`[${CLOSE_ATTR}]`))
     })
 
-    it('supports a cancellable details-dialog:will-close event when a summary element is present', async function() {
+    it('supports a cancellable details-dialog-close event when a summary element is present', async function() {
       dialog.toggle(true)
       await waitForToggleEvent(details)
       assert(details.open)
@@ -96,7 +96,7 @@ describe('details-dialog-element', function() {
       let closeRequestCount = 0
       let allowCloseToHappen = false
       dialog.addEventListener(
-        'details-dialog:will-close',
+        'details-dialog-close',
         function(event) {
           closeRequestCount++
           if (!allowCloseToHappen) {
@@ -133,7 +133,7 @@ describe('details-dialog-element', function() {
         summary.remove()
       })
 
-      it('supports a cancellable details-dialog:will-close event', async function() {
+      it('supports a cancellable details-dialog-close event', async function() {
         dialog.toggle(true)
         await waitForToggleEvent(details)
         assert(details.open)
@@ -141,7 +141,7 @@ describe('details-dialog-element', function() {
         let closeRequestCount = 0
         let allowCloseToHappen = false
         dialog.addEventListener(
-          'details-dialog:will-close',
+          'details-dialog-close',
           function(event) {
             closeRequestCount++
             if (!allowCloseToHappen) {