@y14e/accordion 2.1.1 → 2.1.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.1.1';
+import { Accordion } from 'https://esm.sh/@y14e/accordion@2.1.3';
 // or
-import { Accordion } from 'https://cdn.jsdelivr.net/npm/@y14e/accordion@2.1.1/+esm';
+import { Accordion } from 'https://cdn.jsdelivr.net/npm/@y14e/accordion@2.1.3/+esm';
 // or
-import { Accordion } from 'https://esm.unpkg.com/@y14e/accordion@2.1.1';
+import { Accordion } from 'https://esm.unpkg.com/@y14e/accordion@2.1.3';
 ```
 
 ## Usage

package/dist/index.bundle.cjs

@@ -207,31 +207,25 @@ function normalizeRadioGroup(elements) {
       map = /* @__PURE__ */ new Map();
     }
     const root = element.getRootNode();
-    let groups = map.get(root);
+    const groups = map.get(root) ?? map.set(root, /* @__PURE__ */ new Map()).get(root);
     if (!groups) {
-      groups = /* @__PURE__ */ new Map();
-      map.set(root, groups);
-    }
-    let group = groups.get(element.form);
-    if (!group) {
-      group = /* @__PURE__ */ new Map();
-      groups.set(element.form, group);
+      continue;
     }
-    let radios = group.get(element.name);
+    const { form, name } = element;
+    const radios = groups.get(form) ?? groups.set(form, /* @__PURE__ */ new Map()).get(form);
     if (!radios) {
-      radios = [];
-      group.set(element.name, radios);
+      continue;
     }
-    radios.push(element);
+    (radios.get(name) ?? radios.set(name, []).get(name))?.push(element);
   }
   if (!map) {
     return elements;
   }
   const placeholder = /* @__PURE__ */ new Set();
-  for (const groups of map.values()) {
-    for (const group of groups.values()) {
-      for (const radios of group.values()) {
-        const radio = radios.find((r) => r.checked) ?? radios[0];
+  for (const v of map.values()) {
+    for (const w of v.values()) {
+      for (const x of w.values()) {
+        const radio = x.find((r) => r.checked) ?? x[0];
         radio && placeholder.add(radio);
       }
     }
@@ -407,8 +401,8 @@ function createRovingTabIndex(container, options = {}) {
     return () => {
     };
   }
-  const roving = new RovingTabIndex(container, options);
-  return () => roving.destroy();
+  const rovingTabIndex = new RovingTabIndex(container, options);
+  return () => rovingTabIndex.destroy();
 }
 var RovingTabIndex = class _RovingTabIndex {
   static #initialized = /* @__PURE__ */ new Set();
@@ -467,18 +461,19 @@ var RovingTabIndex = class _RovingTabIndex {
     if (!(event instanceof KeyboardEvent)) {
       return;
     }
+    const { direction, typeahead, wrap = false } = this.#settings;
+    const isGrid = direction === "grid";
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
-    if (altKey || ctrlKey || metaKey || shiftKey) {
+    if (!(isGrid && ["End", "Home"].includes(key)) && ctrlKey || altKey || metaKey || shiftKey) {
       return;
     }
-    const { direction, typeahead, wrap } = this.#settings;
     const isBoth = direction === "both";
     const isHorizontal = direction === "horizontal";
     if (![
       "End",
       "Home",
-      ...isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
-      ...isBoth ? ["ArrowRight", "ArrowDown"] : [`Arrow${isHorizontal ? "Right" : "Down"}`]
+      ...isGrid || isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
+      ...isGrid || isBoth ? ["ArrowRight", "ArrowDown"] : [`Arrow${isHorizontal ? "Right" : "Down"}`]
     ].includes(key)) {
       if (!typeahead || !/^\S$/i.test(key) || !this.#focusablesByFirstChar.has(key.toUpperCase())) {
         return;
@@ -497,39 +492,48 @@ var RovingTabIndex = class _RovingTabIndex {
     event.preventDefault();
     let newIndex;
     const activeIndex = candidates.indexOf(active);
-    let focusables = candidates;
+    let target = candidates;
     switch (key) {
       case "End":
-        newIndex = -1;
-        break;
-      case "Home":
-        newIndex = 0;
-        break;
-      case "ArrowLeft":
-      case "ArrowUp": {
-        const rawIndex = activeIndex - 1;
-        newIndex = wrap ? rawIndex : Math.max(rawIndex, 0);
+      case "Home": {
+        const rawIndex = key === "End" ? -1 : 0;
+        if (isGrid && !ctrlKey) {
+          const cell = this.#getCellsOfActiveRow().at(rawIndex);
+          newIndex = cell ? candidates.indexOf(cell) : activeIndex;
+        } else {
+          newIndex = rawIndex;
+        }
         break;
       }
+      case "ArrowLeft":
+      case "ArrowUp":
       case "ArrowRight":
       case "ArrowDown": {
-        const rawIndex = activeIndex + 1;
-        const length = focusables.length;
-        newIndex = wrap ? rawIndex % length : Math.min(rawIndex, length - 1);
+        if (["ArrowUp", "ArrowDown"].includes(key) && isGrid) {
+          const cell = this.#getNextCell(key, wrap);
+          newIndex = cell ? candidates.indexOf(cell) : activeIndex;
+        } else {
+          if (isGrid) {
+            target = this.#getCellsOfActiveRow();
+          }
+          const isPrevious = ["ArrowLeft", "ArrowUp"].includes(key);
+          const rawIndex = (isGrid ? target.indexOf(active) : activeIndex) + (isPrevious ? -1 : 1);
+          newIndex = isPrevious ? wrap ? rawIndex : Math.max(rawIndex, 0) : wrap ? rawIndex % target.length : Math.min(rawIndex, target.length - 1);
+        }
         break;
       }
       default: {
         const focusablesByFirstChar = new Set(
           this.#focusablesByFirstChar.get(key.toUpperCase()) ?? []
         );
-        focusables = candidates.filter((c) => focusablesByFirstChar.has(c));
-        const afterIndex = focusables.findIndex(
+        target = candidates.filter((c) => focusablesByFirstChar.has(c));
+        const afterIndex = target.findIndex(
           (f) => candidates.indexOf(f) > activeIndex
         );
         newIndex = afterIndex >= 0 ? afterIndex : 0;
       }
     }
-    const focusable = focusables.at(newIndex);
+    const focusable = target.at(newIndex);
     focusable && focusElement(focusable);
   };
   #update(active) {
@@ -599,6 +603,24 @@ var RovingTabIndex = class _RovingTabIndex {
     const { selector } = this.#settings;
     return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
   }
+  #getCellCoords(cell) {
+    const { height, left, top, width } = cell.getBoundingClientRect();
+    return {
+      x: left + width / 2,
+      y: top + height / 2
+    };
+  }
+  #getCellsOfActiveRow() {
+    const active = getActiveElement();
+    if (!(active instanceof Element)) {
+      return [];
+    }
+    const activeRect = active.getBoundingClientRect();
+    return this.#getFocusables().filter((cell) => {
+      const cellRect = cell.getBoundingClientRect();
+      return cellRect.top < activeRect.bottom && cellRect.bottom > activeRect.top;
+    });
+  }
   #getFocusables() {
     return getFocusables(this.#container, {
       composed: true,
@@ -607,6 +629,50 @@ var RovingTabIndex = class _RovingTabIndex {
       skipVisibilityCheck: true
     });
   }
+  #getNextCell(key, wrap) {
+    const cells = this.#getFocusables();
+    const active = getActiveElement();
+    if (!(active instanceof Element)) {
+      return null;
+    }
+    const activeCoords = this.#getCellCoords(active);
+    let min = Infinity;
+    let result = null;
+    for (const cell of cells) {
+      if (cell === active) {
+        continue;
+      }
+      const cellCoords = this.#getCellCoords(cell);
+      const distances = {
+        x: Math.abs(cellCoords.x - activeCoords.x),
+        y: Math.abs(cellCoords.y - activeCoords.y)
+      };
+      if (key === "ArrowUp" && cellCoords.y < activeCoords.y && distances.x < distances.y || key === "ArrowDown" && cellCoords.y > activeCoords.y && distances.x < distances.y) {
+        const distance = distances.x ** 2 + distances.y ** 2;
+        if (distance < min) {
+          min = distance;
+          result = cell;
+        }
+      }
+    }
+    if (!result && wrap) {
+      let max = -Infinity;
+      for (const cell of cells) {
+        if (cell === active) {
+          continue;
+        }
+        const cellCoords = this.#getCellCoords(cell);
+        if (Math.abs(cellCoords.x - activeCoords.x) < cell.getBoundingClientRect().width / 2) {
+          const distance = key === "ArrowUp" ? cellCoords.y - activeCoords.y : activeCoords.y - cellCoords.y;
+          if (distance > max) {
+            max = distance;
+            result = cell;
+          }
+        }
+      }
+    }
+    return result;
+  }
   #resolveOptions(options) {
     let {
       direction = "both",
@@ -618,7 +684,7 @@ var RovingTabIndex = class _RovingTabIndex {
       wrap = false
     } = options;
     direction = direction.toLowerCase();
-    if (!["both", "horizontal", "vertical"].includes(direction)) {
+    if (!["both", "grid", "horizontal", "vertical"].includes(direction)) {
       console.warn("Invalid direction option. Fallback: 'both'.");
       direction = "both";
     }
@@ -943,21 +1009,24 @@ var Accordion = class _Accordion {
       console.warn(`Invalid collapsible option. Fallback: ${collapsible}.`);
       merged.collapsible = collapsible;
     }
-    const mergedSelector = merged.selector;
-    const defaultSelector = defaults.selector;
-    try {
-      document.querySelector(mergedSelector.content);
-    } catch {
-      const content = defaultSelector.content;
-      console.warn(`Invalid content selector. Fallback: '${content}'.`);
-      mergedSelector.content = content;
-    }
-    try {
-      document.querySelector(mergedSelector.trigger);
-    } catch {
-      const trigger = defaultSelector.trigger;
-      console.warn(`Invalid trigger selector. Fallback: '${trigger}'.`);
-      mergedSelector.trigger = trigger;
+    const selector = merged.selector;
+    function resolveSelector(name, target2, source2) {
+      try {
+        document.querySelector(source2);
+        return source2;
+      } catch {
+        console.warn(
+          `Invalid ${name.replace(/[A-Z]/g, (c) => ` ${c.toLowerCase()}`)} selector. Fallback: '${target2}'.`
+        );
+        return target2;
+      }
+    }
+    for (const name of ["content", "trigger"]) {
+      selector[name] = resolveSelector(
+        name,
+        defaults.selector[name],
+        selector[name]
+      );
     }
     return merged;
   }
@@ -979,7 +1048,7 @@ function waitAnimationFinish(animation) {
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 2.1.0
+ * @version 2.1.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1004,7 +1073,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.33
+   * @version 4.4.2
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1028,7 +1097,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.31
+   * @version 3.3.1
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js

@@ -205,31 +205,25 @@ function normalizeRadioGroup(elements) {
       map = /* @__PURE__ */ new Map();
     }
     const root = element.getRootNode();
-    let groups = map.get(root);
+    const groups = map.get(root) ?? map.set(root, /* @__PURE__ */ new Map()).get(root);
     if (!groups) {
-      groups = /* @__PURE__ */ new Map();
-      map.set(root, groups);
-    }
-    let group = groups.get(element.form);
-    if (!group) {
-      group = /* @__PURE__ */ new Map();
-      groups.set(element.form, group);
+      continue;
     }
-    let radios = group.get(element.name);
+    const { form, name } = element;
+    const radios = groups.get(form) ?? groups.set(form, /* @__PURE__ */ new Map()).get(form);
     if (!radios) {
-      radios = [];
-      group.set(element.name, radios);
+      continue;
     }
-    radios.push(element);
+    (radios.get(name) ?? radios.set(name, []).get(name))?.push(element);
   }
   if (!map) {
     return elements;
   }
   const placeholder = /* @__PURE__ */ new Set();
-  for (const groups of map.values()) {
-    for (const group of groups.values()) {
-      for (const radios of group.values()) {
-        const radio = radios.find((r) => r.checked) ?? radios[0];
+  for (const v of map.values()) {
+    for (const w of v.values()) {
+      for (const x of w.values()) {
+        const radio = x.find((r) => r.checked) ?? x[0];
         radio && placeholder.add(radio);
       }
     }
@@ -405,8 +399,8 @@ function createRovingTabIndex(container, options = {}) {
     return () => {
     };
   }
-  const roving = new RovingTabIndex(container, options);
-  return () => roving.destroy();
+  const rovingTabIndex = new RovingTabIndex(container, options);
+  return () => rovingTabIndex.destroy();
 }
 var RovingTabIndex = class _RovingTabIndex {
   static #initialized = /* @__PURE__ */ new Set();
@@ -465,18 +459,19 @@ var RovingTabIndex = class _RovingTabIndex {
     if (!(event instanceof KeyboardEvent)) {
       return;
     }
+    const { direction, typeahead, wrap = false } = this.#settings;
+    const isGrid = direction === "grid";
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
-    if (altKey || ctrlKey || metaKey || shiftKey) {
+    if (!(isGrid && ["End", "Home"].includes(key)) && ctrlKey || altKey || metaKey || shiftKey) {
       return;
     }
-    const { direction, typeahead, wrap } = this.#settings;
     const isBoth = direction === "both";
     const isHorizontal = direction === "horizontal";
     if (![
       "End",
       "Home",
-      ...isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
-      ...isBoth ? ["ArrowRight", "ArrowDown"] : [`Arrow${isHorizontal ? "Right" : "Down"}`]
+      ...isGrid || isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
+      ...isGrid || isBoth ? ["ArrowRight", "ArrowDown"] : [`Arrow${isHorizontal ? "Right" : "Down"}`]
     ].includes(key)) {
       if (!typeahead || !/^\S$/i.test(key) || !this.#focusablesByFirstChar.has(key.toUpperCase())) {
         return;
@@ -495,39 +490,48 @@ var RovingTabIndex = class _RovingTabIndex {
     event.preventDefault();
     let newIndex;
     const activeIndex = candidates.indexOf(active);
-    let focusables = candidates;
+    let target = candidates;
     switch (key) {
       case "End":
-        newIndex = -1;
-        break;
-      case "Home":
-        newIndex = 0;
-        break;
-      case "ArrowLeft":
-      case "ArrowUp": {
-        const rawIndex = activeIndex - 1;
-        newIndex = wrap ? rawIndex : Math.max(rawIndex, 0);
+      case "Home": {
+        const rawIndex = key === "End" ? -1 : 0;
+        if (isGrid && !ctrlKey) {
+          const cell = this.#getCellsOfActiveRow().at(rawIndex);
+          newIndex = cell ? candidates.indexOf(cell) : activeIndex;
+        } else {
+          newIndex = rawIndex;
+        }
         break;
       }
+      case "ArrowLeft":
+      case "ArrowUp":
       case "ArrowRight":
       case "ArrowDown": {
-        const rawIndex = activeIndex + 1;
-        const length = focusables.length;
-        newIndex = wrap ? rawIndex % length : Math.min(rawIndex, length - 1);
+        if (["ArrowUp", "ArrowDown"].includes(key) && isGrid) {
+          const cell = this.#getNextCell(key, wrap);
+          newIndex = cell ? candidates.indexOf(cell) : activeIndex;
+        } else {
+          if (isGrid) {
+            target = this.#getCellsOfActiveRow();
+          }
+          const isPrevious = ["ArrowLeft", "ArrowUp"].includes(key);
+          const rawIndex = (isGrid ? target.indexOf(active) : activeIndex) + (isPrevious ? -1 : 1);
+          newIndex = isPrevious ? wrap ? rawIndex : Math.max(rawIndex, 0) : wrap ? rawIndex % target.length : Math.min(rawIndex, target.length - 1);
+        }
         break;
       }
       default: {
         const focusablesByFirstChar = new Set(
           this.#focusablesByFirstChar.get(key.toUpperCase()) ?? []
         );
-        focusables = candidates.filter((c) => focusablesByFirstChar.has(c));
-        const afterIndex = focusables.findIndex(
+        target = candidates.filter((c) => focusablesByFirstChar.has(c));
+        const afterIndex = target.findIndex(
           (f) => candidates.indexOf(f) > activeIndex
         );
         newIndex = afterIndex >= 0 ? afterIndex : 0;
       }
     }
-    const focusable = focusables.at(newIndex);
+    const focusable = target.at(newIndex);
     focusable && focusElement(focusable);
   };
   #update(active) {
@@ -597,6 +601,24 @@ var RovingTabIndex = class _RovingTabIndex {
     const { selector } = this.#settings;
     return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
   }
+  #getCellCoords(cell) {
+    const { height, left, top, width } = cell.getBoundingClientRect();
+    return {
+      x: left + width / 2,
+      y: top + height / 2
+    };
+  }
+  #getCellsOfActiveRow() {
+    const active = getActiveElement();
+    if (!(active instanceof Element)) {
+      return [];
+    }
+    const activeRect = active.getBoundingClientRect();
+    return this.#getFocusables().filter((cell) => {
+      const cellRect = cell.getBoundingClientRect();
+      return cellRect.top < activeRect.bottom && cellRect.bottom > activeRect.top;
+    });
+  }
   #getFocusables() {
     return getFocusables(this.#container, {
       composed: true,
@@ -605,6 +627,50 @@ var RovingTabIndex = class _RovingTabIndex {
       skipVisibilityCheck: true
     });
   }
+  #getNextCell(key, wrap) {
+    const cells = this.#getFocusables();
+    const active = getActiveElement();
+    if (!(active instanceof Element)) {
+      return null;
+    }
+    const activeCoords = this.#getCellCoords(active);
+    let min = Infinity;
+    let result = null;
+    for (const cell of cells) {
+      if (cell === active) {
+        continue;
+      }
+      const cellCoords = this.#getCellCoords(cell);
+      const distances = {
+        x: Math.abs(cellCoords.x - activeCoords.x),
+        y: Math.abs(cellCoords.y - activeCoords.y)
+      };
+      if (key === "ArrowUp" && cellCoords.y < activeCoords.y && distances.x < distances.y || key === "ArrowDown" && cellCoords.y > activeCoords.y && distances.x < distances.y) {
+        const distance = distances.x ** 2 + distances.y ** 2;
+        if (distance < min) {
+          min = distance;
+          result = cell;
+        }
+      }
+    }
+    if (!result && wrap) {
+      let max = -Infinity;
+      for (const cell of cells) {
+        if (cell === active) {
+          continue;
+        }
+        const cellCoords = this.#getCellCoords(cell);
+        if (Math.abs(cellCoords.x - activeCoords.x) < cell.getBoundingClientRect().width / 2) {
+          const distance = key === "ArrowUp" ? cellCoords.y - activeCoords.y : activeCoords.y - cellCoords.y;
+          if (distance > max) {
+            max = distance;
+            result = cell;
+          }
+        }
+      }
+    }
+    return result;
+  }
   #resolveOptions(options) {
     let {
       direction = "both",
@@ -616,7 +682,7 @@ var RovingTabIndex = class _RovingTabIndex {
       wrap = false
     } = options;
     direction = direction.toLowerCase();
-    if (!["both", "horizontal", "vertical"].includes(direction)) {
+    if (!["both", "grid", "horizontal", "vertical"].includes(direction)) {
       console.warn("Invalid direction option. Fallback: 'both'.");
       direction = "both";
     }
@@ -941,21 +1007,24 @@ var Accordion = class _Accordion {
       console.warn(`Invalid collapsible option. Fallback: ${collapsible}.`);
       merged.collapsible = collapsible;
     }
-    const mergedSelector = merged.selector;
-    const defaultSelector = defaults.selector;
-    try {
-      document.querySelector(mergedSelector.content);
-    } catch {
-      const content = defaultSelector.content;
-      console.warn(`Invalid content selector. Fallback: '${content}'.`);
-      mergedSelector.content = content;
-    }
-    try {
-      document.querySelector(mergedSelector.trigger);
-    } catch {
-      const trigger = defaultSelector.trigger;
-      console.warn(`Invalid trigger selector. Fallback: '${trigger}'.`);
-      mergedSelector.trigger = trigger;
+    const selector = merged.selector;
+    function resolveSelector(name, target2, source2) {
+      try {
+        document.querySelector(source2);
+        return source2;
+      } catch {
+        console.warn(
+          `Invalid ${name.replace(/[A-Z]/g, (c) => ` ${c.toLowerCase()}`)} selector. Fallback: '${target2}'.`
+        );
+        return target2;
+      }
+    }
+    for (const name of ["content", "trigger"]) {
+      selector[name] = resolveSelector(
+        name,
+        defaults.selector[name],
+        selector[name]
+      );
     }
     return merged;
   }
@@ -977,7 +1046,7 @@ function waitAnimationFinish(animation) {
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 2.1.0
+ * @version 2.1.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1002,7 +1071,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.33
+   * @version 4.4.2
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1026,7 +1095,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.31
+   * @version 3.3.1
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs

@@ -285,21 +285,24 @@ var Accordion = class _Accordion {
       console.warn(`Invalid collapsible option. Fallback: ${collapsible}.`);
       merged.collapsible = collapsible;
     }
-    const mergedSelector = merged.selector;
-    const defaultSelector = defaults.selector;
-    try {
-      document.querySelector(mergedSelector.content);
-    } catch {
-      const content = defaultSelector.content;
-      console.warn(`Invalid content selector. Fallback: '${content}'.`);
-      mergedSelector.content = content;
+    const selector = merged.selector;
+    function resolveSelector(name, target2, source2) {
+      try {
+        document.querySelector(source2);
+        return source2;
+      } catch {
+        console.warn(
+          `Invalid ${name.replace(/[A-Z]/g, (c) => ` ${c.toLowerCase()}`)} selector. Fallback: '${target2}'.`
+        );
+        return target2;
+      }
     }
-    try {
-      document.querySelector(mergedSelector.trigger);
-    } catch {
-      const trigger = defaultSelector.trigger;
-      console.warn(`Invalid trigger selector. Fallback: '${trigger}'.`);
-      mergedSelector.trigger = trigger;
+    for (const name of ["content", "trigger"]) {
+      selector[name] = resolveSelector(
+        name,
+        defaults.selector[name],
+        selector[name]
+      );
     }
     return merged;
   }
@@ -321,7 +324,7 @@ function waitAnimationFinish(animation) {
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 2.1.0
+ * @version 2.1.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -2,7 +2,7 @@
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 2.1.0
+ * @version 2.1.3
  * @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 2.1.0
+ * @version 2.1.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -283,21 +283,24 @@ var Accordion = class _Accordion {
       console.warn(`Invalid collapsible option. Fallback: ${collapsible}.`);
       merged.collapsible = collapsible;
     }
-    const mergedSelector = merged.selector;
-    const defaultSelector = defaults.selector;
-    try {
-      document.querySelector(mergedSelector.content);
-    } catch {
-      const content = defaultSelector.content;
-      console.warn(`Invalid content selector. Fallback: '${content}'.`);
-      mergedSelector.content = content;
+    const selector = merged.selector;
+    function resolveSelector(name, target2, source2) {
+      try {
+        document.querySelector(source2);
+        return source2;
+      } catch {
+        console.warn(
+          `Invalid ${name.replace(/[A-Z]/g, (c) => ` ${c.toLowerCase()}`)} selector. Fallback: '${target2}'.`
+        );
+        return target2;
+      }
     }
-    try {
-      document.querySelector(mergedSelector.trigger);
-    } catch {
-      const trigger = defaultSelector.trigger;
-      console.warn(`Invalid trigger selector. Fallback: '${trigger}'.`);
-      mergedSelector.trigger = trigger;
+    for (const name of ["content", "trigger"]) {
+      selector[name] = resolveSelector(
+        name,
+        defaults.selector[name],
+        selector[name]
+      );
     }
     return merged;
   }
@@ -319,7 +322,7 @@ function waitAnimationFinish(animation) {
  * Accordion
  * WAI-ARIA compliant accordion pattern implementation in TypeScript.
  *
- * @version 2.1.0
+ * @version 2.1.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/accordion",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "WAI-ARIA compliant accordion pattern implementation in TypeScript",
   "keywords": [
     "a11y",
@@ -56,6 +56,6 @@
   "dependencies": {
     "@y14e/attribute-utils": "^2.0.12",
     "@y14e/button": "^1.0.8",
-    "@y14e/roving-tabindex": "^3.1.31"
+    "@y14e/roving-tabindex": "^3.3.1"
   }
 }