@y14e/tabs 1.5.5 → 1.5.7

package/README.md

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

package/dist/index.cjs

@@ -13,11 +13,10 @@ function addTokenToAttribute(element, attribute, token, options = {}) {
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
-    if (tokens.some((token2) => token2.toLowerCase() === lower)) {
-      return;
+    if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
+      tokens.push(token);
+      element.setAttribute(attribute, serialize(tokens));
     }
-    tokens.push(token);
-    element.setAttribute(attribute, serialize(tokens));
     return;
   }
   const set = new Set(tokens);
@@ -119,11 +118,10 @@ function addTokenToAttribute2(element, attribute, token, options = {}) {
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
-    if (tokens.some((token2) => token2.toLowerCase() === lower)) {
-      return;
+    if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
+      tokens.push(token);
+      element.setAttribute(attribute, serialize(tokens));
     }
-    tokens.push(token);
-    element.setAttribute(attribute, serialize(tokens));
     return;
   }
   const set = new Set(tokens);
@@ -402,6 +400,8 @@ function createRovingTabIndex(container, options = {}) {
   let {
     direction,
     navigationOnly = false,
+    noMemory = false,
+    noStart = false,
     selector,
     typeahead = false,
     wrap = false
@@ -414,6 +414,14 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid navigationOnly option. Fallback: false.");
     navigationOnly = false;
   }
+  if (typeof noMemory !== "boolean") {
+    console.warn("Invalid noMemory option. Fallback: false.");
+    noMemory = false;
+  }
+  if (typeof noStart !== "boolean") {
+    console.warn("Invalid noStart option. Fallback: false.");
+    noStart = false;
+  }
   if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -428,13 +436,9 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, typeahead, wrap };
-  if (direction) {
-    Object.assign(settings, { direction });
-  }
-  if (selector) {
-    Object.assign(settings, { selector });
-  }
+  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  direction && Object.assign(settings, { direction });
+  selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
   return () => roving.destroy();
 }
@@ -467,12 +471,29 @@ var RovingTabIndex = class {
   #initialize() {
     this.#update(document.activeElement);
     this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    document.addEventListener("focusin", this.#onFocusIn, {
+      capture: true,
+      signal
+    });
     document.addEventListener("keydown", this.#onKeyDown, {
       capture: true,
-      signal: this.#controller.signal
+      signal
     });
     this.#container.setAttribute("data-roving-tabindex-initialized", "");
   }
+  #onFocusIn = (event) => {
+    const { target } = event;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const isFocusable22 = this.#focusables.has(target);
+    if (this.#options.noMemory && !isFocusable22) {
+      this.#update(null);
+      return;
+    }
+    isFocusable22 && this.#update(target);
+  };
   #onKeyDown = (event) => {
     if (!event.composedPath().includes(this.#container)) {
       return;
@@ -534,11 +555,7 @@ var RovingTabIndex = class {
       }
     }
     const focusable = target.at(newIndex);
-    if (!focusable) {
-      return;
-    }
-    this.#update(focusable);
-    focusElement(focusable);
+    focusable && focusElement(focusable);
   };
   #update(active) {
     const current = new Set(this.#getFocusables());
@@ -553,7 +570,7 @@ var RovingTabIndex = class {
         index >= 0 && focusables.splice(index, 1);
       });
     }
-    const { navigationOnly } = this.#options;
+    const { navigationOnly, noStart, typeahead } = this.#options;
     for (const focusable of current) {
       if (this.#focusables.has(focusable)) {
         continue;
@@ -563,7 +580,7 @@ var RovingTabIndex = class {
         saveAttributes2([focusable], ["tabindex"]);
         focusable.setAttribute("tabindex", "-1");
       }
-      if (!this.#options.typeahead) {
+      if (!typeahead) {
         continue;
       }
       const value = focusable.ariaKeyShortcuts?.trim();
@@ -594,7 +611,7 @@ var RovingTabIndex = class {
       return;
     }
     [...this.#focusables].forEach((focusable, i) => {
-      focusable.setAttribute("tabindex", i ? "-1" : "0");
+      focusable.setAttribute("tabindex", i || noStart ? "-1" : "0");
     });
   }
   #createSelectorFilter() {
@@ -605,7 +622,8 @@ var RovingTabIndex = class {
     return getFocusables(this.#container, {
       composed: true,
       filter: this.#selectorFilter,
-      skipNegativeTabIndexCheck: !this.#options.navigationOnly
+      skipNegativeTabIndexCheck: !this.#options.navigationOnly,
+      skipVisibilityCheck: true
     });
   }
 };
