browser-debugger-cli 0.12.0 → 0.14.0

package/dist/runtime/dom/elementGeometry.d.ts

@@ -16,8 +16,9 @@ export interface ElementGeometry {
     rect: LayoutBox;
     /**
      * For a zero-size element whose children show (an inline list around
-     * floated items): the box around those children, which is what can be
-     * seen of it
+     * floated items, a `display: contents` web component whose shadow root
+     * shows a dialog): the box around those children in the flat tree, which
+     * is what can be seen of it
      */
     content?: LayoutBox | null;
     /** Area its iframes and overflow-clipping ancestors leave visible, in the same coordinates */
@@ -33,6 +34,11 @@ export interface ElementGeometry {
      * e.g. `opacity: 0 on div#menu`
      */
     invisible: string | null;
+    /**
+     * Masked by `mask-image` on it or an ancestor ({@link MASKED_BY_JS}), e.g.
+     * `mask-image on div.hero`: part or all of it may not show
+     */
+    masked?: string | null;
     /** Inside an `inert` element: shown, but not interactive */
     inert: boolean;
     /** Fixed to the top-level viewport (it or a container is `position: fixed`): page scroll does not move it */
@@ -113,6 +119,29 @@ export declare const FRAME_OFFSET_JS = "(frame) => {\n  const rect = frame.getBo
  * its bounding box is the box itself, scaled.
  */
 export declare const SCALES_ONLY_JS = "(style) => {\n  if (style.rotate && style.rotate !== 'none') return false;\n  if (!style.transform || style.transform === 'none') return true;\n  const matrix = /^matrix\\(([^)]*)\\)$/.exec(style.transform);\n  if (!matrix) return false;\n  const values = matrix[1].split(',').map(parseFloat);\n  return Math.abs(values[1]) < 1e-6 && Math.abs(values[2]) < 1e-6;\n}";
+/**
+ * Page-side clip of a node by its ancestors in the flat tree (through the
+ * slots it is shown in and open shadow roots): the padding boxes
+ * ({@link CLIP_BOX_JS}) of those that cut off overflowing content and hold
+ * the node in their containing-block chain. An absolutely positioned node
+ * skips static ancestors (that are not transformed) up to its containing
+ * block, a fixed one is not clipped at all unless a transformed (or
+ * filtered, contained, …) ancestor holds it like an absolute one, and
+ * inline ancestors and `display: contents` ones have no box to clip with.
+ * The root element is left out (its overflow belongs to the viewport), and
+ * so is the body's overflow unless the root element's overflow is not
+ * `visible` (then the body keeps its own overflow and, e.g. as the page's
+ * scroller, clips like any container).
+ * Returns the clip, whether overlay scrollbars of the containers show along
+ * its right and bottom edges ({@link OVERLAY_SCROLLBARS_JS}), the innermost
+ * ancestor cutting off part of `rect` (null when none does), why the
+ * innermost clipping ancestor with no area (a collapsed
+ * `height: 0; overflow: hidden` accordion) hides it, e.g.
+ * `clipped by div#acc: zero height` (null when none has), and whether the
+ * node is fixed to the viewport (it or a container in its containing-block
+ * chain is `position: fixed`; `fixedBy` is that node).
+ */
+export declare const ANCESTOR_CLIP_JS: string;
 /** Page-side test of a `clip-path` that cuts everything away: `inset()` with percentages leaving no area. */
 export declare const CLIP_PATH_CUTS_ALL_JS = "(clipPath) => {\n  const inset = /^inset\\(([^)]*)\\)/.exec(clipPath || '');\n  const values = inset ? inset[1].split(' round ')[0].trim().split(/\\s+/) : [];\n  if (values.length === 0 || values.some((v) => !/%$/.test(v))) return false;\n  const [top, right = top, bottom = top, left = right] = values.map(parseFloat);\n  return top + bottom >= 100 || left + right >= 100;\n}";
 /**
@@ -126,7 +155,8 @@ export declare const CLIP_RECT_CUTS_ALL_JS = "(position, clip) => {\n  if ((posi
  * top-level viewport coordinates, its clip by ancestors
  * ({@link ANCESTOR_CLIP_JS}) and by the viewports of its iframes, why it
  * cannot be seen at all (not rendered, or inside a clipping container
- * collapsed to zero size), why a rendered one is still invisible
+ * collapsed to zero size; a `display: contents` element is measured by
+ * its children in the flat tree and is hidden only when none shows), why a rendered one is still invisible
  * ({@link INVISIBLE_REASON_JS}), whether it is inert (an `inert` element
  * around it, through shadow roots) or fixed to the top-level viewport, and how
  * far the top-level page can scroll ({@link SCROLL_RANGE_JS}) or what locks

package/dist/runtime/dom/elementGeometry.js

@@ -152,28 +152,30 @@ const HOLDS_FIXED_JS = `(style) =>
   /transform|filter|perspective/.test(style.willChange) || /paint|layout|strict|content/.test(style.contain)`;
 /**
  * Page-side test of whether a `position: fixed` node is fixed to its
- * document's viewport (no ancestor holds it, {@link HOLDS_FIXED_JS}).
+ * document's viewport (no ancestor in the flat tree holds it,
+ * {@link HOLDS_FIXED_JS}).
  */
 const FIXED_TO_VIEWPORT_JS = `(n) => {
   const holdsFixed = ${HOLDS_FIXED_JS};
-  const parentOf = (node) => node.parentElement || (node.parentNode && node.parentNode.host) || null;
+  const parentOf = ${FLAT_PARENT_JS};
   for (let p = parentOf(n); p && p !== n.ownerDocument.documentElement; p = parentOf(p)) {
     if (holdsFixed(p.ownerDocument.defaultView.getComputedStyle(p))) return false;
   }
   return true;
 }`;
 /**
- * Page-side clip of a node by its ancestors (looked up through open shadow
- * roots): the padding boxes ({@link CLIP_BOX_JS}) of those that cut off
- * overflowing content and hold the node in their containing-block chain. An
- * absolutely positioned node skips static ancestors (that are not
- * transformed) up to its containing block, a fixed one is not clipped at all
- * unless a transformed (or filtered, contained, …) ancestor holds it like an
- * absolute one, and inline ancestors and `display: contents` ones have no box
- * to clip with. The root element is left out (its overflow belongs to the
- * viewport), and so is the body's overflow unless the root element's
- * overflow is not `visible` (then the body keeps its own overflow and, e.g.
- * as the page's scroller, clips like any container).
+ * Page-side clip of a node by its ancestors in the flat tree (through the
+ * slots it is shown in and open shadow roots): the padding boxes
+ * ({@link CLIP_BOX_JS}) of those that cut off overflowing content and hold
+ * the node in their containing-block chain. An absolutely positioned node
+ * skips static ancestors (that are not transformed) up to its containing
+ * block, a fixed one is not clipped at all unless a transformed (or
+ * filtered, contained, …) ancestor holds it like an absolute one, and
+ * inline ancestors and `display: contents` ones have no box to clip with.
+ * The root element is left out (its overflow belongs to the viewport), and
+ * so is the body's overflow unless the root element's overflow is not
+ * `visible` (then the body keeps its own overflow and, e.g. as the page's
+ * scroller, clips like any container).
  * Returns the clip, whether overlay scrollbars of the containers show along
  * its right and bottom edges ({@link OVERLAY_SCROLLBARS_JS}), the innermost
  * ancestor cutting off part of `rect` (null when none does), why the
@@ -183,14 +185,14 @@ const FIXED_TO_VIEWPORT_JS = `(n) => {
  * node is fixed to the viewport (it or a container in its containing-block
  * chain is `position: fixed`; `fixedBy` is that node).
  */
-const ANCESTOR_CLIP_JS = `(node, rect, describe) => {
+export const ANCESTOR_CLIP_JS = `(node, rect, describe) => {
   const clipBox = ${CLIP_BOX_JS};
   const overlayScrollbars = ${OVERLAY_SCROLLBARS_JS};
   const holdsFixed = ${HOLDS_FIXED_JS};
   const fixedToViewport = ${FIXED_TO_VIEWPORT_JS};
   const reasons = ${JSON.stringify(LAYOUT_REASONS)};
   const styleOf = (n) => n.ownerDocument.defaultView.getComputedStyle(n);
-  const parentOf = (n) => n.parentElement || (n.parentNode && n.parentNode.host) || null;
+  const parentOf = ${FLAT_PARENT_JS};
   const doc = node.ownerDocument;
   const rootStyle = styleOf(doc.documentElement);
   const bodyClips = rootStyle.overflowX !== 'visible' || rootStyle.overflowY !== 'visible';
@@ -268,12 +270,28 @@ const INVISIBLE_REASON_JS = `(el, describe) => {
   }
   return null;
 }`;
+/**
+ * Page-side mask over an element: the nearest of it and its ancestors in the
+ * flat tree (slots, shadow hosts, iframes) with a `mask-image`. How much the
+ * mask hides is not evaluated. Null without one.
+ */
+const MASKED_BY_JS = `(el, describe) => {
+  const flatParent = ${FLAT_PARENT_JS};
+  const parentOf = (n) => flatParent(n) || n.ownerDocument.defaultView.frameElement || null;
+  for (let n = el; n; n = parentOf(n)) {
+    const style = n.ownerDocument.defaultView.getComputedStyle(n);
+    const mask = style.maskImage || style.webkitMaskImage;
+    if (mask && mask !== 'none') return n === el ? 'mask-image' : 'mask-image on ' + describe(n);
+  }
+  return null;
+}`;
 /**
  * Page-side measurement of an element ({@link ElementGeometry}): its box in
  * top-level viewport coordinates, its clip by ancestors
  * ({@link ANCESTOR_CLIP_JS}) and by the viewports of its iframes, why it
  * cannot be seen at all (not rendered, or inside a clipping container
- * collapsed to zero size), why a rendered one is still invisible
+ * collapsed to zero size; a `display: contents` element is measured by
+ * its children in the flat tree and is hidden only when none shows), why a rendered one is still invisible
  * ({@link INVISIBLE_REASON_JS}), whether it is inert (an `inert` element
  * around it, through shadow roots) or fixed to the top-level viewport, and how
  * far the top-level page can scroll ({@link SCROLL_RANGE_JS}) or what locks
@@ -292,6 +310,7 @@ export const ELEMENT_GEOMETRY_JS = `(el) => {
   const scrollRange = ${SCROLL_RANGE_JS};
   const scrollLock = ${SCROLL_LOCK_JS};
   const invisibleReason = ${INVISIBLE_REASON_JS};
+  const maskedBy = ${MASKED_BY_JS};
   const describe = ${ELEMENT_DESCRIPTION_JS};
   const reasons = ${JSON.stringify(LAYOUT_REASONS)};
   const styleOf = (node) => node.ownerDocument.defaultView.getComputedStyle(node);
@@ -311,11 +330,16 @@ export const ELEMENT_GEOMETRY_JS = `(el) => {
     }
     return 'not rendered';
   };
+  const flatChildren = (node) =>
+    Array.from((node.shadowRoot || node).children).flatMap((c) => {
+      const shown = c.localName === 'slot' ? c.assignedElements({ flatten: true }) : [c];
+      return shown.flatMap((s) => (styleOf(s).display === 'contents' ? flatChildren(s) : [s]));
+    });
   const shownChildren = (node) => {
     const s = styleOf(node);
     if (s.overflowX !== 'visible' || s.overflowY !== 'visible') return null;
     let union = null;
-    for (const c of Array.from(node.children).slice(0, 50)) {
+    for (const c of flatChildren(node).slice(0, 50)) {
       const r = c.getBoundingClientRect();
       if (r.width <= 0 || r.height <= 0 || styleOf(c).visibility !== 'visible') continue;
       union = union
@@ -326,7 +350,7 @@ export const ELEMENT_GEOMETRY_JS = `(el) => {
   };
   const hiddenReason = (style, box, content) => {
     if (style.display === 'none') return 'display: none';
-    if (style.display === 'contents') return 'display: contents (no box of its own)';
+    if (style.display === 'contents') return content ? null : 'display: contents (no box of its own)';
     if (el.getClientRects().length === 0) {
       return el.tagName === 'OPTION' ? reasons.option : 'not rendered (an ancestor has display: none)';
     }
@@ -386,9 +410,10 @@ export const ELEMENT_GEOMETRY_JS = `(el) => {
   while (top.frameElement) top = top.parent;
   const toBox = (r) => r && { x: r.left, y: r.top, width: r.right - r.left, height: r.bottom - r.top };
   const invisible = hidden ? null : invisibleReason(el, describe);
+  const masked = hidden || invisible ? null : maskedBy(el, describe);
   const lock = scrollLock(top, describe);
   if (lock && fixedBy === top.document.body) fixed = false;
-  return { rect: toBox(rect), content: toBox(content), clip: toBox(clip), clipOverlay: overlay, clipper: clipper, hidden: hidden, invisible: invisible, inert: isInert(), fixed: fixed, sticky: !fixed && isSticky(), pageScroll: scrollRange(top), scrollLock: lock, offset: { x: x, y: y } };
+  return { rect: toBox(rect), content: toBox(content), clip: toBox(clip), clipOverlay: overlay, clipper: clipper, hidden: hidden, invisible: invisible, masked: masked, inert: isInert(), fixed: fixed, sticky: !fixed && isSticky(), pageScroll: scrollRange(top), scrollLock: lock, offset: { x: x, y: y } };
 }`;
 /**
  * Edges of a box.

package/dist/runtime/dom/elementInfo.d.ts

@@ -3,6 +3,19 @@
  * `dom layout`, DOM context of console messages): their text as a user sees
  * it and where they live (iframes, shadow roots).
  */
+/**
+ * Whether a class name is shown in element labels: not empty and not a
+ * fragment of a declaration-like class attribute ({@link CLASS_FRAGMENT}).
+ *
+ * @param name - Class name
+ * @returns True to show it
+ */
+export declare function isLabelClass(name: string): boolean;
+/**
+ * Page-side `(node) => string[]`: the element's classes shown in labels
+ * ({@link isLabelClass}), read without array helpers a page may replace
+ */
+export declare const LABEL_CLASSES_JS: string;
 /** Length of the text `dom get` shows for an element. */
 export declare const ELEMENT_TEXT_LENGTH = 500;
 /**
@@ -14,18 +27,47 @@ export declare const ELEMENT_TEXT_LENGTH = 500;
  * text is removed once, from the end.
  */
 export declare const WITHOUT_DECORATIONS_JS = "(el, text) => {\n  if (!text || typeof el.querySelectorAll !== 'function') return text;\n  const glyph = /^\\s*[\u00D7\u2715\u2716\u2717\u2A2F]\\s*$/;\n  const textOf = (node) => (typeof node.innerText === 'string' ? node.innerText : node.textContent || '').trim();\n  const closer = '.close, [aria-label=\"close\" i], [aria-label=\"dismiss\" i]';\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const found = Array.from(el.querySelectorAll(closer + ', [aria-hidden=\"true\"]'))\n    .filter((node) => rendered(node) && (node.matches(closer) || !/[\\p{L}\\p{N}]/u.test(textOf(node))));\n  if (/[\u00D7\u2715\u2716\u2717\u2A2F]/.test(text)) {\n    found.push(...Array.from(el.querySelectorAll('button, a, [role=\"button\"]')).filter((node) => glyph.test(node.textContent || '')));\n  }\n  const unique = Array.from(new Set(found));\n  const outermost = unique.filter((node) => !unique.some((other) => other !== node && other.contains(node)));\n  let result = text;\n  for (const node of outermost) {\n    const part = textOf(node);\n    const at = part ? result.lastIndexOf(part) : -1;\n    if (at >= 0) result = result.slice(0, at) + result.slice(at + part.length);\n  }\n  return result;\n}";
+/**
+ * Page-side check whether `innerText` misses part of what an element shows:
+ * it is a `<slot>` or hosts an open shadow root, or one of its descendants
+ * is or does. `innerText` follows neither shadow roots nor slots.
+ */
+export declare const COMPOSED_JS = "(node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n}";
+/**
+ * Page-side text of an element as the flat tree renders it, for elements
+ * `innerText` cannot read ({@link COMPOSED_JS}): a shadow host is read from
+ * its open shadow root (its own labels and fallback content; light children
+ * only where a slot shows them), and each slot is replaced by what it
+ * shows, its assigned nodes flattened through nested slots (or its fallback
+ * content when nothing is assigned). Parts without slots or shadow roots
+ * are read with `innerText`; elements that are not rendered and text under
+ * `visibility: hidden` are left out, elements that are not inline are set
+ * apart by line breaks, as is a `<br>`. Fields and editable regions inside
+ * it (inputs, textareas, selects, a contenteditable editor) are skipped, so
+ * what a user typed is never read, unless `fields` is set: then selects
+ * (all their options) and editable regions are read as `innerText` reads
+ * them (inputs and textareas it leaves out too). Raw text keeps
+ * `innerText`'s collapsed whitespace. The text is cut at `limit` characters, and a
+ * part whose text alone passes the limit is read from its text nodes
+ * (`textContent`) instead of `innerText`, which would lay out all of it.
+ */
+export declare const FLAT_TEXT_JS = "(el, limit, fields) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const view = el.ownerDocument.defaultView;\n  let text = '';\n  const nodesOf = (node) =>\n    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);\n  const read = (node, visible) => {\n    if (text.length >= limit) return;\n    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');\n    if (node.nodeType !== 1) return;\n    if (/^(input|textarea)$/.test(node.localName)) return;\n    if (!fields && (node.localName === 'select' || node.isContentEditable)) return;\n    const style = view.getComputedStyle(node);\n    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;\n    if (node.localName === 'br') text += '\\n';\n    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';\n    text += apart;\n    const own = node.textContent || '';\n    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));\n    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);\n    else text += typeof node.innerText === 'string' ? node.innerText : own;\n    text += apart;\n  };\n  const visible = view.getComputedStyle(el).visibility === 'visible';\n  nodesOf(el).forEach((child) => read(child, visible));\n  return text.slice(0, limit);\n}";
 /**
  * Page-side text of an element as a user sees it: `innerText` for a rendered
  * element (CSS-hidden parts left out, inline elements not split apart), none
  * for an element that is not rendered, `textContent` for SVG and other
  * elements without `innerText` and for `display: contents` wrappers (no box
  * of their own, but their children are shown), and the label of an
- * `<option>` (which its `<select>` renders). For large containers (more
- * than 2000 characters of text) only the start is read, from the text nodes
- * whose parent is rendered, so a preview never lays out a whole page's text,
- * unless `full` is set. Decorations are left out ({@link WITHOUT_DECORATIONS_JS}).
+ * `<option>` (which its `<select>` renders). A web component, a slot, and
+ * an element holding either are read through the flat tree
+ * ({@link FLAT_TEXT_JS}): the text a component renders from its shadow
+ * root, slotted content in place of its slots, blocks set apart. For large
+ * containers (more than 2000 characters of text) only the start is read,
+ * from the text nodes whose parent is rendered, so a preview never lays out
+ * a whole page's text, unless `full` is set. Decorations are left out
+ * ({@link WITHOUT_DECORATIONS_JS}).
  */
-export declare const ELEMENT_TEXT_JS = "(el, full) => {\n  const withoutDecorations = (el, text) => {\n  if (!text || typeof el.querySelectorAll !== 'function') return text;\n  const glyph = /^\\s*[\u00D7\u2715\u2716\u2717\u2A2F]\\s*$/;\n  const textOf = (node) => (typeof node.innerText === 'string' ? node.innerText : node.textContent || '').trim();\n  const closer = '.close, [aria-label=\"close\" i], [aria-label=\"dismiss\" i]';\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const found = Array.from(el.querySelectorAll(closer + ', [aria-hidden=\"true\"]'))\n    .filter((node) => rendered(node) && (node.matches(closer) || !/[\\p{L}\\p{N}]/u.test(textOf(node))));\n  if (/[\u00D7\u2715\u2716\u2717\u2A2F]/.test(text)) {\n    found.push(...Array.from(el.querySelectorAll('button, a, [role=\"button\"]')).filter((node) => glyph.test(node.textContent || '')));\n  }\n  const unique = Array.from(new Set(found));\n  const outermost = unique.filter((node) => !unique.some((other) => other !== node && other.contains(node)));\n  let result = text;\n  for (const node of outermost) {\n    const part = textOf(node);\n    const at = part ? result.lastIndexOf(part) : -1;\n    if (at >= 0) result = result.slice(0, at) + result.slice(at + part.length);\n  }\n  return result;\n};\n  const all = el.textContent || '';\n  if (el.tagName === 'OPTION') return el.label;\n  if (typeof el.innerText !== 'string') return full ? all : all.slice(0, 2000);\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  if (!rendered(el)) {\n    const boxless = el.ownerDocument.defaultView.getComputedStyle(el).display === 'contents';\n    return boxless ? withoutDecorations(el, full ? all : all.slice(0, 2000)) : '';\n  }\n  if (full || all.length <= 2000) return withoutDecorations(el, el.innerText);\n  const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT);\n  let start = '';\n  while (start.length < 1000 && walker.nextNode()) {\n    const parent = walker.currentNode.parentElement;\n    if (!parent || rendered(parent)) start += walker.currentNode.data;\n  }\n  return withoutDecorations(el, start);\n}";
+export declare const ELEMENT_TEXT_JS = "(el, full) => {\n  const withoutDecorations = (el, text) => {\n  if (!text || typeof el.querySelectorAll !== 'function') return text;\n  const glyph = /^\\s*[\u00D7\u2715\u2716\u2717\u2A2F]\\s*$/;\n  const textOf = (node) => (typeof node.innerText === 'string' ? node.innerText : node.textContent || '').trim();\n  const closer = '.close, [aria-label=\"close\" i], [aria-label=\"dismiss\" i]';\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const found = Array.from(el.querySelectorAll(closer + ', [aria-hidden=\"true\"]'))\n    .filter((node) => rendered(node) && (node.matches(closer) || !/[\\p{L}\\p{N}]/u.test(textOf(node))));\n  if (/[\u00D7\u2715\u2716\u2717\u2A2F]/.test(text)) {\n    found.push(...Array.from(el.querySelectorAll('button, a, [role=\"button\"]')).filter((node) => glyph.test(node.textContent || '')));\n  }\n  const unique = Array.from(new Set(found));\n  const outermost = unique.filter((node) => !unique.some((other) => other !== node && other.contains(node)));\n  let result = text;\n  for (const node of outermost) {\n    const part = textOf(node);\n    const at = part ? result.lastIndexOf(part) : -1;\n    if (at >= 0) result = result.slice(0, at) + result.slice(at + part.length);\n  }\n  return result;\n};\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const flatText = (el, limit, fields) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const view = el.ownerDocument.defaultView;\n  let text = '';\n  const nodesOf = (node) =>\n    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);\n  const read = (node, visible) => {\n    if (text.length >= limit) return;\n    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');\n    if (node.nodeType !== 1) return;\n    if (/^(input|textarea)$/.test(node.localName)) return;\n    if (!fields && (node.localName === 'select' || node.isContentEditable)) return;\n    const style = view.getComputedStyle(node);\n    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;\n    if (node.localName === 'br') text += '\\n';\n    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';\n    text += apart;\n    const own = node.textContent || '';\n    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));\n    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);\n    else text += typeof node.innerText === 'string' ? node.innerText : own;\n    text += apart;\n  };\n  const visible = view.getComputedStyle(el).visibility === 'visible';\n  nodesOf(el).forEach((child) => read(child, visible));\n  return text.slice(0, limit);\n};\n  const all = el.textContent || '';\n  if (el.tagName === 'OPTION') return el.label;\n  if (typeof el.innerText !== 'string') return full ? all : all.slice(0, 2000);\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const shown = rendered(el);\n  const boxless = !shown && el.ownerDocument.defaultView.getComputedStyle(el).display === 'contents';\n  if (!shown && !boxless) return '';\n  if (composed(el)) return withoutDecorations(el, flatText(el, full ? Infinity : 2000));\n  if (boxless) return withoutDecorations(el, full ? all : all.slice(0, 2000));\n  if (full || all.length <= 2000) return withoutDecorations(el, el.innerText);\n  const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT);\n  let start = '';\n  while (start.length < 1000 && walker.nextNode()) {\n    const parent = walker.currentNode.parentElement;\n    if (!parent || rendered(parent)) start += walker.currentNode.data;\n  }\n  return withoutDecorations(el, start);\n}";
 /** Shown instead of a secret field value (the same for every length) */
 export declare const MASKED_VALUE = "\u2022\u2022\u2022\u2022";
 /**
@@ -53,26 +95,40 @@ export declare const SENSITIVE_FIELD_JS = "(el) => {\n  const autocomplete = el.
  */
 export declare const ELEMENT_STATE_JS = "(el) => {\n  const isSensitive = (el) => {\n  const autocomplete = el.getAttribute('autocomplete') || '';\n  if (/(^|\\s)(cc-[a-z-]+|one-time-code|current-password|new-password)(\\s|$)/i.test(autocomplete)) return true;\n  if (el.type === 'password' || /^password$/i.test(el.getAttribute('type') || '')) return true;\n  const names = [el.getAttribute('name'), el.id, autocomplete].join(' ');\n  if (/passw|passwd|pwd|passcode|(^|[^a-z])otp([^a-z]|$)|cvv|cvc/i.test(names)) return true;\n  try {\n    const security = el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue('-webkit-text-security');\n    return Boolean(security) && security !== 'none';\n  } catch (e) {\n    return false;\n  }\n};\n  const mask = (value) => (value ? '\u2022\u2022\u2022\u2022' : '');\n  const guarded = (state) => {\n    if (!isSensitive(el)) return state;\n    const result = { ...state, sensitive: true };\n    if ('value' in result) result.value = mask(result.value);\n    if ('selected' in result) result.selected = mask(result.selected);\n    return result;\n  };\n  switch (el.localName) {\n    case 'input':\n      if (el.type === 'hidden') return { type: 'hidden' };\n      return guarded(\n        /^(checkbox|radio)$/.test(el.type)\n          ? { type: el.type, checked: el.checked, value: el.getAttribute('value') || '' }\n          : { type: el.type, value: el.value }\n      );\n    case 'textarea':\n      return guarded({ value: el.value });\n    case 'select':\n      return guarded({ selected: Array.from(el.selectedOptions || [], (option) => option.label).join(', ') });\n    case 'button':\n      return el.form ? { type: el.type } : {};\n    default:\n      return {};\n  }\n}";
 /**
- * Page-side short description of an element: tag, id and up to two classes,
- * e.g. `button#save.primary.large`.
+ * Page-side short description of an element: tag, id and up to two classes
+ * ({@link LABEL_CLASSES_JS}), e.g. `button#save.primary.large`.
+ */
+export declare const ELEMENT_DESCRIPTION_JS: string;
+/**
+ * Page-side reason an element is disabled, or null when it is not. A native
+ * control (`button`, `input`, `select`, `textarea`, `fieldset`, `optgroup`,
+ * `option`) is disabled by its `disabled attribute` or by being `inside a
+ * disabled <fieldset>` (not in its first `<legend>`), an `<option>` by
+ * being `inside a disabled <optgroup>`; any other element
+ * (e.g. a custom element) when its `disabled` property is set (empty
+ * reason). Reads the element's own attributes rather than
+ * `matches(':disabled')`, which pages replace.
  */
-export declare const ELEMENT_DESCRIPTION_JS = "(node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '')";
+export declare const DISABLED_CAUSE_JS = "(el) => {\n  if (!/^(button|input|select|textarea|fieldset|optgroup|option)$/.test(el.localName)) return el.disabled ? '' : null;\n  if (el.hasAttribute('disabled')) return 'disabled attribute';\n  if (el.localName === 'option') {\n    const group = el.parentElement;\n    return group && group.localName === 'optgroup' && group.hasAttribute('disabled') ? 'inside a disabled <optgroup>' : null;\n  }\n  for (let node = el.parentElement; node; node = node.parentElement) {\n    if (node.localName !== 'fieldset' || !node.hasAttribute('disabled')) continue;\n    let legend = node.firstElementChild;\n    while (legend && legend.localName !== 'legend') legend = legend.nextElementSibling;\n    if (!legend || !legend.contains(el)) return 'inside a disabled <fieldset>';\n  }\n  return null;\n}";
 /**
  * Page-side position of an element among its parent's children with the
  * same short description ({@link ELEMENT_DESCRIPTION_JS}), e.g. `(2nd of 3)`;
  * empty when it is the only one.
  */
-export declare const SIBLING_POSITION_JS = "(el) => {\n  const describe = (node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');\n  const parent = el.parentElement;\n  if (!parent) return '';\n  const own = describe(el);\n  const same = Array.from(parent.children).filter((child) => describe(child) === own);\n  if (same.length < 2) return '';\n  const n = same.indexOf(el) + 1;\n  const teen = n % 100 >= 11 && n % 100 <= 13;\n  const suffix = teen ? 'th' : ({ 1: 'st', 2: 'nd', 3: 'rd' })[n % 10] || 'th';\n  return '(' + n + suffix + ' of ' + same.length + ')';\n}";
+export declare const SIBLING_POSITION_JS: string;
 /**
  * Page-side identity of an element an action hit, so the output says which
  * one it was, as one string: its short description
  * ({@link ELEMENT_DESCRIPTION_JS}) and visible text (button value for button
- * inputs, decorations left out), e.g. `button#add.btn "Add to cart"`. A
- * `<select>` is named by its label, aria-label or name, else by its selected
+ * inputs, decorations left out; read through the flat tree for web
+ * components and slots, {@link FLAT_TEXT_JS}), e.g.
+ * `button#add.btn "Add to cart"`. A `<select>` is named by its label
+ * (`aria-labelledby` or `<label>`), aria-label or name, else by its selected
  * option, e.g. `select.sort "Sort products"`. An element without visible
  * text is described by itself first: by its position among same-looking
  * siblings ({@link SIBLING_POSITION_JS}), e.g. `div.figure (2nd of 3)`, with
- * its aria-label, placeholder or title when it has one. Only an element
+ * its name when it has one: aria-label, label, placeholder, title, or the
+ * alt text of an image (in it). Only an element
  * without an id that is the only one of its kind is named by the nearest of
  * three ancestors that has text, e.g.
  * `input.toggle in div.view "Write report"` (rows of a list share their
@@ -80,18 +136,20 @@ export declare const SIBLING_POSITION_JS = "(el) => {\n  const describe = (node)
  * of `<select>`s in it (read like `innerText`: CSS-hidden text is left out of
  * a rendered ancestor; at most 500 text nodes; selects in shadow roots are
  * not looked into), and never past an editable ancestor, whose text may be
- * typed input; otherwise its aria-label, placeholder or title is used. Texts
+ * typed input; otherwise its name is used. Texts
  * are cut at 40 characters. Contenteditable elements count as controls: what
  * was typed into them is never echoed (nor their ancestors' text).
  */
-export declare const ELEMENT_IDENTITY_JS = "(el) => {\n  const describe = (node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');\n  const siblingPosition = (el) => {\n  const describe = (node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');\n  const parent = el.parentElement;\n  if (!parent) return '';\n  const own = describe(el);\n  const same = Array.from(parent.children).filter((child) => describe(child) === own);\n  if (same.length < 2) return '';\n  const n = same.indexOf(el) + 1;\n  const teen = n % 100 >= 11 && n % 100 <= 13;\n  const suffix = teen ? 'th' : ({ 1: 'st', 2: 'nd', 3: 'rd' })[n % 10] || 'th';\n  return '(' + n + suffix + ' of ' + same.length + ')';\n};\n  const withoutDecorations = (el, text) => {\n  if (!text || typeof el.querySelectorAll !== 'function') return text;\n  const glyph = /^\\s*[\u00D7\u2715\u2716\u2717\u2A2F]\\s*$/;\n  const textOf = (node) => (typeof node.innerText === 'string' ? node.innerText : node.textContent || '').trim();\n  const closer = '.close, [aria-label=\"close\" i], [aria-label=\"dismiss\" i]';\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const found = Array.from(el.querySelectorAll(closer + ', [aria-hidden=\"true\"]'))\n    .filter((node) => rendered(node) && (node.matches(closer) || !/[\\p{L}\\p{N}]/u.test(textOf(node))));\n  if (/[\u00D7\u2715\u2716\u2717\u2A2F]/.test(text)) {\n    found.push(...Array.from(el.querySelectorAll('button, a, [role=\"button\"]')).filter((node) => glyph.test(node.textContent || '')));\n  }\n  const unique = Array.from(new Set(found));\n  const outermost = unique.filter((node) => !unique.some((other) => other !== node && other.contains(node)));\n  let result = text;\n  for (const node of outermost) {\n    const part = textOf(node);\n    const at = part ? result.lastIndexOf(part) : -1;\n    if (at >= 0) result = result.slice(0, at) + result.slice(at + part.length);\n  }\n  return result;\n};\n  const clean = (text) => (text || '').replace(/\\s+/g, ' ').trim();\n  const cut = (text) => {\n    const characters = Array.from(text);\n    return characters.length > 40 ? characters.slice(0, 40).join('') + '\u2026' : text;\n  };\n  const isControl = (node) => /^(input|select|textarea)$/.test(node.localName) || node.isContentEditable;\n  const shownText = (node) =>\n    isControl(node) ? '' : clean(withoutDecorations(node, typeof node.innerText === 'string' ? node.innerText : node.textContent));\n  const buttonValue = (node) => (node.localName === 'input' && /^(submit|button|reset)$/i.test(node.type) ? clean(node.value) : '');\n  const attributeText = (node) =>\n    clean(node.getAttribute('aria-label')) || clean(node.getAttribute('placeholder')) || clean(node.getAttribute('title'));\n  const selectName = (node) =>\n    clean(node.labels && node.labels[0] && node.labels[0].innerText) ||\n    clean(node.getAttribute('aria-label')) ||\n    clean(node.getAttribute('name')) ||\n    clean(node.selectedOptions && node.selectedOptions[0] && node.selectedOptions[0].label);\n  const shown = (node, options) => !node.checkVisibility || node.checkVisibility(options);\n  const textOutsideSelects = (node) => {\n    if (!node.querySelector('select')) return shownText(node);\n    const hiddenLeftOut = shown(node);\n    const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_TEXT);\n    let text = '';\n    for (let visited = 0; visited < 500 && text.length < 200 && walker.nextNode(); visited++) {\n      const parent = walker.currentNode.parentElement;\n      if (!parent || parent.closest('select, textarea')) continue;\n      if (!hiddenLeftOut || shown(parent, { visibilityProperty: true })) text += ' ' + walker.currentNode.data;\n    }\n    return clean(text);\n  };\n  const quoted = (text) => (text ? ' \"' + cut(text) + '\"' : '');\n  const visible = shownText(el) || buttonValue(el) || (el.localName === 'select' ? selectName(el) : '');\n  if (visible) return describe(el) + quoted(visible);\n  const attribute = attributeText(el);\n  const position = siblingPosition(el);\n  if (position) return describe(el) + ' ' + position + quoted(attribute);\n  let ancestor = el.id || el.isContentEditable ? null : el.parentElement;\n  for (let depth = 0; ancestor && depth < 3; depth++, ancestor = ancestor.parentElement) {\n    if (isControl(ancestor)) break;\n    const text = textOutsideSelects(ancestor);\n    if (text) return describe(el) + ' in ' + describe(ancestor) + quoted(text);\n  }\n  return describe(el) + quoted(attribute);\n}";
+export declare const ELEMENT_IDENTITY_JS: string;
 /**
  * Page-side location of an element: the iframes it is in (outermost first)
- * and the shadow root holding it, with the host's first class and light-DOM
- * text, e.g. `iframe#pay > shadow root of <sl-button.primary "Save">`;
- * empty for the main document.
+ * and the shadow root holding it, with the host's first class and the text
+ * a user sees of it ({@link ELEMENT_TEXT_JS}, cut at 30 characters with
+ * `…`), e.g. `iframe#pay > shadow root of <sl-button.primary "Save">`;
+ * empty for the main document. Each host's text is read once per script
+ * run, as many matches share a host.
  */
-export declare const ELEMENT_CONTEXT_JS = "(el) => {\n  const describe = (node) => node.tagName.toLowerCase() + (node.id ? '#' + node.id : '');\n  const parts = [];\n  for (let doc = el.ownerDocument; doc && doc.defaultView && doc.defaultView.frameElement; ) {\n    const frame = doc.defaultView.frameElement;\n    parts.unshift(describe(frame));\n    doc = frame.ownerDocument;\n  }\n  const root = el.getRootNode();\n  if (root.host) {\n    const host = root.host;\n    const label = describe(host) + (!host.id && host.classList.length ? '.' + host.classList[0] : '');\n    const text = (host.textContent || '').replace(/\\s+/g, ' ').trim().slice(0, 30);\n    parts.push('shadow root of <' + label + (text ? ' \"' + text + '\"' : '') + '>');\n  }\n  return parts.join(' > ');\n}";
+export declare const ELEMENT_CONTEXT_JS: string;
 /**
  * Short text preview of an element's text: whitespace collapsed, cut on a
  * whole character (an emoji is never split, which would make JSON invalid).