@y14e/tabs 2.0.3 → 2.0.5

package/README.md

@@ -10,14 +10,14 @@ npm i @y14e/tabs
 
 ```ts
 // npm
-import Tabs from '@y14e/tabs@2.0.3';
+import Tabs from '@y14e/tabs';
 
 // CDNs
-import Tabs from 'https://esm.sh/@y14e/tabs@2.0.3';
+import Tabs from 'https://esm.sh/@y14e/tabs@2.0.5';
 // or
-import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.3/+esm';
+import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.5/+esm';
 // or
-import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.3';
+import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.5';
 ```
 
 ## Usage

package/dist/index.bundle.cjs

@@ -343,8 +343,14 @@ function createRovingTabIndex(container, options = {}) {
     return () => {
     };
   }
-  const roving = new RovingTabIndex(container, options);
-  return () => roving.destroy();
+  try {
+    const roving = new RovingTabIndex(container, options);
+    return () => roving.destroy();
+  } catch (error) {
+    error instanceof Error && console.warn(error.message || error);
+    return () => {
+    };
+  }
 }
 var RovingTabIndex = class _RovingTabIndex {
   static #initialized = /* @__PURE__ */ new Set();
@@ -420,28 +426,28 @@ var RovingTabIndex = class _RovingTabIndex {
     this.#focusablesByFirstChar.clear();
   }
   #initialize() {
-    this.#update(document.activeElement);
+    this.#update(getActiveElement());
     if (!(this.#container instanceof HTMLElement)) {
       return;
     }
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    this.#container.addEventListener("focusin", this.#onFocusIn, {
-      capture: true,
-      signal
-    });
-    this.#container.addEventListener("keydown", this.#onKeyDown, {
-      capture: true,
-      signal
-    });
+    document.addEventListener("focusin", this.#onFocusIn, { signal });
+    this.#settings.noMemory && document.addEventListener("focusout", this.#onFocusOut, { signal });
+    this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
   }
   #onFocusIn = (event) => {
     const { target } = event;
     if (!(target instanceof Element)) {
       return;
     }
-    const isFocusable3 = this.#focusables.has(target);
-    this.#settings.noMemory && !isFocusable3 ? this.#update(null) : isFocusable3 && this.#update(target);
+    const isFocusable2 = this.#focusables.has(target);
+    this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
+  };
+  #onFocusOut = (event) => {
+    if (!event.relatedTarget) {
+      this.#update();
+    }
   };
   #onKeyDown = (event) => {
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
@@ -684,7 +690,7 @@ var Tabs = class _Tabs {
       if (!panel) {
         return;
       }
-      const binding = createBinding(tabsByIndex, panel);
+      const binding = this.#createBinding(tabsByIndex, panel);
       this.#bindings.set(tab, binding);
       i < length && this.#bindings.set(panel, binding);
     });
@@ -731,14 +737,14 @@ var Tabs = class _Tabs {
       }
       style2.setProperty("inline-size", "100%");
       style2.setProperty("position", "absolute");
-      p === panel && !hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
+      p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
     });
     this.#panelElements.forEach((p, i) => {
       if (p === panel) {
         p.removeAttribute("hidden");
       } else {
         const tab2 = this.#tabElements[i];
-        tab2 && p.setAttribute("hidden", isFocusable2(tab2) ? "until-found" : "");
+        tab2 && p.setAttribute("hidden", this.#isFocusable(tab2) ? "until-found" : "");
       }
     });
     this.#animation?.cancel();
@@ -771,7 +777,7 @@ var Tabs = class _Tabs {
       "finish",
       () => {
         if (this.#animation === animation) {
-          this.#onAnimationFinish();
+          this.#onContentAnimationFinish();
           cleanup();
         }
       },
@@ -848,7 +854,7 @@ var Tabs = class _Tabs {
     this.#panelElements.forEach((panel) => {
       this.#bindings.get(panel)?.animation?.cancel();
     });
