@y14e/accordion 1.3.3 → 1.4.0

package/dist/index.cjs

@@ -50,6 +50,62 @@ function saveAttributes(elements, attributes) {
   });
 }
 
+// node_modules/@y14e/button/dist/index.js
+var Button = class {
+  #element;
+  #controller = null;
+  #isDestroyed = false;
+  constructor(element) {
+    if (!(element instanceof HTMLElement)) {
+      throw new TypeError("Invalid element");
+    }
+    if (element.hasAttribute("data-button-initialized")) {
+      console.warn("Already initialized");
+      return;
+    }
+    this.#element = element;
+    this.#initialize();
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
+    this.#element.removeAttribute("data-button-initialized");
+  }
+  #initialize() {
+    this.#controller = new AbortController();
+    this.#element.addEventListener("keydown", this.#onKeyDown, {
+      signal: this.#controller.signal
+    });
+    this.#element.setAttribute("data-button-initialized", "");
+  }
+  #onKeyDown = (event) => {
+    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
+    if (altKey || ctrlKey || metaKey || shiftKey) {
+      return;
+    }
+    if (!["Enter", " "].includes(key)) {
+      return;
+    }
+    const active = getActiveElement();
+    if (!(active instanceof HTMLElement)) {
+      return;
+    }
+    event.preventDefault();
+    active.click();
+  };
+};
+function getActiveElement() {
+  let current = document.activeElement;
+  while (current?.shadowRoot?.activeElement) {
+    current = current.shadowRoot.activeElement;
+  }
+  return current;
+}
+
 // node_modules/@y14e/roving-tabindex/dist/index.js
 var defaultParser2 = (value) => value.split(/\s+/);
 var defaultSerializer2 = (tokens) => tokens.join(" ");
@@ -416,7 +472,7 @@ var RovingTabIndex = class {
         return;
       }
     }
-    const active = getActiveElement();
+    const active = getActiveElement2();
     if (!(active instanceof HTMLElement)) {
       return;
     }
