@y14e/tabs 1.3.3 → 1.3.4

package/dist/index.cjs

@@ -1,5 +1,43 @@
 'use strict';
 
+// node_modules/@y14e/attributes-utils/dist/index.js
+function addTokenToAttribute(element, attribute, token) {
+  const tokens = new Set(
+    element.getAttribute(attribute)?.trim().split(/\s+/) ?? []
+  );
+  tokens.add(token);
+  element.setAttribute(attribute, [...tokens].join(" "));
+}
+var snapshots = /* @__PURE__ */ new WeakMap();
+function restoreAttributes(elements) {
+  elements.forEach((element) => {
+    const snapshot = snapshots.get(element);
+    if (!snapshot) {
+      return;
+    }
+    for (const [attribute, value] of snapshot.entries()) {
+      if (value === null) {
+        element.removeAttribute(attribute);
+      } else {
+        element.setAttribute(attribute, value);
+      }
+    }
+    snapshots.delete(element);
+  });
+}
+function saveAttributes(elements, attributes) {
+  elements.forEach((element) => {
+    let snapshot = snapshots.get(element);
+    if (!snapshot) {
+      snapshot = /* @__PURE__ */ new Map();
+      snapshots.set(element, snapshot);
+    }
+    attributes.forEach((attribute) => {
+      snapshot.set(attribute, element.getAttribute(attribute));
+    });
+  });
+}
+
 // src/index.ts
 var Tabs = class _Tabs {
   static defaults = {};
@@ -116,7 +154,7 @@ var Tabs = class _Tabs {
     });
     this.#initialize();
   }
-  async activate(tab, isMatch = false) {
+  activate(tab, isMatch = false) {
     if (this.#isDestroyed) {
       return;
     }
@@ -274,6 +312,11 @@ var Tabs = class _Tabs {
     this.#onAnimationFinish();
     this.#animationController?.abort();
     this.#animationController = null;
+    restoreAttributes([
+      ...this.#listElements,
+      ...this.#tabElements,
+      ...this.#panelElements
+    ]);
     this.#listElements.length = 0;
     this.#tabElements.length = 0;
     this.#contentElement = null;
@@ -282,6 +325,11 @@ var Tabs = class _Tabs {
   }
   #initialize() {
     const { signal } = this.#eventController ?? new AbortController();
+    saveAttributes(this.#listElements, [
+      "aria-hidden",
+      "aria-orientation",
+      "role"
+    ]);
     this.#listElements.forEach((list, i) => {
       if (this.#settings.avoidDuplicates && i) {
         list.setAttribute("aria-hidden", "true");
@@ -291,12 +339,24 @@ var Tabs = class _Tabs {
       }
       list.setAttribute("role", "tablist");
     });
+    saveAttributes(this.#tabElements, [
+      "aria-controls",
+      "id",
+      "role",
+      "tabindex"
+    ]);
     this.#tabElements.forEach((tab, i) => {
       const id = Math.random().toString(36).slice(-8);
       const panel = this.#panelElements[i % this.#panelElements.length];
       if (!panel) {
         return;
       }
