@y14e/tabs 2.0.13 → 2.0.15

package/README.md

@@ -13,11 +13,11 @@ npm i @y14e/tabs
 import { Tabs } from "@y14e/tabs";
 
 // CDNs
-import { Tabs } from "https://esm.sh/@y14e/tabs@2.0.13";
+import { Tabs } from "https://esm.sh/@y14e/tabs@2.0.15";
 // or
-import { Tabs } from "https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.13/+esm";
+import { Tabs } from "https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.15/+esm";
 // or
-import { Tabs } from "https://esm.unpkg.com/@y14e/tabs@2.0.13";
+import { Tabs } from "https://esm.unpkg.com/@y14e/tabs@2.0.15";
 ```
 
 ## Usage

package/dist/index.bundle.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-// node_modules/@y14e/attribute-util/dist/index.js
+// node_modules/@y14e/attribute-utils/dist/index.js
 var DEFAULT_PARSER = (value) => value.split(/\s+/);
 var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
 function addAttributeToken(element, name, token, options = {}) {
@@ -415,17 +415,9 @@ var RovingTabIndex = class _RovingTabIndex {
       noStart = false;
     }
     if (selector !== "") {
-      let hasError = false;
-      if (typeof selector !== "string" || !selector.trim()) {
-        hasError = true;
-      } else {
-        try {
-          this.#container.querySelector(selector);
-        } catch {
-          hasError = true;
-        }
-      }
-      if (hasError) {
+      try {
+        document.querySelector(selector);
+      } catch {
         console.warn("Invalid selector. Fallback: no selector string.");
         selector = "";
       }
@@ -1063,7 +1055,7 @@ var Tabs = class _Tabs {
     return !element.hasAttribute("disabled");
   }
   #mergeOptions(target, source) {
-    return {
+    const merged = {
       ...target,
       ...source,
       animation: {
@@ -1081,6 +1073,117 @@ var Tabs = class _Tabs {
         ...source.selector ?? {}
       }
     };
+    const animation = merged.animation;
+    const mergedContentAnimation = animation.content;
+    const defaultContentAnimation = this.#defaults.animation.content;
+    if (typeof mergedContentAnimation.crossFade !== "boolean") {
+      const crossFade = defaultContentAnimation.crossFade;
+      console.warn(
+        `Invalid content animation crossFade option. Fallback: ${crossFade}.`
+      );
+      mergedContentAnimation.crossFade = crossFade;
+    }
+    const contentDuration = mergedContentAnimation.duration;
+    if (typeof contentDuration !== "number" || Number.isNaN(contentDuration)) {
+      const duration = defaultContentAnimation.duration;
+      console.warn(
+        `Invalid content animation duration. Fallback: ${duration} (ms).`
+      );
+      mergedContentAnimation.duration = duration;
+    }
+    if (contentDuration < 0) {
+      console.warn("Invalid content animation duration. Fallback: 0 (ms).");
+      mergedContentAnimation.duration = 0;
+    }
+    if (!CSS.supports("animation-timing-function", mergedContentAnimation.easing)) {
+      const easing = defaultContentAnimation.easing;
+      console.warn(`Invalid content animation easing. Fallback: '${easing}'.`);
+      mergedContentAnimation.easing = easing;
+    }
+    if (typeof mergedContentAnimation.fade !== "boolean") {
+      const fade = defaultContentAnimation.fade;
+      console.warn(`Invalid content animation fade option. Fallback: ${fade}.`);
+      mergedContentAnimation.fade = fade;
+    }
+    const mergedIndicatorAnimation = animation.indicator;
+    const indicatorDuration = mergedIndicatorAnimation.duration;
+    const defaultIndicatorAnimation = this.#defaults.animation.indicator;
+    if (typeof indicatorDuration !== "number" || Number.isNaN(indicatorDuration)) {
+      const duration = defaultIndicatorAnimation.duration;
+      console.warn(
+        `Invalid indicator animation duration. Fallback: ${duration} (ms).`
+      );
+      mergedIndicatorAnimation.duration = duration;
+    }
+    if (indicatorDuration < 0) {
+      console.warn("Invalid indicator animation duration. Fallback: 0 (ms).");
+      mergedIndicatorAnimation.duration = 0;
+    }
+    if (!CSS.supports(
+      "animation-timing-function",
+      mergedIndicatorAnimation.easing
+    )) {
+      const easing = defaultIndicatorAnimation.easing;
+      console.warn(
+        `Invalid indicator animation easing. Fallback: '${easing}'.`
+      );
+      mergedIndicatorAnimation.easing = easing;
+    }
+    if (typeof merged.avoidDuplicates !== "boolean") {
+      const avoidDuplicates = this.#defaults.avoidDuplicates;
+      console.warn(
+        `Invalid avoidDuplicates option. Fallback: ${avoidDuplicates}.`
+      );
+      merged.avoidDuplicates = avoidDuplicates;
+    }
+    if (typeof merged.manual !== "boolean") {
+      const manual = this.#defaults.manual;
+      console.warn(`Invalid manual option. Fallback: ${manual}.`);
+      merged.manual = manual;
+    }
+    const mergedSelector = merged.selector;
+    const defaultSelector = this.#defaults.selector;
+    try {
+      document.querySelector(mergedSelector.content);
+    } catch {
+      const content = defaultSelector.content;
+      console.warn(`Invalid content selector. Fallback: '${content}'.`);
+      mergedSelector.content = content;
+    }
+    try {
+      document.querySelector(mergedSelector.indicator);
+    } catch {
+      const indicator = defaultSelector.indicator;
+      console.warn(`Invalid indicator selector. Fallback: '${indicator}'.`);
+      mergedSelector.indicator = indicator;
+    }
+    try {
+      document.querySelector(mergedSelector.list);
+    } catch {
+      const list = defaultSelector.list;
+      console.warn(`Invalid list selector. Fallback: '${list}'.`);
+      mergedSelector.list = list;
+    }
+    try {
+      document.querySelector(mergedSelector.panel);
+    } catch {
+      const panel = defaultSelector.panel;
+      console.warn(`Invalid panel selector. Fallback: '${panel}'.`);
+      mergedSelector.panel = panel;
+    }
+    try {
+      document.querySelector(mergedSelector.tab);
+    } catch {
+      const tab = defaultSelector.tab;
+      console.warn(`Invalid tab selector. Fallback: '${tab}'.`);
+      mergedSelector.tab = tab;
+    }
+    if (typeof merged.vertical !== "boolean") {
+      const vertical = this.#defaults.vertical;
+      console.warn(`Invalid vertical option. Fallback: ${vertical}.`);
+      merged.vertical = vertical;
+    }
+    return merged;
   }
 };
 var TabsIndicator = class {
@@ -1155,7 +1258,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.13
+ * @version 2.0.15
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1163,15 +1266,15 @@ var TabsIndicator = class {
  */
 /*! Bundled license information:
 
-@y14e/attribute-util/dist/index.js:
+@y14e/attribute-utils/dist/index.js:
   (**
-   * Attribute Util
+   * Attribute Utils
    *
-   * @version 2.0.2
+   * @version 2.0.5
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
-   * @see {@link https://github.com/y14e/attribute-util}
+   * @see {@link https://github.com/y14e/attribute-utils}
    *)
 
 power-focusable/dist/index.js:
@@ -1180,7 +1283,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.25
+   * @version 4.3.28
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1204,7 +1307,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.22
+   * @version 3.1.25
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js

@@ -1,4 +1,4 @@
-// node_modules/@y14e/attribute-util/dist/index.js
+// node_modules/@y14e/attribute-utils/dist/index.js
 var DEFAULT_PARSER = (value) => value.split(/\s+/);
 var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
 function addAttributeToken(element, name, token, options = {}) {
@@ -413,17 +413,9 @@ var RovingTabIndex = class _RovingTabIndex {
       noStart = false;
     }
     if (selector !== "") {
-      let hasError = false;
-      if (typeof selector !== "string" || !selector.trim()) {
-        hasError = true;
-      } else {
-        try {
-          this.#container.querySelector(selector);
-        } catch {
-          hasError = true;
-        }
-      }
-      if (hasError) {
+      try {
+        document.querySelector(selector);
+      } catch {
         console.warn("Invalid selector. Fallback: no selector string.");
         selector = "";
       }
@@ -1061,7 +1053,7 @@ var Tabs = class _Tabs {
     return !element.hasAttribute("disabled");
   }
   #mergeOptions(target, source) {
-    return {
+    const merged = {
       ...target,
       ...source,
       animation: {
@@ -1079,6 +1071,117 @@ var Tabs = class _Tabs {
         ...source.selector ?? {}
       }
     };
+    const animation = merged.animation;
+    const mergedContentAnimation = animation.content;
+    const defaultContentAnimation = this.#defaults.animation.content;
+    if (typeof mergedContentAnimation.crossFade !== "boolean") {
+      const crossFade = defaultContentAnimation.crossFade;
+      console.warn(
+        `Invalid content animation crossFade option. Fallback: ${crossFade}.`
+      );
+      mergedContentAnimation.crossFade = crossFade;
+    }
+    const contentDuration = mergedContentAnimation.duration;
+    if (typeof contentDuration !== "number" || Number.isNaN(contentDuration)) {
+      const duration = defaultContentAnimation.duration;
+      console.warn(
+        `Invalid content animation duration. Fallback: ${duration} (ms).`
+      );
+      mergedContentAnimation.duration = duration;
+    }
+    if (contentDuration < 0) {
+      console.warn("Invalid content animation duration. Fallback: 0 (ms).");
+      mergedContentAnimation.duration = 0;
+    }
+    if (!CSS.supports("animation-timing-function", mergedContentAnimation.easing)) {
+      const easing = defaultContentAnimation.easing;
+      console.warn(`Invalid content animation easing. Fallback: '${easing}'.`);
+      mergedContentAnimation.easing = easing;
+    }
+    if (typeof mergedContentAnimation.fade !== "boolean") {
+      const fade = defaultContentAnimation.fade;
+      console.warn(`Invalid content animation fade option. Fallback: ${fade}.`);
+      mergedContentAnimation.fade = fade;
+    }
+    const mergedIndicatorAnimation = animation.indicator;
+    const indicatorDuration = mergedIndicatorAnimation.duration;
+    const defaultIndicatorAnimation = this.#defaults.animation.indicator;
+    if (typeof indicatorDuration !== "number" || Number.isNaN(indicatorDuration)) {
+      const duration = defaultIndicatorAnimation.duration;
+      console.warn(
+        `Invalid indicator animation duration. Fallback: ${duration} (ms).`
+      );
+      mergedIndicatorAnimation.duration = duration;
+    }
+    if (indicatorDuration < 0) {
+      console.warn("Invalid indicator animation duration. Fallback: 0 (ms).");
+      mergedIndicatorAnimation.duration = 0;
+    }
+    if (!CSS.supports(
+      "animation-timing-function",
+      mergedIndicatorAnimation.easing
+    )) {
+      const easing = defaultIndicatorAnimation.easing;
+      console.warn(
+        `Invalid indicator animation easing. Fallback: '${easing}'.`
+      );
+      mergedIndicatorAnimation.easing = easing;
+    }
+    if (typeof merged.avoidDuplicates !== "boolean") {
+      const avoidDuplicates = this.#defaults.avoidDuplicates;
+      console.warn(
+        `Invalid avoidDuplicates option. Fallback: ${avoidDuplicates}.`
+      );
+      merged.avoidDuplicates = avoidDuplicates;
+    }
+    if (typeof merged.manual !== "boolean") {
+      const manual = this.#defaults.manual;
+      console.warn(`Invalid manual option. Fallback: ${manual}.`);
+      merged.manual = manual;
+    }
+    const mergedSelector = merged.selector;
+    const defaultSelector = this.#defaults.selector;
+    try {
+      document.querySelector(mergedSelector.content);
+    } catch {
+      const content = defaultSelector.content;
+      console.warn(`Invalid content selector. Fallback: '${content}'.`);
+      mergedSelector.content = content;
+    }
+    try {
+      document.querySelector(mergedSelector.indicator);
+    } catch {
+      const indicator = defaultSelector.indicator;
+      console.warn(`Invalid indicator selector. Fallback: '${indicator}'.`);
+      mergedSelector.indicator = indicator;
+    }
+    try {
+      document.querySelector(mergedSelector.list);
+    } catch {
+      const list = defaultSelector.list;
+      console.warn(`Invalid list selector. Fallback: '${list}'.`);
+      mergedSelector.list = list;
+    }
+    try {
+      document.querySelector(mergedSelector.panel);
+    } catch {
+      const panel = defaultSelector.panel;
+      console.warn(`Invalid panel selector. Fallback: '${panel}'.`);
+      mergedSelector.panel = panel;
+    }
+    try {
+      document.querySelector(mergedSelector.tab);
+    } catch {
+      const tab = defaultSelector.tab;
+      console.warn(`Invalid tab selector. Fallback: '${tab}'.`);
+      mergedSelector.tab = tab;
+    }
+    if (typeof merged.vertical !== "boolean") {
+      const vertical = this.#defaults.vertical;
+      console.warn(`Invalid vertical option. Fallback: ${vertical}.`);
+      merged.vertical = vertical;
+    }
+    return merged;
   }
 };
 var TabsIndicator = class {
@@ -1153,7 +1256,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.13
+ * @version 2.0.15
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1161,15 +1264,15 @@ var TabsIndicator = class {
  */
 /*! Bundled license information:
 
-@y14e/attribute-util/dist/index.js:
+@y14e/attribute-utils/dist/index.js:
   (**
-   * Attribute Util
+   * Attribute Utils
    *
-   * @version 2.0.2
+   * @version 2.0.5
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
-   * @see {@link https://github.com/y14e/attribute-util}
+   * @see {@link https://github.com/y14e/attribute-utils}
    *)
 
 power-focusable/dist/index.js:
@@ -1178,7 +1281,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.25
+   * @version 4.3.28
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1202,7 +1305,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.22
+   * @version 3.1.25
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var util = require('@y14e/attribute-util');
+var utils = require('@y14e/attribute-utils');
 var button = require('@y14e/button');
 var rovingTabindex = require('@y14e/roving-tabindex');
 
@@ -22,7 +22,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var util__namespace = /*#__PURE__*/_interopNamespace(util);
+var utils__namespace = /*#__PURE__*/_interopNamespace(utils);
 
 // src/index.ts
 var Tabs = class _Tabs {
@@ -295,13 +295,13 @@ var Tabs = class _Tabs {
     this.#onContentAnimationFinish();
     this.#animationController?.abort();
     this.#animationController = null;
-    util__namespace.restoreAttributes([
+    utils__namespace.restoreAttributes([
       ...this.#listElements,
       ...this.#tabElements,
       ...this.#indicatorElements,
       ...this.#panelElements
     ]);
-    this.#contentElement && util__namespace.restoreAttributes(this.#contentElement);
+    this.#contentElement && utils__namespace.restoreAttributes(this.#contentElement);
     this.#listElements.length = 0;
     this.#tabElements.length = 0;
     this.#contentElement = null;
@@ -309,22 +309,22 @@ var Tabs = class _Tabs {
     this.#rootElement.removeAttribute("data-tabs-initialized");
   }
   #initialize() {
-    util__namespace.saveAttributes(this.#listElements, [
+    utils__namespace.saveAttributes(this.#listElements, [
       "aria-hidden",
       "aria-orientation",
       "role",
       "style"
     ]);
-    util__namespace.saveAttributes(this.#tabElements, [
+    utils__namespace.saveAttributes(this.#tabElements, [
       "aria-controls",
       "id",
       "role",
       "style",
       "tabindex"
     ]);
-    util__namespace.saveAttributes(this.#indicatorElements, "style");
-    this.#contentElement && util__namespace.saveAttributes(this.#contentElement, "style");
-    util__namespace.saveAttributes(this.#panelElements, [
+    utils__namespace.saveAttributes(this.#indicatorElements, "style");
+    this.#contentElement && utils__namespace.saveAttributes(this.#contentElement, "style");
+    utils__namespace.saveAttributes(this.#panelElements, [
       "aria-controls",
       "aria-labelledby",
       "id",
@@ -346,7 +346,7 @@ var Tabs = class _Tabs {
         return;
       }
       panel.id ||= `tabs-panel-${id}`;
-      util__namespace.addAttributeToken(tab, "aria-controls", panel.id);
+      utils__namespace.addAttributeToken(tab, "aria-controls", panel.id);
       !tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
       const isAvoided = this.#isAvoidedTab(tab);
       if (!isAvoided) {
@@ -354,7 +354,7 @@ var Tabs = class _Tabs {
       }
       tab.setAttribute("role", "tab");
       !this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
-      util__namespace.addAttributeToken(panel, "aria-labelledby", tab.id);
+      utils__namespace.addAttributeToken(panel, "aria-labelledby", tab.id);
       tab.addEventListener("click", this.#onTabClick, { signal });
       tab.addEventListener("focus", this.#onTabFocus, { signal });
       this.#buttons.push(new button.Button(tab));
@@ -451,7 +451,7 @@ var Tabs = class _Tabs {
     return !element.hasAttribute("disabled");
   }
   #mergeOptions(target, source) {
-    return {
+    const merged = {
       ...target,
       ...source,
       animation: {
@@ -469,6 +469,117 @@ var Tabs = class _Tabs {
         ...source.selector ?? {}
       }
     };
+    const animation = merged.animation;
+    const mergedContentAnimation = animation.content;
+    const defaultContentAnimation = this.#defaults.animation.content;
+    if (typeof mergedContentAnimation.crossFade !== "boolean") {
+      const crossFade = defaultContentAnimation.crossFade;
+      console.warn(
+        `Invalid content animation crossFade option. Fallback: ${crossFade}.`
+      );
+      mergedContentAnimation.crossFade = crossFade;
+    }
+    const contentDuration = mergedContentAnimation.duration;
+    if (typeof contentDuration !== "number" || Number.isNaN(contentDuration)) {
+      const duration = defaultContentAnimation.duration;
+      console.warn(
+        `Invalid content animation duration. Fallback: ${duration} (ms).`
+      );
+      mergedContentAnimation.duration = duration;
+    }
+    if (contentDuration < 0) {
+      console.warn("Invalid content animation duration. Fallback: 0 (ms).");
+      mergedContentAnimation.duration = 0;
+    }
+    if (!CSS.supports("animation-timing-function", mergedContentAnimation.easing)) {
+      const easing = defaultContentAnimation.easing;
+      console.warn(`Invalid content animation easing. Fallback: '${easing}'.`);
+      mergedContentAnimation.easing = easing;
+    }
+    if (typeof mergedContentAnimation.fade !== "boolean") {
+      const fade = defaultContentAnimation.fade;
+      console.warn(`Invalid content animation fade option. Fallback: ${fade}.`);
+      mergedContentAnimation.fade = fade;
+    }
+    const mergedIndicatorAnimation = animation.indicator;
+    const indicatorDuration = mergedIndicatorAnimation.duration;
+    const defaultIndicatorAnimation = this.#defaults.animation.indicator;
+    if (typeof indicatorDuration !== "number" || Number.isNaN(indicatorDuration)) {
+      const duration = defaultIndicatorAnimation.duration;
+      console.warn(
+        `Invalid indicator animation duration. Fallback: ${duration} (ms).`
+      );
+      mergedIndicatorAnimation.duration = duration;
+    }
+    if (indicatorDuration < 0) {
+      console.warn("Invalid indicator animation duration. Fallback: 0 (ms).");
+      mergedIndicatorAnimation.duration = 0;
+    }
+    if (!CSS.supports(
+      "animation-timing-function",
+      mergedIndicatorAnimation.easing
+    )) {
+      const easing = defaultIndicatorAnimation.easing;
+      console.warn(
+        `Invalid indicator animation easing. Fallback: '${easing}'.`
+      );
+      mergedIndicatorAnimation.easing = easing;
+    }
+    if (typeof merged.avoidDuplicates !== "boolean") {
+      const avoidDuplicates = this.#defaults.avoidDuplicates;
+      console.warn(
+        `Invalid avoidDuplicates option. Fallback: ${avoidDuplicates}.`
+      );
+      merged.avoidDuplicates = avoidDuplicates;
+    }
+    if (typeof merged.manual !== "boolean") {
+      const manual = this.#defaults.manual;
+      console.warn(`Invalid manual option. Fallback: ${manual}.`);
+      merged.manual = manual;
+    }
+    const mergedSelector = merged.selector;
+    const defaultSelector = this.#defaults.selector;
+    try {
+      document.querySelector(mergedSelector.content);
+    } catch {
+      const content = defaultSelector.content;
+      console.warn(`Invalid content selector. Fallback: '${content}'.`);
+      mergedSelector.content = content;
+    }
+    try {
+      document.querySelector(mergedSelector.indicator);
+    } catch {
+      const indicator = defaultSelector.indicator;
+      console.warn(`Invalid indicator selector. Fallback: '${indicator}'.`);
+      mergedSelector.indicator = indicator;
+    }
+    try {
+      document.querySelector(mergedSelector.list);
+    } catch {
+      const list = defaultSelector.list;
+      console.warn(`Invalid list selector. Fallback: '${list}'.`);
+      mergedSelector.list = list;
+    }
+    try {
+      document.querySelector(mergedSelector.panel);
+    } catch {
+      const panel = defaultSelector.panel;
+      console.warn(`Invalid panel selector. Fallback: '${panel}'.`);
+      mergedSelector.panel = panel;
+    }
+    try {
+      document.querySelector(mergedSelector.tab);
+    } catch {
+      const tab = defaultSelector.tab;
+      console.warn(`Invalid tab selector. Fallback: '${tab}'.`);
+      mergedSelector.tab = tab;
+    }
+    if (typeof merged.vertical !== "boolean") {
+      const vertical = this.#defaults.vertical;
+      console.warn(`Invalid vertical option. Fallback: ${vertical}.`);
+      merged.vertical = vertical;
+    }
+    return merged;
   }
 };
 var TabsIndicator = class {
@@ -543,7 +654,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.13
+ * @version 2.0.15
  * @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 2.0.13
+ * @version 2.0.15
  * @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 2.0.13
+ * @version 2.0.15
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -1,4 +1,4 @@
-import * as util from '@y14e/attribute-util';
+import * as utils from '@y14e/attribute-utils';
 import { Button } from '@y14e/button';
 import { createRovingTabIndex } from '@y14e/roving-tabindex';
 
@@ -273,13 +273,13 @@ var Tabs = class _Tabs {
     this.#onContentAnimationFinish();
     this.#animationController?.abort();
     this.#animationController = null;
-    util.restoreAttributes([
+    utils.restoreAttributes([
       ...this.#listElements,
       ...this.#tabElements,
       ...this.#indicatorElements,
       ...this.#panelElements
     ]);
-    this.#contentElement && util.restoreAttributes(this.#contentElement);
+    this.#contentElement && utils.restoreAttributes(this.#contentElement);
     this.#listElements.length = 0;
     this.#tabElements.length = 0;
     this.#contentElement = null;
@@ -287,22 +287,22 @@ var Tabs = class _Tabs {
     this.#rootElement.removeAttribute("data-tabs-initialized");
   }
   #initialize() {
-    util.saveAttributes(this.#listElements, [
+    utils.saveAttributes(this.#listElements, [
       "aria-hidden",
       "aria-orientation",
       "role",
       "style"
     ]);
-    util.saveAttributes(this.#tabElements, [
+    utils.saveAttributes(this.#tabElements, [
       "aria-controls",
       "id",
       "role",
       "style",
       "tabindex"
     ]);
-    util.saveAttributes(this.#indicatorElements, "style");
-    this.#contentElement && util.saveAttributes(this.#contentElement, "style");
-    util.saveAttributes(this.#panelElements, [
+    utils.saveAttributes(this.#indicatorElements, "style");
+    this.#contentElement && utils.saveAttributes(this.#contentElement, "style");
+    utils.saveAttributes(this.#panelElements, [
       "aria-controls",
       "aria-labelledby",
       "id",
@@ -324,7 +324,7 @@ var Tabs = class _Tabs {
         return;
       }
       panel.id ||= `tabs-panel-${id}`;
-      util.addAttributeToken(tab, "aria-controls", panel.id);
+      utils.addAttributeToken(tab, "aria-controls", panel.id);
       !tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
       const isAvoided = this.#isAvoidedTab(tab);
       if (!isAvoided) {
@@ -332,7 +332,7 @@ var Tabs = class _Tabs {
       }
       tab.setAttribute("role", "tab");
       !this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
-      util.addAttributeToken(panel, "aria-labelledby", tab.id);
+      utils.addAttributeToken(panel, "aria-labelledby", tab.id);
       tab.addEventListener("click", this.#onTabClick, { signal });
       tab.addEventListener("focus", this.#onTabFocus, { signal });
       this.#buttons.push(new Button(tab));
@@ -429,7 +429,7 @@ var Tabs = class _Tabs {
     return !element.hasAttribute("disabled");
   }
   #mergeOptions(target, source) {
-    return {
+    const merged = {
       ...target,
       ...source,
       animation: {
@@ -447,6 +447,117 @@ var Tabs = class _Tabs {
         ...source.selector ?? {}
       }
     };
+    const animation = merged.animation;
+    const mergedContentAnimation = animation.content;
+    const defaultContentAnimation = this.#defaults.animation.content;
+    if (typeof mergedContentAnimation.crossFade !== "boolean") {
+      const crossFade = defaultContentAnimation.crossFade;
+      console.warn(
+        `Invalid content animation crossFade option. Fallback: ${crossFade}.`
+      );
+      mergedContentAnimation.crossFade = crossFade;
+    }
+    const contentDuration = mergedContentAnimation.duration;
+    if (typeof contentDuration !== "number" || Number.isNaN(contentDuration)) {
+      const duration = defaultContentAnimation.duration;
+      console.warn(
+        `Invalid content animation duration. Fallback: ${duration} (ms).`
+      );
+      mergedContentAnimation.duration = duration;
+    }
+    if (contentDuration < 0) {
+      console.warn("Invalid content animation duration. Fallback: 0 (ms).");
+      mergedContentAnimation.duration = 0;
+    }
+    if (!CSS.supports("animation-timing-function", mergedContentAnimation.easing)) {
+      const easing = defaultContentAnimation.easing;
+      console.warn(`Invalid content animation easing. Fallback: '${easing}'.`);
+      mergedContentAnimation.easing = easing;
+    }
+    if (typeof mergedContentAnimation.fade !== "boolean") {
+      const fade = defaultContentAnimation.fade;
+      console.warn(`Invalid content animation fade option. Fallback: ${fade}.`);
+      mergedContentAnimation.fade = fade;
+    }
+    const mergedIndicatorAnimation = animation.indicator;
+    const indicatorDuration = mergedIndicatorAnimation.duration;
+    const defaultIndicatorAnimation = this.#defaults.animation.indicator;
+    if (typeof indicatorDuration !== "number" || Number.isNaN(indicatorDuration)) {
+      const duration = defaultIndicatorAnimation.duration;
+      console.warn(
+        `Invalid indicator animation duration. Fallback: ${duration} (ms).`
+      );
+      mergedIndicatorAnimation.duration = duration;
+    }
+    if (indicatorDuration < 0) {
+      console.warn("Invalid indicator animation duration. Fallback: 0 (ms).");
+      mergedIndicatorAnimation.duration = 0;
+    }
+    if (!CSS.supports(
+      "animation-timing-function",
+      mergedIndicatorAnimation.easing
+    )) {
+      const easing = defaultIndicatorAnimation.easing;
+      console.warn(
+        `Invalid indicator animation easing. Fallback: '${easing}'.`
+      );
+      mergedIndicatorAnimation.easing = easing;
+    }
+    if (typeof merged.avoidDuplicates !== "boolean") {
+      const avoidDuplicates = this.#defaults.avoidDuplicates;
+      console.warn(
+        `Invalid avoidDuplicates option. Fallback: ${avoidDuplicates}.`
+      );
+      merged.avoidDuplicates = avoidDuplicates;
+    }
+    if (typeof merged.manual !== "boolean") {
+      const manual = this.#defaults.manual;
+      console.warn(`Invalid manual option. Fallback: ${manual}.`);
+      merged.manual = manual;
+    }
+    const mergedSelector = merged.selector;
+    const defaultSelector = this.#defaults.selector;
+    try {
+      document.querySelector(mergedSelector.content);
+    } catch {
+      const content = defaultSelector.content;
+      console.warn(`Invalid content selector. Fallback: '${content}'.`);
+      mergedSelector.content = content;
+    }
+    try {
+      document.querySelector(mergedSelector.indicator);
+    } catch {
+      const indicator = defaultSelector.indicator;
+      console.warn(`Invalid indicator selector. Fallback: '${indicator}'.`);
+      mergedSelector.indicator = indicator;
+    }
+    try {
+      document.querySelector(mergedSelector.list);
+    } catch {
+      const list = defaultSelector.list;
+      console.warn(`Invalid list selector. Fallback: '${list}'.`);
+      mergedSelector.list = list;
+    }
+    try {
+      document.querySelector(mergedSelector.panel);
+    } catch {
+      const panel = defaultSelector.panel;
+      console.warn(`Invalid panel selector. Fallback: '${panel}'.`);
+      mergedSelector.panel = panel;
+    }
+    try {
+      document.querySelector(mergedSelector.tab);
+    } catch {
+      const tab = defaultSelector.tab;
+      console.warn(`Invalid tab selector. Fallback: '${tab}'.`);
+      mergedSelector.tab = tab;
+    }
+    if (typeof merged.vertical !== "boolean") {
+      const vertical = this.#defaults.vertical;
+      console.warn(`Invalid vertical option. Fallback: ${vertical}.`);
+      merged.vertical = vertical;
+    }
+    return merged;
   }
 };
 var TabsIndicator = class {
@@ -521,7 +632,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.13
+ * @version 2.0.15
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/tabs",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -53,8 +53,8 @@
     "esbuild": true
   },
   "dependencies": {
-    "@y14e/attribute-util": "^2.0.2",
+    "@y14e/attribute-utils": "^2.0.5",
     "@y14e/button": "^1.0.8",
-    "@y14e/roving-tabindex": "^3.1.22"
+    "@y14e/roving-tabindex": "^3.1.25"
   }
 }