@@ -542,7 +598,7 @@ var RovingTabIndex = class {
 function focusElement(element) {
   "focus" in element && typeof element.focus === "function" && element.focus();
 }
-function getActiveElement() {
+function getActiveElement2() {
   let current = document.activeElement;
   while (current?.shadowRoot?.activeElement) {
     current = current.shadowRoot.activeElement;
@@ -568,6 +624,7 @@ var Accordion = class _Accordion {
   #eventController = null;
   #animationController = null;
   #cleanupRovingTabIndex = null;
+  #buttons = [];
   #isDestroyed = false;
   constructor(root, options = {}) {
     if (!(root instanceof HTMLElement)) {
@@ -641,6 +698,10 @@ var Accordion = class _Accordion {
     this.#eventController = null;
     this.#cleanupRovingTabIndex?.();
     this.#cleanupRovingTabIndex = null;
+    this.#buttons.forEach((button) => {
+      button.destroy();
+    });
+    this.#buttons.length = 0;
     !force && await this.#waitAnimationsFinish();
     this.#contentElements.forEach((content) => {
       force && this.#bindings.get(content)?.animation?.finish();
@@ -683,12 +744,12 @@ var Accordion = class _Accordion {
         trigger2.style.setProperty("pointer-events", "none");
       }
       trigger2.addEventListener("click", this.#onTriggerClick, { signal });
-      trigger2.addEventListener("keydown", this.#onTriggerKeyDown, { signal });
       addTokenToAttribute(content2, "aria-labelledby", trigger2.id);
       content2.setAttribute("role", "region");
       content2.addEventListener("beforematch", this.#onContentBeforeMatch, {
         signal
       });
+      this.#buttons.push(new Button(trigger2));
     });
     const { trigger, content } = this.#settings.selector;
     this.#cleanupRovingTabIndex = createRovingTabIndex(this.#rootElement, {
@@ -707,21 +768,6 @@ var Accordion = class _Accordion {
     }
     this.#toggle(trigger, trigger.ariaExpanded === "false");
   };
-  #onTriggerKeyDown = (event) => {
-    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
-    if (altKey || ctrlKey || metaKey || shiftKey) {
-      return;
-    }
-    if (!["Enter", " "].includes(key)) {
-      return;
-    }
-    const active = getActiveElement2();
-    if (!(active instanceof HTMLElement)) {
-      return;
-    }
-    event.preventDefault();
-    active.click();
-  };
   #onContentBeforeMatch = (event) => {
     const content = event.currentTarget;
     if (!(content instanceof HTMLElement)) {
@@ -818,13 +864,6 @@ var Accordion = class _Accordion {
 function createBinding(trigger, content) {
   return { trigger, content, animation: null };
 }
-function getActiveElement2() {
-  let current = document.activeElement;
-  while (current?.shadowRoot?.activeElement) {
-    current = current.shadowRoot.activeElement;
-  }
-  return current;
-}
 function isFocusable2(element) {
   return !element.hasAttribute("disabled") && element.tabIndex >= 0;
 }
@@ -841,7 +880,7 @@ function waitAnimationFinish(animation) {
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 1.3.3
+ * @version 1.4.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -860,6 +899,17 @@ function waitAnimationFinish(animation) {
    * @see {@link https://github.com/y14e/attributes-utils}
    *)
 
+@y14e/button/dist/index.js:
+  (**
+   * Button
+   *
+   * @version 1.0.0
+   * @author Yusuke Kamiyamane
+   * @license MIT
+   * @copyright Copyright (c) Yusuke Kamiyamane
+   * @see {@link https://github.com/y14e/button}
+   *)
+
 @y14e/roving-tabindex/dist/index.js:
   (**
    * Roving Tabindex

package/dist/index.d.cts

@@ -2,7 +2,7 @@
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 1.3.3
+ * @version 1.4.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.ts

@@ -2,7 +2,7 @@
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 1.3.3
+ * @version 1.4.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -48,6 +48,62 @@ function saveAttributes(elements, attributes) {
   });
 }
 
+// node_modules/@y14e/button/dist/index.js
+var Button = class {
+  #element;
+  #controller = null;
+  #isDestroyed = false;
+  constructor(element) {
+    if (!(element instanceof HTMLElement)) {
+      throw new TypeError("Invalid element");
+    }
+    if (element.hasAttribute("data-button-initialized")) {
+      console.warn("Already initialized");
+      return;
+    }
+    this.#element = element;
+    this.#initialize();
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
+    this.#element.removeAttribute("data-button-initialized");
+  }
+  #initialize() {
+    this.#controller = new AbortController();
+    this.#element.addEventListener("keydown", this.#onKeyDown, {
+      signal: this.#controller.signal
+    });
+    this.#element.setAttribute("data-button-initialized", "");
+  }
+  #onKeyDown = (event) => {
+    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
+    if (altKey || ctrlKey || metaKey || shiftKey) {
+      return;
+    }
+    if (!["Enter", " "].includes(key)) {
+      return;
+    }
+    const active = getActiveElement();
+    if (!(active instanceof HTMLElement)) {
+      return;
+    }
+    event.preventDefault();
+    active.click();
+  };
+};
+function getActiveElement() {
+  let current = document.activeElement;
+  while (current?.shadowRoot?.activeElement) {
+    current = current.shadowRoot.activeElement;
+  }
+  return current;
+}
+
 // node_modules/@y14e/roving-tabindex/dist/index.js
 var defaultParser2 = (value) => value.split(/\s+/);
 var defaultSerializer2 = (tokens) => tokens.join(" ");
@@ -414,7 +470,7 @@ var RovingTabIndex = class {
         return;
       }
     }
-    const active = getActiveElement();
+    const active = getActiveElement2();
     if (!(active instanceof HTMLElement)) {
       return;
     }
@@ -540,7 +596,7 @@ var RovingTabIndex = class {
 function focusElement(element) {
   "focus" in element && typeof element.focus === "function" && element.focus();
 }
-function getActiveElement() {
+function getActiveElement2() {
   let current = document.activeElement;
   while (current?.shadowRoot?.activeElement) {
     current = current.shadowRoot.activeElement;
@@ -566,6 +622,7 @@ var Accordion = class _Accordion {
   #eventController = null;
   #animationController = null;
   #cleanupRovingTabIndex = null;
+  #buttons = [];
   #isDestroyed = false;
   constructor(root, options = {}) {
     if (!(root instanceof HTMLElement)) {
@@ -639,6 +696,10 @@ var Accordion = class _Accordion {
     this.#eventController = null;
     this.#cleanupRovingTabIndex?.();
     this.#cleanupRovingTabIndex = null;
+    this.#buttons.forEach((button) => {
+      button.destroy();
+    });
+    this.#buttons.length = 0;
     !force && await this.#waitAnimationsFinish();
     this.#contentElements.forEach((content) => {
       force && this.#bindings.get(content)?.animation?.finish();
@@ -681,12 +742,12 @@ var Accordion = class _Accordion {
         trigger2.style.setProperty("pointer-events", "none");
       }
       trigger2.addEventListener("click", this.#onTriggerClick, { signal });
-      trigger2.addEventListener("keydown", this.#onTriggerKeyDown, { signal });
       addTokenToAttribute(content2, "aria-labelledby", trigger2.id);
       content2.setAttribute("role", "region");
       content2.addEventListener("beforematch", this.#onContentBeforeMatch, {
         signal
       });
+      this.#buttons.push(new Button(trigger2));
     });
     const { trigger, content } = this.#settings.selector;
     this.#cleanupRovingTabIndex = createRovingTabIndex(this.#rootElement, {
@@ -705,21 +766,6 @@ var Accordion = class _Accordion {
     }
     this.#toggle(trigger, trigger.ariaExpanded === "false");
   };
-  #onTriggerKeyDown = (event) => {
-    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
-    if (altKey || ctrlKey || metaKey || shiftKey) {
-      return;
-    }
-    if (!["Enter", " "].includes(key)) {
-      return;
-    }
-    const active = getActiveElement2();
-    if (!(active instanceof HTMLElement)) {
-      return;
-    }
-    event.preventDefault();
-    active.click();
-  };
   #onContentBeforeMatch = (event) => {
     const content = event.currentTarget;
     if (!(content instanceof HTMLElement)) {
@@ -816,13 +862,6 @@ var Accordion = class _Accordion {
 function createBinding(trigger, content) {
   return { trigger, content, animation: null };
 }
-function getActiveElement2() {
-  let current = document.activeElement;
-  while (current?.shadowRoot?.activeElement) {
-    current = current.shadowRoot.activeElement;
-  }
-  return current;
-}
 function isFocusable2(element) {
   return !element.hasAttribute("disabled") && element.tabIndex >= 0;
 }
@@ -839,7 +878,7 @@ function waitAnimationFinish(animation) {
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 1.3.3
+ * @version 1.4.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -858,6 +897,17 @@ function waitAnimationFinish(animation) {
    * @see {@link https://github.com/y14e/attributes-utils}
    *)
 
+@y14e/button/dist/index.js:
+  (**
+   * Button
+   *
+   * @version 1.0.0
+   * @author Yusuke Kamiyamane
+   * @license MIT
+   * @copyright Copyright (c) Yusuke Kamiyamane
+   * @see {@link https://github.com/y14e/button}
+   *)
+
 @y14e/roving-tabindex/dist/index.js:
   (**
    * Roving Tabindex

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/accordion",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "WAI-ARIA compliant accordion pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -44,6 +44,7 @@
   "homepage": "https://github.com/y14e/accordion#readme",
   "devDependencies": {
     "@y14e/attributes-utils": "^1.0.5",
+    "@y14e/button": "^1.0.0",
     "@y14e/roving-tabindex": "^1.3.1",
     "bun-types": "latest",
     "tsup": "^8.0.0",