-    this.#onAnimationFinish();
+    this.#onContentAnimationFinish();
     this.#animationController?.abort();
     this.#animationController = null;
     restoreAttributes([
@@ -906,7 +912,7 @@ var Tabs = class _Tabs {
         tab.id ||= `tabs-tab-${id}`;
       }
       tab.setAttribute("role", "tab");
-      !isFocusable2(tab) && tab.style.setProperty("pointer-events", "none");
+      !this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
       addTokenToAttribute(panel, "aria-labelledby", tab.id);
       tab.addEventListener("click", this.#onTabClick, { signal });
       tab.addEventListener("focus", this.#onTabFocus, { signal });
@@ -921,7 +927,7 @@ var Tabs = class _Tabs {
     });
     this.#panelElements.forEach((panel) => {
       panel.setAttribute("role", "tabpanel");
-      !panel.hasAttribute("hidden") && !hasFocusable(panel) && panel.setAttribute("tabindex", "0");
+      !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
       panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
         signal
       });
@@ -957,6 +963,23 @@ var Tabs = class _Tabs {
     !this.#settings.manual && tab.click();
     this.#isAvoidedTab(tab) && tab.blur();
   };
+  #onContentAnimationFinish() {
+    ["block-size", "overflow", "position"].forEach((name) => {
+      this.#contentElement?.style.removeProperty(name);
+    });
+    this.#panelElements.forEach((panel) => {
+      [
+        "content-visibility",
+        "display",
+        "inline-size",
+        "opacity",
+        "position"
+      ].forEach((name) => {
+        panel.style.removeProperty(name);
+      });
+    });
+    this.#rootElement.removeAttribute("data-tabs-animating");
+  }
   #onPanelBeforeMatch = (event) => {
     const panel = event.currentTarget;
     if (!(panel instanceof HTMLElement)) {
@@ -965,6 +988,16 @@ var Tabs = class _Tabs {
     const tab = this.#bindings.get(panel)?.tabs[0];
     tab && this.activate(tab, true);
   };
+  #createBinding(tabs, panel) {
+    return { tabs, panel, animation: null };
+  }
+  #hasFocusable(container) {
+    return !![
+      ...container.querySelectorAll(
+        `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`
+      )
+    ].filter((element) => element.checkVisibility()).length;
+  }
   #isAvoidedTab(tab) {
     const binding = this.#bindings.get(tab);
     if (!binding) {
@@ -972,6 +1005,9 @@ var Tabs = class _Tabs {
     }
     return this.#settings.avoidDuplicates && binding.tabs.indexOf(tab) > 0;
   }
+  #isFocusable(element) {
+    return !element.hasAttribute("disabled");
+  }
   #mergeOptions(target, source) {
     return {
       ...target,
@@ -992,23 +1028,6 @@ var Tabs = class _Tabs {
       }
     };
   }
-  #onAnimationFinish() {
-    ["block-size", "overflow", "position"].forEach((name) => {
-      this.#contentElement?.style.removeProperty(name);
-    });
-    this.#panelElements.forEach((panel) => {
-      [
-        "content-visibility",
-        "display",
-        "inline-size",
-        "opacity",
-        "position"
-      ].forEach((name) => {
-        panel.style.removeProperty(name);
-      });
-    });
-    this.#rootElement.removeAttribute("data-tabs-animating");
-  }
 };
 var TabsIndicator = class {
   #rootElement;
@@ -1078,24 +1097,11 @@ var TabsIndicator = class {
     this.#listElement = null;
   }
 };
-function createBinding(tabs, panel) {
-  return { tabs, panel, animation: null };
-}
-function hasFocusable(container) {
-  return !![
-    ...container.querySelectorAll(
-      `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`
-    )
-  ].filter((element) => element.checkVisibility()).length;
-}
-function isFocusable2(element) {
-  return !element.hasAttribute("disabled");
-}
 /**
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.3
+ * @version 2.0.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1120,7 +1126,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.3
+   * @version 4.3.5
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1144,7 +1150,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.0.12
+   * @version 3.1.2
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js

@@ -341,8 +341,14 @@ function createRovingTabIndex(container, options = {}) {
     return () => {
     };
   }
-  const roving = new RovingTabIndex(container, options);
-  return () => roving.destroy();
+  try {
+    const roving = new RovingTabIndex(container, options);
+    return () => roving.destroy();
+  } catch (error) {
+    error instanceof Error && console.warn(error.message || error);
+    return () => {
+    };
+  }
 }
 var RovingTabIndex = class _RovingTabIndex {
   static #initialized = /* @__PURE__ */ new Set();
@@ -418,28 +424,28 @@ var RovingTabIndex = class _RovingTabIndex {
     this.#focusablesByFirstChar.clear();
   }
   #initialize() {
