power-focusable 4.3.10 → 4.3.12

package/README.md

@@ -24,25 +24,27 @@ import {
 } from 'power-focusable';
 
 // CDNs
-import { ... } 'https://esm.sh/power-focusable@4.3.10';
+import { ... } 'https://esm.sh/power-focusable@4.3.12';
 // or
-import { ... } 'https://cdn.jsdelivr.net/npm/power-focusable@4.3.10/+esm';
+import { ... } 'https://cdn.jsdelivr.net/npm/power-focusable@4.3.12/+esm';
 // or
-import { ... } 'https://esm.unpkg.com/power-focusable@4.3.10';
+import { ... } 'https://esm.unpkg.com/power-focusable@4.3.12';
 ```
 
 ## 🪄 Options
 
 ```ts
 interface PowerFocusableOptions {
-  anchor: Element | null;             // default: active element
+  anchor: Element | null;             // default: DocumentOrShadowRoot.activeElement
   composed: boolean;                  // default: false
-  filter: (element: Element) => boolean;
-  include: (element: Element) => boolean;
+  filter: PowerFocusableFunction;     // default: undefined
+  include: PowerFocusableFunction;    // default: undefined
   skipNegativeTabIndexCheck: boolean; // default: false
   skipVisibilityCheck: boolean;       // default: false
   wrap: boolean;                      // default: false
 }
