@reticlehq/browser 3.8.0 → 3.8.2

package/dist/actions/danger-context.js

@@ -1,4 +1,4 @@
-import { OutwardAction, isDangerousActionText, isInertHref, isDangerousNavigation, isPaymentField, outwardActionOf, outwardRefusal, } from '@reticlehq/core';
+import { OutwardAction, isDangerousActionText, isDangerousNavigation, isInertHref, isPaymentField, outwardActionOf, outwardRefusal, withoutFilenameTokens, } from '@reticlehq/core';
 import { getAccessibleName, getRole } from '../dom/a11y.js';
 import { isHtmlElement } from '../dom/realm.js';
 const LABEL_VALUED_INPUT_TYPES = new Set([
@@ -8,34 +8,39 @@ const LABEL_VALUED_INPUT_TYPES = new Set([
     'image',
 ]);
 function holdsUserText(el) {
-    if (isHtmlElement(el) && el.isContentEditable)
+    if (isHtmlElement(el) && el.isContentEditable) {
         return true;
-    if (el instanceof HTMLTextAreaElement)
+    }
+    if (el instanceof HTMLTextAreaElement) {
         return true;
-    if (el instanceof HTMLInputElement)
+    }
+    if (el instanceof HTMLInputElement) {
         return !LABEL_VALUED_INPUT_TYPES.has(el.type.toLowerCase());
+    }
     return false;
 }
 const ANCHOR_TAG = 'A';
 function navigatingHref(el) {
-    if (ANCHOR_TAG !== el.tagName)
+    if (ANCHOR_TAG !== el.tagName) {
         return undefined;
+    }
     const href = el.getAttribute('href');
     return null === href || isInertHref(href) ? undefined : href;
 }
 export function dangerousActionContext(el) {
     const href = navigatingHref(el);
-    if (href !== undefined)
+    if (href !== undefined) {
         return href;
+    }
     const form = el.closest('form');
     const ownText = holdsUserText(el)
         ? ['', '']
         : [el.textContent ?? '', el.getAttribute('value') ?? ''];
     return [
-        getAccessibleName(el),
-        ...ownText,
-        el.getAttribute('title') ?? '',
-        el.getAttribute('aria-label') ?? '',
+        withoutFilenameTokens(getAccessibleName(el)),
+        withoutFilenameTokens(ownText.join(' ')),
+        withoutFilenameTokens(el.getAttribute('title') ?? ''),
+        withoutFilenameTokens(el.getAttribute('aria-label') ?? ''),
         el.getAttribute('href') ?? '',
         form?.getAttribute('action') ?? '',
     ].join(' ');
@@ -47,8 +52,9 @@ export function submitControlFor(el) {
 }
 export function requiresDangerousConfirmation(el) {
     const href = navigatingHref(el);
-    if (href !== undefined)
+    if (href !== undefined) {
         return isDangerousNavigation(href);
+    }
     return isDangerousActionText(dangerousActionContext(el), getRole(el));
 }
 let outwardAllowed;
@@ -56,19 +62,23 @@ export function setOutwardPolicy(allowed) {
     outwardAllowed = allowed;
 }
 export function assertOutwardAllowed(targets) {
-    if (outwardAllowed === undefined)
+    if (outwardAllowed === undefined) {
         return;
+    }
     for (const el of targets) {
-        if (null === el)
+        if (null === el) {
             continue;
+        }
         const kind = outwardActionOf(dangerousActionContext(el), getRole(el));
-        if (kind !== undefined && !outwardAllowed.includes(kind))
+        if (kind !== undefined && !outwardAllowed.includes(kind)) {
             throw new Error(outwardRefusal(kind));
+        }
     }
 }
 export function assertPaymentEntryAllowed(el) {
-    if (outwardAllowed === undefined || outwardAllowed.includes(OutwardAction.PAY))
+    if (outwardAllowed === undefined || outwardAllowed.includes(OutwardAction.PAY)) {
         return;
+    }
     const facts = {
         autocomplete: el.getAttribute('autocomplete') ?? undefined,
         name: el.getAttribute('name') ?? undefined,
@@ -76,6 +86,7 @@ export function assertPaymentEntryAllowed(el) {
         inputMode: el.getAttribute('inputmode') ?? undefined,
         label: `${getAccessibleName(el)} ${el.getAttribute('placeholder') ?? ''}`,
     };
-    if (isPaymentField(facts))
+    if (isPaymentField(facts)) {
         throw new Error(outwardRefusal(OutwardAction.PAY));
+    }
 }

package/dist/actions/scroll.d.ts

@@ -11,6 +11,8 @@ interface ScrollResult {
     atLeftEnd: boolean;
     atRightEnd: boolean;
 }
+export declare const SCROLL_FRACTION_RANGE_ERROR_PREFIX = "scroll fraction must be between 0 and 1, got ";
+export declare function fractionOutOfRangeMessage(fraction: number): string;
 export declare function scrollContainer(ref: string | undefined, dy: number | undefined, fraction?: number, dx?: number): ScrollResult;
 export declare function scrollFrom(base: Element | undefined, dy: number | undefined, fraction?: number, dx?: number): ScrollResult;
 export {};

package/dist/actions/scroll.js

@@ -1,6 +1,10 @@
 import { refs } from '../dom/addressing/refs.js';
 const FALLBACK_STEP_PX = 400;
 const VIEWPORT_FRACTION = 0.8;
+export const SCROLL_FRACTION_RANGE_ERROR_PREFIX = 'scroll fraction must be between 0 and 1, got ';
+export function fractionOutOfRangeMessage(fraction) {
+    return `${SCROLL_FRACTION_RANGE_ERROR_PREFIX}${fraction}`;
+}
 function nearestScrollable(el, axis) {
     let cur = el;
     while (cur !== null && cur !== document.body) {
@@ -18,18 +22,22 @@ export function scrollContainer(ref, dy, fraction, dx) {
     return scrollFrom(base instanceof Element ? base : undefined, dy, fraction, dx);
 }
 export function scrollFrom(base, dy, fraction, dx) {
+    if (fraction !== undefined && (fraction < 0 || fraction > 1 || Number.isNaN(fraction))) {
+        throw new RangeError(fractionOutOfRangeMessage(fraction));
+    }
     const axis = dx !== undefined && dx !== 0 && (dy === undefined || 0 === dy) ? 'x' : 'y';
     const target = base !== undefined
         ? nearestScrollable(base, axis)
         : (document.scrollingElement ?? document.documentElement);
     const before = target.scrollTop;
     const beforeLeft = target.scrollLeft;
-    if (fraction !== undefined && fraction >= 0 && fraction <= 1) {
+    if (fraction !== undefined) {
         target.scrollTop = Math.round(target.scrollHeight * fraction);
     }
     else {
-        if (dx !== undefined && dx !== 0)
+        if (dx !== undefined && dx !== 0) {
             target.scrollLeft = beforeLeft + dx;
+        }
         if (dx === undefined || (dy !== undefined && 0 !== dy)) {
             const step = dy ?? (Math.round(target.clientHeight * VIEWPORT_FRACTION) || FALLBACK_STEP_PX);
             target.scrollTop = before + step;

package/dist/actions/select-combobox.d.ts

@@ -0,0 +1,6 @@
+import type { ActionTarget } from '../dom/realm.js';
+type ClickFn = (el: ActionTarget) => Promise<{
+    prevented: boolean;
+}>;
+export declare function selectInCombobox(trigger: ActionTarget, wanted: string, click: ClickFn, noPopupMessage: string): Promise<boolean>;
+export {};

package/dist/actions/select-combobox.js

@@ -0,0 +1,69 @@
+import { echoRef } from '../dom/addressing/refs.js';
+import { getAccessibleName } from '../dom/a11y.js';
+import { isReticleUi } from '../dom/dom-ignore.js';
+import { isVisible } from '../dom/visibility.js';
+import { nativeFrame } from '../timers/native/native-timers.js';
+const OPEN_WAIT_FRAMES = 30;
+const ROLE_OPTION = 'option';
+function optionName(option) {
+    return getAccessibleName(option).trim();
+}
+function visibleOptions(trigger) {
+    const doc = trigger.ownerDocument;
+    const ids = (trigger.getAttribute('aria-controls') ?? trigger.getAttribute('aria-owns') ?? '')
+        .split(/\s+/)
+        .filter((id) => 0 < id.length);
+    const popups = ids
+        .map((id) => doc.getElementById(id))
+        .filter((popup) => null !== popup);
+    const roots = 0 < popups.length ? popups : [doc];
+    return roots
+        .flatMap((root) => Array.from(root.querySelectorAll(`[role="${ROLE_OPTION}"]`)))
+        .filter((option) => !isReticleUi(option) && isVisible(option));
+}
+async function waitForOptions(trigger) {
+    for (let frame = 0; frame < OPEN_WAIT_FRAMES; frame += 1) {
+        const options = visibleOptions(trigger);
+        if (0 < options.length) {
+            return options;
+        }
+        await nativeFrame();
+    }
+    return [];
+}
+function matches(option, wanted) {
+    const asked = wanted.trim();
+    return (optionName(option) === asked ||
+        option.getAttribute('data-value') === wanted ||
+        option.getAttribute('value') === wanted);
+}
+export async function selectInCombobox(trigger, wanted, click, noPopupMessage) {
+    const openedHere = 'true' !== trigger.getAttribute('aria-expanded');
+    if (openedHere) {
+        await click(trigger);
+    }
+    const options = await waitForOptions(trigger);
+    const found = options.filter((option) => matches(option, wanted));
+    const [match] = found;
+    const problem = 0 === options.length ? noPopupMessage : problemWith(found, options, wanted);
+    if (match === undefined || problem !== undefined) {
+        if (openedHere) {
+            await click(trigger);
+        }
+        throw new Error(problem ?? 'no option');
+    }
+    return (await click(match)).prevented;
+}
+function problemWith(found, options, wanted) {
+    const [match] = found;
+    if (match === undefined) {
+        return `no option '${echoRef(wanted)}' — available: ${options.map(optionName).join(', ')}`;
+    }
+    if (1 < found.length) {
+        return `${found.length} options match '${echoRef(wanted)}' — name one by its exact label`;
+    }
+    if ('true' === match.getAttribute('aria-disabled')) {
+        return `cannot select a disabled option '${echoRef(wanted)}' — a real user could not, so neither will Reticle`;
+    }
+    return undefined;
+}

package/dist/dom/a11y.d.ts

@@ -4,8 +4,4 @@ export declare function getAccessibleName(el: Element): string;
 export declare function getStates(el: Element, visible?: boolean): ElementState[];
 export declare function isSensitiveField(el: Element): boolean;
 export declare function getValue(el: Element): string | undefined;
-export declare function isHiddenByAriaOnly(el: Element): boolean;
-export declare function isRenderedOutsideAriaHidden(el: Element): boolean;
-export declare function isInViewport(el: Element, memo?: Map<Element, boolean>): boolean;
-export declare function isVisible(el: Element, memo?: Map<Element, boolean>): boolean;
 export declare function describe(el: Element, memo?: Map<Element, boolean>): ElementDescriptor;

package/dist/dom/a11y.js

@@ -1,15 +1,11 @@
 import { readTestId } from './addressing/testid-attr.js';
 import { DEFAULT_TESTID_ATTR, ElementState, REDACTED_VALUE, } from '@reticlehq/core';
-import { isButton, isHtmlElement, isImage, isInput, isMeter, isOutput, isProgress, isSelect, isTextArea, } from './realm.js';
+import { isButton, isImage, isInput, isMeter, isOutput, isProgress, isSelect, isTextArea, } from './realm.js';
 import { refs } from './addressing/refs.js';
-import { parentAcrossShadowBoundary } from './shadow-registry.js';
-import { clippingBox, overflowAxes, scrolledInto, } from './paint-context.js';
 import { inspectChart } from './chart.js';
 import { isSensitiveKey } from '../security/serialization.js';
 import { formatSource, sourceFromDom } from './addressing/source.js';
-const HTML_DETAILS_TAG = 'details';
-const HTML_DETAILS_OPEN_ATTRIBUTE = 'open';
-const HTML_SUMMARY_TAG = 'summary';
+import { HTML_DETAILS_OPEN_ATTRIBUTE, HTML_DETAILS_TAG, HTML_SUMMARY_TAG, isVisible, } from './visibility.js';
 const NAME_FROM_CONTENT = new Set([
     'button',
     'link',
@@ -364,294 +360,6 @@ export function getValue(el) {
     const valueNow = el.getAttribute('aria-valuenow');
     return valueNow ?? undefined;
 }
-function hiddenInsideClosedDetails(el) {
-    const parent = el.parentElement;
-    if (null === parent) {
-        return false;
-    }
-    const details = parent.closest(HTML_DETAILS_TAG);
-    if (null === details || details.hasAttribute(HTML_DETAILS_OPEN_ATTRIBUTE)) {
-        return false;
-    }
-    const summary = Array.from(details.children).find((child) => HTML_SUMMARY_TAG === child.localName);
-    return summary === undefined || !summary.contains(el);
-}
-function stalledFade(el) {
-    if (!el.ownerDocument.hidden || !('getAnimations' in el)) {
-        return false;
-    }
-    return el.getAnimations().some((a) => 'running' === a.playState || a.pending);
-}
-const OVERLAY_ARIA_HIDDEN = 'data-aria-hidden';
-function hiddenByAnOverlay(el) {
-    return el.hasAttribute(OVERLAY_ARIA_HIDDEN);
-}
-function selfCssHidden(el, style) {
-    if (isHtmlElement(el) && el.hidden) {
-        return true;
-    }
-    if (hiddenInsideClosedDetails(el)) {
-        return true;
-    }
-    if (style !== null) {
-        if ('none' === style.display ||
-            'hidden' === style.visibility ||
-            'collapse' === style.visibility) {
-            return true;
-        }
-        if (0 === Number.parseFloat(style.opacity || '1') && !stalledFade(el)) {
-            return true;
-        }
-    }
-    return false;
-}
-function selfHidden(el, style) {
-    if ('true' === el.getAttribute('aria-hidden') && !hiddenByAnOverlay(el)) {
-        return true;
-    }
-    return selfCssHidden(el, style);
-}
-export function isHiddenByAriaOnly(el) {
-    let foundAriaHidden = false;
-    let current = el;
-    while (null !== current) {
-        if ('true' === current.getAttribute('aria-hidden')) {
-            foundAriaHidden = true;
-        }
-        const style = current.ownerDocument.defaultView?.getComputedStyle(current) ?? null;
-        if (selfCssHidden(current, style)) {
-            return false;
-        }
-        current = parentAcrossShadowBoundary(current);
-    }
-    return foundAriaHidden;
-}
-export function isRenderedOutsideAriaHidden(el) {
-    let current = el;
-    while (null !== current) {
-        if ('true' === current.getAttribute('aria-hidden')) {
-            return false;
-        }
-        const style = current.ownerDocument.defaultView?.getComputedStyle(current) ?? null;
-        if (selfCssHidden(current, style)) {
-            return false;
-        }
-        current = parentAcrossShadowBoundary(current);
-    }
-    return true;
-}
-const CLIPPING_OVERFLOW = new Set(['hidden', 'clip']);
-const SCROLLING_OVERFLOW = new Set(['auto', 'scroll']);
-const NON_CLIPPING_DISPLAY = new Set([
-    'contents',
-    'table-row',
-    'table-row-group',
-    'table-header-group',
-    'table-footer-group',
-    'table-column',
-    'table-column-group',
-]);
-const TRANSFORM_CONTAINING_BLOCK_PROPERTIES = new Set([
-    'transform',
-    'translate',
-    'rotate',
-    'scale',
-    'perspective',
-]);
-const CONTAINING_BLOCK_PROPERTIES = new Set([
-    ...TRANSFORM_CONTAINING_BLOCK_PROPERTIES,
-    'filter',
-    'backdrop-filter',
-]);
-const CONTAINING_BLOCK_CONTAIN = new Set(['layout', 'paint', 'strict', 'content']);
-const REPLACED_INLINE_TAGS = new Set([
-    'img',
-    'video',
-    'audio',
-    'canvas',
-    'iframe',
-    'embed',
-    'object',
-    'input',
-    'textarea',
-    'select',
-]);
-const visibilityInfoMemos = new WeakMap();
-function visibilityInfoMemo(memo) {
-    if (memo === undefined) {
-        return new Map();
-    }
-    let info = visibilityInfoMemos.get(memo);
-    if (info === undefined) {
-        info = new Map();
-        visibilityInfoMemos.set(memo, info);
-    }
-    return info;
-}
-function ownVisibilityInfo(el, memo) {
-    let info = memo.get(el);
-    if (info === undefined) {
-        const style = el.ownerDocument.defaultView?.getComputedStyle(el) ?? null;
-        if (selfHidden(el, style)) {
-            info = {
-                hidden: true,
-                style,
-                parent: null,
-                clipX: false,
-                clipY: false,
-                scrollX: false,
-                scrollY: false,
-                hasClipping: false,
-            };
-            memo.set(el, info);
-            return info;
-        }
-        const parent = parentAcrossShadowBoundary(el);
-        const inherited = null === parent ? undefined : ownVisibilityInfo(parent, memo);
-        const [overflowX, overflowY] = overflowAxes(style);
-        const root = el.ownerDocument.documentElement;
-        const viewportOverflow = el === root ||
-            (el === el.ownerDocument.body &&
-                overflowAxes(ownVisibilityInfo(root, memo).style).every((axis) => 'visible' === axis));
-        const hasClipBox = !viewportOverflow &&
-            !NON_CLIPPING_DISPLAY.has(style?.display ?? '') &&
-            !(isHtmlElement(el) && 'inline' === style?.display);
-        const clipX = hasClipBox && CLIPPING_OVERFLOW.has(overflowX);
-        const clipY = hasClipBox && CLIPPING_OVERFLOW.has(overflowY);
-        info = {
-            hidden: true === inherited?.hidden,
-            style,
-            parent,
-            clipX,
-            clipY,
-            scrollX: hasClipBox && SCROLLING_OVERFLOW.has(overflowX),
-            scrollY: hasClipBox && SCROLLING_OVERFLOW.has(overflowY),
-            hasClipping: clipX || clipY || true === inherited?.hasClipping,
-        };
-        memo.set(el, info);
-    }
-    return info;
-}
-function positionedContainingBlock(el, fixed, memo) {
-    for (let parent = ownVisibilityInfo(el, memo).parent; parent !== null; parent = ownVisibilityInfo(parent, memo).parent) {
-        const style = ownVisibilityInfo(parent, memo).style;
-        if (null === style || 'contents' === style.display) {
-            continue;
-        }
-        if (!fixed && '' !== style.position && 'static' !== style.position) {
-            return parent;
-        }
-        const transformable = !('inline' === style.display &&
-            isHtmlElement(parent) &&
-            !REPLACED_INLINE_TAGS.has(parent.localName)) &&
-            'table-column' !== style.display &&
-            'table-column-group' !== style.display;
-        const applies = (property) => transformable || !TRANSFORM_CONTAINING_BLOCK_PROPERTIES.has(property);
-        if ([...CONTAINING_BLOCK_PROPERTIES].some((property) => {
-            const value = style.getPropertyValue(property);
-            return applies(property) && '' !== value && 'none' !== value;
-        }) ||
-            style.willChange
-                .split(',')
-                .some((property) => CONTAINING_BLOCK_PROPERTIES.has(property.trim()) && applies(property.trim())) ||
-            (transformable &&
-                !NON_CLIPPING_DISPLAY.has(style.display) &&
-                (style.contain.split(/\s+/).some((value) => CONTAINING_BLOCK_CONTAIN.has(value)) ||
-                    'auto' === style.contentVisibility))) {
-            return parent;
-        }
-    }
-    return null;
-}
-function visibleBounds(el, memo, initial, throughScrollers = false) {
-    let bounds = initial;
-    const target = ownVisibilityInfo(el, memo);
-    if (target.hidden) {
-        return null;
-    }
-    if (null === target.parent || !ownVisibilityInfo(target.parent, memo).hasClipping) {
-        return bounds;
-    }
-    let clipFrom;
-    for (let current = el; current !== null; current = ownVisibilityInfo(current, memo).parent) {
-        const info = ownVisibilityInfo(current, memo);
-        if (info.hidden) {
-            return null;
-        }
-        if (current === clipFrom) {
-            clipFrom = undefined;
-        }
-        const style = info.style;
-        if (throughScrollers &&
-            current !== el &&
-            undefined === clipFrom &&
-            (info.scrollX || info.scrollY)) {
-            bounds ??= el.getBoundingClientRect();
-            if (bounds.width > 0 && bounds.height > 0) {
-                bounds = scrolledInto(bounds, clippingBox(current, info), info.scrollX, info.scrollY);
-            }
-        }
-        if (current !== el && undefined === clipFrom && (info.clipX || info.clipY)) {
-            bounds ??= el.getBoundingClientRect();
-            if (bounds.width > 0 && bounds.height > 0) {
-                const clip = clippingBox(current, info);
-                const left = info.clipX ? Math.max(bounds.left, clip.left) : bounds.left;
-                const right = info.clipX ? Math.min(bounds.right, clip.right) : bounds.right;
-                const top = info.clipY ? Math.max(bounds.top, clip.top) : bounds.top;
-                const bottom = info.clipY ? Math.min(bounds.bottom, clip.bottom) : bounds.bottom;
-                if (right <= left || bottom <= top) {
-                    return null;
-                }
-                bounds = { left, right, top, bottom, width: right - left, height: bottom - top };
-            }
-        }
-        if (clipFrom === undefined && ('absolute' === style?.position || 'fixed' === style?.position)) {
-            clipFrom = positionedContainingBlock(current, 'fixed' === style?.position, memo);
-        }
-    }
-    return bounds;
-}
-export function isInViewport(el, memo) {
-    if (!isVisible(el, memo)) {
-        return false;
-    }
-    const view = el.ownerDocument.defaultView;
-    if (null === view) {
-        return false;
-    }
-    const r = visibleBounds(el, visibilityInfoMemo(memo), el.getBoundingClientRect());
-    if (null === r || undefined === r) {
-        return false;
-    }
-    if (r.width <= 0 || r.height <= 0) {
-        return false;
-    }
-    return r.bottom > 0 && r.right > 0 && r.top < view.innerHeight && r.left < view.innerWidth;
-}
-function collapsed(el, memo) {
-    const own = ownVisibilityInfo(el, memo);
-    if (!own.clipX && !own.clipY) {
-        return false;
-    }
-    const rects = Array.from(el.getClientRects());
-    return (rects.length > 0 &&
-        rects.every((r) => (own.clipX && 0 === r.width) || (own.clipY && 0 === r.height)));
-}
-export function isVisible(el, memo) {
-    if (!el.isConnected) {
-        return false;
-    }
-    const cached = memo?.get(el);
-    if (cached !== undefined) {
-        return cached;
-    }
-    const info = visibilityInfoMemo(memo);
-    const result = visibleBounds(el, info, undefined, true) !== null && !collapsed(el, info);
-    if (memo !== undefined) {
-        memo.set(el, result);
-    }
-    return result;
-}
 const MAX_TEXT = 80;
 function getVisibleText(el) {
     const text = collapse(el.textContent ?? '');

package/dist/dom/dom-ignore.js

@@ -1,5 +1,6 @@
 import { RETICLE_OVERLAY_SELECTOR } from '@reticlehq/core';
 import { capturedRootOf } from './shadow-registry.js';
+import { isVisible } from './visibility.js';
 export const RETICLE_OVERLAY = RETICLE_OVERLAY_SELECTOR;
 const DEV_OVERLAYS = '[data-agentation],#__next-build-watcher,nextjs-portal,[data-nextjs-dialog],[data-nextjs-toast]';
 let extraIgnore = '';
@@ -23,8 +24,9 @@ export function isReticleOverlay(el) {
 }
 const HUD_DOCK = '[data-reticle-dock]';
 export function isUnobserved(el) {
-    if (!isReticleOverlay(el))
+    if (!isReticleOverlay(el)) {
         return false;
+    }
     return !exposed() || null === el.closest(HUD_DOCK);
 }
 export function isReticleUi(node) {
@@ -48,30 +50,38 @@ const NEXT_DIALOG = '[data-nextjs-dialog]';
 const VITE_OVERLAY = 'vite-error-overlay';
 function openFrameworkErrorDialog(doc) {
     const vite = doc.querySelector(VITE_OVERLAY);
-    if (vite !== null)
+    if (vite !== null) {
         return { name: FrameworkErrorDialog.VITE, host: vite };
+    }
     for (const portal of Array.from(doc.querySelectorAll(NEXT_PORTAL))) {
         const root = portal.shadowRoot ?? capturedRootOf(portal);
-        if (null !== (root ?? portal).querySelector(NEXT_DIALOG)) {
+        const dialog = (root ?? portal).querySelector(NEXT_DIALOG);
+        if (null !== dialog && isVisible(dialog)) {
             return { name: FrameworkErrorDialog.NEXT, host: portal };
         }
     }
     const light = doc.querySelector(NEXT_DIALOG);
-    return null === light ? undefined : { name: FrameworkErrorDialog.NEXT, host: light };
+    if (null === light || !isVisible(light)) {
+        return undefined;
+    }
+    return { name: FrameworkErrorDialog.NEXT, host: light };
 }
 export function dialogCovering(matches) {
     const first = matches[0];
-    if (first === undefined)
+    if (first === undefined) {
         return undefined;
+    }
     const dialog = openFrameworkErrorDialog(first.ownerDocument);
-    if (dialog === undefined)
+    if (dialog === undefined) {
         return undefined;
+    }
     return matches.some((el) => !isInsideHost(el, dialog.host)) ? dialog.name : undefined;
 }
 function isInsideHost(el, host) {
     for (let node = el; node !== null;) {
-        if (node === host)
+        if (node === host) {
             return true;
+        }
         const root = node.getRootNode();
         node = node.parentNode ?? (root instanceof ShadowRoot ? root.host : null);
     }
@@ -80,12 +90,15 @@ function isInsideHost(el, host) {
 const APP_MODAL = 'dialog[open], [aria-modal="true"]';
 export function appModalOpen(doc) {
     for (const el of Array.from(doc.querySelectorAll(APP_MODAL))) {
-        if (el.closest(RETICLE_OVERLAY) !== null)
+        if (el.closest(RETICLE_OVERLAY) !== null) {
             continue;
-        if (el instanceof HTMLElement && (el.hidden || null !== el.closest('[hidden]')))
+        }
+        if (el instanceof HTMLElement && (el.hidden || null !== el.closest('[hidden]'))) {
             continue;
-        if (el instanceof HTMLElement && 'none' === getComputedStyle(el).display)
+        }
+        if (el instanceof HTMLElement && 'none' === getComputedStyle(el).display) {
             continue;
+        }
         return true;
     }
     return false;

package/dist/dom/query-finders.d.ts

@@ -0,0 +1,6 @@
+import { type ElementQuery } from '@reticlehq/core';
+export declare function elementsUnder(container: HTMLElement): HTMLElement[];
+export declare function isNonRendered(el: Element): boolean;
+export declare function isHiddenNativeOption(el: HTMLElement): boolean;
+export declare function queryByRoleAndName(container: HTMLElement, role: string, name: string | undefined): HTMLElement[];
+export declare function findIn(container: HTMLElement, query: ElementQuery): HTMLElement[];