@t007/utils 0.0.33 → 0.0.35

package/dist/hooks/vanilla.cjs

@@ -29,24 +29,27 @@ __export(vanilla_exports, {
   removeFocusTrap: () => removeFocusTrap,
   removeOutsideClick: () => removeOutsideClick,
   removeScrollAssist: () => removeScrollAssist,
-  rippleHandler: () => rippleHandler
+  rippleHandler: () => rippleHandler,
+  syncArrowNavigation: () => syncArrowNavigation,
+  syncFocusTrap: () => syncFocusTrap
 });
 module.exports = __toCommonJS(vanilla_exports);
 
 // src/ts/hooks/vanilla/scrollAssist.ts
-var import_sia_reactor = require("sia-reactor");
+var import_sia_reactor2 = require("sia-reactor");
 
 // src/ts/core/dom.ts
 var import_utils = require("sia-reactor/utils");
 var import_utils2 = require("sia-reactor/utils");
-var INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable='true'],iframe,audio[controls],video[controls],[tabindex]):not([disabled],[tabindex='-1'],[data-focus-guard],[inert],[inert] *)";
+var import_sia_reactor = require("sia-reactor");
+var INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable],iframe,audio[controls],video[controls],[tabindex]):not([disabled],[tabindex='-1'],[data-focus-guard],[inert],[inert] *)";
 var isInteractive = (target) => target instanceof HTMLElement && target.matches(INTERACTIVE_SELECTOR);
 
 // src/ts/core/num.ts
 var import_utils3 = require("sia-reactor/utils");
 
 // src/ts/hooks/vanilla/scrollAssist.ts
