@t007/dialog 0.0.30 → 0.0.32

package/dist/index.css

@@ -37,12 +37,12 @@
   --t007-dialog-button-padding-block: calc(var(--t007-dialog-unit) * 0.5);
   --t007-dialog-button-border-radius: calc(var(--t007-dialog-unit) * 1.25);
   --t007-dialog-button-gap: calc(var(--t007-dialog-unit) * 0.65);
-  --t007-confirm-button-color: grey;
-  --t007-confirm-button-background: var(--t007-cancel-button-color);
-  --t007-cancel-button-color: greenyellow;
-  --t007-cancel-button-background: var(--t007-confirm-button-color);
-  --t007-confirm-button-outline-color: var(--t007-cancel-button-color);
-  --t007-cancel-button-outline-color: var(--t007-cancel-button-color);
+  --t007-dialog-confirm-button-color: grey;
+  --t007-dialog-confirm-button-background: var(--t007-dialog-cancel-button-color);
+  --t007-dialog-cancel-button-color: greenyellow;
+  --t007-dialog-cancel-button-background: var(--t007-dialog-confirm-button-color);
+  --t007-dialog-confirm-button-outline-color: var(--t007-dialog-cancel-button-color);
+  --t007-dialog-cancel-button-outline-color: var(--t007-dialog-cancel-button-color);
 }
 :where(.t007-dialog) .t007-input-field {
   --t007-input-color: var(--t007-dialog-message-color);
@@ -213,13 +213,13 @@ body:has(> .t007-dialog) {
   transition: 100ms ease;
 }
 .t007-dialog-confirm-button {
-  color: var(--t007-confirm-button-color);
-  background: var(--t007-confirm-button-background);
+  color: var(--t007-dialog-confirm-button-color);
+  background: var(--t007-dialog-confirm-button-background);
   opacity: 1;
 }
 .t007-dialog-cancel-button {
-  color: var(--t007-cancel-button-color);
-  background: var(--t007-cancel-button-background);
+  color: var(--t007-dialog-cancel-button-color);
+  background: var(--t007-dialog-cancel-button-background);
   opacity: 0.9;
 }
 .t007-dialog button:hover {
@@ -236,8 +236,8 @@ body:has(> .t007-dialog) {
   outline-width: var(--t007-button-outline-width);
 }
 .t007-dialog-confirm-button:focus {
-  outline-color: var(--t007-confirm-button-outline-color);
+  outline-color: var(--t007-dialog-confirm-button-outline-color);
 }
 .t007-dialog-cancel-button:focus {
-  outline-color: var(--t007-cancel-button-outline-color);
+  outline-color: var(--t007-dialog-cancel-button-outline-color);
 }

package/dist/index.d.ts

@@ -1,19 +1,18 @@
-import "@t007/utils";
-import type { FieldOptions } from "@t007/input";
+import { FieldOptions } from '@t007/input';
 
 /** Shared options for alert, confirm, and prompt dialogs. */
-export interface DialogOptions {
+interface DialogOptions {
   /** Unique identifier for the dialog for programmatic dismissal. Auto-generated by default. */
   id?: string;
-  /** Text for the confirmation button. Defaults to "OK". */
+  /** Text for the confirmation button. @default  "OK". */
   confirmText?: string;
-  /** Text for the cancel button where applicable. Defaults to "Cancel". */
+  /** Text for the cancel button where applicable. @default  "Cancel". */
   cancelText?: string;
-  /** Browser behavior for handling dialog closure. Defaults to "any". */
+  /** Browser behavior for handling dialog closure. @default  "any". */
   closedBy?: HTMLDialogElement["closedBy"];
   /** Render dialog inside a specific root element instead of document body. */
   rootElement?: HTMLElement;
-  /** Whether to restrict interactions to `rootElement` if provided. Defaults to `true`. */
+  /** Whether to restrict interactions to `rootElement` if provided. @default  `true`. */
   scoped?: boolean;
 }
 
@@ -23,31 +22,31 @@ export interface DialogOptions {
  * @param id Optional unique identifier of the dialog to check.
  * @return `true` if the specified dialog (or any dialog when no id is provided) is active, otherwise `false`.
  */
-export function isActive(id?: string): boolean;
+declare function isActive(id?: string): boolean;
 /** Show an alert dialog and resolve when the user confirms.
  * @param message Message shown in the dialog body.
  * @param options Optional dialog configuration.
  * @returns Promise that resolves to the user choice.
  */
-export function alert(message: string, options?: DialogOptions): Promise<boolean>;
+declare function alert(message: string, options?: DialogOptions): Promise<boolean>;
 /** Show a confirm dialog and resolve with the user choice.
  * @param question Question shown in the dialog body.
  * @param options Optional dialog configuration.
  * @returns Promise that resolves to true when confirmed.
  */
-export function confirm(question: string, options?: DialogOptions): Promise<boolean>;
+declare function confirm(question: string, options?: DialogOptions): Promise<boolean>;
 /** Show a prompt dialog and resolve with the entered value.
  * @param question Question shown in the dialog body.
  * @param defaultValue Initial value for the prompt input.
  * @param options Optional dialog configuration.
  * @returns Promise that resolves to the entered string or null.
  */
-export function prompt(question: string, defaultValue?: string, options?: DialogOptions & FieldOptions): Promise<string | null>;
+declare function prompt(question: string, defaultValue?: string, options?: DialogOptions & FieldOptions): Promise<string | null>;
 /** Dismiss a dialog by id or all dialogs when no id is provided.
  * @param id Optional unique identifier of the dialog to dismiss. If not provided, all dialogs will be dismissed.
  * @param response Optional value to resolve the dialog's promise with. If not provided, defaults to `true` for confirm and alert dialogs, and `null` for prompt dialogs.
  */
-export function dismiss(id?: string, response?: any): void;
+declare function dismiss(id?: string, response?: any): void;
 
 interface Dialog {
   isActive(id?: string): boolean;
@@ -74,3 +73,5 @@ declare global {
     Prompt?: T007Namespace["prompt"];
   }
 }
+
+export { type DialogOptions, alert, confirm, dismiss, isActive, prompt };

package/dist/index.global.js

@@ -1,32 +1,11 @@
 "use strict";
 (() => {
-  // ../../../sia-reactor/dist/chunk-IBAPWB27.js
+  // ../../../sia-reactor/dist/chunk-JGEI2Q4M.js
   function clamp(min = 0, val, max = Infinity) {
     return Math.min(Math.max(val, min), max);
   }
 
-  // ../../../sia-reactor/dist/chunk-RI45W4O6.js
-  function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
-    return assignEl(el, props, dataset, styles), el;
-  }
-  function assignEl(el, props, dataset, styles) {
-    if (!el) return;
-    if (props) {
-      for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
-    }
-    if (dataset) {
-      for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
-    }
-    if (styles) {
-      for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
-    }
-  }
-  function getActiveEl(root) {
-    const activeEl = (root ?? document).activeElement;
-    return !activeEl ? null : activeEl.shadowRoot ? getActiveEl(activeEl.shadowRoot) : activeEl;
-  }
-
-  // ../../../sia-reactor/dist/chunk-3OT72G7R.js
+  // ../../../sia-reactor/dist/chunk-ORK3EGB6.js
   function onAllMethods(owner, callback, skipOwn = true, nested = false) {
     let proto = owner;
     while (proto && proto !== Object.prototype) {
@@ -43,52 +22,75 @@
       owner2[method] = owner2[method].bind(owner2);
     });
   }
+  function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
+    return assignEl(el, props, dataset, styles);
+  }
+  function assignEl(el, props, dataset, styles, nodiff = true) {
+    if (!el) return null;
+    if (props) {
+      for (const k of Object.keys(props)) if (props[k] !== void 0) {
+        if (nodiff || el[k] !== props[k]) el[k] = props[k];
+      }
+    }
+    if (dataset) {
+      for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) {
+        if (nodiff || el.dataset[k] !== dataset[k]) el.dataset[k] = String(dataset[k]);
+      }
+    }
+    if (styles) {
+      for (const k of Object.keys(styles)) if (styles[k] !== void 0) {
+        if (nodiff || el.style[k] !== styles[k]) el.style[k] = styles[k];
+      }
+    }
+    return el;
+  }
+  function getActiveEl(root) {
+    const activeEl = (root ?? document).activeElement;
+    return !activeEl ? null : activeEl.shadowRoot ? getActiveEl(activeEl.shadowRoot) : activeEl;
+  }
 
-  // ../../../sia-reactor/dist/chunk-4PLMBUCP.js
-  var CTX = {
-    /** Flag indicating whether the application is running in development mode. */
-    isDevEnv: "undefined" !== typeof process ? process.env.NODE_ENV !== "production" : true,
-    /** Flag indicating whether a cascade is currently ongoing so reactors can allow all writes. */
-    isCascading: false,
-    /** Active `Autotracker` instance, override for automatic dependency collection on `Reactor` traps. */
-    autotracker: null
-  };
+  // ../../../sia-reactor/dist/chunk-SHWIAQD2.js
   var RTR_BATCH = "undefined" !== typeof window ? ("undefined" !== typeof queueMicrotask ? queueMicrotask : setTimeout).bind(window) : "undefined" !== typeof process && process.nextTick ? process.nextTick : setTimeout;
   var RTR_LOG = console.log.bind(console, "[S.I.A Reactor]");
   var NIL = Object.freeze({});
   var NOOP = () => {
   };
+  var isDevEnv = false;
+  try {
+    isDevEnv = process.env.NODE_ENV !== "production";
+  } catch (e) {
+  }
 
-  // ../utils/dist/chunk-4O76EZJ4.js
-  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] *)";
+  // ../utils/dist/chunk-ZALPHCSJ.js
+  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);
   var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
