@y14e/tabs 1.4.1 → 1.5.1

package/dist/index.cjs

@@ -50,6 +50,62 @@ function saveAttributes(elements, attributes) {
   });
 }
 
+// node_modules/@y14e/button/dist/index.js
+var Button = class {
+  #element;
+  #controller = null;
+  #isDestroyed = false;
+  constructor(element) {
+    if (!(element instanceof HTMLElement)) {
+      throw new TypeError("Invalid element");
+    }
+    if (element.hasAttribute("data-button-initialized")) {
+      console.warn("Already initialized");
+      return;
+    }
+    this.#element = element;
+    this.#initialize();
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
+    this.#element.removeAttribute("data-button-initialized");
+  }
+  #initialize() {
+    this.#controller = new AbortController();
+    this.#element.addEventListener("keydown", this.#onKeyDown, {
+      signal: this.#controller.signal
+    });
+    this.#element.setAttribute("data-button-initialized", "");
+  }
+  #onKeyDown = (event) => {
+    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
+    if (altKey || ctrlKey || metaKey || shiftKey) {
+      return;
+    }
+    if (!["Enter", " "].includes(key)) {
+      return;
+    }
+    const active = getActiveElement();
+    if (!(active instanceof HTMLElement)) {
+      return;
+    }
+    event.preventDefault();
+    active.click();
+  };
+};
+function getActiveElement() {
+  let current = document.activeElement;
+  while (current?.shadowRoot?.activeElement) {
+    current = current.shadowRoot.activeElement;
+  }
+  return current;
+}
+
 // node_modules/@y14e/roving-tabindex/dist/index.js
 var defaultParser2 = (value) => value.split(/\s+/);
 var defaultSerializer2 = (tokens) => tokens.join(" ");
@@ -127,6 +183,10 @@ function getFocusables(container = document.body, options = {}) {
     );
     include = void 0;
   }
+  if (typeof skipVisibilityCheck !== "boolean") {
+    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
+    skipVisibilityCheck = false;
+  }
   const elements = [];
   if (composed || include) {
     let traverse2 = function(node) {
@@ -326,6 +386,7 @@ function createRovingTabIndex(container, options = {}) {
     direction,
     navigationOnly = false,
     selector,
+    skipVisibilityCheck = false,
     typeahead = false,
     wrap = false
   } = options;
@@ -343,6 +404,10 @@ function createRovingTabIndex(container, options = {}) {
     );
     selector = void 0;
   }
+  if (typeof skipVisibilityCheck !== "boolean") {
+    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
+    skipVisibilityCheck = false;
+  }
   if (typeof typeahead !== "boolean") {
     console.warn("Invalid typeahead option. Fallback: false.");
     typeahead = false;
@@ -355,6 +420,7 @@ function createRovingTabIndex(container, options = {}) {
     direction,
     navigationOnly,
     selector,
+    skipVisibilityCheck,
     typeahead,
     wrap
   });
@@ -416,7 +482,7 @@ var RovingTabIndex = class {
         return;
       }
     }
-    const active = getActiveElement();
+    const active = getActiveElement2();
     if (!(active instanceof HTMLElement)) {
       return;
     }
@@ -468,7 +534,7 @@ var RovingTabIndex = class {
       ...getFocusables(this.#container, {
         composed: true,
         filter: this.#selectorFilter,
-        skipVisibilityCheck: true
+        skipVisibilityCheck: !!this.#options.skipVisibilityCheck
       })
     ]);
     for (const focusable of this.#focusables) {
@@ -535,14 +601,14 @@ var RovingTabIndex = class {
       composed: true,
       filter: this.#selectorFilter,
       include: (element) => this.#focusables.has(element),
-      skipVisibilityCheck: true
+      skipVisibilityCheck: !!this.#options.skipVisibilityCheck
     });
   }
 };
 function focusElement(element) {
   "focus" in element && typeof element.focus === "function" && element.focus();
 }