+
+type PowerFocusableFunction = ((element: Element) => boolean) | undefined;
 ```
 
 ### `anchor`

package/dist/index.cjs

@@ -2,6 +2,10 @@
 
 // src/index.ts
 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_TAB_INDEX = FOCUSABLE_SELECTOR.replace(
+  /(,\s*)?\[tabindex="-1"\]/g,
+  ""
+);
 function createFocusTrap(container = document.body) {
   if (!(container instanceof Element)) {
     console.warn("Invalid container element");
@@ -95,21 +99,27 @@ function getFocusables(container = document.body, options = {}) {
   const elements = [];
   if (composed || include) {
     let traverse2 = function(node) {
-      if (!(node instanceof Element)) {
-        return;
-      }
-      if (isFocusable(node, { skipNegativeTabIndexCheck, skipVisibilityCheck }) || include?.(node)) {
+      if (isFocusable(node, {
+        skipNegativeTabIndexCheck,
+        skipVisibilityCheck
+      }) || include?.(node)) {
         elements[elements.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);
+    const candidates = container.querySelectorAll(
+      skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TAB_INDEX : FOCUSABLE_SELECTOR
+    );
     for (let i = 0, l = candidates.length; i < l; i++) {
       const candidate = candidates[i];
       if (candidate && isFocusable(candidate, {
@@ -120,8 +130,8 @@ function getFocusables(container = document.body, options = {}) {
       }
     }
   }
-  const unfiltered = normalizeRadioGroup(sortByTabIndex(elements));
-  return filter ? unfiltered.filter(filter) : unfiltered;
+  const filtered = filter ? elements.filter(filter) : elements;
+  return normalizeRadioGroup(sortByTabIndex(filtered));
 }
 function getNextFocusable(container = document.body, options = {}) {
   return getRelativeFocusable(container, 1, options);
@@ -176,7 +186,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_TAB_INDEX : FOCUSABLE_SELECTOR
   )) {
     return false;
   }
@@ -248,9 +258,13 @@ function getRelativeFocusable(container, offset, options) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { composed, skipNegativeTabIndexCheck, skipVisibilityCheck };
-  filter && Object.assign(settings, { filter });
-  include && Object.assign(settings, { include });
+  const settings = {
+    composed,
+    filter,
+    include,
+    skipNegativeTabIndexCheck,
+    skipVisibilityCheck
+  };
   const focusables = getFocusables(container, settings);
   const { length } = focusables;
   if (!length) {
@@ -296,7 +310,7 @@ function isDisabledDeep(element) {
   return false;
 }
 function normalizeRadioGroup(elements) {
-  let map = null;
+  let rootMap = null;
   for (let i = 0, l = elements.length; i < l; i++) {
     const element = elements[i];
     if (!(element instanceof HTMLInputElement)) {
@@ -305,25 +319,45 @@ function normalizeRadioGroup(elements) {
     if (!isUngroupedRadio(element)) {
       continue;
     }
-    if (!map) {
-      map = /* @__PURE__ */ new Map();
+    if (!rootMap) {
+      rootMap = /* @__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 formMap = rootMap.get(root);
+    if (!formMap) {
+      formMap = /* @__PURE__ */ new Map();
+      rootMap.set(root, formMap);
     }
+    let nameMap = formMap.get(element.form);
+    if (!nameMap) {
+      nameMap = /* @__PURE__ */ new Map();
+      formMap.set(element.form, nameMap);
+    }
+    let group = nameMap.get(element.name);
+    if (!group) {
+      group = [];
+      nameMap.set(element.name, group);
+    }
+    group[group.length] = element;
   }
-  if (!map) {
+  if (!rootMap) {
     return elements;
   }
   const placeholder = /* @__PURE__ */ new Set();
-  for (const group of map.values()) {
-    placeholder.add(group.find((radio) => radio.checked) ?? group[0]);
+  for (const formMap of rootMap.values()) {
+    for (const nameMap of formMap.values()) {
+      for (const group of nameMap.values()) {
+        const radio = group.find((element) => element.checked) ?? group[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 = [];
@@ -384,19 +418,19 @@ function getComposedParent(node) {
   }
 }
 function getComposedSiblings(node) {
-  if (node.assignedSlot) {
-    const siblings = node.assignedSlot.children;
-    const filtered = [];
-    for (let i = 0, l = siblings.length; i < l; i++) {
-      const sibling = siblings[i];
-      if (sibling && sibling !== node) {
-        filtered[filtered.length] = sibling;
-      }
+  const parent = getComposedParent(node);
+  if (!parent) {
+    return [];
+  }
+  const siblings = parent instanceof HTMLSlotElement ? parent.assignedElements({ flatten: true }) : getComposedChildren(parent);
+  const filtered = [];
+  for (let i = 0, l = siblings.length; i < l; i++) {
+    const sibling = siblings[i];
+    if (sibling && sibling !== node) {
+      filtered[filtered.length] = sibling;
     }
-    return filtered;
-  } else {
-    return getComposedParent(node) ? getSiblings(node) : [];
   }
+  return filtered;
 }
 var inertRefCounts = /* @__PURE__ */ new WeakMap();
 function applyInert(element) {
@@ -438,19 +472,6 @@ function getChildren(node) {
   }
   return elements;
 }
-function getSiblings(node) {
-  const parent = getComposedParent(node);
-  if (!parent) {
-    return [];
-  }
-  const elements = [];
-  for (let child = parent.firstElementChild; child; child = child.nextElementSibling) {
-    if (child !== node) {
-      elements[elements.length] = child;
-    }
-  }
-  return elements;
-}
 function getTabIndex(element) {
   return "tabIndex" in element ? Number(element.tabIndex) : 0;
 }
@@ -465,14 +486,14 @@ 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;
 }
 /**
  * Power Focusable
  * 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.12
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -3,7 +3,7 @@
  * 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.12
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -12,12 +12,13 @@
 interface PowerFocusableOptions {
     anchor: Element | null;
     composed: boolean;
-    filter: (element: Element) => boolean;
-    include: (element: Element) => boolean;
+    filter: PowerFocusableFunction;
+    include: PowerFocusableFunction;
     skipNegativeTabIndexCheck: boolean;
     skipVisibilityCheck: boolean;
     wrap: boolean;
 }
+type PowerFocusableFunction = ((element: Element) => boolean) | undefined;
 declare function createFocusTrap(container?: Element): () => void;
 declare function getFocusables(container?: Element, options?: Partial<Omit<PowerFocusableOptions, 'anchor' | 'wrap'>>): Element[];
 declare function getNextFocusable(container?: Element, options?: Partial<PowerFocusableOptions>): Element | null;

package/dist/index.d.ts

@@ -3,7 +3,7 @@
  * 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.12
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -12,12 +12,13 @@
 interface PowerFocusableOptions {
     anchor: Element | null;
     composed: boolean;
-    filter: (element: Element) => boolean;
-    include: (element: Element) => boolean;
+    filter: PowerFocusableFunction;
+    include: PowerFocusableFunction;
     skipNegativeTabIndexCheck: boolean;
     skipVisibilityCheck: boolean;
     wrap: boolean;
 }
+type PowerFocusableFunction = ((element: Element) => boolean) | undefined;
 declare function createFocusTrap(container?: Element): () => void;
 declare function getFocusables(container?: Element, options?: Partial<Omit<PowerFocusableOptions, 'anchor' | 'wrap'>>): Element[];
 declare function getNextFocusable(container?: Element, options?: Partial<PowerFocusableOptions>): Element | null;

package/dist/index.js

@@ -1,5 +1,9 @@
 // src/index.ts
 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_TAB_INDEX = FOCUSABLE_SELECTOR.replace(
+  /(,\s*)?\[tabindex="-1"\]/g,
+  ""
+);
 function createFocusTrap(container = document.body) {
   if (!(container instanceof Element)) {
     console.warn("Invalid container element");
@@ -93,21 +97,27 @@ function getFocusables(container = document.body, options = {}) {
   const elements = [];
   if (composed || include) {
     let traverse2 = function(node) {
-      if (!(node instanceof Element)) {
-        return;
-      }
-      if (isFocusable(node, { skipNegativeTabIndexCheck, skipVisibilityCheck }) || include?.(node)) {
+      if (isFocusable(node, {
+        skipNegativeTabIndexCheck,
+        skipVisibilityCheck
+      }) || include?.(node)) {
         elements[elements.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);
+    const candidates = container.querySelectorAll(
+      skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TAB_INDEX : FOCUSABLE_SELECTOR
+    );
     for (let i = 0, l = candidates.length; i < l; i++) {
       const candidate = candidates[i];
       if (candidate && isFocusable(candidate, {
@@ -118,8 +128,8 @@ function getFocusables(container = document.body, options = {}) {
       }
     }
   }
-  const unfiltered = normalizeRadioGroup(sortByTabIndex(elements));
-  return filter ? unfiltered.filter(filter) : unfiltered;
+  const filtered = filter ? elements.filter(filter) : elements;
+  return normalizeRadioGroup(sortByTabIndex(filtered));
 }
 function getNextFocusable(container = document.body, options = {}) {
   return getRelativeFocusable(container, 1, options);
@@ -174,7 +184,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_TAB_INDEX : FOCUSABLE_SELECTOR
   )) {
     return false;
   }
@@ -246,9 +256,13 @@ function getRelativeFocusable(container, offset, options) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { composed, skipNegativeTabIndexCheck, skipVisibilityCheck };
-  filter && Object.assign(settings, { filter });
-  include && Object.assign(settings, { include });
+  const settings = {
+    composed,
+    filter,
+    include,
+    skipNegativeTabIndexCheck,
+    skipVisibilityCheck
+  };
   const focusables = getFocusables(container, settings);
   const { length } = focusables;
   if (!length) {
@@ -294,7 +308,7 @@ function isDisabledDeep(element) {
   return false;
 }
 function normalizeRadioGroup(elements) {
-  let map = null;
+  let rootMap = null;
   for (let i = 0, l = elements.length; i < l; i++) {
     const element = elements[i];
     if (!(element instanceof HTMLInputElement)) {
@@ -303,25 +317,45 @@ function normalizeRadioGroup(elements) {
     if (!isUngroupedRadio(element)) {
       continue;
     }
-    if (!map) {
-      map = /* @__PURE__ */ new Map();
+    if (!rootMap) {
+      rootMap = /* @__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 formMap = rootMap.get(root);
+    if (!formMap) {
+      formMap = /* @__PURE__ */ new Map();
+      rootMap.set(root, formMap);
     }
+    let nameMap = formMap.get(element.form);
+    if (!nameMap) {
+      nameMap = /* @__PURE__ */ new Map();
+      formMap.set(element.form, nameMap);
+    }
+    let group = nameMap.get(element.name);
+    if (!group) {
+      group = [];
+      nameMap.set(element.name, group);
+    }
+    group[group.length] = element;
   }
-  if (!map) {
+  if (!rootMap) {
     return elements;
   }
   const placeholder = /* @__PURE__ */ new Set();
-  for (const group of map.values()) {
-    placeholder.add(group.find((radio) => radio.checked) ?? group[0]);
+  for (const formMap of rootMap.values()) {
+    for (const nameMap of formMap.values()) {
+      for (const group of nameMap.values()) {
+        const radio = group.find((element) => element.checked) ?? group[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 = [];
@@ -382,19 +416,19 @@ function getComposedParent(node) {
   }
 }
 function getComposedSiblings(node) {
-  if (node.assignedSlot) {
-    const siblings = node.assignedSlot.children;
-    const filtered = [];
-    for (let i = 0, l = siblings.length; i < l; i++) {
-      const sibling = siblings[i];
-      if (sibling && sibling !== node) {
-        filtered[filtered.length] = sibling;
-      }
+  const parent = getComposedParent(node);
+  if (!parent) {
+    return [];
+  }
+  const siblings = parent instanceof HTMLSlotElement ? parent.assignedElements({ flatten: true }) : getComposedChildren(parent);
+  const filtered = [];
+  for (let i = 0, l = siblings.length; i < l; i++) {
+    const sibling = siblings[i];
+    if (sibling && sibling !== node) {
+      filtered[filtered.length] = sibling;
     }
-    return filtered;
-  } else {
-    return getComposedParent(node) ? getSiblings(node) : [];
   }
+  return filtered;
 }
 var inertRefCounts = /* @__PURE__ */ new WeakMap();
 function applyInert(element) {
@@ -436,19 +470,6 @@ function getChildren(node) {
   }
   return elements;
 }
-function getSiblings(node) {
-  const parent = getComposedParent(node);
-  if (!parent) {
-    return [];
-  }
-  const elements = [];
-  for (let child = parent.firstElementChild; child; child = child.nextElementSibling) {
-    if (child !== node) {
-      elements[elements.length] = child;
-    }
-  }
-  return elements;
-}
 function getTabIndex(element) {
   return "tabIndex" in element ? Number(element.tabIndex) : 0;
 }
@@ -463,14 +484,14 @@ 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;
 }
 /**
  * Power Focusable
  * 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.12
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "power-focusable",
-  "version": "4.3.10",
+  "version": "4.3.12",
   "description": "High-precision focus management utility with full composed tree support",
   "type": "module",
   "main": "./dist/index.cjs",