@@ -659,6 +677,7 @@ var Tabs = class _Tabs {
   #animationController = null;
   #cleanupsRovingTabIndex = [];
   #animation = null;
+  #animationId = 0;
   #buttons = [];
   #indicators = [];
   #isDestroyed = false;
@@ -761,14 +780,14 @@ var Tabs = class _Tabs {
     const { style } = this.#contentElement;
     style.setProperty("overflow", "clip");
     style.setProperty("position", "relative");
-    const { fade, crossFade } = this.#settings.animation.content;
+    const { crossFade, fade } = this.#settings.animation.content;
     const panel = this.#bindings.get(tab)?.panel;
     if (!panel) {
       return;
     }
     this.#panelElements.forEach((p) => {
       const { style: style2 } = p;
-      if (fade || crossFade) {
+      if (crossFade || fade) {
         style2.setProperty("content-visibility", "visible");
         style2.setProperty("display", "block");
         style2.setProperty("opacity", p.hidden ? "0" : "1");
@@ -788,6 +807,7 @@ 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(
@@ -803,7 +823,9 @@ var Tabs = class _Tabs {
       }
     );
     const cleanup = () => {
-      this.#animation = null;
+      if (animationId === this.#animationId) {
+        this.#animation = null;
+      }
     };
     this.#animationController = new AbortController();
     const { signal } = this.#animationController;
@@ -814,8 +836,10 @@ var Tabs = class _Tabs {
     this.#animation.addEventListener(
       "finish",
       () => {
-        this.#onAnimationFinish();
-        cleanup();
+        if (animationId === this.#animationId) {
+          this.#onAnimationFinish();
+          cleanup();
+        }
       },
       {
         once: true,
@@ -835,7 +859,7 @@ var Tabs = class _Tabs {
           opacity: fade ? isSelected ? [opacity, opacity, "1"] : [opacity, "0", "0"] : isSelected ? [opacity, "1"] : [opacity, "0"]
         },
         {
-          duration: isMatch || !(fade || crossFade) ? 0 : this.#settings.animation.content.duration,
+          duration: isMatch || !(crossFade || fade) ? 0 : this.#settings.animation.content.duration,
           easing: "ease"
         }
       );
@@ -888,10 +912,7 @@ var Tabs = class _Tabs {
       );
     }
     this.#panelElements.forEach((panel) => {
-      const animation = this.#bindings.get(panel)?.animation;
-      if (animation) {
-        animation.cancel();
-      }
+      this.#bindings.get(panel)?.animation?.cancel();
     });
     this.#onAnimationFinish();
     this.#animationController?.abort();
@@ -973,11 +994,9 @@ var Tabs = class _Tabs {
     });
     const options = { selector: this.#settings.selector.tab, wrap: true };
     this.#listElements.forEach((list) => {
-      if (list.ariaOrientation !== "undefined") {
-        Object.assign(options, {
-          direction: this.#settings.vertical ? "vertical" : "horizontal"
-        });
-      }
+      list.ariaOrientation !== "undefined" && Object.assign(options, {
+        direction: this.#settings.vertical ? "vertical" : "horizontal"
+      });
       this.#cleanupsRovingTabIndex.push(createRovingTabIndex(list, options));
       list.querySelectorAll(this.#settings.selector.tab).forEach((tab) => {
         tab.setAttribute(
@@ -1145,7 +1164,7 @@ function isFocusable2(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.5.5
+ * @version 1.5.7
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1157,7 +1176,7 @@ function isFocusable2(element) {
   (**
    * Attributes Utils
    *
-   * @version 1.1.0
+   * @version 1.1.1
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1181,7 +1200,7 @@ function isFocusable2(element) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.0.4
+   * @version 2.2.0
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1193,7 +1212,7 @@ function isFocusable2(element) {
     (**
      * Attributes Utils
      *
-     * @version 1.1.0
+     * @version 1.1.1
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1206,7 +1225,7 @@ function isFocusable2(element) {
      * High-precision focus management utility with full composed tree support.
      * Handles complex focus rules including tabindex ordering, radio groups, inert.
      *
-     * @version 4.3.1
+     * @version 4.3.2
      * @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.5
+ * @version 1.5.7
  * @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.5
+ * @version 1.5.7
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -11,11 +11,10 @@ function addTokenToAttribute(element, attribute, token, options = {}) {
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
-    if (tokens.some((token2) => token2.toLowerCase() === lower)) {
-      return;
+    if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
+      tokens.push(token);
+      element.setAttribute(attribute, serialize(tokens));
     }
-    tokens.push(token);
-    element.setAttribute(attribute, serialize(tokens));
     return;
   }
   const set = new Set(tokens);
@@ -117,11 +116,10 @@ function addTokenToAttribute2(element, attribute, token, options = {}) {
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
-    if (tokens.some((token2) => token2.toLowerCase() === lower)) {
-      return;
+    if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
+      tokens.push(token);
+      element.setAttribute(attribute, serialize(tokens));
     }
-    tokens.push(token);
-    element.setAttribute(attribute, serialize(tokens));
     return;
   }
   const set = new Set(tokens);
@@ -400,6 +398,8 @@ function createRovingTabIndex(container, options = {}) {
   let {
     direction,
     navigationOnly = false,
+    noMemory = false,
+    noStart = false,
     selector,
     typeahead = false,
     wrap = false
@@ -412,6 +412,14 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid navigationOnly option. Fallback: false.");
     navigationOnly = false;
   }
+  if (typeof noMemory !== "boolean") {
+    console.warn("Invalid noMemory option. Fallback: false.");
+    noMemory = false;
+  }
+  if (typeof noStart !== "boolean") {
+    console.warn("Invalid noStart option. Fallback: false.");
+    noStart = false;
+  }
   if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -426,13 +434,9 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, typeahead, wrap };
-  if (direction) {
-    Object.assign(settings, { direction });
-  }
-  if (selector) {
-    Object.assign(settings, { selector });
-  }
+  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  direction && Object.assign(settings, { direction });
+  selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
   return () => roving.destroy();
 }
@@ -465,12 +469,29 @@ var RovingTabIndex = class {
   #initialize() {
     this.#update(document.activeElement);
     this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    document.addEventListener("focusin", this.#onFocusIn, {
+      capture: true,
+      signal
+    });
     document.addEventListener("keydown", this.#onKeyDown, {
       capture: true,
-      signal: this.#controller.signal
+      signal
     });
     this.#container.setAttribute("data-roving-tabindex-initialized", "");
   }
+  #onFocusIn = (event) => {
+    const { target } = event;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const isFocusable22 = this.#focusables.has(target);
+    if (this.#options.noMemory && !isFocusable22) {
+      this.#update(null);
+      return;
+    }
+    isFocusable22 && this.#update(target);
+  };
   #onKeyDown = (event) => {
     if (!event.composedPath().includes(this.#container)) {
       return;
@@ -532,11 +553,7 @@ var RovingTabIndex = class {
       }
     }
     const focusable = target.at(newIndex);
-    if (!focusable) {
-      return;
-    }
-    this.#update(focusable);
-    focusElement(focusable);
+    focusable && focusElement(focusable);
   };
   #update(active) {
     const current = new Set(this.#getFocusables());
@@ -551,7 +568,7 @@ var RovingTabIndex = class {
         index >= 0 && focusables.splice(index, 1);
       });
     }
-    const { navigationOnly } = this.#options;
+    const { navigationOnly, noStart, typeahead } = this.#options;
     for (const focusable of current) {
       if (this.#focusables.has(focusable)) {
         continue;
@@ -561,7 +578,7 @@ var RovingTabIndex = class {
         saveAttributes2([focusable], ["tabindex"]);
         focusable.setAttribute("tabindex", "-1");
       }
-      if (!this.#options.typeahead) {
+      if (!typeahead) {
         continue;
       }
       const value = focusable.ariaKeyShortcuts?.trim();
@@ -592,7 +609,7 @@ var RovingTabIndex = class {
       return;
     }
     [...this.#focusables].forEach((focusable, i) => {
-      focusable.setAttribute("tabindex", i ? "-1" : "0");
+      focusable.setAttribute("tabindex", i || noStart ? "-1" : "0");
     });
   }
   #createSelectorFilter() {
@@ -603,7 +620,8 @@ var RovingTabIndex = class {
     return getFocusables(this.#container, {
       composed: true,
       filter: this.#selectorFilter,
-      skipNegativeTabIndexCheck: !this.#options.navigationOnly
+      skipNegativeTabIndexCheck: !this.#options.navigationOnly,
+      skipVisibilityCheck: true
     });
   }
 };
@@ -657,6 +675,7 @@ var Tabs = class _Tabs {
   #animationController = null;
   #cleanupsRovingTabIndex = [];
   #animation = null;
+  #animationId = 0;
   #buttons = [];
   #indicators = [];
   #isDestroyed = false;
@@ -759,14 +778,14 @@ var Tabs = class _Tabs {
     const { style } = this.#contentElement;
     style.setProperty("overflow", "clip");
     style.setProperty("position", "relative");
-    const { fade, crossFade } = this.#settings.animation.content;
+    const { crossFade, fade } = this.#settings.animation.content;
     const panel = this.#bindings.get(tab)?.panel;
     if (!panel) {
       return;
     }
     this.#panelElements.forEach((p) => {
       const { style: style2 } = p;
-      if (fade || crossFade) {
+      if (crossFade || fade) {
         style2.setProperty("content-visibility", "visible");
         style2.setProperty("display", "block");
         style2.setProperty("opacity", p.hidden ? "0" : "1");
@@ -786,6 +805,7 @@ 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(
@@ -801,7 +821,9 @@ var Tabs = class _Tabs {
       }
     );
     const cleanup = () => {
-      this.#animation = null;
+      if (animationId === this.#animationId) {
+        this.#animation = null;
+      }
     };
     this.#animationController = new AbortController();
     const { signal } = this.#animationController;
@@ -812,8 +834,10 @@ var Tabs = class _Tabs {
     this.#animation.addEventListener(
       "finish",
       () => {
-        this.#onAnimationFinish();
-        cleanup();
+        if (animationId === this.#animationId) {
+          this.#onAnimationFinish();
+          cleanup();
+        }
       },
       {
         once: true,
@@ -833,7 +857,7 @@ var Tabs = class _Tabs {
           opacity: fade ? isSelected ? [opacity, opacity, "1"] : [opacity, "0", "0"] : isSelected ? [opacity, "1"] : [opacity, "0"]
         },
         {
-          duration: isMatch || !(fade || crossFade) ? 0 : this.#settings.animation.content.duration,
+          duration: isMatch || !(crossFade || fade) ? 0 : this.#settings.animation.content.duration,
           easing: "ease"
         }
       );
@@ -886,10 +910,7 @@ var Tabs = class _Tabs {
       );
     }
     this.#panelElements.forEach((panel) => {
-      const animation = this.#bindings.get(panel)?.animation;
-      if (animation) {
-        animation.cancel();
-      }
+      this.#bindings.get(panel)?.animation?.cancel();
     });
     this.#onAnimationFinish();
     this.#animationController?.abort();
@@ -971,11 +992,9 @@ var Tabs = class _Tabs {
     });
     const options = { selector: this.#settings.selector.tab, wrap: true };
     this.#listElements.forEach((list) => {
-      if (list.ariaOrientation !== "undefined") {
-        Object.assign(options, {
-          direction: this.#settings.vertical ? "vertical" : "horizontal"
-        });
-      }
+      list.ariaOrientation !== "undefined" && Object.assign(options, {
+        direction: this.#settings.vertical ? "vertical" : "horizontal"
+      });
       this.#cleanupsRovingTabIndex.push(createRovingTabIndex(list, options));
       list.querySelectorAll(this.#settings.selector.tab).forEach((tab) => {
         tab.setAttribute(
@@ -1143,7 +1162,7 @@ function isFocusable2(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.5.5
+ * @version 1.5.7
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1155,7 +1174,7 @@ function isFocusable2(element) {
   (**
    * Attributes Utils
    *
-   * @version 1.1.0
+   * @version 1.1.1
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1179,7 +1198,7 @@ function isFocusable2(element) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.0.4
+   * @version 2.2.0
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1191,7 +1210,7 @@ function isFocusable2(element) {
     (**
      * Attributes Utils
      *
-     * @version 1.1.0
+     * @version 1.1.1
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1204,7 +1223,7 @@ function isFocusable2(element) {
      * High-precision focus management utility with full composed tree support.
      * Handles complex focus rules including tabindex ordering, radio groups, inert.
      *
-     * @version 4.3.1
+     * @version 4.3.2
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/tabs",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -42,9 +42,9 @@
   },
   "homepage": "https://github.com/y14e/tabs#readme",
   "devDependencies": {
-    "@y14e/attributes-utils": "^1.1.0",
+    "@y14e/attributes-utils": "^1.1.1",
     "@y14e/button": "^1.0.0",
-    "@y14e/roving-tabindex": "^2.0.4",
+    "@y14e/roving-tabindex": "^2.2.0",
     "bun-types": "latest",
     "tsup": "^8.0.0",
     "typescript": "^5.6.0",