@y14e/tabs 1.4.0 → 1.5.0

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(" ");
@@ -416,7 +472,7 @@ var RovingTabIndex = class {
         return;
       }
     }
-    const active = getActiveElement();
+    const active = getActiveElement2();
     if (!(active instanceof HTMLElement)) {
       return;
     }
@@ -542,7 +598,7 @@ var RovingTabIndex = class {
 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 +645,7 @@ var Tabs = class _Tabs {
   #animationController = null;
   #cleanupsRovingTabIndex = [];
   #animation = null;
+  #buttons = [];
   #indicators = [];
   #isDestroyed = false;
   constructor(root, options = {}) {
@@ -791,6 +848,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 +937,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) => {
@@ -926,26 +987,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();
-    switch (key) {
-      case "Enter":
-      case " ":
-        active.click();
-        return;
-    }
-  };
   #onPanelBeforeMatch = (event) => {
     const panel = event.currentTarget;
     if (!(panel instanceof HTMLElement)) {
@@ -1074,13 +1115,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(
@@ -1095,7 +1129,7 @@ function isFocusable2(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.4.0
+ * @version 1.5.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1114,6 +1148,17 @@ 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

package/dist/index.d.cts

@@ -2,7 +2,7 @@
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.4.0
+ * @version 1.5.0
  * @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.0
+ * @version 1.5.0
  * @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(" ");
@@ -414,7 +470,7 @@ var RovingTabIndex = class {
         return;
       }
     }
-    const active = getActiveElement();
+    const active = getActiveElement2();
     if (!(active instanceof HTMLElement)) {
       return;
     }
@@ -540,7 +596,7 @@ var RovingTabIndex = class {
 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 +643,7 @@ var Tabs = class _Tabs {
   #animationController = null;
   #cleanupsRovingTabIndex = [];
   #animation = null;
+  #buttons = [];
   #indicators = [];
   #isDestroyed = false;
   constructor(root, options = {}) {
@@ -789,6 +846,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 +935,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) => {
@@ -924,26 +985,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();
-    switch (key) {
-      case "Enter":
-      case " ":
-        active.click();
-        return;
-    }
-  };
   #onPanelBeforeMatch = (event) => {
     const panel = event.currentTarget;
     if (!(panel instanceof HTMLElement)) {
@@ -1072,13 +1113,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(
@@ -1093,7 +1127,7 @@ function isFocusable2(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.4.0
+ * @version 1.5.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1112,6 +1146,17 @@ 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

package/package.json

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