-    this.#update(document.activeElement);
+    this.#update(getActiveElement());
     if (!(this.#container instanceof HTMLElement)) {
       return;
     }
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    this.#container.addEventListener("focusin", this.#onFocusIn, {
-      capture: true,
-      signal
-    });
-    this.#container.addEventListener("keydown", this.#onKeyDown, {
-      capture: true,
-      signal
-    });
+    document.addEventListener("focusin", this.#onFocusIn, { signal });
+    this.#settings.noMemory && document.addEventListener("focusout", this.#onFocusOut, { signal });
+    this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
   }
   #onFocusIn = (event) => {
     const { target } = event;
     if (!(target instanceof Element)) {
       return;
     }
-    const isFocusable3 = this.#focusables.has(target);
-    this.#settings.noMemory && !isFocusable3 ? this.#update(null) : isFocusable3 && this.#update(target);
+    const isFocusable2 = this.#focusables.has(target);
+    this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
+  };
+  #onFocusOut = (event) => {
+    if (!event.relatedTarget) {
+      this.#update();
+    }
   };
   #onKeyDown = (event) => {
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
@@ -682,7 +688,7 @@ var Tabs = class _Tabs {
       if (!panel) {
         return;
       }
-      const binding = createBinding(tabsByIndex, panel);
+      const binding = this.#createBinding(tabsByIndex, panel);
       this.#bindings.set(tab, binding);
       i < length && this.#bindings.set(panel, binding);
     });
@@ -729,14 +735,14 @@ var Tabs = class _Tabs {
       }
       style2.setProperty("inline-size", "100%");
       style2.setProperty("position", "absolute");
-      p === panel && !hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
+      p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
     });
     this.#panelElements.forEach((p, i) => {
       if (p === panel) {
         p.removeAttribute("hidden");
       } else {
         const tab2 = this.#tabElements[i];
-        tab2 && p.setAttribute("hidden", isFocusable2(tab2) ? "until-found" : "");
+        tab2 && p.setAttribute("hidden", this.#isFocusable(tab2) ? "until-found" : "");
       }
     });
     this.#animation?.cancel();
@@ -769,7 +775,7 @@ var Tabs = class _Tabs {
       "finish",
       () => {
         if (this.#animation === animation) {
-          this.#onAnimationFinish();
+          this.#onContentAnimationFinish();
           cleanup();
         }
       },
@@ -846,7 +852,7 @@ var Tabs = class _Tabs {
     this.#panelElements.forEach((panel) => {
       this.#bindings.get(panel)?.animation?.cancel();
     });
-    this.#onAnimationFinish();
+    this.#onContentAnimationFinish();
     this.#animationController?.abort();
     this.#animationController = null;
     restoreAttributes([
@@ -904,7 +910,7 @@ var Tabs = class _Tabs {
         tab.id ||= `tabs-tab-${id}`;
       }
       tab.setAttribute("role", "tab");
-      !isFocusable2(tab) && tab.style.setProperty("pointer-events", "none");
+      !this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
       addTokenToAttribute(panel, "aria-labelledby", tab.id);
       tab.addEventListener("click", this.#onTabClick, { signal });
       tab.addEventListener("focus", this.#onTabFocus, { signal });
@@ -919,7 +925,7 @@ var Tabs = class _Tabs {
     });
     this.#panelElements.forEach((panel) => {
       panel.setAttribute("role", "tabpanel");
-      !panel.hasAttribute("hidden") && !hasFocusable(panel) && panel.setAttribute("tabindex", "0");
+      !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
       panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
         signal
       });
@@ -955,6 +961,23 @@ var Tabs = class _Tabs {
     !this.#settings.manual && tab.click();
     this.#isAvoidedTab(tab) && tab.blur();
   };
+  #onContentAnimationFinish() {
+    ["block-size", "overflow", "position"].forEach((name) => {
+      this.#contentElement?.style.removeProperty(name);
+    });
+    this.#panelElements.forEach((panel) => {
+      [
+        "content-visibility",
+        "display",
+        "inline-size",
+        "opacity",
+        "position"
+      ].forEach((name) => {
+        panel.style.removeProperty(name);
+      });
+    });
+    this.#rootElement.removeAttribute("data-tabs-animating");
+  }
   #onPanelBeforeMatch = (event) => {
     const panel = event.currentTarget;
     if (!(panel instanceof HTMLElement)) {
@@ -963,6 +986,16 @@ var Tabs = class _Tabs {
     const tab = this.#bindings.get(panel)?.tabs[0];
     tab && this.activate(tab, true);
   };
+  #createBinding(tabs, panel) {
+    return { tabs, panel, animation: null };
+  }
+  #hasFocusable(container) {
+    return !![
+      ...container.querySelectorAll(
+        `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`
+      )
+    ].filter((element) => element.checkVisibility()).length;
+  }
   #isAvoidedTab(tab) {
     const binding = this.#bindings.get(tab);
     if (!binding) {
@@ -970,6 +1003,9 @@ var Tabs = class _Tabs {
     }
     return this.#settings.avoidDuplicates && binding.tabs.indexOf(tab) > 0;
   }