-function getActiveElement() {
+function getActiveElement2() {
   let current = document.activeElement;
   while (current?.shadowRoot?.activeElement) {
     current = current.shadowRoot.activeElement;
@@ -589,6 +655,7 @@ var Tabs = class _Tabs {
   #animationController = null;
   #cleanupsRovingTabIndex = [];
   #animation = null;
+  #buttons = [];
   #indicators = [];
   #isDestroyed = false;
   constructor(root, options = {}) {
@@ -791,6 +858,10 @@ var Tabs = class _Tabs {
       cleanup();
     });
     this.#cleanupsRovingTabIndex.length = 0;
+    this.#buttons.forEach((button) => {
+      button.destroy();
+    });
+    this.#buttons.length = 0;
     this.#indicators.forEach((indicator) => {
       indicator.destroy(force);
     });
@@ -876,7 +947,7 @@ var Tabs = class _Tabs {
       addTokenToAttribute(panel, "aria-labelledby", tab.id);
       tab.addEventListener("click", this.#onTabClick, { signal });
       tab.addEventListener("focus", this.#onTabFocus, { signal });
-      tab.addEventListener("keydown", this.#onTabKeyDown, { signal });
+      this.#buttons.push(new Button(tab));
     });
     saveAttributes(this.#indicatorElements, ["style"]);
     this.#indicatorElements.forEach((indicator) => {
@@ -898,6 +969,7 @@ var Tabs = class _Tabs {
         createRovingTabIndex(list, {
           direction: list.ariaOrientation === "undefined" ? void 0 : this.#settings.vertical ? "vertical" : "horizontal",
           selector: this.#settings.selector.tab,
+          skipVisibilityCheck: true,
           wrap: true
         })
       );
@@ -926,21 +998,6 @@ var Tabs = class _Tabs {
     !this.#settings.manual && tab.click();
     this.#isAvoidedTab(tab) && tab.blur();
   };
-  #onTabKeyDown = (event) => {
-    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
-    if (altKey || ctrlKey || metaKey || shiftKey) {
-      return;
-    }
-    if (!["Enter", " "].includes(key)) {
-      return;
-    }
-    const active = getActiveElement2();
-    if (!(active instanceof HTMLElement)) {
-      return;
-    }
-    event.preventDefault();
-    active.click();
-  };
   #onPanelBeforeMatch = (event) => {
     const panel = event.currentTarget;
     if (!(panel instanceof HTMLElement)) {
@@ -1069,13 +1126,6 @@ var TabsIndicator = class {
 function createBinding(tabs, panel) {
   return { tabs, panel, animation: null };
 }
-function getActiveElement2() {
-  let current = document.activeElement;
-  while (current?.shadowRoot?.activeElement) {
-    current = current.shadowRoot.activeElement;
-  }
-  return current;
-}
 function hasFocusable(container) {
   return !![
     ...container.querySelectorAll(
@@ -1090,7 +1140,7 @@ function isFocusable2(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.4.1
+ * @version 1.5.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1109,13 +1159,24 @@ function isFocusable2(element) {
    * @see {@link https://github.com/y14e/attributes-utils}
    *)
 
+@y14e/button/dist/index.js:
+  (**
+   * Button
+   *
+   * @version 1.0.0
+   * @author Yusuke Kamiyamane
+   * @license MIT
+   * @copyright Copyright (c) Yusuke Kamiyamane
+   * @see {@link https://github.com/y14e/button}
+   *)
+
 @y14e/roving-tabindex/dist/index.js:
   (**
    * Roving Tabindex
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 1.3.1
+   * @version 1.3.2
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1140,7 +1201,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.2.0
+     * @version 4.2.1
      * @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.4.1
+ * @version 1.5.1
  * @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.4.1
+ * @version 1.5.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -48,6 +48,62 @@ function saveAttributes(elements, attributes) {
   });
 }
 
+// node_modules/@y14e/button/dist/index.js
+var Button = class {
+  #element;
+  #controller = null;
+  #isDestroyed = false;
+  constructor(element) {
+    if (!(element instanceof HTMLElement)) {
+      throw new TypeError("Invalid element");
+    }
+    if (element.hasAttribute("data-button-initialized")) {
+      console.warn("Already initialized");
+      return;
+    }
+    this.#element = element;
+    this.#initialize();
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
+    this.#element.removeAttribute("data-button-initialized");
+  }
+  #initialize() {
+    this.#controller = new AbortController();
+    this.#element.addEventListener("keydown", this.#onKeyDown, {
+      signal: this.#controller.signal
+    });
+    this.#element.setAttribute("data-button-initialized", "");
+  }
+  #onKeyDown = (event) => {
+    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
+    if (altKey || ctrlKey || metaKey || shiftKey) {
+      return;
+    }
+    if (!["Enter", " "].includes(key)) {
+      return;
+    }
+    const active = getActiveElement();
+    if (!(active instanceof HTMLElement)) {
+      return;
+    }
+    event.preventDefault();
+    active.click();
+  };
+};
+function getActiveElement() {
+  let current = document.activeElement;
+  while (current?.shadowRoot?.activeElement) {
+    current = current.shadowRoot.activeElement;
+  }
+  return current;
+}
+
 // node_modules/@y14e/roving-tabindex/dist/index.js
 var defaultParser2 = (value) => value.split(/\s+/);
 var defaultSerializer2 = (tokens) => tokens.join(" ");
@@ -125,6 +181,10 @@ function getFocusables(container = document.body, options = {}) {
     );
     include = void 0;
   }
+  if (typeof skipVisibilityCheck !== "boolean") {
+    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
+    skipVisibilityCheck = false;
+  }
   const elements = [];
   if (composed || include) {
     let traverse2 = function(node) {
@@ -324,6 +384,7 @@ function createRovingTabIndex(container, options = {}) {
     direction,
     navigationOnly = false,
     selector,
+    skipVisibilityCheck = false,
     typeahead = false,
     wrap = false
   } = options;
@@ -341,6 +402,10 @@ function createRovingTabIndex(container, options = {}) {
     );
     selector = void 0;
   }
+  if (typeof skipVisibilityCheck !== "boolean") {
+    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
+    skipVisibilityCheck = false;
+  }
   if (typeof typeahead !== "boolean") {
     console.warn("Invalid typeahead option. Fallback: false.");
     typeahead = false;
@@ -353,6 +418,7 @@ function createRovingTabIndex(container, options = {}) {
     direction,
     navigationOnly,
     selector,
+    skipVisibilityCheck,
     typeahead,
     wrap
   });
@@ -414,7 +480,7 @@ var RovingTabIndex = class {
         return;
       }
     }
-    const active = getActiveElement();
+    const active = getActiveElement2();
     if (!(active instanceof HTMLElement)) {
       return;
     }
@@ -466,7 +532,7 @@ var RovingTabIndex = class {
       ...getFocusables(this.#container, {
         composed: true,
         filter: this.#selectorFilter,
-        skipVisibilityCheck: true
+        skipVisibilityCheck: !!this.#options.skipVisibilityCheck
       })
     ]);
     for (const focusable of this.#focusables) {
@@ -533,14 +599,14 @@ var RovingTabIndex = class {
       composed: true,
       filter: this.#selectorFilter,
       include: (element) => this.#focusables.has(element),
-      skipVisibilityCheck: true
+      skipVisibilityCheck: !!this.#options.skipVisibilityCheck
     });
   }
 };
 function focusElement(element) {
   "focus" in element && typeof element.focus === "function" && element.focus();
 }
