@y14e/accordion 1.2.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Yusuke Kamiyamane
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,102 @@
+# Accordion
+
+WAI-ARIA compliant [accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) pattern implementation in TypeScript.
+
+## Install
+
+```bash
+npm i @y14e/accordion
+```
+
+```ts
+// npm
+import Accordion from '@y14e/accordion';
+
+// CDNs
+import Accordion from 'https://esm.sh/@y14e/accordion'
+// or
+import Accordion from 'https://cdn.jsdelivr.net/npm/@y14e/accordion/+esm';
+// or
+import Accordion from 'https://unpkg.com/@y14e/accordion/dist/index.js';
+```
+
+## Usage
+
+```ts
+new Accordion(root, options);
+// => Accordion
+//
+// root: HTMLElement
+// options (optional): AccordionOptions
+
+```
+
+## 🪄 Options
+
+```ts
+interface AccordionOptions {
+  animation?: {
+    duration?: number; // ms (default: 300)
+    easing?: string;   // <easing-function> (default: 'ease')
+  };
+  selector?: {
+    content?: string;  // default: ':has(> [data-accordion-trigger]) + *'
+    trigger?: string;  // default: '[data-accordion-trigger]'
+  };
+}
+```
+
+### ⚙️ Customize defaults
+
+Override the global default settings applied to all accordion instances.
+
+```ts
+import Accordion from './accordion';
+
+Accordion.defaults = {
+  animation: {
+    duration: 1000,
+  },
+  selector: {
+    content: '.content',
+    trigger: '.trigger',
+  },
+};
+
+new Accordion(root);
+```
+
+## 📦 APIs
+
+### `open`
+
+```ts
+accordion.open(trigger);
+// => void
+//
+// trigger: HTMLElement
+```
+
+### `close`
+
+```ts
+accordion.close(trigger);
+// => void
+//
+// trigger: HTMLElement
+```
+
+### `destroy`
+
+Destroys the instance and cleans up all event listeners.
+
+```ts
+accordion.destroy(force);
+// => Promise<void>
+//
+// force (optional): If true, skips waiting for animations to finish.
+```
+
+## Demo
+
+https://y14e.github.io/accordion-ts/

package/dist/index.cjs

