@y14e/tabs 2.0.4 → 2.0.6

package/README.md

@@ -10,14 +10,14 @@ npm i @y14e/tabs
 
 ```ts
 // npm
-import Tabs from '@y14e/tabs@2.0.4';
+import Tabs from '@y14e/tabs';
 
 // CDNs
-import Tabs from 'https://esm.sh/@y14e/tabs@2.0.4';
+import Tabs from 'https://esm.sh/@y14e/tabs@2.0.6';
 // or
-import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.4/+esm';
+import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.6/+esm';
 // or
-import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.4';
+import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.6';
 ```
 
 ## Usage
@@ -34,28 +34,28 @@ new Tabs(root, options);
 
 ```ts
 interface TabsOptions {
-  animation?: {
-    content?: {
-      crossFade?: boolean;   // default: true
-      duration?: number;     // ms (default: 300)
-      easing?: string;       // <easing-function> (default: 'ease')
-      fade?: boolean;        // default: true
+  animation: {
+    content: {
+      crossFade: boolean;   // default: true
+      duration: number;     // ms (default: 300)
+      easing: string;       // <easing-function> (default: 'ease')
+      fade: boolean;        // default: true
     };
-    indicator?: {
-      duration?: number;     // ms (default: 300)
-      easing?: string;       // <easing-function> (default: 'ease')
+    indicator: {
+      duration: number;     // ms (default: 300)
+      easing: string;       // <easing-function> (default: 'ease')
     };
   };
-  avoidDuplicates?: boolean; // default: false
-  manual?: boolean;          // default: false
-  selector?: {
-    content?: string;        // default: '[role="tablist"] + *'
-    indicator?: string;      // default: '[data-tabs-indicator]'
-    list?: string;           // default: '[role="tablist"]'
-    panel?: string;          // default: '[role="tabpanel"]'
-    tab?: string;            // default: '[role="tab"]'
+  avoidDuplicates: boolean; // default: false
+  manual: boolean;          // default: false
+  selector: {
+    content: string;        // default: '[role="tablist"] + *'
+    indicator: string;      // default: '[data-tabs-indicator]'
+    list: string;           // default: '[role="tablist"]'
+    panel: string;          // default: '[role="tabpanel"]'
+    tab: string;            // default: '[role="tab"]'
   };
-  vertical?: boolean;        // default: false
+  vertical: boolean;        // default: false
 }
 ```
 

package/dist/index.bundle.cjs

@@ -4,12 +4,12 @@
 var DEFAULT_PARSER = (value) => value.split(/\s+/);
 var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
 function addTokenToAttribute(element, attribute, token, options = {}) {
+  const value = element.getAttribute(attribute)?.trim();
   const {
     caseInsensitive = false,
     parse = DEFAULT_PARSER,
     serialize = DEFAULT_SERIALIZER
   } = options;
-  const value = element.getAttribute(attribute)?.trim();
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
@@ -402,13 +402,7 @@ var RovingTabIndex = class _RovingTabIndex {
       console.warn("Invalid wrap option. Fallback: false.");
       wrap = false;
     }
-    this.#settings = {
-      navigationOnly,
-      noMemory,
-      noStart,
-      typeahead,
-      wrap
-    };
+    this.#settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
     direction && Object.assign(this.#settings, { direction });
     selector && Object.assign(this.#settings, { selector });
     this.#selectorFilter = this.#createSelectorFilter();
@@ -427,29 +421,32 @@ var RovingTabIndex = class _RovingTabIndex {
   }
   #initialize() {
     this.#update(getActiveElement());
-    if (!(this.#container instanceof HTMLElement)) {
-      return;
-    }
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, { signal });
-    this.#settings.noMemory && document.addEventListener("focusout", this.#onFocusOut, { signal });
+    this.#container.addEventListener("focusin", this.#onFocusIn, { signal });
+    this.#settings.noMemory && this.#container.addEventListener("focusout", this.#onFocusOut, {
+      signal
+    });
     this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
   }
   #onFocusIn = (event) => {
