@y14e/tabs 1.5.3 → 1.5.5

package/README.md

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

package/dist/index.cjs

@@ -414,7 +414,7 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid navigationOnly option. Fallback: false.");
     navigationOnly = false;
   }
-  if (typeof selector !== "undefined" && typeof selector !== "string") {
+  if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
     );
@@ -429,10 +429,10 @@ function createRovingTabIndex(container, options = {}) {
     wrap = false;
   }
   const settings = { navigationOnly, typeahead, wrap };
-  if (direction !== void 0) {
+  if (direction) {
     Object.assign(settings, { direction });
   }
-  if (selector !== void 0) {
+  if (selector) {
     Object.assign(settings, { selector });
   }
   const roving = new RovingTabIndex(container, settings);
@@ -909,19 +909,12 @@ var Tabs = class _Tabs {
     this.#rootElement.removeAttribute("data-tabs-initialized");
   }
   #initialize() {
-    this.#eventController = new AbortController();
-    const { signal } = this.#eventController;
     saveAttributes(this.#listElements, [
       "aria-hidden",
       "aria-orientation",
       "role",
       "style"
     ]);
-    this.#listElements.forEach((list, i) => {
-      this.#settings.avoidDuplicates && i && list.setAttribute("aria-hidden", "true");
-      this.#settings.vertical && list.setAttribute("aria-orientation", "vertical");
-      list.setAttribute("role", "tablist");
-    });
     saveAttributes(this.#tabElements, [
       "aria-controls",
       "id",
@@ -929,16 +922,27 @@ var Tabs = class _Tabs {
       "style",
       "tabindex"
     ]);
+    saveAttributes(this.#indicatorElements, ["style"]);
+    saveAttributes(this.#panelElements, [
+      "aria-controls",
+      "aria-labelledby",
+      "id",
+      "role",
+      "tabindex"
+    ]);
+    this.#eventController = new AbortController();
+    const { signal } = this.#eventController;
+    this.#listElements.forEach((list, i) => {
+      this.#settings.avoidDuplicates && i && list.setAttribute("aria-hidden", "true");
+      this.#settings.vertical && list.setAttribute("aria-orientation", "vertical");
+      list.setAttribute("role", "tablist");
+    });
     this.#tabElements.forEach((tab, i) => {
       const id = Math.random().toString(36).slice(-8);
       const panel = this.#panelElements[i % this.#panelElements.length];
       if (!panel) {
         return;
       }
-      i < this.#panelElements.length && saveAttributes(
-        [panel],
-        ["aria-controls", "aria-labelledby", "id", "role", "tabindex"]
-      );
       panel.id ||= `tabs-panel-${id}`;
       addTokenToAttribute(tab, "aria-controls", panel.id);
       !tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
@@ -953,7 +957,6 @@ var Tabs = class _Tabs {
       tab.addEventListener("focus", this.#onTabFocus, { signal });
       this.#buttons.push(new Button(tab));
     });
-    saveAttributes(this.#indicatorElements, ["style"]);
     this.#indicatorElements.forEach((indicator) => {
       indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
       const { style } = indicator;
@@ -1040,20 +1043,19 @@ var Tabs = class _Tabs {
     };
   }
   #onAnimationFinish() {
-    if (!this.#contentElement) {
-      return;
-    }
-    const { style } = this.#contentElement;
-    style.removeProperty("block-size");
-    style.removeProperty("overflow");
-    style.removeProperty("position");
+    ["block-size", "overflow", "position"].forEach((name) => {
+      this.#contentElement?.style.removeProperty(name);
+    });
     this.#panelElements.forEach((panel) => {
-      const { style: style2 } = panel;
-      style2.removeProperty("content-visibility");
-      style2.removeProperty("display");
-      style2.removeProperty("inline-size");
-      style2.removeProperty("opacity");
-      style2.removeProperty("position");
+      [
+        "content-visibility",
+        "display",
+        "inline-size",
+        "opacity",
+        "position"
+      ].forEach((name) => {
+        panel.style.removeProperty(name);
+      });
     });
     this.#rootElement.removeAttribute("data-tabs-animating");
   }
@@ -1143,7 +1145,7 @@ function isFocusable2(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.5.3
+ * @version 1.5.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1179,7 +1181,7 @@ function isFocusable2(element) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.0.3
+   * @version 2.0.4
    * @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.3
+ * @version 1.5.5
  * @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.3
+ * @version 1.5.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -412,7 +412,7 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid navigationOnly option. Fallback: false.");
     navigationOnly = false;
   }
