npm - @y14e/tabs - Versions diffs - 2.0.6 → 2.0.8 - Mend

@y14e/tabs 2.0.6 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -13,11 +13,11 @@ npm i @y14e/tabs
 import Tabs from '@y14e/tabs';
 // CDNs
-import Tabs from 'https://esm.sh/@y14e/tabs@2.0.6';
+import Tabs from 'https://esm.sh/@y14e/tabs@2.0.8';
 // or
-import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.6/+esm';
+import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.8/+esm';
 // or
-import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.6';
+import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.8';
 ```
 ## Usage

package/dist/index.bundle.cjs CHANGED Viewed

@@ -24,8 +24,8 @@ function addTokenToAttribute(element, attribute, token, options = {}) {
   }
 }
 var snapshots = /* @__PURE__ */ new WeakMap();
-function restoreAttributes(elements) {
-  for (const element of elements) {
+function restoreAttributes(element_or_elements) {
+  for (const element of Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]) {
     const snapshot = snapshots.get(element);
     if (!snapshot) {
       continue;
@@ -36,8 +36,9 @@ function restoreAttributes(elements) {
     snapshots.delete(element);
   }
 }
-function saveAttributes(elements, attributes) {
-  elements.forEach((element) => {
+function saveAttributes(element_or_elements, attribute_or_attributes) {
+  const attributes = Array.isArray(attribute_or_attributes) ? attribute_or_attributes : [attribute_or_attributes];
+  (Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]).forEach((element) => {
     let snapshot = snapshots.get(element);
     if (!snapshot) {
       snapshot = /* @__PURE__ */ new Map();
@@ -51,6 +52,10 @@ function saveAttributes(elements, attributes) {
 // node_modules/power-focusable/dist/index.js
 var FOCUSABLE_SELECTOR = `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`;
+var FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX = FOCUSABLE_SELECTOR.replace(
+  /(,\s*)?\[tabindex="-1"\]/g,
+  ""
+);
 function getFocusables(container = document.body, options = {}) {
   if (!(container instanceof Element)) {
     console.warn("Invalid container element. Fallback: <body> element.");
@@ -87,36 +92,43 @@ function getFocusables(container = document.body, options = {}) {
     console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
     skipVisibilityCheck = false;
   }
-  const elements = [];
+  const candidates = [];
   if (composed || include) {
     let traverse2 = function(node) {
-      if (!(node instanceof Element)) {
-        return;
-      }
-      if (isFocusable(node, { skipNegativeTabIndexCheck, skipVisibilityCheck }) || include?.(node)) {
-        elements[elements.length] = node;
+      if (isFocusable(node, {
+        skipNegativeTabIndexCheck,
+        skipVisibilityCheck
+      }) || include?.(node)) {
+        candidates[candidates.length] = node;
       }
-      const children = getComposedChildren(node);
-      for (let i = 0, l = children.length; i < l; i++) {
-        const child = children[i];
+      const children2 = composed ? getComposedChildren(node) : getChildren(node);
+      for (let i = 0, l = children2.length; i < l; i++) {
+        const child = children2[i];
         child && traverse2(child);
       }
     };
-    traverse2(container);
+    const children = composed ? getComposedChildren(container) : getChildren(container);
+    for (let i = 0, l = children.length; i < l; i++) {
+      const child = children[i];
+      child && traverse2(child);
+    }
   } else {
-    const candidates = container.querySelectorAll(FOCUSABLE_SELECTOR);
-    for (let i = 0, l = candidates.length; i < l; i++) {
-      const candidate = candidates[i];
-      if (candidate && isFocusable(candidate, {
+    const matches = container.querySelectorAll(
+      skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX : FOCUSABLE_SELECTOR
+    );
+    for (let i = 0, l = matches.length; i < l; i++) {
+      const matched = matches[i];
+      if (matched && isFocusable(matched, {
         skipNegativeTabIndexCheck,
         skipVisibilityCheck
       })) {
-        elements[elements.length] = candidate;
+        candidates[candidates.length] = matched;
       }
     }
   }
-  const unfiltered = normalizeRadioGroup(sortByTabIndex(elements));
-  return filter ? unfiltered.filter(filter) : unfiltered;
+  return normalizeRadioGroup(
+    sortByTabIndex(filter ? candidates.filter(filter) : candidates)
+  );
 }
 function isFocusable(element, options = {}) {
   if (!(element instanceof Element)) {
@@ -139,7 +151,7 @@ function isFocusable(element, options = {}) {
     return false;
   }
   if (!element.matches(
-    skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR.replace(/(,\s*)?\[tabindex="-1"\]/g, "") : FOCUSABLE_SELECTOR
+    skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX : FOCUSABLE_SELECTOR
   )) {
     return false;
   }
@@ -197,22 +209,42 @@ function normalizeRadioGroup(elements) {
     if (!map) {
       map = /* @__PURE__ */ new Map();
     }
-    const key = `${element.form?.id ?? "no-form"}::${element.name}`;
-    const group = map.get(key) ?? map.set(key, []).get(key);
-    if (group) {
-      group[group.length] = element;
+    const root = element.getRootNode();
+    let value = map.get(root);
+    if (!value) {
+      value = /* @__PURE__ */ new Map();
+      map.set(root, value);
+    }
+    let v = value.get(element.form);
+    if (!v) {
+      v = /* @__PURE__ */ new Map();
+      value.set(element.form, v);
     }
+    let vv = v.get(element.name);
+    if (!vv) {
+      vv = [];
+      v.set(element.name, vv);
+    }
+    vv[vv.length] = element;
   }
   if (!map) {
     return elements;
   }
   const placeholder = /* @__PURE__ */ new Set();
-  for (const group of map.values()) {
-    placeholder.add(group.find((radio) => radio.checked) ?? group[0]);
+  for (const value of map.values()) {
+    for (const v of value.values()) {
+      for (const vv of v.values()) {
+        const radio = vv.find((element) => element.checked) ?? vv[0];
+        radio && placeholder.add(radio);
+      }
+    }
   }
-  return elements.filter(
-    (element) => isUngroupedRadio(element) ? placeholder.has(element) : true
-  );
+  return elements.filter((element) => {
+    if (!(element instanceof HTMLInputElement)) {
+      return true;
+    }
+    return !isUngroupedRadio(element) || placeholder.has(element);
+  });
 }
 function sortByTabIndex(elements) {
   const ordered = [];
@@ -284,7 +316,7 @@ function isInert(element) {
   return "inert" in element && !!element.inert;
 }
 function isUngroupedRadio(element) {
-  return element instanceof HTMLInputElement && element.type === "radio" && !!element.name;
+  return element.type === "radio" && !!element.name;
 }
 // node_modules/@y14e/button/dist/index.js
@@ -343,14 +375,8 @@ function createRovingTabIndex(container, options = {}) {
     return () => {
     };
   }
-  try {
-    const roving = new RovingTabIndex(container, options);
-    return () => roving.destroy();
-  } catch (error) {
-    error instanceof Error && console.warn(error.message || error);
-    return () => {
-    };
-  }
+  const roving = new RovingTabIndex(container, options);
+  return () => roving.destroy();
 }
 var RovingTabIndex = class _RovingTabIndex {
   static #initialized = /* @__PURE__ */ new Set();
@@ -364,17 +390,17 @@ var RovingTabIndex = class _RovingTabIndex {
   constructor(container, options = {}) {
     this.#container = container;
     let {
-      direction,
+      direction = "both",
       navigationOnly = false,
       noMemory = false,
       noStart = false,
-      selector,
+      selector = "",
       typeahead = false,
       wrap = false
     } = options;
-    if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
-      console.warn("Invalid direction option. Fallback: both (undefined).");
-      direction = void 0;
+    if (!["both", "horizontal", "vertical"].includes(direction)) {
+      console.warn("Invalid direction option. Fallback: 'both'.");
+      direction = "both";
     }
     if (typeof navigationOnly !== "boolean") {
       console.warn("Invalid navigationOnly option. Fallback: false.");
@@ -388,11 +414,18 @@ var RovingTabIndex = class _RovingTabIndex {
       console.warn("Invalid noStart option. Fallback: false.");
       noStart = false;
     }
-    if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
-      console.warn(
-        "Invalid selector. Fallback: all focusable elements (undefined)."
-      );
-      selector = void 0;
+    if (selector !== "") {
+      if (typeof selector !== "string" || !selector.trim()) {
+        console.warn("Invalid selector. Fallback: no selector string.");
+        selector = "";
+      } else {
+        try {
+          container.querySelector(selector);
+        } catch {
+          console.warn("Invalid selector. Fallback: no selector string.");
+          selector = "";
+        }
+      }
     }
     if (typeof typeahead !== "boolean") {
       console.warn("Invalid typeahead option. Fallback: false.");
@@ -402,9 +435,15 @@ var RovingTabIndex = class _RovingTabIndex {
       console.warn("Invalid wrap option. Fallback: false.");
       wrap = false;
     }
-    this.#settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
-    direction && Object.assign(this.#settings, { direction });
-    selector && Object.assign(this.#settings, { selector });
+    this.#settings = {
+      direction,
+      navigationOnly,
+      noMemory,
+      noStart,
+      selector,
+      typeahead,
+      wrap
+    };
     this.#selectorFilter = this.#createSelectorFilter();
     this.#initialize();
   }
@@ -415,7 +454,10 @@ var RovingTabIndex = class _RovingTabIndex {
     this.#isDestroyed = true;
     this.#controller?.abort();
     this.#controller = null;
-    restoreAttributes([...this.#focusables]);
+    this.#focusables.forEach((focusable) => {
+      _RovingTabIndex.#initialized.delete(focusable);
+      restoreAttributes(focusable);
+    });
     this.#focusables.clear();
     this.#focusablesByFirstChar.clear();
   }
@@ -452,7 +494,7 @@ var RovingTabIndex = class _RovingTabIndex {
       return;
     }
     const { direction, typeahead, wrap } = this.#settings;
-    const isBoth = !direction;
+    const isBoth = direction === "both";
     const isHorizontal = direction === "horizontal";
     if (![
       "End",
@@ -468,14 +510,16 @@ var RovingTabIndex = class _RovingTabIndex {
     if (!(active instanceof Element)) {
       return;
     }
-    const current = this.#getFocusables();
-    if (!current.includes(active)) {
+    const candidates = this.#getFocusables().filter(
+      (focusable2) => this.#focusables.has(focusable2)
+    );
+    if (!candidates.includes(active)) {
       return;
     }
     event.preventDefault();
-    const currentIndex = current.indexOf(active);
+    const activeIndex = candidates.indexOf(active);
     let newIndex;
-    let target = current;
+    let target = candidates;
     switch (key) {
       case "End":
         newIndex = -1;
@@ -485,22 +529,26 @@ var RovingTabIndex = class _RovingTabIndex {
         break;
       case "ArrowLeft":
       case "ArrowUp": {
-        const rawIndex = currentIndex - 1;
+        const rawIndex = activeIndex - 1;
         newIndex = wrap ? rawIndex : Math.max(rawIndex, 0);
         break;
       }
       case "ArrowRight":
       case "ArrowDown": {
-        const rawIndex = currentIndex + 1;
-        newIndex = wrap ? rawIndex % current.length : Math.min(rawIndex, current.length - 1);
+        const rawIndex = activeIndex + 1;
+        const length = target.length;
+        newIndex = wrap ? rawIndex % length : Math.min(rawIndex, length - 1);
         break;
       }
       default: {
-        target = this.#focusablesByFirstChar.get(key.toUpperCase()) ?? [];
-        const foundIndex = target.findIndex(
-          (focusable2) => current.indexOf(focusable2) > currentIndex
+        const focusables = new Set(
+          this.#focusablesByFirstChar.get(key.toUpperCase()) ?? []
         );
-        newIndex = foundIndex >= 0 ? foundIndex : 0;
+        target = candidates.filter((focusable2) => focusables.has(focusable2));
+        const afterIndex = target.findIndex(
+          (focusable2) => candidates.indexOf(focusable2) > activeIndex
+        );
+        newIndex = afterIndex >= 0 ? afterIndex : 0;
       }
     }
     const focusable = target.at(newIndex);
@@ -510,12 +558,16 @@ var RovingTabIndex = class _RovingTabIndex {
     const current = new Set(this.#getFocusables());
     for (const focusable of this.#focusables) {
       if (!current.has(focusable)) {
-        focusable.isConnected && restoreAttributes([focusable]);
+        _RovingTabIndex.#initialized.delete(focusable);
+        restoreAttributes(focusable);
         this.#focusables.delete(focusable);
-        this.#focusablesByFirstChar.forEach((focusables) => {
+        for (const [key, focusables] of this.#focusablesByFirstChar) {
           const index = focusables.indexOf(focusable);
-          index >= 0 && focusables.splice(index, 1);
-        });
+          if (index >= 0) {
+            focusables.splice(index, 1);
+            !focusables.length && this.#focusablesByFirstChar.delete(key);
+          }
+        }
       }
     }
     const { navigationOnly, noStart, typeahead } = this.#settings;
@@ -524,12 +576,12 @@ var RovingTabIndex = class _RovingTabIndex {
         continue;
       }
       if (_RovingTabIndex.#initialized.has(focusable)) {
-        throw new TypeError("Already initialized");
+        continue;
       }
       this.#focusables.add(focusable);
       _RovingTabIndex.#initialized.add(focusable);
       if (!navigationOnly) {
-        saveAttributes([focusable], ["tabindex"]);
+        saveAttributes(focusable, "tabindex");
         focusable.setAttribute("tabindex", "-1");
       }
       if (!typeahead) {
@@ -542,7 +594,7 @@ var RovingTabIndex = class _RovingTabIndex {
       );
       if (char) {
         keys.add(char);
-        saveAttributes([focusable], ["aria-keyshortcuts"]);
+        saveAttributes(focusable, "aria-keyshortcuts");
         addTokenToAttribute(focusable, "aria-keyshortcuts", char, {
           caseInsensitive: true
         });
@@ -719,7 +771,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) {
@@ -729,11 +780,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) => {
@@ -860,6 +908,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;
@@ -880,12 +929,14 @@ var Tabs = class _Tabs {
       "style",
       "tabindex"
     ]);
-    saveAttributes(this.#indicatorElements, ["style"]);
+    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();
@@ -917,13 +968,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
@@ -961,17 +1019,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);
       });
     });
@@ -1098,7 +1150,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.6
+ * @version 2.0.8
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1110,7 +1162,7 @@ var TabsIndicator = class {
   (**
    * Attributes Utils
    *
-   * @version 1.1.3
+   * @version 1.1.4
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1123,7 +1175,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.10
+   * @version 4.3.21
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1147,7 +1199,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.9
+   * @version 3.1.18
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js CHANGED Viewed

@@ -22,8 +22,8 @@ function addTokenToAttribute(element, attribute, token, options = {}) {
   }
 }
 var snapshots = /* @__PURE__ */ new WeakMap();
-function restoreAttributes(elements) {
-  for (const element of elements) {
+function restoreAttributes(element_or_elements) {
+  for (const element of Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]) {
     const snapshot = snapshots.get(element);
     if (!snapshot) {
       continue;
@@ -34,8 +34,9 @@ function restoreAttributes(elements) {
     snapshots.delete(element);
   }
 }
-function saveAttributes(elements, attributes) {
-  elements.forEach((element) => {
+function saveAttributes(element_or_elements, attribute_or_attributes) {
+  const attributes = Array.isArray(attribute_or_attributes) ? attribute_or_attributes : [attribute_or_attributes];
+  (Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]).forEach((element) => {
     let snapshot = snapshots.get(element);
     if (!snapshot) {
       snapshot = /* @__PURE__ */ new Map();
@@ -49,6 +50,10 @@ function saveAttributes(elements, attributes) {
 // node_modules/power-focusable/dist/index.js
 var FOCUSABLE_SELECTOR = `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`;
+var FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX = FOCUSABLE_SELECTOR.replace(
+  /(,\s*)?\[tabindex="-1"\]/g,
+  ""
+);
 function getFocusables(container = document.body, options = {}) {
   if (!(container instanceof Element)) {
     console.warn("Invalid container element. Fallback: <body> element.");
@@ -85,36 +90,43 @@ function getFocusables(container = document.body, options = {}) {
     console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
     skipVisibilityCheck = false;
   }
-  const elements = [];
+  const candidates = [];
   if (composed || include) {
     let traverse2 = function(node) {
-      if (!(node instanceof Element)) {
-        return;
-      }
-      if (isFocusable(node, { skipNegativeTabIndexCheck, skipVisibilityCheck }) || include?.(node)) {
-        elements[elements.length] = node;
+      if (isFocusable(node, {
+        skipNegativeTabIndexCheck,
+        skipVisibilityCheck
+      }) || include?.(node)) {
+        candidates[candidates.length] = node;
       }
-      const children = getComposedChildren(node);
-      for (let i = 0, l = children.length; i < l; i++) {
-        const child = children[i];
+      const children2 = composed ? getComposedChildren(node) : getChildren(node);
+      for (let i = 0, l = children2.length; i < l; i++) {
+        const child = children2[i];
         child && traverse2(child);
       }
     };
-    traverse2(container);
+    const children = composed ? getComposedChildren(container) : getChildren(container);
+    for (let i = 0, l = children.length; i < l; i++) {
+      const child = children[i];
+      child && traverse2(child);
+    }
   } else {
-    const candidates = container.querySelectorAll(FOCUSABLE_SELECTOR);
-    for (let i = 0, l = candidates.length; i < l; i++) {
-      const candidate = candidates[i];
-      if (candidate && isFocusable(candidate, {
+    const matches = container.querySelectorAll(
+      skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX : FOCUSABLE_SELECTOR
+    );
+    for (let i = 0, l = matches.length; i < l; i++) {
+      const matched = matches[i];
+      if (matched && isFocusable(matched, {
         skipNegativeTabIndexCheck,
         skipVisibilityCheck
       })) {
-        elements[elements.length] = candidate;
+        candidates[candidates.length] = matched;
       }
     }
   }
-  const unfiltered = normalizeRadioGroup(sortByTabIndex(elements));
-  return filter ? unfiltered.filter(filter) : unfiltered;
+  return normalizeRadioGroup(
+    sortByTabIndex(filter ? candidates.filter(filter) : candidates)
+  );
 }
 function isFocusable(element, options = {}) {
   if (!(element instanceof Element)) {
@@ -137,7 +149,7 @@ function isFocusable(element, options = {}) {
     return false;
   }
   if (!element.matches(
-    skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR.replace(/(,\s*)?\[tabindex="-1"\]/g, "") : FOCUSABLE_SELECTOR
+    skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX : FOCUSABLE_SELECTOR
   )) {
     return false;
   }
@@ -195,22 +207,42 @@ function normalizeRadioGroup(elements) {
     if (!map) {
       map = /* @__PURE__ */ new Map();
     }
-    const key = `${element.form?.id ?? "no-form"}::${element.name}`;
-    const group = map.get(key) ?? map.set(key, []).get(key);
-    if (group) {
-      group[group.length] = element;
+    const root = element.getRootNode();
+    let value = map.get(root);
+    if (!value) {
+      value = /* @__PURE__ */ new Map();
+      map.set(root, value);
+    }
+    let v = value.get(element.form);
+    if (!v) {
+      v = /* @__PURE__ */ new Map();
+      value.set(element.form, v);
     }
+    let vv = v.get(element.name);
+    if (!vv) {
+      vv = [];
+      v.set(element.name, vv);
+    }
+    vv[vv.length] = element;
   }
   if (!map) {
     return elements;
   }
   const placeholder = /* @__PURE__ */ new Set();
-  for (const group of map.values()) {
-    placeholder.add(group.find((radio) => radio.checked) ?? group[0]);
+  for (const value of map.values()) {
+    for (const v of value.values()) {
+      for (const vv of v.values()) {
+        const radio = vv.find((element) => element.checked) ?? vv[0];
+        radio && placeholder.add(radio);
+      }
+    }
   }
-  return elements.filter(
-    (element) => isUngroupedRadio(element) ? placeholder.has(element) : true
-  );
+  return elements.filter((element) => {
+    if (!(element instanceof HTMLInputElement)) {
+      return true;
+    }
+    return !isUngroupedRadio(element) || placeholder.has(element);
+  });
 }
 function sortByTabIndex(elements) {
   const ordered = [];
@@ -282,7 +314,7 @@ function isInert(element) {
   return "inert" in element && !!element.inert;
 }
 function isUngroupedRadio(element) {
-  return element instanceof HTMLInputElement && element.type === "radio" && !!element.name;
+  return element.type === "radio" && !!element.name;
 }
 // node_modules/@y14e/button/dist/index.js
@@ -341,14 +373,8 @@ function createRovingTabIndex(container, options = {}) {
     return () => {
     };
   }
-  try {
-    const roving = new RovingTabIndex(container, options);
-    return () => roving.destroy();
-  } catch (error) {
-    error instanceof Error && console.warn(error.message || error);
-    return () => {
-    };
-  }
+  const roving = new RovingTabIndex(container, options);
+  return () => roving.destroy();
 }
 var RovingTabIndex = class _RovingTabIndex {
   static #initialized = /* @__PURE__ */ new Set();
@@ -362,17 +388,17 @@ var RovingTabIndex = class _RovingTabIndex {
   constructor(container, options = {}) {
     this.#container = container;
     let {
-      direction,
+      direction = "both",
       navigationOnly = false,
       noMemory = false,
       noStart = false,
-      selector,
+      selector = "",
       typeahead = false,
       wrap = false
     } = options;
-    if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
-      console.warn("Invalid direction option. Fallback: both (undefined).");
-      direction = void 0;
+    if (!["both", "horizontal", "vertical"].includes(direction)) {
+      console.warn("Invalid direction option. Fallback: 'both'.");
+      direction = "both";
     }
     if (typeof navigationOnly !== "boolean") {
       console.warn("Invalid navigationOnly option. Fallback: false.");
@@ -386,11 +412,18 @@ var RovingTabIndex = class _RovingTabIndex {
       console.warn("Invalid noStart option. Fallback: false.");
       noStart = false;
     }
-    if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
-      console.warn(
-        "Invalid selector. Fallback: all focusable elements (undefined)."
-      );
-      selector = void 0;
+    if (selector !== "") {
+      if (typeof selector !== "string" || !selector.trim()) {
+        console.warn("Invalid selector. Fallback: no selector string.");
+        selector = "";
+      } else {
+        try {
+          container.querySelector(selector);
+        } catch {
+          console.warn("Invalid selector. Fallback: no selector string.");
+          selector = "";
+        }
+      }
     }
     if (typeof typeahead !== "boolean") {
       console.warn("Invalid typeahead option. Fallback: false.");
@@ -400,9 +433,15 @@ var RovingTabIndex = class _RovingTabIndex {
       console.warn("Invalid wrap option. Fallback: false.");
       wrap = false;
     }
-    this.#settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
-    direction && Object.assign(this.#settings, { direction });
-    selector && Object.assign(this.#settings, { selector });
+    this.#settings = {
+      direction,
+      navigationOnly,
+      noMemory,
+      noStart,
+      selector,
+      typeahead,
+      wrap
+    };
     this.#selectorFilter = this.#createSelectorFilter();
     this.#initialize();
   }
@@ -413,7 +452,10 @@ var RovingTabIndex = class _RovingTabIndex {
     this.#isDestroyed = true;
     this.#controller?.abort();
     this.#controller = null;
-    restoreAttributes([...this.#focusables]);
+    this.#focusables.forEach((focusable) => {
+      _RovingTabIndex.#initialized.delete(focusable);
+      restoreAttributes(focusable);
+    });
     this.#focusables.clear();
     this.#focusablesByFirstChar.clear();
   }
@@ -450,7 +492,7 @@ var RovingTabIndex = class _RovingTabIndex {
       return;
     }
     const { direction, typeahead, wrap } = this.#settings;
-    const isBoth = !direction;
+    const isBoth = direction === "both";
     const isHorizontal = direction === "horizontal";
     if (![
       "End",
@@ -466,14 +508,16 @@ var RovingTabIndex = class _RovingTabIndex {
     if (!(active instanceof Element)) {
       return;
     }
-    const current = this.#getFocusables();
-    if (!current.includes(active)) {
+    const candidates = this.#getFocusables().filter(
+      (focusable2) => this.#focusables.has(focusable2)
+    );
+    if (!candidates.includes(active)) {
       return;
     }
     event.preventDefault();
-    const currentIndex = current.indexOf(active);
+    const activeIndex = candidates.indexOf(active);
     let newIndex;
-    let target = current;
+    let target = candidates;
     switch (key) {
       case "End":
         newIndex = -1;
@@ -483,22 +527,26 @@ var RovingTabIndex = class _RovingTabIndex {
         break;
       case "ArrowLeft":
       case "ArrowUp": {
-        const rawIndex = currentIndex - 1;
+        const rawIndex = activeIndex - 1;
         newIndex = wrap ? rawIndex : Math.max(rawIndex, 0);
         break;
       }
       case "ArrowRight":
       case "ArrowDown": {
-        const rawIndex = currentIndex + 1;
-        newIndex = wrap ? rawIndex % current.length : Math.min(rawIndex, current.length - 1);
+        const rawIndex = activeIndex + 1;
+        const length = target.length;
+        newIndex = wrap ? rawIndex % length : Math.min(rawIndex, length - 1);
         break;
       }
       default: {
-        target = this.#focusablesByFirstChar.get(key.toUpperCase()) ?? [];
-        const foundIndex = target.findIndex(
-          (focusable2) => current.indexOf(focusable2) > currentIndex
+        const focusables = new Set(
+          this.#focusablesByFirstChar.get(key.toUpperCase()) ?? []
         );
-        newIndex = foundIndex >= 0 ? foundIndex : 0;
+        target = candidates.filter((focusable2) => focusables.has(focusable2));
+        const afterIndex = target.findIndex(
+          (focusable2) => candidates.indexOf(focusable2) > activeIndex
+        );
+        newIndex = afterIndex >= 0 ? afterIndex : 0;
       }
     }
     const focusable = target.at(newIndex);
@@ -508,12 +556,16 @@ var RovingTabIndex = class _RovingTabIndex {
     const current = new Set(this.#getFocusables());
     for (const focusable of this.#focusables) {
       if (!current.has(focusable)) {
-        focusable.isConnected && restoreAttributes([focusable]);
+        _RovingTabIndex.#initialized.delete(focusable);
+        restoreAttributes(focusable);
         this.#focusables.delete(focusable);
-        this.#focusablesByFirstChar.forEach((focusables) => {
+        for (const [key, focusables] of this.#focusablesByFirstChar) {
           const index = focusables.indexOf(focusable);
-          index >= 0 && focusables.splice(index, 1);
-        });
+          if (index >= 0) {
+            focusables.splice(index, 1);
+            !focusables.length && this.#focusablesByFirstChar.delete(key);
+          }
+        }
       }
     }
     const { navigationOnly, noStart, typeahead } = this.#settings;
@@ -522,12 +574,12 @@ var RovingTabIndex = class _RovingTabIndex {
         continue;
       }
       if (_RovingTabIndex.#initialized.has(focusable)) {
-        throw new TypeError("Already initialized");
+        continue;
       }
       this.#focusables.add(focusable);
       _RovingTabIndex.#initialized.add(focusable);
       if (!navigationOnly) {
-        saveAttributes([focusable], ["tabindex"]);
+        saveAttributes(focusable, "tabindex");
         focusable.setAttribute("tabindex", "-1");
       }
       if (!typeahead) {
@@ -540,7 +592,7 @@ var RovingTabIndex = class _RovingTabIndex {
       );
       if (char) {
         keys.add(char);
-        saveAttributes([focusable], ["aria-keyshortcuts"]);
+        saveAttributes(focusable, "aria-keyshortcuts");
         addTokenToAttribute(focusable, "aria-keyshortcuts", char, {
           caseInsensitive: true
         });
@@ -717,7 +769,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) {
@@ -727,11 +778,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) => {
@@ -858,6 +906,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;
@@ -878,12 +927,14 @@ var Tabs = class _Tabs {
       "style",
       "tabindex"
     ]);
-    saveAttributes(this.#indicatorElements, ["style"]);
+    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();
@@ -915,13 +966,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
@@ -959,17 +1017,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);
       });
     });
@@ -1096,7 +1148,7 @@ var TabsIndicator = class {
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.6
+ * @version 2.0.8
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1108,7 +1160,7 @@ var TabsIndicator = class {
   (**
    * Attributes Utils
    *
-   * @version 1.1.3
+   * @version 1.1.4
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1121,7 +1173,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.10
+   * @version 4.3.21
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1145,7 +1197,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.9
+   * @version 3.1.18
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs CHANGED Viewed

@@ -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;
@@ -309,12 +306,14 @@ var Tabs = class _Tabs {
       "style",
       "tabindex"
     ]);
-    attributesUtils.saveAttributes(this.#indicatorElements, ["style"]);
+    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.6
+ * @version 2.0.8
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts CHANGED Viewed

@@ -2,7 +2,7 @@
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.6
+ * @version 2.0.8
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.6
+ * @version 2.0.8
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js CHANGED Viewed

@@ -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;
@@ -303,12 +300,14 @@ var Tabs = class _Tabs {
       "style",
       "tabindex"
     ]);
-    saveAttributes(this.#indicatorElements, ["style"]);
+    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.6
+ * @version 2.0.8
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/tabs",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -50,8 +50,8 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@y14e/attributes-utils": "^1.1.3",
+    "@y14e/attributes-utils": "^1.1.4",
     "@y14e/button": "^1.0.6",
-    "@y14e/roving-tabindex": "^3.1.9"
+    "@y14e/roving-tabindex": "^3.1.18"
   }
 }