@@ -0,0 +1,309 @@
+'use strict';
+
+// src/index.ts
+var Accordion = class _Accordion {
+  static defaults = {};
+  #rootElement;
+  #defaults = {
+    animation: { duration: 300, easing: "ease" },
+    selector: {
+      content: ":has(> [data-accordion-trigger]) + *",
+      trigger: "[data-accordion-trigger]"
+    }
+  };
+  #settings;
+  #triggerElements;
+  #contentElements;
+  #bindings = /* @__PURE__ */ new WeakMap();
+  #eventController = null;
+  #animationController = null;
+  #isDestroyed = false;
+  constructor(root, options = {}) {
+    if (!(root instanceof HTMLElement)) {
+      throw new TypeError("Invalid root element");
+    }
+    if (root.hasAttribute("data-accordion-initialized")) {
+      console.warn("Already initialized");
+      return;
+    }
+    this.#rootElement = root;
+    this.#defaults = this.#mergeOptions(this.#defaults, _Accordion.defaults);
+    this.#settings = this.#mergeOptions(this.#defaults, options);
+    matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
+    const { trigger, content } = this.#settings.selector;
+    const NOT_NESTED = `:not(:scope ${content} *)`;
+    this.#triggerElements = [
+      ...this.#rootElement.querySelectorAll(
+        `${trigger}${NOT_NESTED}`
+      )
+    ];
+    if (!this.#triggerElements.length) {
+      console.warn("Missing trigger elements");
+      return;
+    }
+    this.#contentElements = [
+      ...this.#rootElement.querySelectorAll(
+        `${content}${NOT_NESTED}`
+      )
+    ];
+    if (!this.#contentElements.length) {
+      console.warn("Missing content elements");
+      return;
+    }
+    this.#triggerElements.forEach((trigger2, i) => {
+      const content2 = this.#contentElements[i];
+      if (!content2) {
+        return;
+      }
+      const binding = createBinding(trigger2, content2);
+      this.#bindings.set(trigger2, binding);
+      this.#bindings.set(content2, binding);
+    });
+    this.#initialize();
+  }
+  open(trigger) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    if (!(trigger instanceof HTMLElement) || !this.#bindings.has(trigger)) {
+      console.warn("Invalid trigger element");
+      return;
+    }
+    this.#toggle(trigger, true);
+  }
+  close(trigger) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    if (!(trigger instanceof HTMLElement) || !this.#bindings.has(trigger)) {
+      console.warn("Invalid trigger element");
+      return;
+    }
+    this.#toggle(trigger, false);
+  }
+  async destroy(force = false) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#eventController?.abort();
+    this.#eventController = null;
+    !force && await this.#waitAnimationsFinish();
+    this.#contentElements.forEach((content) => {
+      force && this.#bindings.get(content)?.animation?.finish();
+      this.#onAnimationFinish(content);
+    });
+    this.#animationController?.abort();
+    this.#animationController = null;
+    this.#triggerElements.length = 0;
+    this.#contentElements.length = 0;
+    this.#rootElement.removeAttribute("data-accordion-initialized");
+  }
+  #initialize() {
+    this.#eventController = new AbortController();
+    const { signal } = this.#eventController;
+    this.#triggerElements.forEach((trigger, i) => {
+      const id = Math.random().toString(36).slice(-8);
+      const content = this.#contentElements[i];
+      if (!content) {
+        return;
+      }
+      content.id ||= `accordion-content-${id}`;
+      addTokenToAttribute(trigger, "aria-controls", content.id);
+      trigger.setAttribute(
+        "aria-expanded",
+        trigger.ariaExpanded === "true" ? "true" : "false"
+      );
+      trigger.id ||= `accordion-trigger-${id}`;
+      if (!isFocusable(trigger)) {
+        trigger.setAttribute("aria-disabled", "true");
+        trigger.setAttribute("tabindex", "-1");
+        trigger.style.setProperty("pointer-events", "none");
+      }
+      trigger.addEventListener("click", this.#onTriggerClick, { signal });
+      trigger.addEventListener("keydown", this.#onTriggerKeyDown, { signal });
+      addTokenToAttribute(content, "aria-labelledby", trigger.id);
+      content.setAttribute("role", "region");
+      content.addEventListener("beforematch", this.#onContentBeforeMatch, {
+        signal
+      });
+    });
+    this.#rootElement.setAttribute("data-accordion-initialized", "");
+  }
+  #onTriggerClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const trigger = event.currentTarget;
+    if (!(trigger instanceof HTMLElement)) {
+      return;
+    }
+    this.#toggle(trigger, trigger.ariaExpanded !== "true");
+  };
+  #onTriggerKeyDown = (event) => {
+    const { key } = event;
+    if (!["Enter", " ", "End", "Home", "ArrowUp", "ArrowDown"].includes(key)) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const focusables = this.#triggerElements.filter(isFocusable);
+    const active = getActiveElement();
+    if (!(active instanceof HTMLElement)) {
+      return;
+    }
+    const currentIndex = focusables.indexOf(active);
+    let newIndex = currentIndex;
+    switch (key) {
+      case "Enter":
+      case " ":
+        active.click();
+        return;
+      case "End":
+        newIndex = -1;
+        break;
+      case "Home":
+        newIndex = 0;
+        break;
+      case "ArrowUp":
+        newIndex = currentIndex - 1;
+        break;
+      case "ArrowDown":
+        newIndex = (currentIndex + 1) % focusables.length;
+        break;
+    }
+    focusables.at(newIndex)?.focus();
+  };
+  #onContentBeforeMatch = (event) => {
+    const content = event.currentTarget;
+    if (!(content instanceof HTMLElement)) {
+      return;
+    }
+    const binding = this.#bindings.get(content);
+    if (!binding) {
+      return;
+    }
+    binding.trigger.ariaExpanded !== "true" && this.#toggle(binding.trigger, true, true);
+  };
+  #toggle(trigger, isOpen, isMatch = false) {
+    if (trigger.ariaExpanded === String(isOpen)) {
+      return;
+    }
+    const name = trigger.getAttribute("data-accordion-name");
+    if (name && isOpen) {
+      const opened = this.#triggerElements.find(
+        (t) => t !== trigger && t.getAttribute("data-accordion-name") === name && t.ariaExpanded === "true"
+      );
+      if (opened) {
+        this.#toggle(opened, false, isMatch);
+      }
+    }
+    trigger.setAttribute(
+      "aria-label",
+      trigger.getAttribute(
+        `data-accordion-${isOpen ? "expanded" : "collapsed"}-label`
+      ) ?? trigger.ariaLabel ?? ""
+    );
+    const binding = this.#bindings.get(trigger);
+    if (!binding) {
+      return;
+    }
+    const { content } = binding;
+    const startSize = content.hidden ? 0 : content.offsetHeight;
+    if (content.hidden) {
+      content.hidden = false;
+    }
+    const endSize = isOpen ? content.scrollHeight : 0;
+    binding.animation?.cancel();
+    content.style.setProperty("overflow", "clip");
+    const { duration, easing } = this.#settings.animation;
+    const animation = content.animate(
+      { blockSize: [`${startSize}px`, `${endSize}px`] },
+      { duration: isMatch ? 0 : duration, easing }
+    );
+    binding.animation = animation;
+    trigger.setAttribute("aria-expanded", String(isOpen));
+    function cleanup() {
+      if (binding?.animation === animation) {
+        binding.animation = null;
+      }
+    }
+    this.#animationController = new AbortController();
+    const { signal } = this.#animationController;
+    animation.addEventListener("cancel", cleanup, { once: true, signal });
+    animation.addEventListener(
+      "finish",
+      () => {
+        this.#onAnimationFinish(content);
+        cleanup();
+      },
+      { once: true, signal }
+    );
+  }
+  #mergeOptions(target, source) {
+    return {
+      animation: { ...target.animation, ...source.animation ?? {} },
+      selector: { ...target.selector, ...source.selector ?? {} }
+    };
+  }
+  #onAnimationFinish(content) {
+    const trigger = this.#bindings.get(content)?.trigger;
+    if (!trigger) {
+      return;
+    }
+    if (trigger.ariaExpanded === "false") {
+      content.setAttribute("hidden", "until-found");
+    }
+    const { style } = content;
+    style.removeProperty("block-size");
+    style.removeProperty("overflow");
+  }
+  async #waitAnimationsFinish() {
+    const promises = [];
+    this.#contentElements.forEach((content) => {
+      const animation = this.#bindings.get(content)?.animation;
+      animation && promises.push(waitAnimationFinish(animation));
+    });
+    await Promise.allSettled(promises);
+  }
+};
+function addTokenToAttribute(element, attribute, token) {
+  const tokens = new Set(
+    element.getAttribute(attribute)?.trim().split(/\s+/) ?? []
+  );
+  tokens.add(token);
+  element.setAttribute(attribute, [...tokens].join(" "));
+}
+function createBinding(trigger, content) {
+  return { trigger, content, animation: null };
+}
+function getActiveElement() {
+  let current = document.activeElement;
+  while (current?.shadowRoot?.activeElement) {
+    current = current.shadowRoot.activeElement;
+  }
+  return current;
+}
+function isFocusable(element) {
+  return !element.hasAttribute("disabled") && element.tabIndex >= 0;
+}
+function waitAnimationFinish(animation) {
+  const { playState } = animation;
+  if (playState === "idle" || playState === "finished") {
+    return Promise.resolve();
+  }
+  return new Promise(
+    (resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
+  );
+}
+/**
+ * Accordion
+ * WAI-ARIA compliant accordion pattern implementation in TypeScript.
+ *
+ * @version 1.2.4
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/accordion}
+ */
+
+module.exports = Accordion;

package/dist/index.d.cts

@@ -0,0 +1,30 @@
+/**
+ * Accordion
+ * WAI-ARIA compliant accordion pattern implementation in TypeScript.
+ *
+ * @version 1.2.4
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/accordion}
+ */
+interface AccordionOptions {
+    readonly animation?: {
+        readonly duration?: number;
+        readonly easing?: string;
+    };
+    readonly selector?: {
+        readonly content?: string;
+        readonly trigger?: string;
+    };
+}
+declare class Accordion {
+    #private;
+    static defaults: AccordionOptions;
+    constructor(root: HTMLElement, options?: AccordionOptions);
+    open(trigger: HTMLElement): void;
+    close(trigger: HTMLElement): void;
+    destroy(force?: boolean): Promise<void>;
+}
+
+export { type AccordionOptions, Accordion as default };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Accordion
+ * WAI-ARIA compliant accordion pattern implementation in TypeScript.
+ *
+ * @version 1.2.4
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/accordion}
+ */
+interface AccordionOptions {
+    readonly animation?: {
+        readonly duration?: number;
+        readonly easing?: string;
+    };
+    readonly selector?: {
+        readonly content?: string;
+        readonly trigger?: string;
+    };
+}
+declare class Accordion {
+    #private;
+    static defaults: AccordionOptions;
+    constructor(root: HTMLElement, options?: AccordionOptions);
+    open(trigger: HTMLElement): void;
+    close(trigger: HTMLElement): void;
+    destroy(force?: boolean): Promise<void>;
+}
+
+export { type AccordionOptions, Accordion as default };

