@y14e/accordion 2.0.1 → 2.0.3

package/README.md

@@ -13,11 +13,11 @@ npm i @y14e/accordion
 import Accordion from '@y14e/accordion';
 
 // CDNs
-import Accordion from 'https://esm.sh/@y14e/accordion@2.0.1';
+import Accordion from 'https://esm.sh/@y14e/accordion@2.0.3';
 // or
-import Accordion from 'https://cdn.jsdelivr.net/npm/@y14e/accordion@2.0.1/+esm';
+import Accordion from 'https://cdn.jsdelivr.net/npm/@y14e/accordion@2.0.3/+esm';
 // or
-import Accordion from 'https://esm.unpkg.com/@y14e/accordion@2.0.1';
+import Accordion from 'https://esm.unpkg.com/@y14e/accordion@2.0.3';
 ```
 
 ## Usage
@@ -35,13 +35,14 @@ new Accordion(root, options);
 
 ```ts
 interface AccordionOptions {
-  animation?: {
-    duration?: number; // ms (default: 300)
-    easing?: string;   // <easing-function> (default: 'ease')
+  animation: {
+    duration: number;   // ms (default: 300)
+    easing: string;     // <easing-function> (default: 'ease')
   };
-  selector?: {
-    content?: string;  // default: '[data-accordion-content]'
-    trigger?: string;  // default: '[data-accordion-trigger]'
+  collapsible: boolean; // default: true
+  selector: {
+    content: string;    // default: '[data-accordion-content]'
+    trigger: string;    // default: '[data-accordion-trigger]'
   };
 }
 ```

package/dist/index.bundle.cjs

@@ -4,12 +4,12 @@
 var DEFAULT_PARSER = (value) => value.split(/\s+/);
 var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
 function addTokenToAttribute(element, attribute, token, options = {}) {
+  const value = element.getAttribute(attribute)?.trim();
   const {
     caseInsensitive = false,
     parse = DEFAULT_PARSER,
     serialize = DEFAULT_SERIALIZER
   } = options;
-  const value = element.getAttribute(attribute)?.trim();
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
@@ -421,29 +421,32 @@ var RovingTabIndex = class _RovingTabIndex {
   }
   #initialize() {
     this.#update(getActiveElement());
-    if (!(this.#container instanceof HTMLElement)) {
-      return;
-    }
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, { signal });
-    this.#settings.noMemory && document.addEventListener("focusout", this.#onFocusOut, { signal });
+    this.#container.addEventListener("focusin", this.#onFocusIn, { signal });
+    this.#settings.noMemory && this.#container.addEventListener("focusout", this.#onFocusOut, {
+      signal
+    });
     this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
   }
   #onFocusIn = (event) => {
-    const { target } = event;
-    if (!(target instanceof Element)) {
+    if (!(event instanceof FocusEvent)) {
       return;
     }
-    const isFocusable2 = this.#focusables.has(target);
-    this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
+    const { target } = event;
+    target instanceof Element && this.#update(target);
   };
   #onFocusOut = (event) => {
-    if (!event.relatedTarget) {
-      this.#update();
+    if (!(event instanceof FocusEvent)) {
+      return;
     }
+    const target = event.relatedTarget;
+    (!(target instanceof Element) || !this.#focusables.has(target)) && this.#update();
   };
   #onKeyDown = (event) => {
+    if (!(event instanceof KeyboardEvent)) {
+      return;
+    }
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
@@ -462,7 +465,7 @@ var RovingTabIndex = class _RovingTabIndex {
       }
     }
     const active = getActiveElement();
-    if (!(active instanceof HTMLElement)) {
+    if (!(active instanceof Element)) {
       return;
     }
     const current = this.#getFocusables();
@@ -582,6 +585,7 @@ var Accordion = class _Accordion {
   #rootElement;
   #defaults = {
     animation: { duration: 300, easing: "ease" },
+    collapsible: true,
     selector: {
       content: "[data-accordion-content]",
       trigger: "[data-accordion-trigger]"
@@ -759,16 +763,19 @@ var Accordion = class _Accordion {
     }
     binding.trigger.ariaExpanded === "false" && this.#toggle(binding.trigger, true, true);
   };
-  #toggle(trigger, isExpand, isMatch = false) {
+  #toggle(trigger, isExpand, isMatch = false, isProgrammatic = false) {
     if (trigger.ariaExpanded === String(isExpand)) {
       return;
     }
+    if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((trigger2) => trigger2.ariaExpanded === "true").length <= 1) {
+      return;
+    }
     const name = trigger.getAttribute("data-accordion-name");
     if (name && isExpand) {
       const expanded = this.#triggerElements.find(
         (t) => t !== trigger && t.getAttribute("data-accordion-name") === name && t.ariaExpanded === "true"
       );
-      expanded && this.#toggle(expanded, false, isMatch);
+      expanded && this.#toggle(expanded, false, isMatch, true);
     }
     trigger.setAttribute(
       "aria-label",
@@ -822,6 +829,8 @@ var Accordion = class _Accordion {
   }
   #mergeOptions(target, source) {
     return {
+      ...target,
+      ...source,
       animation: { ...target.animation, ...source.animation ?? {} },
       selector: { ...target.selector, ...source.selector ?? {} }
     };
@@ -844,7 +853,7 @@ function waitAnimationFinish(animation) {
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 2.0.1
+ * @version 2.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -856,7 +865,7 @@ function waitAnimationFinish(animation) {
   (**
    * Attributes Utils
    *
-   * @version 1.1.2
+   * @version 1.1.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -869,7 +878,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.6
+   * @version 4.3.10
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -893,7 +902,7 @@ power-focusable/dist/index.js:
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 3.1.3
+   * @version 3.1.9
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js

@@ -2,12 +2,12 @@
 var DEFAULT_PARSER = (value) => value.split(/\s+/);
 var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
 function addTokenToAttribute(element, attribute, token, options = {}) {
+  const value = element.getAttribute(attribute)?.trim();
   const {
     caseInsensitive = false,
     parse = DEFAULT_PARSER,
     serialize = DEFAULT_SERIALIZER
   } = options;
-  const value = element.getAttribute(attribute)?.trim();
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
@@ -419,29 +419,32 @@ var RovingTabIndex = class _RovingTabIndex {
   }
   #initialize() {
     this.#update(getActiveElement());
-    if (!(this.#container instanceof HTMLElement)) {
-      return;
-    }
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, { signal });
-    this.#settings.noMemory && document.addEventListener("focusout", this.#onFocusOut, { signal });
+    this.#container.addEventListener("focusin", this.#onFocusIn, { signal });
+    this.#settings.noMemory && this.#container.addEventListener("focusout", this.#onFocusOut, {
+      signal
+    });
     this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
   }
   #onFocusIn = (event) => {
-    const { target } = event;
-    if (!(target instanceof Element)) {
+    if (!(event instanceof FocusEvent)) {
       return;
     }
-    const isFocusable2 = this.#focusables.has(target);
-    this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
+    const { target } = event;
+    target instanceof Element && this.#update(target);
   };
   #onFocusOut = (event) => {
-    if (!event.relatedTarget) {
-      this.#update();
+    if (!(event instanceof FocusEvent)) {
+      return;
     }
+    const target = event.relatedTarget;
+    (!(target instanceof Element) || !this.#focusables.has(target)) && this.#update();
   };
   #onKeyDown = (event) => {
+    if (!(event instanceof KeyboardEvent)) {
+      return;
+    }
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
@@ -460,7 +463,7 @@ var RovingTabIndex = class _RovingTabIndex {
       }
     }
     const active = getActiveElement();
-    if (!(active instanceof HTMLElement)) {
+    if (!(active instanceof Element)) {
       return;
     }
     const current = this.#getFocusables();
@@ -580,6 +583,7 @@ var Accordion = class _Accordion {
   #rootElement;
   #defaults = {
     animation: { duration: 300, easing: "ease" },
+    collapsible: true,
     selector: {
       content: "[data-accordion-content]",
       trigger: "[data-accordion-trigger]"
@@ -757,16 +761,19 @@ var Accordion = class _Accordion {
     }
     binding.trigger.ariaExpanded === "false" && this.#toggle(binding.trigger, true, true);
   };
-  #toggle(trigger, isExpand, isMatch = false) {
+  #toggle(trigger, isExpand, isMatch = false, isProgrammatic = false) {
     if (trigger.ariaExpanded === String(isExpand)) {
       return;
     }
+    if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((trigger2) => trigger2.ariaExpanded === "true").length <= 1) {
+      return;
+    }
     const name = trigger.getAttribute("data-accordion-name");
     if (name && isExpand) {
       const expanded = this.#triggerElements.find(
         (t) => t !== trigger && t.getAttribute("data-accordion-name") === name && t.ariaExpanded === "true"
       );
-      expanded && this.#toggle(expanded, false, isMatch);
+      expanded && this.#toggle(expanded, false, isMatch, true);
     }
     trigger.setAttribute(
       "aria-label",
@@ -820,6 +827,8 @@ var Accordion = class _Accordion {
   }
   #mergeOptions(target, source) {
     return {
+      ...target,
+      ...source,
       animation: { ...target.animation, ...source.animation ?? {} },
       selector: { ...target.selector, ...source.selector ?? {} }
     };
@@ -842,7 +851,7 @@ function waitAnimationFinish(animation) {
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 2.0.1
+ * @version 2.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -854,7 +863,7 @@ function waitAnimationFinish(animation) {
   (**
    * Attributes Utils
    *
-   * @version 1.1.2
+   * @version 1.1.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -867,7 +876,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.6
+   * @version 4.3.10
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -891,7 +900,7 @@ power-focusable/dist/index.js:
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 3.1.3
+   * @version 3.1.9
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs

@@ -14,6 +14,7 @@ var Accordion = class _Accordion {
   #rootElement;
   #defaults = {
     animation: { duration: 300, easing: "ease" },
+    collapsible: true,
     selector: {
       content: "[data-accordion-content]",
       trigger: "[data-accordion-trigger]"
@@ -191,16 +192,19 @@ var Accordion = class _Accordion {
     }
     binding.trigger.ariaExpanded === "false" && this.#toggle(binding.trigger, true, true);
   };
-  #toggle(trigger, isExpand, isMatch = false) {
+  #toggle(trigger, isExpand, isMatch = false, isProgrammatic = false) {
     if (trigger.ariaExpanded === String(isExpand)) {
       return;
     }
+    if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((trigger2) => trigger2.ariaExpanded === "true").length <= 1) {
+      return;
+    }
     const name = trigger.getAttribute("data-accordion-name");
     if (name && isExpand) {
       const expanded = this.#triggerElements.find(
         (t) => t !== trigger && t.getAttribute("data-accordion-name") === name && t.ariaExpanded === "true"
       );
-      expanded && this.#toggle(expanded, false, isMatch);
+      expanded && this.#toggle(expanded, false, isMatch, true);
     }
     trigger.setAttribute(
       "aria-label",
@@ -254,6 +258,8 @@ var Accordion = class _Accordion {
   }
   #mergeOptions(target, source) {
     return {
+      ...target,
+      ...source,
       animation: { ...target.animation, ...source.animation ?? {} },
       selector: { ...target.selector, ...source.selector ?? {} }
     };
@@ -276,7 +282,7 @@ function waitAnimationFinish(animation) {
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 2.0.1
+ * @version 2.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -2,26 +2,27 @@
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 2.0.1
+ * @version 2.0.3
  * @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;
+    animation: {
+        duration: number;
+        easing: string;
     };
-    readonly selector?: {
-        readonly content?: string;
-        readonly trigger?: string;
+    collapsible: boolean;
+    selector: {
+        content: string;
+        trigger: string;
     };
 }
 declare class Accordion {
     #private;
-    static defaults: AccordionOptions;
-    constructor(root: HTMLElement, options?: AccordionOptions);
+    static defaults: Partial<AccordionOptions>;
+    constructor(root: HTMLElement, options?: Partial<AccordionOptions>);
     collapse(trigger: HTMLElement): void;
     destroy(force?: boolean): Promise<void>;
     expand(trigger: HTMLElement): void;

package/dist/index.d.ts

@@ -2,26 +2,27 @@
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 2.0.1
+ * @version 2.0.3
  * @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;
+    animation: {
+        duration: number;
+        easing: string;
     };
-    readonly selector?: {
-        readonly content?: string;
-        readonly trigger?: string;
+    collapsible: boolean;
+    selector: {
+        content: string;
+        trigger: string;
     };
 }
 declare class Accordion {
     #private;
-    static defaults: AccordionOptions;
-    constructor(root: HTMLElement, options?: AccordionOptions);
+    static defaults: Partial<AccordionOptions>;
+    constructor(root: HTMLElement, options?: Partial<AccordionOptions>);
     collapse(trigger: HTMLElement): void;
     destroy(force?: boolean): Promise<void>;
     expand(trigger: HTMLElement): void;

package/dist/index.js

@@ -8,6 +8,7 @@ var Accordion = class _Accordion {
   #rootElement;
   #defaults = {
     animation: { duration: 300, easing: "ease" },
+    collapsible: true,
     selector: {
       content: "[data-accordion-content]",
       trigger: "[data-accordion-trigger]"
@@ -185,16 +186,19 @@ var Accordion = class _Accordion {
     }
     binding.trigger.ariaExpanded === "false" && this.#toggle(binding.trigger, true, true);
   };
-  #toggle(trigger, isExpand, isMatch = false) {
+  #toggle(trigger, isExpand, isMatch = false, isProgrammatic = false) {
     if (trigger.ariaExpanded === String(isExpand)) {
       return;
     }
+    if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((trigger2) => trigger2.ariaExpanded === "true").length <= 1) {
+      return;
+    }
     const name = trigger.getAttribute("data-accordion-name");
     if (name && isExpand) {
       const expanded = this.#triggerElements.find(
         (t) => t !== trigger && t.getAttribute("data-accordion-name") === name && t.ariaExpanded === "true"
       );
-      expanded && this.#toggle(expanded, false, isMatch);
+      expanded && this.#toggle(expanded, false, isMatch, true);
     }
     trigger.setAttribute(
       "aria-label",
@@ -248,6 +252,8 @@ var Accordion = class _Accordion {
   }
   #mergeOptions(target, source) {
     return {
+      ...target,
+      ...source,
       animation: { ...target.animation, ...source.animation ?? {} },
       selector: { ...target.selector, ...source.selector ?? {} }
     };
@@ -270,7 +276,7 @@ function waitAnimationFinish(animation) {
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 2.0.1
+ * @version 2.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/accordion",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "WAI-ARIA compliant accordion pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -45,15 +45,14 @@
   "devDependencies": {
     "bun-types": "latest",
     "tsup": "^8.0.0",
-    "typescript": "^5.6.0",
-    "utility-types": "^3.11.0"
+    "typescript": "^5.6.0"
   },
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
-    "@y14e/attributes-utils": "^1.1.2",
+    "@y14e/attributes-utils": "^1.1.3",
     "@y14e/button": "^1.0.6",
-    "@y14e/roving-tabindex": "^3.1.3"
+    "@y14e/roving-tabindex": "^3.1.9"
   }
 }