-    const { target } = event;
-    if (!(target instanceof Element)) {
+    if (!(event instanceof FocusEvent)) {
       return;
     }
-    const isFocusable2 = this.#focusables.has(target);
-    this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
+    const { target } = event;
+    target instanceof Element && this.#update(target);
   };
   #onFocusOut = (event) => {
-    if (!event.relatedTarget) {
-      this.#update();
+    if (!(event instanceof FocusEvent)) {
+      return;
     }
+    const target = event.relatedTarget;
+    (!(target instanceof Element) || !this.#focusables.has(target)) && this.#update();
   };
   #onKeyDown = (event) => {
+    if (!(event instanceof KeyboardEvent)) {
+      return;
+    }
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
@@ -468,7 +465,7 @@ var RovingTabIndex = class _RovingTabIndex {
       }
     }
     const active = getActiveElement();
-    if (!(active instanceof HTMLElement)) {
+    if (!(active instanceof Element)) {
       return;
     }
     const current = this.#getFocusables();
@@ -1101,7 +1098,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.4
+ * @version 2.0.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1113,7 +1110,7 @@ var TabsIndicator = class {
   (**
    * Attributes Utils
    *
-   * @version 1.1.2
+   * @version 1.1.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1126,7 +1123,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.5
+   * @version 4.3.10
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1150,7 +1147,7 @@ power-focusable/dist/index.js:
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 3.1.2
+   * @version 3.1.9
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js

@@ -2,12 +2,12 @@
 var DEFAULT_PARSER = (value) => value.split(/\s+/);
 var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
 function addTokenToAttribute(element, attribute, token, options = {}) {
+  const value = element.getAttribute(attribute)?.trim();
   const {
     caseInsensitive = false,
     parse = DEFAULT_PARSER,
     serialize = DEFAULT_SERIALIZER
   } = options;
-  const value = element.getAttribute(attribute)?.trim();
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
@@ -400,13 +400,7 @@ var RovingTabIndex = class _RovingTabIndex {
       console.warn("Invalid wrap option. Fallback: false.");
       wrap = false;
     }
-    this.#settings = {
-      navigationOnly,
-      noMemory,
-      noStart,
-      typeahead,
-      wrap
-    };
+    this.#settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
     direction && Object.assign(this.#settings, { direction });
     selector && Object.assign(this.#settings, { selector });
     this.#selectorFilter = this.#createSelectorFilter();
@@ -425,29 +419,32 @@ var RovingTabIndex = class _RovingTabIndex {
   }
   #initialize() {
     this.#update(getActiveElement());
-    if (!(this.#container instanceof HTMLElement)) {
-      return;
-    }
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, { signal });
-    this.#settings.noMemory && document.addEventListener("focusout", this.#onFocusOut, { signal });
+    this.#container.addEventListener("focusin", this.#onFocusIn, { signal });
+    this.#settings.noMemory && this.#container.addEventListener("focusout", this.#onFocusOut, {
+      signal
+    });
     this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
   }
   #onFocusIn = (event) => {
-    const { target } = event;
-    if (!(target instanceof Element)) {
+    if (!(event instanceof FocusEvent)) {
       return;
     }
-    const isFocusable2 = this.#focusables.has(target);
-    this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
+    const { target } = event;
+    target instanceof Element && this.#update(target);
   };
   #onFocusOut = (event) => {
-    if (!event.relatedTarget) {
-      this.#update();
+    if (!(event instanceof FocusEvent)) {
+      return;
     }
+    const target = event.relatedTarget;
+    (!(target instanceof Element) || !this.#focusables.has(target)) && this.#update();
   };
   #onKeyDown = (event) => {
+    if (!(event instanceof KeyboardEvent)) {
+      return;
+    }
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
@@ -466,7 +463,7 @@ var RovingTabIndex = class _RovingTabIndex {
       }
     }
     const active = getActiveElement();
-    if (!(active instanceof HTMLElement)) {
+    if (!(active instanceof Element)) {
       return;
     }
     const current = this.#getFocusables();
@@ -1099,7 +1096,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.4
+ * @version 2.0.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1111,7 +1108,7 @@ var TabsIndicator = class {
   (**
    * Attributes Utils
    *
-   * @version 1.1.2
+   * @version 1.1.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1124,7 +1121,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.5
+   * @version 4.3.10
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1148,7 +1145,7 @@ power-focusable/dist/index.js:
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 3.1.2
+   * @version 3.1.9
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs

@@ -527,7 +527,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.4
+ * @version 2.0.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -2,40 +2,40 @@
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.4
+ * @version 2.0.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
  * @see {@link https://github.com/y14e/tabs}
  */
 interface TabsOptions {
-    readonly animation?: {
-        readonly content?: {
-            readonly crossFade?: boolean;
-            readonly duration?: number;
-            readonly easing?: string;
-            readonly fade?: boolean;
+    animation: {
+        content: {
+            crossFade: boolean;
+            duration: number;
+            easing: string;
+            fade: boolean;
         };
-        readonly indicator?: {
-            readonly duration?: number;
-            readonly easing?: string;
+        indicator: {
+            duration: number;
+            easing: string;
         };
     };
-    readonly avoidDuplicates?: boolean;
-    readonly manual?: boolean;
-    readonly selector?: {
-        readonly content?: string;
-        readonly indicator?: string;
-        readonly list?: string;
-        readonly panel?: string;
-        readonly tab?: string;
+    avoidDuplicates: boolean;
+    manual: boolean;
+    selector: {
+        content: string;
+        indicator: string;
+        list: string;
+        panel: string;
+        tab: string;
     };
-    readonly vertical?: boolean;
+    vertical: boolean;
 }
 declare class Tabs {
     #private;
-    static defaults: TabsOptions;
-    constructor(root: HTMLElement, options?: TabsOptions);
+    static defaults: Partial<TabsOptions>;
+    constructor(root: HTMLElement, options?: Partial<TabsOptions>);
     activate(tab: HTMLElement, isMatch?: boolean): void;
     destroy(force?: boolean): Promise<void>;
 }

package/dist/index.d.ts

@@ -2,40 +2,40 @@
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.4
+ * @version 2.0.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
  * @see {@link https://github.com/y14e/tabs}
  */
 interface TabsOptions {
-    readonly animation?: {
-        readonly content?: {
-            readonly crossFade?: boolean;
-            readonly duration?: number;
-            readonly easing?: string;
-            readonly fade?: boolean;
+    animation: {
+        content: {
+            crossFade: boolean;
+            duration: number;
+            easing: string;
+            fade: boolean;
         };
-        readonly indicator?: {
-            readonly duration?: number;
-            readonly easing?: string;
+        indicator: {
+            duration: number;
+            easing: string;
         };
     };
-    readonly avoidDuplicates?: boolean;
-    readonly manual?: boolean;
-    readonly selector?: {
-        readonly content?: string;
-        readonly indicator?: string;
-        readonly list?: string;
-        readonly panel?: string;
-        readonly tab?: string;
+    avoidDuplicates: boolean;
+    manual: boolean;
+    selector: {
+        content: string;
+        indicator: string;
+        list: string;
+        panel: string;
+        tab: string;
     };
-    readonly vertical?: boolean;
+    vertical: boolean;
 }
 declare class Tabs {
     #private;
-    static defaults: TabsOptions;
-    constructor(root: HTMLElement, options?: TabsOptions);
+    static defaults: Partial<TabsOptions>;
+    constructor(root: HTMLElement, options?: Partial<TabsOptions>);
     activate(tab: HTMLElement, isMatch?: boolean): void;
     destroy(force?: boolean): Promise<void>;
 }

package/dist/index.js

@@ -521,7 +521,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.4
+ * @version 2.0.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/tabs",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -44,15 +44,14 @@
   "devDependencies": {
     "bun-types": "latest",
     "tsup": "^8.0.0",
-    "typescript": "^5.6.0",
-    "utility-types": "^3.11.0"
+    "typescript": "^5.6.0"
   },
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
-    "@y14e/attributes-utils": "^1.1.2",
+    "@y14e/attributes-utils": "^1.1.3",
     "@y14e/button": "^1.0.6",
-    "@y14e/roving-tabindex": "^3.1.2"
+    "@y14e/roving-tabindex": "^3.1.9"
   }
 }