package/dist/index.js

@@ -0,0 +1,307 @@
+// src/index.ts
+var Accordion = class _Accordion {
+  static defaults = {};
+  #rootElement;
+  #defaults = {
+    animation: { duration: 300, easing: "ease" },
+    selector: {
+      content: ":has(> [data-accordion-trigger]) + *",
+      trigger: "[data-accordion-trigger]"
+    }
+  };
+  #settings;
+  #triggerElements;
+  #contentElements;
+  #bindings = /* @__PURE__ */ new WeakMap();
+  #eventController = null;
+  #animationController = null;
+  #isDestroyed = false;
+  constructor(root, options = {}) {
+    if (!(root instanceof HTMLElement)) {
+      throw new TypeError("Invalid root element");
+    }
+    if (root.hasAttribute("data-accordion-initialized")) {
+      console.warn("Already initialized");
+      return;
+    }
+    this.#rootElement = root;
+    this.#defaults = this.#mergeOptions(this.#defaults, _Accordion.defaults);
+    this.#settings = this.#mergeOptions(this.#defaults, options);
+    matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
+    const { trigger, content } = this.#settings.selector;
+    const NOT_NESTED = `:not(:scope ${content} *)`;
+    this.#triggerElements = [
+      ...this.#rootElement.querySelectorAll(
+        `${trigger}${NOT_NESTED}`
+      )
+    ];
+    if (!this.#triggerElements.length) {
+      console.warn("Missing trigger elements");
+      return;
+    }
+    this.#contentElements = [
+      ...this.#rootElement.querySelectorAll(
+        `${content}${NOT_NESTED}`
+      )
+    ];
+    if (!this.#contentElements.length) {
+      console.warn("Missing content elements");
+      return;
+    }
+    this.#triggerElements.forEach((trigger2, i) => {
+      const content2 = this.#contentElements[i];
+      if (!content2) {
+        return;
+      }
+      const binding = createBinding(trigger2, content2);
+      this.#bindings.set(trigger2, binding);
+      this.#bindings.set(content2, binding);
+    });
+    this.#initialize();
+  }
+  open(trigger) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    if (!(trigger instanceof HTMLElement) || !this.#bindings.has(trigger)) {
+      console.warn("Invalid trigger element");
+      return;
+    }
+    this.#toggle(trigger, true);
+  }
+  close(trigger) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    if (!(trigger instanceof HTMLElement) || !this.#bindings.has(trigger)) {
+      console.warn("Invalid trigger element");
+      return;
+    }
+    this.#toggle(trigger, false);
+  }
+  async destroy(force = false) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#eventController?.abort();
+    this.#eventController = null;
+    !force && await this.#waitAnimationsFinish();
+    this.#contentElements.forEach((content) => {
+      force && this.#bindings.get(content)?.animation?.finish();
+      this.#onAnimationFinish(content);
+    });
+    this.#animationController?.abort();
+    this.#animationController = null;
+    this.#triggerElements.length = 0;
+    this.#contentElements.length = 0;
+    this.#rootElement.removeAttribute("data-accordion-initialized");
+  }
+  #initialize() {
+    this.#eventController = new AbortController();
+    const { signal } = this.#eventController;
+    this.#triggerElements.forEach((trigger, i) => {
+      const id = Math.random().toString(36).slice(-8);
+      const content = this.#contentElements[i];
+      if (!content) {
+        return;
+      }
+      content.id ||= `accordion-content-${id}`;
+      addTokenToAttribute(trigger, "aria-controls", content.id);
+      trigger.setAttribute(
+        "aria-expanded",
+        trigger.ariaExpanded === "true" ? "true" : "false"
+      );
+      trigger.id ||= `accordion-trigger-${id}`;
+      if (!isFocusable(trigger)) {
+        trigger.setAttribute("aria-disabled", "true");
+        trigger.setAttribute("tabindex", "-1");
+        trigger.style.setProperty("pointer-events", "none");
+      }
+      trigger.addEventListener("click", this.#onTriggerClick, { signal });
+      trigger.addEventListener("keydown", this.#onTriggerKeyDown, { signal });
+      addTokenToAttribute(content, "aria-labelledby", trigger.id);
+      content.setAttribute("role", "region");
+      content.addEventListener("beforematch", this.#onContentBeforeMatch, {
+        signal
+      });
+    });
+    this.#rootElement.setAttribute("data-accordion-initialized", "");
+  }
+  #onTriggerClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const trigger = event.currentTarget;
+    if (!(trigger instanceof HTMLElement)) {
+      return;
+    }
+    this.#toggle(trigger, trigger.ariaExpanded !== "true");
+  };
+  #onTriggerKeyDown = (event) => {
+    const { key } = event;
+    if (!["Enter", " ", "End", "Home", "ArrowUp", "ArrowDown"].includes(key)) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const focusables = this.#triggerElements.filter(isFocusable);
+    const active = getActiveElement();
+    if (!(active instanceof HTMLElement)) {
+      return;
+    }
+    const currentIndex = focusables.indexOf(active);
+    let newIndex = currentIndex;
+    switch (key) {
+      case "Enter":
+      case " ":
+        active.click();
+        return;
+      case "End":
+        newIndex = -1;
+        break;
+      case "Home":
+        newIndex = 0;
+        break;
+      case "ArrowUp":
+        newIndex = currentIndex - 1;
+        break;
+      case "ArrowDown":
+        newIndex = (currentIndex + 1) % focusables.length;
+        break;
+    }
+    focusables.at(newIndex)?.focus();
+  };
+  #onContentBeforeMatch = (event) => {
+    const content = event.currentTarget;
+    if (!(content instanceof HTMLElement)) {
+      return;
+    }
+    const binding = this.#bindings.get(content);
+    if (!binding) {
+      return;
+    }
+    binding.trigger.ariaExpanded !== "true" && this.#toggle(binding.trigger, true, true);
+  };
+  #toggle(trigger, isOpen, isMatch = false) {
+    if (trigger.ariaExpanded === String(isOpen)) {
+      return;
+    }
+    const name = trigger.getAttribute("data-accordion-name");
+    if (name && isOpen) {
+      const opened = this.#triggerElements.find(
+        (t) => t !== trigger && t.getAttribute("data-accordion-name") === name && t.ariaExpanded === "true"
+      );
+      if (opened) {
+        this.#toggle(opened, false, isMatch);
+      }
+    }
+    trigger.setAttribute(
+      "aria-label",
+      trigger.getAttribute(
+        `data-accordion-${isOpen ? "expanded" : "collapsed"}-label`
+      ) ?? trigger.ariaLabel ?? ""
+    );
+    const binding = this.#bindings.get(trigger);
+    if (!binding) {
+      return;
+    }
+    const { content } = binding;
+    const startSize = content.hidden ? 0 : content.offsetHeight;
+    if (content.hidden) {
+      content.hidden = false;
+    }
+    const endSize = isOpen ? content.scrollHeight : 0;
+    binding.animation?.cancel();
+    content.style.setProperty("overflow", "clip");
+    const { duration, easing } = this.#settings.animation;
+    const animation = content.animate(
+      { blockSize: [`${startSize}px`, `${endSize}px`] },
+      { duration: isMatch ? 0 : duration, easing }
+    );
+    binding.animation = animation;
+    trigger.setAttribute("aria-expanded", String(isOpen));
+    function cleanup() {
+      if (binding?.animation === animation) {
+        binding.animation = null;
+      }
+    }
+    this.#animationController = new AbortController();
+    const { signal } = this.#animationController;
+    animation.addEventListener("cancel", cleanup, { once: true, signal });
+    animation.addEventListener(
+      "finish",
+      () => {
+        this.#onAnimationFinish(content);
+        cleanup();
+      },
+      { once: true, signal }
+    );
+  }
+  #mergeOptions(target, source) {
+    return {
+      animation: { ...target.animation, ...source.animation ?? {} },
+      selector: { ...target.selector, ...source.selector ?? {} }
+    };
+  }
+  #onAnimationFinish(content) {
+    const trigger = this.#bindings.get(content)?.trigger;
+    if (!trigger) {
+      return;
+    }
+    if (trigger.ariaExpanded === "false") {
+      content.setAttribute("hidden", "until-found");
+    }
+    const { style } = content;
+    style.removeProperty("block-size");
+    style.removeProperty("overflow");
+  }
+  async #waitAnimationsFinish() {
+    const promises = [];
+    this.#contentElements.forEach((content) => {
+      const animation = this.#bindings.get(content)?.animation;
+      animation && promises.push(waitAnimationFinish(animation));
+    });
+    await Promise.allSettled(promises);
+  }
+};
+function addTokenToAttribute(element, attribute, token) {
+  const tokens = new Set(
+    element.getAttribute(attribute)?.trim().split(/\s+/) ?? []
+  );
+  tokens.add(token);
+  element.setAttribute(attribute, [...tokens].join(" "));
+}
+function createBinding(trigger, content) {
+  return { trigger, content, animation: null };
+}
+function getActiveElement() {
+  let current = document.activeElement;
+  while (current?.shadowRoot?.activeElement) {
+    current = current.shadowRoot.activeElement;
+  }
+  return current;
+}
+function isFocusable(element) {
+  return !element.hasAttribute("disabled") && element.tabIndex >= 0;
+}
+function waitAnimationFinish(animation) {
+  const { playState } = animation;
+  if (playState === "idle" || playState === "finished") {
+    return Promise.resolve();
+  }
+  return new Promise(
+    (resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
+  );
+}
+/**
+ * Accordion
+ * WAI-ARIA compliant accordion pattern implementation in TypeScript.
+ *
+ * @version 1.2.4
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/accordion}
+ */
+
+export { Accordion as default };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@y14e/accordion",
+  "version": "1.2.4",
+  "description": "WAI-ARIA compliant accordion pattern implementation in TypeScript",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build",
+    "lint": "tsc --noEmit"
+  },
+  "keywords": [
+    "a11y",
+    "accessibility",
+    "accordion",
+    "collapsible",
+    "component",
+    "typescript",
+    "utility"
+  ],
+  "author": "Yusuke Kamiyamane",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/y14e/accordion.git"
+  },
+  "bugs": {
+    "url": "https://github.com/y14e/accordion/issues"
+  },
+  "homepage": "https://github.com/y14e/accordion#readme",
+  "devDependencies": {
+    "bun-types": "latest",
+    "tsup": "^8.0.0",
+    "typescript": "^5.6.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}