+      if (i < this.#panelElements.length) {
+        saveAttributes(
+          [panel],
+          ["aria-controls", "aria-labelledby", "id", "role", "tabindex"]
+        );
+      }
       panel.id ||= `tabs-panel-${id}`;
       addTokenToAttribute(tab, "aria-controls", panel.id);
       if (!tab.hasAttribute("aria-selected")) {
@@ -338,7 +398,6 @@ var Tabs = class _Tabs {
   }
   #onTabClick = (event) => {
     event.preventDefault();
-    event.stopPropagation();
     const tab = event.currentTarget;
     if (!(tab instanceof HTMLElement)) {
       return;
@@ -367,8 +426,6 @@ var Tabs = class _Tabs {
     ].includes(key)) {
       return;
     }
-    event.preventDefault();
-    event.stopPropagation();
     const focusables = [
       ...list.querySelectorAll(this.#settings.selector.tab)
     ].filter(isFocusable);
@@ -376,6 +433,7 @@ var Tabs = class _Tabs {
     if (!(active instanceof HTMLElement)) {
       return;
     }
+    event.preventDefault();
     const currentIndex = focusables.indexOf(active);
     let newIndex = currentIndex;
     switch (key) {
@@ -532,13 +590,6 @@ var TabsIndicator = class {
     this.#listElement = null;
   }
 };
-function addTokenToAttribute(element, attribute, token) {
-  const tokens = new Set(
-    element.getAttribute(attribute)?.trim().split(/\s+/) ?? []
-  );
-  tokens.add(token);
-  element.setAttribute(attribute, [...tokens].join(" "));
-}
 function createBinding(tabs, panel) {
   return { tabs, panel, animation: null };
 }
@@ -563,11 +614,24 @@ function isFocusable(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.3.3
+ * @version 1.3.4
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
  * @see {@link https://github.com/y14e/tabs}
  */
+/*! Bundled license information:
+
+@y14e/attributes-utils/dist/index.js:
+  (**
+   * Attributes Utils
+   *
+   * @version 1.0.0
+   * @author Yusuke Kamiyamane
+   * @license MIT
+   * @copyright Copyright (c) Yusuke Kamiyamane
+   * @see {@link https://github.com/y14e/attributes-utils}
+   *)
+*/
 
 module.exports = Tabs;

package/dist/index.d.cts

@@ -2,7 +2,7 @@
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.3.3
+ * @version 1.3.4
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -36,7 +36,7 @@ declare class Tabs {
     #private;
     static defaults: TabsOptions;
     constructor(root: HTMLElement, options?: TabsOptions);
-    activate(tab: HTMLElement, isMatch?: boolean): Promise<void>;
+    activate(tab: HTMLElement, isMatch?: boolean): void;
     destroy(force?: boolean): Promise<void>;
 }
 

package/dist/index.d.ts

@@ -2,7 +2,7 @@
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.3.3
+ * @version 1.3.4
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -36,7 +36,7 @@ declare class Tabs {
     #private;
     static defaults: TabsOptions;
     constructor(root: HTMLElement, options?: TabsOptions);
-    activate(tab: HTMLElement, isMatch?: boolean): Promise<void>;
+    activate(tab: HTMLElement, isMatch?: boolean): void;
     destroy(force?: boolean): Promise<void>;
 }
 

package/dist/index.js

@@ -1,3 +1,41 @@
+// node_modules/@y14e/attributes-utils/dist/index.js
+function addTokenToAttribute(element, attribute, token) {
+  const tokens = new Set(
+    element.getAttribute(attribute)?.trim().split(/\s+/) ?? []
+  );
+  tokens.add(token);
+  element.setAttribute(attribute, [...tokens].join(" "));
+}
+var snapshots = /* @__PURE__ */ new WeakMap();
+function restoreAttributes(elements) {
+  elements.forEach((element) => {
+    const snapshot = snapshots.get(element);
+    if (!snapshot) {
+      return;
+    }
+    for (const [attribute, value] of snapshot.entries()) {
+      if (value === null) {
+        element.removeAttribute(attribute);
+      } else {
+        element.setAttribute(attribute, value);
+      }
+    }
+    snapshots.delete(element);
+  });
+}
+function saveAttributes(elements, attributes) {
+  elements.forEach((element) => {
+    let snapshot = snapshots.get(element);
+    if (!snapshot) {
+      snapshot = /* @__PURE__ */ new Map();
+      snapshots.set(element, snapshot);
+    }
+    attributes.forEach((attribute) => {
+      snapshot.set(attribute, element.getAttribute(attribute));
+    });
+  });
+}
+
 // src/index.ts
 var Tabs = class _Tabs {
   static defaults = {};
@@ -114,7 +152,7 @@ var Tabs = class _Tabs {
     });
     this.#initialize();
   }
-  async activate(tab, isMatch = false) {
+  activate(tab, isMatch = false) {
     if (this.#isDestroyed) {
       return;
     }
@@ -272,6 +310,11 @@ var Tabs = class _Tabs {
     this.#onAnimationFinish();
     this.#animationController?.abort();
     this.#animationController = null;
+    restoreAttributes([
+      ...this.#listElements,
+      ...this.#tabElements,
+      ...this.#panelElements
+    ]);
     this.#listElements.length = 0;
     this.#tabElements.length = 0;
     this.#contentElement = null;
@@ -280,6 +323,11 @@ var Tabs = class _Tabs {
   }
   #initialize() {
     const { signal } = this.#eventController ?? new AbortController();
+    saveAttributes(this.#listElements, [
+      "aria-hidden",
+      "aria-orientation",
+      "role"
+    ]);
     this.#listElements.forEach((list, i) => {
       if (this.#settings.avoidDuplicates && i) {
         list.setAttribute("aria-hidden", "true");
@@ -289,12 +337,24 @@ var Tabs = class _Tabs {
       }
       list.setAttribute("role", "tablist");
     });
+    saveAttributes(this.#tabElements, [
+      "aria-controls",
+      "id",
+      "role",
+      "tabindex"
+    ]);
     this.#tabElements.forEach((tab, i) => {
       const id = Math.random().toString(36).slice(-8);
       const panel = this.#panelElements[i % this.#panelElements.length];
       if (!panel) {
         return;
       }
+      if (i < this.#panelElements.length) {
+        saveAttributes(
+          [panel],
+          ["aria-controls", "aria-labelledby", "id", "role", "tabindex"]
+        );
+      }
       panel.id ||= `tabs-panel-${id}`;
       addTokenToAttribute(tab, "aria-controls", panel.id);
       if (!tab.hasAttribute("aria-selected")) {
@@ -336,7 +396,6 @@ var Tabs = class _Tabs {
   }
   #onTabClick = (event) => {
     event.preventDefault();
-    event.stopPropagation();
     const tab = event.currentTarget;
     if (!(tab instanceof HTMLElement)) {
       return;
@@ -365,8 +424,6 @@ var Tabs = class _Tabs {
     ].includes(key)) {
       return;
     }
-    event.preventDefault();
-    event.stopPropagation();
     const focusables = [
       ...list.querySelectorAll(this.#settings.selector.tab)
     ].filter(isFocusable);
@@ -374,6 +431,7 @@ var Tabs = class _Tabs {
     if (!(active instanceof HTMLElement)) {
       return;
     }
+    event.preventDefault();
     const currentIndex = focusables.indexOf(active);
     let newIndex = currentIndex;
     switch (key) {
@@ -530,13 +588,6 @@ var TabsIndicator = class {
     this.#listElement = null;
   }
 };
-function addTokenToAttribute(element, attribute, token) {
-  const tokens = new Set(
-    element.getAttribute(attribute)?.trim().split(/\s+/) ?? []
-  );
-  tokens.add(token);
-  element.setAttribute(attribute, [...tokens].join(" "));
-}
 function createBinding(tabs, panel) {
   return { tabs, panel, animation: null };
 }
@@ -561,11 +612,24 @@ function isFocusable(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.3.3
+ * @version 1.3.4
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
  * @see {@link https://github.com/y14e/tabs}
  */
+/*! Bundled license information:
+
+@y14e/attributes-utils/dist/index.js:
+  (**
+   * Attributes Utils
+   *
+   * @version 1.0.0
+   * @author Yusuke Kamiyamane
+   * @license MIT
+   * @copyright Copyright (c) Yusuke Kamiyamane
+   * @see {@link https://github.com/y14e/attributes-utils}
+   *)
+*/
 
 export { Tabs as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/tabs",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -42,9 +42,11 @@
   },
   "homepage": "https://github.com/y14e/tabs#readme",
   "devDependencies": {
+    "@y14e/attributes-utils": "^1.0.0",
     "bun-types": "latest",
     "tsup": "^8.0.0",
-    "typescript": "^5.6.0"
+    "typescript": "^5.6.0",
+    "utility-types": "^3.11.0"
   },
   "engines": {
     "node": ">=18"