+  #isFocusable(element) {
+    return !element.hasAttribute("disabled");
+  }
   #mergeOptions(target, source) {
     return {
       ...target,
@@ -990,23 +1026,6 @@ var Tabs = class _Tabs {
       }
     };
   }
-  #onAnimationFinish() {
-    ["block-size", "overflow", "position"].forEach((name) => {
-      this.#contentElement?.style.removeProperty(name);
-    });
-    this.#panelElements.forEach((panel) => {
-      [
-        "content-visibility",
-        "display",
-        "inline-size",
-        "opacity",
-        "position"
-      ].forEach((name) => {
-        panel.style.removeProperty(name);
-      });
-    });
-    this.#rootElement.removeAttribute("data-tabs-animating");
-  }
 };
 var TabsIndicator = class {
   #rootElement;
@@ -1076,24 +1095,11 @@ var TabsIndicator = class {
     this.#listElement = null;
   }
 };
-function createBinding(tabs, panel) {
-  return { tabs, panel, animation: null };
-}
-function hasFocusable(container) {
-  return !![
-    ...container.querySelectorAll(
-      `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`
-    )
-  ].filter((element) => element.checkVisibility()).length;
-}
-function isFocusable2(element) {
-  return !element.hasAttribute("disabled");
-}
 /**
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.3
+ * @version 2.0.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1118,7 +1124,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.3
+   * @version 4.3.5
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1142,7 +1148,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.0.12
+   * @version 3.1.2
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs

@@ -116,7 +116,7 @@ var Tabs = class _Tabs {
       if (!panel) {
         return;
       }
-      const binding = createBinding(tabsByIndex, panel);
+      const binding = this.#createBinding(tabsByIndex, panel);
       this.#bindings.set(tab, binding);
       i < length && this.#bindings.set(panel, binding);
     });
@@ -163,14 +163,14 @@ var Tabs = class _Tabs {
       }
       style2.setProperty("inline-size", "100%");
       style2.setProperty("position", "absolute");
-      p === panel && !hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
+      p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
     });
     this.#panelElements.forEach((p, i) => {
       if (p === panel) {
         p.removeAttribute("hidden");
       } else {
         const tab2 = this.#tabElements[i];
-        tab2 && p.setAttribute("hidden", isFocusable(tab2) ? "until-found" : "");
+        tab2 && p.setAttribute("hidden", this.#isFocusable(tab2) ? "until-found" : "");
       }
     });
     this.#animation?.cancel();
@@ -203,7 +203,7 @@ var Tabs = class _Tabs {
       "finish",
       () => {
         if (this.#animation === animation) {
-          this.#onAnimationFinish();
+          this.#onContentAnimationFinish();
           cleanup();
         }
       },
@@ -280,7 +280,7 @@ var Tabs = class _Tabs {
     this.#panelElements.forEach((panel) => {
       this.#bindings.get(panel)?.animation?.cancel();
     });
-    this.#onAnimationFinish();
+    this.#onContentAnimationFinish();
     this.#animationController?.abort();
     this.#animationController = null;
     attributesUtils.restoreAttributes([
@@ -338,7 +338,7 @@ var Tabs = class _Tabs {
         tab.id ||= `tabs-tab-${id}`;
       }
       tab.setAttribute("role", "tab");
-      !isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
+      !this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
       attributesUtils.addTokenToAttribute(panel, "aria-labelledby", tab.id);
       tab.addEventListener("click", this.#onTabClick, { signal });
       tab.addEventListener("focus", this.#onTabFocus, { signal });
@@ -353,7 +353,7 @@ var Tabs = class _Tabs {
     });
     this.#panelElements.forEach((panel) => {
       panel.setAttribute("role", "tabpanel");
-      !panel.hasAttribute("hidden") && !hasFocusable(panel) && panel.setAttribute("tabindex", "0");
+      !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
       panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
         signal
       });
@@ -389,6 +389,23 @@ var Tabs = class _Tabs {
     !this.#settings.manual && tab.click();
     this.#isAvoidedTab(tab) && tab.blur();
   };
+  #onContentAnimationFinish() {
+    ["block-size", "overflow", "position"].forEach((name) => {
+      this.#contentElement?.style.removeProperty(name);
+    });
+    this.#panelElements.forEach((panel) => {
+      [
+        "content-visibility",
+        "display",
+        "inline-size",
+        "opacity",
+        "position"
+      ].forEach((name) => {
+        panel.style.removeProperty(name);
+      });
+    });
+    this.#rootElement.removeAttribute("data-tabs-animating");
+  }
   #onPanelBeforeMatch = (event) => {
     const panel = event.currentTarget;
     if (!(panel instanceof HTMLElement)) {
@@ -397,6 +414,16 @@ var Tabs = class _Tabs {
     const tab = this.#bindings.get(panel)?.tabs[0];
     tab && this.activate(tab, true);
   };
+  #createBinding(tabs, panel) {
+    return { tabs, panel, animation: null };
+  }
+  #hasFocusable(container) {
+    return !![
+      ...container.querySelectorAll(
+        `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`
+      )
+    ].filter((element) => element.checkVisibility()).length;
+  }
   #isAvoidedTab(tab) {
     const binding = this.#bindings.get(tab);
     if (!binding) {
@@ -404,6 +431,9 @@ var Tabs = class _Tabs {
     }
     return this.#settings.avoidDuplicates && binding.tabs.indexOf(tab) > 0;
   }
+  #isFocusable(element) {
+    return !element.hasAttribute("disabled");
+  }
   #mergeOptions(target, source) {
     return {
       ...target,
@@ -424,23 +454,6 @@ var Tabs = class _Tabs {
       }
     };
   }
-  #onAnimationFinish() {
-    ["block-size", "overflow", "position"].forEach((name) => {
-      this.#contentElement?.style.removeProperty(name);
-    });
-    this.#panelElements.forEach((panel) => {
-      [
-        "content-visibility",
-        "display",
-        "inline-size",
-        "opacity",
-        "position"
-      ].forEach((name) => {
-        panel.style.removeProperty(name);
-      });
-    });
-    this.#rootElement.removeAttribute("data-tabs-animating");
-  }
 };
 var TabsIndicator = class {
   #rootElement;
@@ -510,24 +523,11 @@ var TabsIndicator = class {
     this.#listElement = null;
   }
 };
-function createBinding(tabs, panel) {
-  return { tabs, panel, animation: null };
-}
-function hasFocusable(container) {
-  return !![
-    ...container.querySelectorAll(
-      `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`
-    )
-  ].filter((element) => element.checkVisibility()).length;
-}
-function isFocusable(element) {
-  return !element.hasAttribute("disabled");
-}
 /**
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.3
+ * @version 2.0.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -2,7 +2,7 @@
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.3
+ * @version 2.0.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.ts

@@ -2,7 +2,7 @@
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.3
+ * @version 2.0.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -110,7 +110,7 @@ var Tabs = class _Tabs {
       if (!panel) {
         return;
       }
-      const binding = createBinding(tabsByIndex, panel);
+      const binding = this.#createBinding(tabsByIndex, panel);
       this.#bindings.set(tab, binding);
       i < length && this.#bindings.set(panel, binding);
     });
@@ -157,14 +157,14 @@ var Tabs = class _Tabs {
       }
       style2.setProperty("inline-size", "100%");
       style2.setProperty("position", "absolute");
-      p === panel && !hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
+      p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
     });
     this.#panelElements.forEach((p, i) => {
       if (p === panel) {
         p.removeAttribute("hidden");
       } else {
         const tab2 = this.#tabElements[i];
-        tab2 && p.setAttribute("hidden", isFocusable(tab2) ? "until-found" : "");
+        tab2 && p.setAttribute("hidden", this.#isFocusable(tab2) ? "until-found" : "");
       }
     });
     this.#animation?.cancel();
@@ -197,7 +197,7 @@ var Tabs = class _Tabs {
       "finish",
       () => {
         if (this.#animation === animation) {
-          this.#onAnimationFinish();
+          this.#onContentAnimationFinish();
           cleanup();
         }
       },
@@ -274,7 +274,7 @@ var Tabs = class _Tabs {
     this.#panelElements.forEach((panel) => {
       this.#bindings.get(panel)?.animation?.cancel();
     });
-    this.#onAnimationFinish();
+    this.#onContentAnimationFinish();
     this.#animationController?.abort();
     this.#animationController = null;
     restoreAttributes([
@@ -332,7 +332,7 @@ var Tabs = class _Tabs {
         tab.id ||= `tabs-tab-${id}`;
       }
       tab.setAttribute("role", "tab");
-      !isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
+      !this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
       addTokenToAttribute(panel, "aria-labelledby", tab.id);
       tab.addEventListener("click", this.#onTabClick, { signal });
       tab.addEventListener("focus", this.#onTabFocus, { signal });
@@ -347,7 +347,7 @@ var Tabs = class _Tabs {
     });
     this.#panelElements.forEach((panel) => {
       panel.setAttribute("role", "tabpanel");
-      !panel.hasAttribute("hidden") && !hasFocusable(panel) && panel.setAttribute("tabindex", "0");
+      !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
       panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
         signal
       });
@@ -383,6 +383,23 @@ var Tabs = class _Tabs {
     !this.#settings.manual && tab.click();
     this.#isAvoidedTab(tab) && tab.blur();
   };
+  #onContentAnimationFinish() {
+    ["block-size", "overflow", "position"].forEach((name) => {
+      this.#contentElement?.style.removeProperty(name);
+    });
+    this.#panelElements.forEach((panel) => {
+      [
+        "content-visibility",
+        "display",
+        "inline-size",
+        "opacity",
+        "position"
+      ].forEach((name) => {
+        panel.style.removeProperty(name);
+      });
+    });
+    this.#rootElement.removeAttribute("data-tabs-animating");
+  }
   #onPanelBeforeMatch = (event) => {
     const panel = event.currentTarget;
     if (!(panel instanceof HTMLElement)) {
@@ -391,6 +408,16 @@ var Tabs = class _Tabs {
     const tab = this.#bindings.get(panel)?.tabs[0];
     tab && this.activate(tab, true);
   };
+  #createBinding(tabs, panel) {
+    return { tabs, panel, animation: null };
+  }
+  #hasFocusable(container) {
+    return !![
+      ...container.querySelectorAll(
+        `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`
+      )
+    ].filter((element) => element.checkVisibility()).length;
+  }
   #isAvoidedTab(tab) {
     const binding = this.#bindings.get(tab);
     if (!binding) {
@@ -398,6 +425,9 @@ var Tabs = class _Tabs {
     }
     return this.#settings.avoidDuplicates && binding.tabs.indexOf(tab) > 0;
   }
+  #isFocusable(element) {
+    return !element.hasAttribute("disabled");
+  }
   #mergeOptions(target, source) {
     return {
       ...target,
@@ -418,23 +448,6 @@ var Tabs = class _Tabs {
       }
     };
   }
-  #onAnimationFinish() {
-    ["block-size", "overflow", "position"].forEach((name) => {
-      this.#contentElement?.style.removeProperty(name);
-    });
-    this.#panelElements.forEach((panel) => {
-      [
-        "content-visibility",
-        "display",
-        "inline-size",
-        "opacity",
-        "position"
-      ].forEach((name) => {
-        panel.style.removeProperty(name);
-      });
-    });
-    this.#rootElement.removeAttribute("data-tabs-animating");
-  }
 };
 var TabsIndicator = class {
   #rootElement;
@@ -504,24 +517,11 @@ var TabsIndicator = class {
     this.#listElement = null;
   }
 };
-function createBinding(tabs, panel) {
-  return { tabs, panel, animation: null };
-}
-function hasFocusable(container) {
-  return !![
-    ...container.querySelectorAll(
-      `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`
-    )
-  ].filter((element) => element.checkVisibility()).length;
-}
-function isFocusable(element) {
-  return !element.hasAttribute("disabled");
-}
 /**
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.3
+ * @version 2.0.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/tabs",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -53,6 +53,6 @@
   "dependencies": {
     "@y14e/attributes-utils": "^1.1.2",
     "@y14e/button": "^1.0.6",
-    "@y14e/roving-tabindex": "^3.0.12"
+    "@y14e/roving-tabindex": "^3.1.2"
   }
 }