From 9fc7f74aebea1b3e48dd99a3000b91258f5ffcea Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Sat, 15 Apr 2023 17:49:08 +0930
Subject: [PATCH] feat(disclosure)!: add `toggle` event for consistency with
 `<details>`

BREAKING CHANGE: `open` and `close` events have been removed - use `toggle` instead
---
 src/accordion/README.md      |  2 +-
 src/accordion/accordion.ts   | 16 +++++++++-------
 src/disclosure/README.md     |  3 +--
 src/disclosure/disclosure.ts | 19 +++++++++----------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/accordion/README.md b/src/accordion/README.md
index 0d7abb0..f6f611f 100644
--- a/src/accordion/README.md
+++ b/src/accordion/README.md
@@ -36,7 +36,7 @@ window.customElements.define('ui-accordion', AccordionElement);
 
 ## Behavior
 
--   Whenever a direct child `<ui-disclosure>` element is opened, sibling `<ui-disclosure>` elements will be closed.
+-   Whenever a direct child `<ui-disclosure>` or `<details>` element is opened, sibling `<ui-disclosure>` and `<details>` elements will be closed.
 
 -   If the `required` attribute is present, the `<ui-disclosure>` element that is currently open will be `disabled`.
 
diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
index ff0963b..d503758 100644
--- a/src/accordion/accordion.ts
+++ b/src/accordion/accordion.ts
@@ -2,20 +2,22 @@ import DisclosureElement from '../disclosure/disclosure';
 
 export default class AccordionElement extends HTMLElement {
     public connectedCallback(): void {
-        this.addEventListener('open', this.onOpen, { capture: true });
+        this.addEventListener('toggle', this.onToggle, { capture: true });
     }
 
     public disconnectedCallback(): void {
-        this.removeEventListener('open', this.onOpen, { capture: true });
+        this.removeEventListener('toggle', this.onToggle, { capture: true });
     }
 
-    private onOpen = (e: Event) => {
-        this.querySelectorAll<DisclosureElement>(
-            ':scope > ui-disclosure'
+    private onToggle = (e: Event) => {
+        const target = e.target as DisclosureElement | HTMLDetailsElement;
+        if (!target.open) return;
+        this.querySelectorAll<DisclosureElement | HTMLDetailsElement>(
+            ':scope > :is(ui-disclosure, details)'
         ).forEach((el) => {
-            el.open = el === e.target;
+            el.toggleAttribute('open', el === target);
             if (this.required) {
-                el.toggleAttribute('disabled', el === e.target);
+                el.toggleAttribute('disabled', el === target);
             }
         });
     };
diff --git a/src/disclosure/README.md b/src/disclosure/README.md
index 9a70c05..86743f8 100644
--- a/src/disclosure/README.md
+++ b/src/disclosure/README.md
@@ -31,8 +31,7 @@ const disclosure = document.querySelector('ui-disclosure');
 // Programatically open and close the widget.
 disclosure.open = true;
 
-disclosure.addEventListener('open', callback);
-disclosure.addEventListener('close', callback);
+disclosure.addEventListener('toggle', callback);
 ```
 
 ```css
diff --git a/src/disclosure/disclosure.ts b/src/disclosure/disclosure.ts
index dccfa64..2c6b03e 100644
--- a/src/disclosure/disclosure.ts
+++ b/src/disclosure/disclosure.ts
@@ -59,25 +59,24 @@ export default class DisclosureElement extends HTMLElement {
     }
 
     private wasOpened() {
-        if (!this.content.hidden) return;
-
-        this.content.hidden = false;
-
-        hello(this.content);
+        if (this.content.hidden) {
+            this.content.hidden = false;
+            hello(this.content);
+        }
 
         this.button.setAttribute('aria-expanded', 'true');
 
-        this.dispatchEvent(new Event('open'));
+        this.dispatchEvent(new Event('toggle'));
     }
 
     private wasClosed() {
-        if (this.content.hidden) return;
+        if (!this.content.hidden) {
+            goodbye(this.content).then(() => (this.content.hidden = true));
+        }
 
         this.button.setAttribute('aria-expanded', 'false');
 
-        goodbye(this.content).then(() => (this.content.hidden = true));
-
-        this.dispatchEvent(new Event('close'));
+        this.dispatchEvent(new Event('toggle'));
     }
 
     private get button(): HTMLElement {