-function initScrollAssist(el, { pxPerSecond = 80, assistClassName = "t007-scroll-assist", vertical = true, horizontal = true } = import_sia_reactor.NIL) {
+function initScrollAssist(el, { pxPerSecond = 80, assistClassName = "t007-scroll-assist", vertical = true, horizontal = true } = import_sia_reactor2.NIL) {
   const parent = el?.parentElement, existing = (t007._scrollers ??= /* @__PURE__ */ new WeakMap()).get(el);
   if (!parent || existing) return existing ? existing : void 0;
   t007._scrollers_r_observer ??= new ResizeObserver((entries) => {
@@ -118,8 +121,8 @@ function initScrollAssist(el, { pxPerSecond = 80, assistClassName = "t007-scroll
 var removeScrollAssist = (el) => t007._scrollers.get(el)?.destroy();
 
 // src/ts/hooks/vanilla/scrollerator.ts
-var import_sia_reactor2 = require("sia-reactor");
-function initVScrollerator({ baseSpeed = 3, maxSpeed = 10, stepDelay = 2e3, baseRate = 16, lineHeight = 80, margin = 80, car = window } = import_sia_reactor2.NIL) {
+var import_sia_reactor3 = require("sia-reactor");
+function initVScrollerator({ baseSpeed = 3, maxSpeed = 10, stepDelay = 2e3, baseRate = 16, lineHeight = 80, margin = 80, car = window } = import_sia_reactor3.NIL) {
   let linesPerSec = baseSpeed, accelId = null, lastTime = null;
   const drive = (clientY, brake = false, offsetY = 0) => {
     if (car !== window) clientY -= offsetY;
@@ -135,36 +138,36 @@ function initVScrollerator({ baseSpeed = 3, maxSpeed = 10, stepDelay = 2e3, base
 }
 
 // src/ts/hooks/vanilla/outsideClick.ts
-var import_sia_reactor3 = require("sia-reactor");
-function initOutsideClick(el, { enabled = false, onOutside = import_sia_reactor3.NOOP, outOnClick = true, outOnEscape = true, outOnFocusOut = false, allowBounds = false, allowInputs = false, root = window, scoped = true, capture = true } = import_sia_reactor3.NIL) {
-  const stacks = t007._outsiders_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
+var import_sia_reactor4 = require("sia-reactor");
+function initOutsideClick(el, { enabled = false, onOutside = import_sia_reactor4.NOOP, outOnClick = true, outOnEscape = true, outOnFocusOut = false, allowBounds = false, allowInputs = false, root = window, scoped = true, capture = true } = import_sia_reactor4.NIL) {
+  const stack = t007._outsiders_stack ??= [], existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
   if (!enabled || existing) return existing ? existing : void 0;
   scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-  const stack = stacks.get(root) ?? [], onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
+  const onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
     if (stack.at(-1) !== el || (allowBounds ? p.clientX >= rect.left && p.clientX <= rect.right && p.clientY >= rect.top && p.clientY <= rect.bottom : el.contains(t))) return false;
     return (!scoped ? true : root.contains(t)) && onOutside(e);
   }, handleClick = ((e) => outOnClick && !(allowInputs && isInteractive(e.target)) && onScopedOut(e, e.target)), handleEscape = ((e) => outOnEscape && e.key === "Escape" && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && stack.at(-1) === el && onOutside(e)), handleFocusOut = (e) => outOnFocusOut && !el.contains(e.relatedTarget) && onScopedOut(e, e.relatedTarget);
   root.addEventListener("mousedown", handleClick, capture), root.addEventListener("touchstart", handleClick, { passive: true, capture });
   root.addEventListener("keydown", handleEscape, capture);
   el.addEventListener("focusout", handleFocusOut, capture);
-  if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
   const destroy = () => {
     root.removeEventListener("mousedown", handleClick, capture), root.removeEventListener("touchstart", handleClick, capture);
     root.removeEventListener("keydown", handleEscape, capture);
     el.removeEventListener("focusout", handleFocusOut, capture);
     t007._outsiders.delete(el), stack.splice(stack.indexOf(el), 1);
   };
-  return t007._outsiders.set(el, destroy), destroy;
+  return !stack.includes(el) && stack.push(el), t007._outsiders.set(el, destroy), destroy;
 }
 var removeOutsideClick = (el) => t007._outsiders?.get(el)?.();
 
 // src/ts/hooks/vanilla/focusTrap.ts
-var import_sia_reactor4 = require("sia-reactor");
-function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = import_sia_reactor4.NIL) {
-  const stacks = t007._ftrappers_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
+var import_sia_reactor5 = require("sia-reactor");
+function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = import_sia_reactor5.NIL) {
+  const stack = t007._ftrappers_stack ??= [], existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
   if (!enabled || existing) return existing ? existing : void 0;
   scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-  const stack = stacks.get(root) ?? [], focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = (0, import_utils.createEl)("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = (0, import_utils.createEl)("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), edgeFocus = (pre = false, rt = root) => {
+  let recovering = false;
+  const focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = (0, import_utils.createEl)("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = (0, import_utils.createEl)("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => !recovering && (recovering = true, els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), recovering = false), edgeFocus = (pre = false, rt = root) => {
     if (!scoped) return resetFocus(pre ? -1 : 0);
     if (rt.hasAttribute("tabindex")) return rt.focus();
     const items = getFocusable();
@@ -174,27 +177,28 @@ function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus
     while (p !== ceil && (!all.length || (pre ? rt.contains(all[0]) : rt.contains(all.at(-1))))) all = getFocusable(p = p.parentElement || ceil);
     for (let target, len = all.length, i = all.indexOf(items[pre ? 0 : items.length - 1]) + (pre ? -1 : 1); pre ? i >= 0 : i < len; pre ? i-- : i++) if (!rt.contains(target = all[i])) return target.focus();
     (pre ? first : last).blur();
-  }, handleFocusIn = () => {
+  }, handleFocusIn = (e) => {
     if (document.querySelector("dialog:modal") && !el.matches("dialog:modal")) return;
-    stack.at(-1) === el && (0, import_utils2.getActiveEl)(el.ownerDocument) !== root && !el.contains((0, import_utils2.getActiveEl)(el.ownerDocument)) && resetFocus();
+    stack.at(-1) === el && (0, import_utils2.getActiveEl)(el.ownerDocument) !== root && !el.contains((0, import_utils2.getActiveEl)(el.ownerDocument)) && !e.composedPath().includes(el) && resetFocus();
   }, handleInitialBlur = () => initial.classList.remove(ringClassName);
   first.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus(true) : resetFocus(), capture), el.prepend(first);
   last.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus() : resetFocus(-1), capture), el.append(last);
   root.addEventListener("focusin", handleFocusIn, capture);
   if (initial || !el.contains(focused)) !initial ? setTimeout(resetFocus) : setTimeout(() => (initial.classList.add(ringClassName), initial.focus(), initial.addEventListener("blur", handleInitialBlur, capture)));
-  if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
   const destroy = () => {
     focused?.isConnected && focused.focus(), first.remove(), last.remove();
     root.removeEventListener("focusin", handleFocusIn, capture);
     initial?.removeEventListener("blur", handleInitialBlur, capture);
     t007._ftrappers.delete(el), stack.splice(stack.indexOf(el), 1);
   };
-  return t007._ftrappers.set(el, destroy), destroy;
+  const handle = { destroy, sync: () => (el.prepend(first), el.append(last)) };
+  return !stack.includes(el) && stack.push(el), t007._ftrappers.set(el, handle), handle;
 }
-var removeFocusTrap = (el) => t007._ftrappers?.get(el)?.();
+var removeFocusTrap = (el) => t007._ftrappers?.get(el)?.destroy();
+var syncFocusTrap = (el) => t007._ftrappers?.get(el)?.sync();
 
 // src/ts/hooks/react/useArrowNavigation/consts.ts
-var import_sia_reactor5 = require("sia-reactor");
+var import_sia_reactor6 = require("sia-reactor");
 var H_NAV_KEYS = ["ArrowRight", "ArrowLeft", "Home", "End"];
 var V_NAV_KEYS = ["ArrowUp", "ArrowDown", "PageDown", "PageUp"];
 var NAV_KEYS = [...H_NAV_KEYS, ...V_NAV_KEYS];
@@ -212,11 +216,11 @@ var DEFAULT_CONFIG = {
   rtl: null,
   grid: {},
   activeClass: "focus-outlined",
-  inputSelector: "input,textarea,[contenteditable='true']",
+  inputSelector: "input,textarea,[contenteditable]",
   focusOptions: { preventScroll: false },
   scrollIntoView: { block: "nearest", inline: "nearest" },
-  onSelect: import_sia_reactor5.NOOP,
-  onFocusOut: import_sia_reactor5.NOOP
+  onSelect: import_sia_reactor6.NOOP,
+  onFocusOut: import_sia_reactor6.NOOP
 };
 
 // src/ts/hooks/react/useArrowNavigation/utils.ts
@@ -269,7 +273,7 @@ function initArrowNavigation(container, config = {}) {
   if (!config.enabled || existing) return existing ? existing : void 0;
   const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut, rovingTab } = { ...DEFAULT_CONFIG, ...config };
   let gridX = grid.x || 1, gridY = grid.y || 1, vGridY = grid.vY || 1, activeIndex = -1, buffer = "", timeout = null, items = [];
-  const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(container).direction === "rtl"), shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.hasAttribute("disabled") || el.hasAttribute("aria-disabled"), getItems = () => items = Array.from(container.querySelectorAll(selector));
+  const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(container).direction === "rtl"), shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.matches('[disabled],[aria-disabled="true"],[inert],:disabled'), getItems = () => items = Array.from(container.querySelectorAll(selector));
   const getAbleIndex = (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
     if (shouldSnub() || !items.length) return null;
     let index = targetIndex;
@@ -344,41 +348,49 @@ function initArrowNavigation(container, config = {}) {
     if (idx !== -1) goToIndex(idx);
   };
   for (const el of items) el.addEventListener("mouseenter", handleHover);
-  const mutationObserver = new MutationObserver(() => {
+  const sync = () => {
     const oldEl = items[activeIndex];
+    for (const el of items) el.removeEventListener("mouseenter", handleHover);
     getItems();
+    for (const el of items) el.addEventListener("mouseenter", handleHover);
+    calcGrid();
     const newEl = items[activeIndex];
     updateDOM();
     if (oldEl && newEl && oldEl === newEl) return;
-    resetActiveIndex();
-    updateDOM();
-  });
+    resetActiveIndex(), updateDOM();
+  };
+  const mutationObserver = new MutationObserver(sync);
   mutationObserver.observe(container, { childList: true, subtree: true });
   const setGrid = (g) => {
     if (g.x !== void 0) gridX = g.x;
     if (g.y !== void 0) gridY = g.y;
     if (g.vY !== void 0) vGridY = g.vY;
   };
-  const calcGrid = () => setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+  let ancestor = null;
+  const resizeObserver = new ResizeObserver(() => calcGrid());
+  const calcGrid = () => {
+    setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+    const next = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
+    if (next && next !== ancestor) ancestor && resizeObserver.unobserve(ancestor), ancestor = next, resizeObserver.observe(ancestor);
+  };
   setGrid(grid), calcGrid();
-  const ancestor = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
-  const resizeObserver = new ResizeObserver(calcGrid);
-  if (ancestor) resizeObserver.observe(ancestor);
   const destroy = () => {
     for (const el of interactiveEls) el?.removeEventListener("keydown", simulateKey);
     container.removeEventListener("focusout", handleFocusOut);
     for (const el of items) el.removeEventListener("mouseenter", handleHover);
     mutationObserver.disconnect(), resizeObserver.disconnect();
     if (timeout) clearTimeout(timeout);
+    t007._arrownavs.delete(container);
   };
-  const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, destroy };
+  const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, sync, destroy };
   return t007._arrownavs.set(container, handle), handle;
 }
 var removeArrowNavigation = (container) => t007._arrownavs?.get(container)?.destroy();
+var syncArrowNavigation = (container) => t007._arrownavs?.get(container)?.sync();
 
 // src/ts/hooks/vanilla/ripple.ts
-var import_sia_reactor6 = require("sia-reactor");
-function rippleHandler(e, { target, forceCenter = false, wrapperClassName = "t007-ripple-wrapper", className = "t007-ripple", holdClassName = "t007-ripple-hold", fadeClassName = "t007-ripple-fade" } = import_sia_reactor6.NIL) {
+var import_sia_reactor7 = require("sia-reactor");
+function rippleHandler(e, { target, forceCenter = false, wrapperClassName = "t007-ripple-wrapper", className = "t007-ripple", holdClassName = "t007-ripple-hold", fadeClassName = "t007-ripple-fade", maxDuration = 1e3 } = import_sia_reactor7.NIL) {
   const el = target || e.currentTarget;
   if (!el || e.target !== e.currentTarget && isInteractive(e.target) || el.hasAttribute("disabled") || e.pointerType === "mouse" && e.button !== 0) return;
   e.stopPropagation?.();
@@ -386,10 +398,13 @@ function rippleHandler(e, { target, forceCenter = false, wrapperClassName = "t00
   let canRelease = false;
   ripple.addEventListener("animationend", () => canRelease = true, { once: true });
   el.append(wrapper.appendChild(ripple).parentElement);
-  const release = () => {
-    if (!canRelease) return ripple.addEventListener("animationend", release, { once: true });
+  let released = false;
+  const release = (force) => {
+    if (released) return;
+    if (!canRelease && force !== true) return ripple.addEventListener("animationend", release, { once: true }), void setTimeout(release, maxDuration, true);
+    released = true;
     ripple.classList.replace(holdClassName, fadeClassName);
-    ripple.addEventListener("animationend", () => setTimeout(() => wrapper.remove()));
+    ripple.addEventListener("animationend", () => setTimeout(() => wrapper.remove())), setTimeout(() => wrapper.remove(), maxDuration);
     for (const evt of ["pointerup", "pointercancel"]) (el.ownerDocument?.defaultView || window).removeEventListener(evt, release);
   };
   for (const evt of ["pointerup", "pointercancel"]) (el.ownerDocument?.defaultView || window).addEventListener(evt, release);
@@ -405,5 +420,7 @@ function rippleHandler(e, { target, forceCenter = false, wrapperClassName = "t00
   removeFocusTrap,
   removeOutsideClick,
   removeScrollAssist,
-  rippleHandler
+  rippleHandler,
+  syncArrowNavigation,
+  syncFocusTrap
 });

package/dist/hooks/vanilla.d.cts

@@ -1,22 +1,22 @@
-export { a as ScrollAssistConfig, S as ScrollAssistHandle, b as ScrollDir, i as initScrollAssist, r as removeScrollAssist } from '../scrollAssist-y9wFmYgt.cjs';
-export { F as FocusTrapConfig, O as OutsideClickConfig, R as RippleConfig, i as initFocusTrap, a as initOutsideClick, r as removeFocusTrap, b as removeOutsideClick, c as rippleHandler } from '../ripple-C5MfEErC.cjs';
-export { A as ArrowNavigationHandle, i as initArrowNavigation, r as removeArrowNavigation } from '../arrowNavigation-DK8mqVOk.cjs';
+export { b as FocusTrapConfig, F as FocusTrapHandle, a as ScrollAssistConfig, S as ScrollAssistHandle, c as ScrollDir, i as initFocusTrap, d as initScrollAssist, r as removeFocusTrap, e as removeScrollAssist, s as syncFocusTrap } from '../scrollAssist-BNvPnsJq.cjs';
+export { O as OutsideClickConfig, R as RippleConfig, i as initOutsideClick, r as removeOutsideClick, a as rippleHandler } from '../ripple-D1kGErTn.cjs';
+export { A as ArrowNavigationHandle, i as initArrowNavigation, r as removeArrowNavigation, s as syncArrowNavigation } from '../arrowNavigation-zEJbo8Er.cjs';
 
 /** Configuration for the vertical edge-scrolling helper. */
 interface ScrolleratorOptions {
-    /** Starting lines-per-second speed. Defaults to `3`. */
+    /** Starting lines-per-second speed. @default  `3`. */
     baseSpeed?: number;
-    /** Maximum accelerated speed. Defaults to `10`. */
+    /** Maximum accelerated speed. @default  `10`. */
     maxSpeed?: number;
-    /** Delay before acceleration kicks in. Defaults to `2000`. */
+    /** Delay before acceleration kicks in. @default  `2000`. */
     stepDelay?: number;
-    /** Base frame rate used to estimate movement. Defaults to `16`. */
+    /** Base frame rate used to estimate movement. @default  `16`. */
     baseRate?: number;
-    /** Approximate line height in pixels. Defaults to `80`. */
+    /** Approximate line height in pixels. @default  `80`. */
     lineHeight?: number;
-    /** Edge margin that triggers scrolling. Defaults to `80`. */
+    /** Edge margin that triggers scrolling. @default  `80`. */
     margin?: number;
-    /** Scroll container or window target. Defaults to `window`. */
+    /** Scroll container or window target. @default  `window`. */
     car?: Window | HTMLElement;
 }
 /** Scrolling controls returned by initVScrollerator. */

package/dist/hooks/vanilla.d.ts

@@ -1,22 +1,22 @@
-export { a as ScrollAssistConfig, S as ScrollAssistHandle, b as ScrollDir, i as initScrollAssist, r as removeScrollAssist } from '../scrollAssist-y9wFmYgt.js';
-export { F as FocusTrapConfig, O as OutsideClickConfig, R as RippleConfig, i as initFocusTrap, a as initOutsideClick, r as removeFocusTrap, b as removeOutsideClick, c as rippleHandler } from '../ripple-C5MfEErC.js';
-export { A as ArrowNavigationHandle, i as initArrowNavigation, r as removeArrowNavigation } from '../arrowNavigation-VenvPI4H.js';
+export { b as FocusTrapConfig, F as FocusTrapHandle, a as ScrollAssistConfig, S as ScrollAssistHandle, c as ScrollDir, i as initFocusTrap, d as initScrollAssist, r as removeFocusTrap, e as removeScrollAssist, s as syncFocusTrap } from '../scrollAssist-BNvPnsJq.js';
+export { O as OutsideClickConfig, R as RippleConfig, i as initOutsideClick, r as removeOutsideClick, a as rippleHandler } from '../ripple-D1kGErTn.js';
+export { A as ArrowNavigationHandle, i as initArrowNavigation, r as removeArrowNavigation, s as syncArrowNavigation } from '../arrowNavigation-B9bEdoqR.js';
 
 /** Configuration for the vertical edge-scrolling helper. */
 interface ScrolleratorOptions {
-    /** Starting lines-per-second speed. Defaults to `3`. */
+    /** Starting lines-per-second speed. @default  `3`. */
     baseSpeed?: number;
-    /** Maximum accelerated speed. Defaults to `10`. */
+    /** Maximum accelerated speed. @default  `10`. */
     maxSpeed?: number;
-    /** Delay before acceleration kicks in. Defaults to `2000`. */
+    /** Delay before acceleration kicks in. @default  `2000`. */
     stepDelay?: number;
-    /** Base frame rate used to estimate movement. Defaults to `16`. */
+    /** Base frame rate used to estimate movement. @default  `16`. */
     baseRate?: number;
-    /** Approximate line height in pixels. Defaults to `80`. */
+    /** Approximate line height in pixels. @default  `80`. */
     lineHeight?: number;
-    /** Edge margin that triggers scrolling. Defaults to `80`. */
+    /** Edge margin that triggers scrolling. @default  `80`. */
     margin?: number;
-    /** Scroll container or window target. Defaults to `window`. */
+    /** Scroll container or window target. @default  `window`. */
     car?: Window | HTMLElement;
 }
 /** Scrolling controls returned by initVScrollerator. */

package/dist/hooks/vanilla.js

@@ -9,13 +9,14 @@ import {
   initOutsideClick,
   removeFocusTrap,
   removeOutsideClick,
-  rippleHandler
-} from "../chunk-QJ72EQCJ.js";
+  rippleHandler,
+  syncFocusTrap
+} from "../chunk-NX2LWYD6.js";
 import {
   INTERACTIVE_SELECTOR,
   createEl,
   getActiveEl
-} from "../chunk-4O76EZJ4.js";
+} from "../chunk-ZALPHCSJ.js";
 
 // src/ts/hooks/vanilla/scrollAssist.ts
 import { NIL } from "sia-reactor";
@@ -113,7 +114,7 @@ function initArrowNavigation(container, config = {}) {
   if (!config.enabled || existing) return existing ? existing : void 0;
   const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut, rovingTab } = { ...DEFAULT_CONFIG, ...config };
   let gridX = grid.x || 1, gridY = grid.y || 1, vGridY = grid.vY || 1, activeIndex = -1, buffer = "", timeout = null, items = [];
-  const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(container).direction === "rtl"), shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.hasAttribute("disabled") || el.hasAttribute("aria-disabled"), getItems = () => items = Array.from(container.querySelectorAll(selector));
+  const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(container).direction === "rtl"), shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.matches('[disabled],[aria-disabled="true"],[inert],:disabled'), getItems = () => items = Array.from(container.querySelectorAll(selector));
   const getAbleIndex = (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
     if (shouldSnub() || !items.length) return null;
     let index = targetIndex;
@@ -188,37 +189,45 @@ function initArrowNavigation(container, config = {}) {
     if (idx !== -1) goToIndex(idx);
   };
   for (const el of items) el.addEventListener("mouseenter", handleHover);
-  const mutationObserver = new MutationObserver(() => {
+  const sync = () => {
     const oldEl = items[activeIndex];
+    for (const el of items) el.removeEventListener("mouseenter", handleHover);
     getItems();
+    for (const el of items) el.addEventListener("mouseenter", handleHover);
+    calcGrid();
     const newEl = items[activeIndex];
     updateDOM();
     if (oldEl && newEl && oldEl === newEl) return;
-    resetActiveIndex();
-    updateDOM();
-  });
+    resetActiveIndex(), updateDOM();
+  };
+  const mutationObserver = new MutationObserver(sync);
   mutationObserver.observe(container, { childList: true, subtree: true });
   const setGrid = (g) => {
     if (g.x !== void 0) gridX = g.x;
     if (g.y !== void 0) gridY = g.y;
     if (g.vY !== void 0) vGridY = g.vY;
   };
-  const calcGrid = () => setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+  let ancestor = null;
+  const resizeObserver = new ResizeObserver(() => calcGrid());
+  const calcGrid = () => {
+    setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+    const next = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
+    if (next && next !== ancestor) ancestor && resizeObserver.unobserve(ancestor), ancestor = next, resizeObserver.observe(ancestor);
+  };
   setGrid(grid), calcGrid();
-  const ancestor = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
-  const resizeObserver = new ResizeObserver(calcGrid);
-  if (ancestor) resizeObserver.observe(ancestor);
   const destroy = () => {
     for (const el of interactiveEls) el?.removeEventListener("keydown", simulateKey);
     container.removeEventListener("focusout", handleFocusOut);
     for (const el of items) el.removeEventListener("mouseenter", handleHover);
     mutationObserver.disconnect(), resizeObserver.disconnect();
     if (timeout) clearTimeout(timeout);
+    t007._arrownavs.delete(container);
   };
-  const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, destroy };
+  const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, sync, destroy };
   return t007._arrownavs.set(container, handle), handle;
 }
 var removeArrowNavigation = (container) => t007._arrownavs?.get(container)?.destroy();
+var syncArrowNavigation = (container) => t007._arrownavs?.get(container)?.sync();
 export {
   initArrowNavigation,
   initFocusTrap,
@@ -229,5 +238,7 @@ export {
   removeFocusTrap,
   removeOutsideClick,
   removeScrollAssist,
-  rippleHandler
+  rippleHandler,
+  syncArrowNavigation,
+  syncFocusTrap
 };