@y14e/tabs 1.5.7 → 1.5.8

package/README.md

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

package/dist/index.cjs

@@ -436,7 +436,13 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
@@ -524,7 +530,6 @@ var RovingTabIndex = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -677,7 +682,6 @@ var Tabs = class _Tabs {
   #animationController = null;
   #cleanupsRovingTabIndex = [];
   #animation = null;
-  #animationId = 0;
   #buttons = [];
   #indicators = [];
   #isDestroyed = false;
@@ -807,10 +811,9 @@ var Tabs = class _Tabs {
         p.setAttribute("hidden", isFocusable2(tab2) ? "until-found" : "");
       }
     });
-    const animationId = ++this.#animationId;
     this.#animation?.cancel();
     const { duration, easing } = this.#settings.animation.content;
-    this.#animation = this.#contentElement.animate(
+    const animation = this.#contentElement.animate(
       {
         blockSize: [
           `${size}px`,
@@ -822,8 +825,9 @@ var Tabs = class _Tabs {
         easing
       }
     );
+    this.#animation = animation;
     const cleanup = () => {
-      if (animationId === this.#animationId) {
+      if (animation === this.#animation) {
         this.#animation = null;
       }
     };
@@ -836,10 +840,11 @@ var Tabs = class _Tabs {
     this.#animation.addEventListener(
       "finish",
       () => {
-        if (animationId === this.#animationId) {
-          this.#onAnimationFinish();
-          cleanup();
+        if (this.#animation !== animation) {
+          return;
         }
+        this.#onAnimationFinish();
+        cleanup();
       },
       {
         once: true,
@@ -854,7 +859,7 @@ var Tabs = class _Tabs {
       const opacity = getComputedStyle(p).getPropertyValue("opacity");
       binding.animation?.cancel();
       const isSelected = p === panel;
-      const animation = p.animate(
+      const animation2 = p.animate(
         {
           opacity: fade ? isSelected ? [opacity, opacity, "1"] : [opacity, "0", "0"] : isSelected ? [opacity, "1"] : [opacity, "0"]
         },
@@ -863,16 +868,16 @@ var Tabs = class _Tabs {
           easing: "ease"
         }
       );
-      binding.animation = animation;
+      binding.animation = animation2;
       const cleanup2 = () => {
-        if (binding.animation === animation) {
+        if (binding.animation === animation2) {
           binding.animation = null;
         }
       };
       this.#animationController = new AbortController();
       const { signal: signal2 } = this.#animationController;
-      animation.addEventListener("cancel", cleanup2, { once: true, signal: signal2 });
-      animation.addEventListener("finish", cleanup2, { once: true, signal: signal2 });
+      animation2.addEventListener("cancel", cleanup2, { once: true, signal: signal2 });
+      animation2.addEventListener("finish", cleanup2, { once: true, signal: signal2 });
     });
   }
   async destroy(force = false) {
@@ -1164,7 +1169,7 @@ function isFocusable2(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.5.7
+ * @version 1.5.8
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1200,7 +1205,7 @@ function isFocusable2(element) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.2.0
+   * @version 3.0.0
    * @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 1.5.7
+ * @version 1.5.8
  * @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 1.5.7
+ * @version 1.5.8
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -434,7 +434,13 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
@@ -522,7 +528,6 @@ var RovingTabIndex = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -675,7 +680,6 @@ var Tabs = class _Tabs {
   #animationController = null;
   #cleanupsRovingTabIndex = [];
   #animation = null;
-  #animationId = 0;
   #buttons = [];
   #indicators = [];
   #isDestroyed = false;
@@ -805,10 +809,9 @@ var Tabs = class _Tabs {
         p.setAttribute("hidden", isFocusable2(tab2) ? "until-found" : "");
       }
     });
-    const animationId = ++this.#animationId;
     this.#animation?.cancel();
     const { duration, easing } = this.#settings.animation.content;
-    this.#animation = this.#contentElement.animate(
+    const animation = this.#contentElement.animate(
       {
         blockSize: [
           `${size}px`,
@@ -820,8 +823,9 @@ var Tabs = class _Tabs {
         easing
       }
     );
+    this.#animation = animation;
     const cleanup = () => {
-      if (animationId === this.#animationId) {
+      if (animation === this.#animation) {
         this.#animation = null;
       }
     };
@@ -834,10 +838,11 @@ var Tabs = class _Tabs {
     this.#animation.addEventListener(
       "finish",
       () => {
-        if (animationId === this.#animationId) {
-          this.#onAnimationFinish();
-          cleanup();
+        if (this.#animation !== animation) {
+          return;
         }
+        this.#onAnimationFinish();
+        cleanup();
       },
       {
         once: true,
@@ -852,7 +857,7 @@ var Tabs = class _Tabs {
       const opacity = getComputedStyle(p).getPropertyValue("opacity");
       binding.animation?.cancel();
       const isSelected = p === panel;
-      const animation = p.animate(
+      const animation2 = p.animate(
         {
           opacity: fade ? isSelected ? [opacity, opacity, "1"] : [opacity, "0", "0"] : isSelected ? [opacity, "1"] : [opacity, "0"]
         },
@@ -861,16 +866,16 @@ var Tabs = class _Tabs {
           easing: "ease"
         }
       );
-      binding.animation = animation;
+      binding.animation = animation2;
       const cleanup2 = () => {
-        if (binding.animation === animation) {
+        if (binding.animation === animation2) {
           binding.animation = null;
         }
       };
       this.#animationController = new AbortController();
       const { signal: signal2 } = this.#animationController;
-      animation.addEventListener("cancel", cleanup2, { once: true, signal: signal2 });
-      animation.addEventListener("finish", cleanup2, { once: true, signal: signal2 });
+      animation2.addEventListener("cancel", cleanup2, { once: true, signal: signal2 });
+      animation2.addEventListener("finish", cleanup2, { once: true, signal: signal2 });
     });
   }
   async destroy(force = false) {
@@ -1162,7 +1167,7 @@ function isFocusable2(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.5.7
+ * @version 1.5.8
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1198,7 +1203,7 @@ function isFocusable2(element) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.2.0
+   * @version 3.0.0
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/tabs",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@y14e/attributes-utils": "^1.1.1",
     "@y14e/button": "^1.0.0",
-    "@y14e/roving-tabindex": "^2.2.0",
+    "@y14e/roving-tabindex": "^3.0.0",
     "bun-types": "latest",
     "tsup": "^8.0.0",
     "typescript": "^5.6.0",