-function getActiveElement() {
+function getActiveElement2() {
   let current = document.activeElement;
   while (current?.shadowRoot?.activeElement) {
     current = current.shadowRoot.activeElement;
@@ -587,6 +653,7 @@ var Tabs = class _Tabs {
   #animationController = null;
   #cleanupsRovingTabIndex = [];
   #animation = null;
+  #buttons = [];
   #indicators = [];
   #isDestroyed = false;
   constructor(root, options = {}) {
@@ -789,6 +856,10 @@ var Tabs = class _Tabs {
       cleanup();
     });
     this.#cleanupsRovingTabIndex.length = 0;
+    this.#buttons.forEach((button) => {
+      button.destroy();
+    });
+    this.#buttons.length = 0;
     this.#indicators.forEach((indicator) => {
       indicator.destroy(force);
     });
@@ -874,7 +945,7 @@ var Tabs = class _Tabs {
       addTokenToAttribute(panel, "aria-labelledby", tab.id);
       tab.addEventListener("click", this.#onTabClick, { signal });
       tab.addEventListener("focus", this.#onTabFocus, { signal });
-      tab.addEventListener("keydown", this.#onTabKeyDown, { signal });
+      this.#buttons.push(new Button(tab));
     });
     saveAttributes(this.#indicatorElements, ["style"]);
     this.#indicatorElements.forEach((indicator) => {
@@ -896,6 +967,7 @@ var Tabs = class _Tabs {
         createRovingTabIndex(list, {
           direction: list.ariaOrientation === "undefined" ? void 0 : this.#settings.vertical ? "vertical" : "horizontal",
           selector: this.#settings.selector.tab,
+          skipVisibilityCheck: true,
           wrap: true
         })
       );
@@ -924,21 +996,6 @@ var Tabs = class _Tabs {
     !this.#settings.manual && tab.click();
     this.#isAvoidedTab(tab) && tab.blur();
   };
-  #onTabKeyDown = (event) => {
-    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
-    if (altKey || ctrlKey || metaKey || shiftKey) {
-      return;
-    }
-    if (!["Enter", " "].includes(key)) {
-      return;
-    }
-    const active = getActiveElement2();
-    if (!(active instanceof HTMLElement)) {
-      return;
-    }
-    event.preventDefault();
-    active.click();
-  };
   #onPanelBeforeMatch = (event) => {
     const panel = event.currentTarget;
     if (!(panel instanceof HTMLElement)) {
@@ -1067,13 +1124,6 @@ var TabsIndicator = class {
 function createBinding(tabs, panel) {
   return { tabs, panel, animation: null };
 }
-function getActiveElement2() {
-  let current = document.activeElement;
-  while (current?.shadowRoot?.activeElement) {
-    current = current.shadowRoot.activeElement;
-  }
-  return current;
-}
 function hasFocusable(container) {
   return !![
     ...container.querySelectorAll(
@@ -1088,7 +1138,7 @@ function isFocusable2(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.4.1
+ * @version 1.5.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1107,13 +1157,24 @@ function isFocusable2(element) {
    * @see {@link https://github.com/y14e/attributes-utils}
    *)
 
+@y14e/button/dist/index.js:
+  (**
+   * Button
+   *
+   * @version 1.0.0
+   * @author Yusuke Kamiyamane
+   * @license MIT
+   * @copyright Copyright (c) Yusuke Kamiyamane
+   * @see {@link https://github.com/y14e/button}
+   *)
+
 @y14e/roving-tabindex/dist/index.js:
   (**
    * Roving Tabindex
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 1.3.1
+   * @version 1.3.2
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1138,7 +1199,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.2.0
+     * @version 4.2.1
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/tabs",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -43,7 +43,8 @@
   "homepage": "https://github.com/y14e/tabs#readme",
   "devDependencies": {
     "@y14e/attributes-utils": "^1.0.5",
-    "@y14e/roving-tabindex": "^1.3.1",
+    "@y14e/button": "^1.0.0",
+    "@y14e/roving-tabindex": "^1.3.2",
     "bun-types": "latest",
     "tsup": "^8.0.0",
     "typescript": "^5.6.0",