@y14e/tabs 2.0.5 → 2.0.7

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.5';
+import Tabs from 'https://esm.sh/@y14e/tabs@2.0.7';
 // or
-import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.5/+esm';
+import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.7/+esm';
 // or
-import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.5';
+import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.7';
 ```
 
 ## 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();
@@ -722,7 +719,6 @@ var Tabs = class _Tabs {
     this.#rootElement.setAttribute("data-tabs-animating", "");
     const { style } = this.#contentElement;
     style.setProperty("overflow", "clip");
-    style.setProperty("position", "relative");
     const { crossFade, fade } = this.#settings.animation.content;
     const panel = this.#bindings.get(tab)?.panel;
     if (!panel) {
@@ -732,11 +728,8 @@ var Tabs = class _Tabs {
       const { style: style2 } = p;
       if (fade) {
         style2.setProperty("content-visibility", "visible");
-        style2.setProperty("display", "block");
         style2.setProperty("opacity", p.hidden ? "0" : "1");
       }
-      style2.setProperty("inline-size", "100%");
-      style2.setProperty("position", "absolute");
       p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
     });
     this.#panelElements.forEach((p, i) => {
@@ -863,6 +856,7 @@ var Tabs = class _Tabs {
       ...this.#indicatorElements,
       ...this.#panelElements
     ]);
+    this.#contentElement && restoreAttributes([this.#contentElement]);
     this.#listElements.length = 0;
     this.#tabElements.length = 0;
     this.#contentElement = null;
@@ -884,11 +878,13 @@ var Tabs = class _Tabs {
       "tabindex"
     ]);
     saveAttributes(this.#indicatorElements, ["style"]);
+    this.#contentElement && saveAttributes([this.#contentElement], ["style"]);
     saveAttributes(this.#panelElements, [
       "aria-controls",
       "aria-labelledby",
       "id",
       "role",
+      "style",
       "tabindex"
     ]);
     this.#eventController = new AbortController();
@@ -920,13 +916,20 @@ var Tabs = class _Tabs {
     });
     this.#indicatorElements.forEach((indicator) => {
       indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
-      const { style } = indicator;
-      style.setProperty("display", "block");
-      style.setProperty("position", "absolute");
+      const { style: style2 } = indicator;
+      style2.setProperty("display", "block");
+      style2.setProperty("position", "absolute");
       this.#indicators.push(new TabsIndicator(indicator, this.#settings));
     });
+    if (!this.#contentElement) {
+      return;
+    }
+    const { style } = this.#contentElement;
+    style.setProperty("align-items", "start");
+    style.setProperty("display", "grid");
     this.#panelElements.forEach((panel) => {
       panel.setAttribute("role", "tabpanel");
+      panel.style.setProperty("grid-area", "1 / 1");
       !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
       panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
         signal
@@ -964,17 +967,11 @@ var Tabs = class _Tabs {
     this.#isAvoidedTab(tab) && tab.blur();
   };
   #onContentAnimationFinish() {
-    ["block-size", "overflow", "position"].forEach((name) => {
+    ["block-size", "overflow"].forEach((name) => {
       this.#contentElement?.style.removeProperty(name);
     });
     this.#panelElements.forEach((panel) => {
-      [
-        "content-visibility",
-        "display",
-        "inline-size",
-        "opacity",
-        "position"
-      ].forEach((name) => {
+      ["content-visibility", "opacity"].forEach((name) => {
         panel.style.removeProperty(name);
       });
     });
@@ -1101,7 +1098,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.5
+ * @version 2.0.7
  * @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();
@@ -720,7 +717,6 @@ var Tabs = class _Tabs {
     this.#rootElement.setAttribute("data-tabs-animating", "");
     const { style } = this.#contentElement;
     style.setProperty("overflow", "clip");
-    style.setProperty("position", "relative");
     const { crossFade, fade } = this.#settings.animation.content;
     const panel = this.#bindings.get(tab)?.panel;
     if (!panel) {
@@ -730,11 +726,8 @@ var Tabs = class _Tabs {
       const { style: style2 } = p;
       if (fade) {
         style2.setProperty("content-visibility", "visible");
-        style2.setProperty("display", "block");
         style2.setProperty("opacity", p.hidden ? "0" : "1");
       }
-      style2.setProperty("inline-size", "100%");
-      style2.setProperty("position", "absolute");
       p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
     });
     this.#panelElements.forEach((p, i) => {
@@ -861,6 +854,7 @@ var Tabs = class _Tabs {
       ...this.#indicatorElements,
       ...this.#panelElements
     ]);
+    this.#contentElement && restoreAttributes([this.#contentElement]);
     this.#listElements.length = 0;
     this.#tabElements.length = 0;
     this.#contentElement = null;
@@ -882,11 +876,13 @@ var Tabs = class _Tabs {
       "tabindex"
     ]);
     saveAttributes(this.#indicatorElements, ["style"]);
+    this.#contentElement && saveAttributes([this.#contentElement], ["style"]);
     saveAttributes(this.#panelElements, [
       "aria-controls",
       "aria-labelledby",
       "id",
       "role",
+      "style",
       "tabindex"
     ]);
     this.#eventController = new AbortController();
@@ -918,13 +914,20 @@ var Tabs = class _Tabs {
     });
     this.#indicatorElements.forEach((indicator) => {
       indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
-      const { style } = indicator;
-      style.setProperty("display", "block");
-      style.setProperty("position", "absolute");
+      const { style: style2 } = indicator;
+      style2.setProperty("display", "block");
+      style2.setProperty("position", "absolute");
       this.#indicators.push(new TabsIndicator(indicator, this.#settings));
     });
+    if (!this.#contentElement) {
+      return;
+    }
+    const { style } = this.#contentElement;
+    style.setProperty("align-items", "start");
+    style.setProperty("display", "grid");
     this.#panelElements.forEach((panel) => {
       panel.setAttribute("role", "tabpanel");
+      panel.style.setProperty("grid-area", "1 / 1");
       !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
       panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
         signal
@@ -962,17 +965,11 @@ var Tabs = class _Tabs {
     this.#isAvoidedTab(tab) && tab.blur();
   };
   #onContentAnimationFinish() {
-    ["block-size", "overflow", "position"].forEach((name) => {
+    ["block-size", "overflow"].forEach((name) => {
       this.#contentElement?.style.removeProperty(name);
     });
     this.#panelElements.forEach((panel) => {
-      [
-        "content-visibility",
-        "display",
-        "inline-size",
-        "opacity",
-        "position"
-      ].forEach((name) => {
+      ["content-visibility", "opacity"].forEach((name) => {
         panel.style.removeProperty(name);
       });
     });
@@ -1099,7 +1096,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.5
+ * @version 2.0.7
  * @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

@@ -148,7 +148,6 @@ var Tabs = class _Tabs {
     this.#rootElement.setAttribute("data-tabs-animating", "");
     const { style } = this.#contentElement;
     style.setProperty("overflow", "clip");
-    style.setProperty("position", "relative");
     const { crossFade, fade } = this.#settings.animation.content;
     const panel = this.#bindings.get(tab)?.panel;
     if (!panel) {
@@ -158,11 +157,8 @@ var Tabs = class _Tabs {
       const { style: style2 } = p;
       if (fade) {
         style2.setProperty("content-visibility", "visible");
-        style2.setProperty("display", "block");
         style2.setProperty("opacity", p.hidden ? "0" : "1");
       }
-      style2.setProperty("inline-size", "100%");
-      style2.setProperty("position", "absolute");
       p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
     });
     this.#panelElements.forEach((p, i) => {
@@ -289,6 +285,7 @@ var Tabs = class _Tabs {
       ...this.#indicatorElements,
       ...this.#panelElements
     ]);
+    this.#contentElement && attributesUtils.restoreAttributes([this.#contentElement]);
     this.#listElements.length = 0;
     this.#tabElements.length = 0;
     this.#contentElement = null;
@@ -310,11 +307,13 @@ var Tabs = class _Tabs {
       "tabindex"
     ]);
     attributesUtils.saveAttributes(this.#indicatorElements, ["style"]);
+    this.#contentElement && attributesUtils.saveAttributes([this.#contentElement], ["style"]);
     attributesUtils.saveAttributes(this.#panelElements, [
       "aria-controls",
       "aria-labelledby",
       "id",
       "role",
+      "style",
       "tabindex"
     ]);
     this.#eventController = new AbortController();
@@ -346,13 +345,20 @@ var Tabs = class _Tabs {
     });
     this.#indicatorElements.forEach((indicator) => {
       indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
-      const { style } = indicator;
-      style.setProperty("display", "block");
-      style.setProperty("position", "absolute");
+      const { style: style2 } = indicator;
+      style2.setProperty("display", "block");
+      style2.setProperty("position", "absolute");
       this.#indicators.push(new TabsIndicator(indicator, this.#settings));
     });
+    if (!this.#contentElement) {
+      return;
+    }
+    const { style } = this.#contentElement;
+    style.setProperty("align-items", "start");
+    style.setProperty("display", "grid");
     this.#panelElements.forEach((panel) => {
       panel.setAttribute("role", "tabpanel");
+      panel.style.setProperty("grid-area", "1 / 1");
       !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
       panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
         signal
@@ -390,17 +396,11 @@ var Tabs = class _Tabs {
     this.#isAvoidedTab(tab) && tab.blur();
   };
   #onContentAnimationFinish() {
-    ["block-size", "overflow", "position"].forEach((name) => {
+    ["block-size", "overflow"].forEach((name) => {
       this.#contentElement?.style.removeProperty(name);
     });
     this.#panelElements.forEach((panel) => {
-      [
-        "content-visibility",
-        "display",
-        "inline-size",
-        "opacity",
-        "position"
-      ].forEach((name) => {
+      ["content-visibility", "opacity"].forEach((name) => {
         panel.style.removeProperty(name);
       });
     });
@@ -527,7 +527,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.5
+ * @version 2.0.7
  * @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.5
+ * @version 2.0.7
  * @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.5
+ * @version 2.0.7
  * @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

@@ -142,7 +142,6 @@ var Tabs = class _Tabs {
     this.#rootElement.setAttribute("data-tabs-animating", "");
     const { style } = this.#contentElement;
     style.setProperty("overflow", "clip");
-    style.setProperty("position", "relative");
     const { crossFade, fade } = this.#settings.animation.content;
     const panel = this.#bindings.get(tab)?.panel;
     if (!panel) {
@@ -152,11 +151,8 @@ var Tabs = class _Tabs {
       const { style: style2 } = p;
       if (fade) {
         style2.setProperty("content-visibility", "visible");
-        style2.setProperty("display", "block");
         style2.setProperty("opacity", p.hidden ? "0" : "1");
       }
-      style2.setProperty("inline-size", "100%");
-      style2.setProperty("position", "absolute");
       p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
     });
     this.#panelElements.forEach((p, i) => {
@@ -283,6 +279,7 @@ var Tabs = class _Tabs {
       ...this.#indicatorElements,
       ...this.#panelElements
     ]);
+    this.#contentElement && restoreAttributes([this.#contentElement]);
     this.#listElements.length = 0;
     this.#tabElements.length = 0;
     this.#contentElement = null;
@@ -304,11 +301,13 @@ var Tabs = class _Tabs {
       "tabindex"
     ]);
     saveAttributes(this.#indicatorElements, ["style"]);
+    this.#contentElement && saveAttributes([this.#contentElement], ["style"]);
     saveAttributes(this.#panelElements, [
       "aria-controls",
       "aria-labelledby",
       "id",
       "role",
+      "style",
       "tabindex"
     ]);
     this.#eventController = new AbortController();
@@ -340,13 +339,20 @@ var Tabs = class _Tabs {
     });
     this.#indicatorElements.forEach((indicator) => {
       indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
-      const { style } = indicator;
-      style.setProperty("display", "block");
-      style.setProperty("position", "absolute");
+      const { style: style2 } = indicator;
+      style2.setProperty("display", "block");
+      style2.setProperty("position", "absolute");
       this.#indicators.push(new TabsIndicator(indicator, this.#settings));
     });
+    if (!this.#contentElement) {
+      return;
+    }
+    const { style } = this.#contentElement;
+    style.setProperty("align-items", "start");
+    style.setProperty("display", "grid");
     this.#panelElements.forEach((panel) => {
       panel.setAttribute("role", "tabpanel");
+      panel.style.setProperty("grid-area", "1 / 1");
       !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
       panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
         signal
@@ -384,17 +390,11 @@ var Tabs = class _Tabs {
     this.#isAvoidedTab(tab) && tab.blur();
   };
   #onContentAnimationFinish() {
-    ["block-size", "overflow", "position"].forEach((name) => {
+    ["block-size", "overflow"].forEach((name) => {
       this.#contentElement?.style.removeProperty(name);
     });
     this.#panelElements.forEach((panel) => {
-      [
-        "content-visibility",
-        "display",
-        "inline-size",
-        "opacity",
-        "position"
-      ].forEach((name) => {
+      ["content-visibility", "opacity"].forEach((name) => {
         panel.style.removeProperty(name);
       });
     });
@@ -521,7 +521,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.5
+ * @version 2.0.7
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/tabs",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "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"
   }
 }