-  function loadResource(req, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
-    w.t007 ??= {}, w.t007._resourceCache ??= {};
+  function loadResource(req, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, win = window) {
+    win.t007 ??= {}, win.t007._resourceCache ??= {};
     if (req === VIRTUAL_RESOURCE || isSym(req)) return Promise.resolve();
     const src = req;
-    if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
-    const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
-    if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
-    w.t007._resourceCache[src] = new Promise((resolve, reject) => {
+    if (win.t007._resourceCache[src]) return win.t007._resourceCache[src];
+    const existing = type === "script" ? Array.prototype.find.call(win.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(win.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
+    if (existing) return win.t007._resourceCache[src] = Promise.resolve(existing);
+    win.t007._resourceCache[src] = new Promise((resolve, reject) => {
       (function tryLoad(remaining, el) {
         const onerror = () => {
           el?.remove?.();
           if (remaining > 1) {
             setTimeout(tryLoad, 1e3, remaining - 1);
-            console.warn(`Retrying ${type} load (${attempts - remaining + 1}): ${src}...`);
+            console.warn(`Retrying ${type} load for "${src}" (${attempts - remaining + 1})...`);
           } else {
-            delete w.t007._resourceCache[src];
-            reject(new Error(`${type} load failed after ${attempts} attempts: ${src}`));
+            delete win.t007._resourceCache[src];
+            reject(new Error(`${capitalize(type)} load failed for "${src}" after ${attempts - 1} attempts`));
           }
         };
         const url = retryKey && remaining < attempts ? `${src}${src.includes("?") ? "&" : "?"}_${retryKey}=${Date.now()}` : src;
-        if (type === "script") w.document.body.append(el = createEl("script", { src: url, type: module ? "module" : "text/javascript", crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
-        else if (type === "style") w.document.head.append(el = createEl("link", { rel: "stylesheet", href: url, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+        if (type === "script") win.document.body.append(el = createEl("script", { src: url, type: module ? "module" : "text/javascript", crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+        else if (type === "style") win.document.head.append(el = createEl("link", { rel: "stylesheet", href: url, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
         else reject(new Error(`Unsupported resource type: ${type}`));
       })(attempts);
     });
-    return w.t007._resourceCache[src];
+    return win.t007._resourceCache[src];
   }
   function isDef(val) {
     return "undefined" !== typeof val;
@@ -102,6 +104,9 @@
   function uid(prefix = "") {
     return prefix + Date.now().toString(36) + "_" + performance.now().toString(36).replace(".", "") + "_" + Math.random().toString(36).slice(2);
   }
+  function capitalize(word = "") {
+    return word.replace(/^(\s*)([a-z])/i, (_, s, l) => s + l.toUpperCase());
+  }
   function parseCSSTime(time) {
     return time?.endsWith?.("ms") ? parseFloat(time) : parseFloat(time) * 1e3;
   }
@@ -114,6 +119,7 @@
     }
   }
   function isSameURL(url1, url2) {
+    if (url1 === url2) return true;
     if (!isStr(url1) || !isStr(url2) || !url1 || !url2) return false;
     return cleanURL(url1) === cleanURL(url2);
   }
@@ -127,33 +133,33 @@
     window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`;
   }
 
-  // ../utils/dist/chunk-QJ72EQCJ.js
+  // ../utils/dist/chunk-NX2LWYD6.js
   function initOutsideClick(el, { enabled = false, onOutside = NOOP, outOnClick = true, outOnEscape = true, outOnFocusOut = false, allowBounds = false, allowInputs = false, root = window, scoped = true, capture = true } = NIL) {
-    const stacks = t007._outsiders_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
+    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)?.();
   function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = NIL) {
-    const stacks = t007._ftrappers_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
+    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 = createEl("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = 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 = createEl("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = 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();
@@ -163,24 +169,24 @@
       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 && getActiveEl(el.ownerDocument) !== root && !el.contains(getActiveEl(el.ownerDocument)) && resetFocus();
+      stack.at(-1) === el && getActiveEl(el.ownerDocument) !== root && !el.contains(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 getTargetIndex = ({ key, currIndex, length, gridX, gridY, vGridY, loop, ctrlKey = false, rtl }) => {
     const rowStart = currIndex - currIndex % gridX, rowEnd = Math.min(rowStart + gridX - 1, length - 1), colStart = currIndex % gridX, colEnd = Math.min(colStart + gridX * (gridY - 1), length - 1), canX = gridX > 1, canY = gridY > 1, horizontalMove = rtl ? { ArrowRight: canX ? -1 : 0, ArrowLeft: canX ? 1 : 0 } : { ArrowRight: canX ? 1 : 0, ArrowLeft: canX ? -1 : 0 }, move = { ...horizontalMove, ArrowDown: canY ? gridX : 0, ArrowUp: canY ? -gridX : 0, Home: ctrlKey ? 0 : rowStart, End: ctrlKey ? length - 1 : rowEnd, PageDown: (vGridY - 1) * gridX, PageUp: -(vGridY - 1) * gridX }[key] ?? 0;
     let targetIndex = key === "Home" || key === "End" ? move : currIndex + move;
@@ -240,7 +246,7 @@
     rtl: null,
     grid: {},
     activeClass: "focus-outlined",
-    inputSelector: "input,textarea,[contenteditable='true']",
+    inputSelector: "input,textarea,[contenteditable]",
     focusOptions: { preventScroll: false },
     scrollIntoView: { block: "nearest", inline: "nearest" },
     onSelect: NOOP,
@@ -253,7 +259,7 @@
     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;
@@ -328,34 +334,41 @@
       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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t007/dialog",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "description": "A lightweight, pure JS dialog system.",
   "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
   "license": "MIT",
@@ -21,7 +21,8 @@
   "types": "./dist/index.d.ts",
   "style": "./dist/index.css",
   "sideEffects": [
-    "*.css"
+    "**/*.css",
+    "**/*.scss"
   ],
   "exports": {
     ".": {
@@ -56,7 +57,7 @@
     "accessible"
   ],
   "dependencies": {
-    "@t007/utils": "^0.0.33"
+    "@t007/utils": "^0.0.35"
   },
   "devDependencies": {
     "esbuild-sass-plugin": "^3.7.0"