-  if (typeof selector !== "undefined" && typeof selector !== "string") {
+  if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
     );
@@ -427,10 +427,10 @@ function createRovingTabIndex(container, options = {}) {
     wrap = false;
   }
   const settings = { navigationOnly, typeahead, wrap };
-  if (direction !== void 0) {
+  if (direction) {
     Object.assign(settings, { direction });
   }
-  if (selector !== void 0) {
+  if (selector) {
     Object.assign(settings, { selector });
   }
   const roving = new RovingTabIndex(container, settings);
@@ -907,19 +907,12 @@ var Tabs = class _Tabs {
     this.#rootElement.removeAttribute("data-tabs-initialized");
   }
   #initialize() {
-    this.#eventController = new AbortController();
-    const { signal } = this.#eventController;
     saveAttributes(this.#listElements, [
       "aria-hidden",
       "aria-orientation",
       "role",
       "style"
     ]);
-    this.#listElements.forEach((list, i) => {
-      this.#settings.avoidDuplicates && i && list.setAttribute("aria-hidden", "true");
-      this.#settings.vertical && list.setAttribute("aria-orientation", "vertical");
-      list.setAttribute("role", "tablist");
-    });
     saveAttributes(this.#tabElements, [
       "aria-controls",
       "id",
@@ -927,16 +920,27 @@ var Tabs = class _Tabs {
       "style",
       "tabindex"
     ]);
+    saveAttributes(this.#indicatorElements, ["style"]);
+    saveAttributes(this.#panelElements, [
+      "aria-controls",
+      "aria-labelledby",
+      "id",
+      "role",
+      "tabindex"
+    ]);
+    this.#eventController = new AbortController();
+    const { signal } = this.#eventController;
+    this.#listElements.forEach((list, i) => {
+      this.#settings.avoidDuplicates && i && list.setAttribute("aria-hidden", "true");
+      this.#settings.vertical && list.setAttribute("aria-orientation", "vertical");
+      list.setAttribute("role", "tablist");
+    });
     this.#tabElements.forEach((tab, i) => {
       const id = Math.random().toString(36).slice(-8);
       const panel = this.#panelElements[i % this.#panelElements.length];
       if (!panel) {
         return;
       }
-      i < this.#panelElements.length && saveAttributes(
-        [panel],
-        ["aria-controls", "aria-labelledby", "id", "role", "tabindex"]
-      );
       panel.id ||= `tabs-panel-${id}`;
       addTokenToAttribute(tab, "aria-controls", panel.id);
       !tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
@@ -951,7 +955,6 @@ var Tabs = class _Tabs {
       tab.addEventListener("focus", this.#onTabFocus, { signal });
       this.#buttons.push(new Button(tab));
     });
-    saveAttributes(this.#indicatorElements, ["style"]);
     this.#indicatorElements.forEach((indicator) => {
       indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
       const { style } = indicator;
@@ -1038,20 +1041,19 @@ var Tabs = class _Tabs {
     };
   }
   #onAnimationFinish() {
-    if (!this.#contentElement) {
-      return;
-    }
-    const { style } = this.#contentElement;
-    style.removeProperty("block-size");
-    style.removeProperty("overflow");
-    style.removeProperty("position");
+    ["block-size", "overflow", "position"].forEach((name) => {
+      this.#contentElement?.style.removeProperty(name);
+    });
     this.#panelElements.forEach((panel) => {
-      const { style: style2 } = panel;
-      style2.removeProperty("content-visibility");
-      style2.removeProperty("display");
-      style2.removeProperty("inline-size");
-      style2.removeProperty("opacity");
-      style2.removeProperty("position");
+      [
+        "content-visibility",
+        "display",
+        "inline-size",
+        "opacity",
+        "position"
+      ].forEach((name) => {
+        panel.style.removeProperty(name);
+      });
     });
     this.#rootElement.removeAttribute("data-tabs-animating");
   }
@@ -1141,7 +1143,7 @@ function isFocusable2(element) {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 1.5.3
+ * @version 1.5.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1177,7 +1179,7 @@ function isFocusable2(element) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.0.3
+   * @version 2.0.4
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/tabs",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "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.0",
     "@y14e/button": "^1.0.0",
-    "@y14e/roving-tabindex": "^2.0.3",
+    "@y14e/roving-tabindex": "^2.0.4",
     "bun-types": "latest",
     "tsup": "^8.0.0",
     "typescript": "^5.6.0",