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

@@ -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`.
 

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);
             }
         });
     };

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

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 {