@motion-proto/live-tokens 0.97.0 → 0.98.2

package/src/testing-js/chunk-SHLPDNAQ.js

@@ -0,0 +1,658 @@
+// src/testing/support/traceProperties.ts
+var BOX_SIZE = ["width", "height", "min-*", "inline-size", "block-size", "padding*"];
+var FOCUS = ["focus", "focus-visible"];
+var BORDER_PAINT = ["border-block*", "border-inline*", ...["", "-top", "-right", "-bottom", "-left"].flatMap((side) => [`border${side}`, `border${side}-color`, `border${side}-width`, `border${side}-style`])];
+var MOTION = [
+  "animation",
+  "animation-name",
+  "animation-duration",
+  "animation-delay",
+  "animation-iteration-count",
+  "transition",
+  "transition-property",
+  "transition-duration",
+  "transition-delay"
+];
+var TRACE_AXES = {
+  "color-contrast": {
+    target: ["color", "background*", "opacity", "text-shadow"],
+    pseudoElements: ["*"],
+    ancestors: ["background*", "opacity"]
+  },
+  "SIA-R65": {
+    target: ["outline*", "box-shadow", "border*", "background*", "color", "text-decoration*"],
+    pseudoElements: [],
+    ancestors: [],
+    force: FOCUS
+  },
+  "target-size": { target: BOX_SIZE, pseudoElements: BOX_SIZE, ancestors: [] },
+  "focus-indicator-contrast": {
+    target: ["outline*", "box-shadow", ...BORDER_PAINT, "background*", "color"],
+    pseudoElements: [],
+    ancestors: ["background*"],
+    force: FOCUS
+  },
+  "control-boundary-contrast": {
+    target: [...BORDER_PAINT, "outline", "outline-color", "outline-width", "outline-style", "background*"],
+    pseudoElements: [],
+    ancestors: ["background*"]
+  },
+  // Every element's line height is 1.5 under the override, so the theme's own cannot cause the overflow.
+  "text-spacing": {
+    target: ["height", "max-height", "width", "max-width", "padding*", "overflow*", "white-space"],
+    pseudoElements: [],
+    ancestors: []
+  },
+  // A pseudo-element that does not display does not move, so its display gates the motion, as Button's shimmer does.
+  "prefers-reduced-motion": { target: MOTION, pseudoElements: [...MOTION, "display"], ancestors: [] }
+};
+var sessions = /* @__PURE__ */ new WeakMap();
+function cdpSession(page) {
+  let session = sessions.get(page);
+  if (!session) {
+    session = (async () => {
+      const cdp = await page.context().newCDPSession(page);
+      await cdp.send("DOM.enable");
+      await cdp.send("CSS.enable");
+      return cdp;
+    })();
+    sessions.set(page, session);
+  }
+  return session;
+}
+function onAxis(property, axis) {
+  return axis.some((name) => name.endsWith("*") ? property.startsWith(name.slice(0, -1)) : property === name);
+}
+function authored(style) {
+  return (style?.cssProperties ?? []).filter((declaration) => declaration.text);
+}
+function regularRules(styles) {
+  return (styles.matchedCSSRules ?? []).filter(({ rule }) => rule.origin === "regular").map(({ rule }) => rule);
+}
+function declarations(styles) {
+  return [authored(styles.inlineStyle), ...regularRules(styles).map((rule) => authored(rule.style))].flat();
+}
+function cascadeOrder(styles) {
+  return [...regularRules(styles).flatMap((rule) => authored(rule.style)), ...authored(styles.inlineStyle)];
+}
+function winning(ordered, name) {
+  const all = ordered.filter((d) => d.name === name);
+  return all.filter((d) => d.important || /!\s*important\s*$/i.test(d.value)).at(-1) ?? all.at(-1);
+}
+function ruleKey(rule) {
+  return JSON.stringify([rule.styleSheetId, rule.selectorList.text, rule.style.range]);
+}
+function longhandsIn(page) {
+  return async (names) => new Map(await page.evaluate((names2) => names2.map((name) => {
+    if (name.startsWith("--")) return [name, [name]];
+    const style = document.createElement("div").style;
+    style.setProperty(name, "initial");
+    return [name, style.length ? Array.from({ length: style.length }, (_, i) => style.item(i)) : [name]];
+  }), names));
+}
+async function forcedDeclarations(plain, forced, longhands) {
+  const before = new Set(regularRules(plain).map(ruleKey));
+  const cascade = [
+    ...regularRules(forced).map((rule) => ({ forcedOnly: !before.has(ruleKey(rule)), declarations: authored(rule.style) })),
+    { forcedOnly: false, declarations: authored(forced.inlineStyle) }
+  ];
+  const expanded = await longhands([...new Set(cascade.flatMap((entry) => entry.declarations.map((d) => d.name)))]);
+  const changed = /* @__PURE__ */ new Set();
+  const kept = [];
+  for (const { forcedOnly, declarations: declarations2 } of cascade) {
+    for (const d of declarations2) {
+      const sets = expanded.get(d.name) ?? [d.name];
+      if (forcedOnly) sets.forEach((name) => changed.add(name));
+      if (forcedOnly || sets.some((name) => changed.has(name))) kept.push(d);
+    }
+  }
+  return kept;
+}
+function references(value) {
+  return [...value.matchAll(/var\(\s*(--[\w-]+)/g)].map((match) => match[1]);
+}
+function scopeDepths(page, selector, scope) {
+  return page.evaluate(({ selector: selector2, scope: scope2 }) => [...document.querySelectorAll(selector2)].map((element) => {
+    let depth = 0;
+    for (let node = element; node; node = node.parentElement, depth++) {
+      if (node.matches(scope2)) return depth;
+    }
+    return -1;
+  }), { selector, scope });
+}
+async function matchedStyles(cdp, nodeId, force = [], forceNodeId = nodeId) {
+  const forcePseudoState = (forcedPseudoClasses) => cdp.send("CSS.forcePseudoState", { nodeId: forceNodeId, forcedPseudoClasses });
+  if (force.length === 0) return cdp.send("CSS.getMatchedStylesForNode", { nodeId });
+  await forcePseudoState(force);
+  return cdp.send("CSS.getMatchedStylesForNode", { nodeId }).finally(() => forcePseudoState([]));
+}
+async function traceNode(cdp, node, axes, known, longhands) {
+  const matched = await matchedStyles(cdp, node.nodeId, axes.force, node.forceNodeId);
+  const own = axes.force ? await forcedDeclarations(await matchedStyles(cdp, node.nodeId), matched, longhands) : declarations(matched);
+  const pseudo = (matched.pseudoElements ?? []).flatMap(({ matches }) => declarations({ matchedCSSRules: matches }));
+  const chain = (matched.inherited ?? []).slice(0, node.depth);
+  const PSEUDO = -1;
+  const levels = [cascadeOrder(matched), ...chain.map(cascadeOrder)];
+  const pseudoCustom = pseudo.filter((d) => d.name.startsWith("--"));
+  const from = Math.max(node.ancestorsFrom - 1, 0);
+  const pending = [
+    ...own.filter((d) => onAxis(d.name, axes.target)).map((d) => ({ d, level: 0 })),
+    ...pseudo.filter((d) => onAxis(d.name, axes.pseudoElements)).map((d) => ({ d, level: PSEUDO })),
+    ...chain.slice(from).flatMap((entry, i) => declarations(entry).filter((d) => onAxis(d.name, axes.ancestors)).map((d) => ({ d, level: from + i + 1 })))
+  ].flatMap(({ d, level }) => references(d.value).map((name) => ({ name, level })));
+  const resolve = (name, level) => {
+    if (level === PSEUDO) {
+      const own2 = pseudoCustom.filter((d) => d.name === name);
+      if (own2.length > 0) return { declarations: own2, level: PSEUDO };
+    }
+    for (let at = Math.max(level, 0); at < levels.length; at++) {
+      const won = winning(levels[at], name);
+      if (won) return { declarations: [won], level: at };
+    }
+    return { declarations: [], level };
+  };
+  const found = /* @__PURE__ */ new Set();
+  const followed = /* @__PURE__ */ new Set();
+  for (let next = pending.pop(); next !== void 0; next = pending.pop()) {
+    const { name, level } = next;
+    const key = `${name}@${level}`;
+    if (known.has(name)) found.add(name);
+    else if (!followed.has(key)) {
+      followed.add(key);
+      const resolved = resolve(name, level);
+      for (const d of resolved.declarations) pending.push(...references(d.value).map((ref) => ({ name: ref, level: resolved.level })));
+    }
+  }
+  return [...found];
+}
+async function traceProperties(page, target, axes, known) {
+  let depths;
+  let forceDepths = [];
+  try {
+    depths = await scopeDepths(page, target.selector, target.scope);
+    if (target.forceOn) forceDepths = await scopeDepths(page, target.forceOn, target.scope);
+  } catch {
+    return [];
+  }
+  const cdp = await cdpSession(page);
+  const { root } = await cdp.send("DOM.getDocument", { depth: 0 });
+  const query = async (selector) => (await cdp.send("DOM.querySelectorAll", { nodeId: root.nodeId, selector })).nodeIds;
+  const nodeIds = await query(target.selector);
+  const forceNodeId = target.forceOn ? (await query(target.forceOn)).find((_, index) => forceDepths[index] >= 0) : void 0;
+  if (target.forceOn && forceNodeId === void 0) return [];
+  const longhands = longhandsIn(page);
+  const found = /* @__PURE__ */ new Set();
+  for (const [index, nodeId] of nodeIds.entries()) {
+    if (depths[index] < 0) continue;
+    const node = { nodeId, depth: depths[index], forceNodeId, ancestorsFrom: target.ancestorsFrom ?? 1 };
+    for (const name of await traceNode(cdp, node, axes, known, longhands)) found.add(name);
+  }
+  return [...found].sort();
+}
+
+// src/testing/support/nonTextContrast.ts
+var FOCUS_INDICATOR_RULE = "focus-indicator-contrast";
+var BOUNDARY_RULE = "control-boundary-contrast";
+var NON_TEXT_URL = "https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html";
+var FOCUS_ATTR = "data-lt-focus-probe";
+var NO_TRANSITION_ID = "lt-focus-probe-no-transition";
+var FORCE = ["focus", "focus-visible"];
+function inPage(request) {
+  const scopes = [...document.querySelectorAll("scope" in request && request.scope || ":not(*)")];
+  const excluded = (el) => "exclude" in request && request.exclude.some((selector) => el.closest(selector));
+  const inScope = (el) => scopes.some((scope) => scope.contains(el)) && !excluded(el);
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 1;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  const paint = (layers) => {
+    ctx.clearRect(0, 0, 1, 1);
+    for (const layer of ["#fff", ...layers]) {
+      ctx.fillStyle = "transparent";
+      ctx.fillStyle = layer;
+      ctx.fillRect(0, 0, 1, 1);
+    }
+    return [...ctx.getImageData(0, 0, 1, 1).data.slice(0, 3)];
+  };
+  const alpha = (color) => {
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = "transparent";
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, 1, 1);
+    return ctx.getImageData(0, 0, 1, 1).data[3] / 255;
+  };
+  const rgb = (channels) => `rgb(${channels.join(" ")})`;
+  const luminance = (channels) => {
+    const [r, g, b] = channels.map((c) => {
+      const s = c / 255;
+      return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  };
+  const contrast = (a, b) => {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+  };
+  const selectorFor = (el) => {
+    const count = (selector) => scopes.reduce((n, scope) => n + (scope.matches(selector) ? 1 : 0) + scope.querySelectorAll(selector).length, 0);
+    const own = (e) => e.tagName.toLowerCase() + [...e.classList].filter((name) => !name.startsWith("svelte-") && /^[\w-]+$/.test(name)).map((name) => `.${name}`).join("");
+    const path = [];
+    for (let e = el; e; e = e.parentElement) {
+      const step = own(e);
+      path.unshift(step);
+      if (count(path.join(" > ")) === 1) break;
+      const same = [...e.parentElement?.children ?? []].filter((c) => c.tagName === e.tagName);
+      if (same.length > 1) path[0] = `${step}:nth-of-type(${same.indexOf(e) + 1})`;
+      if (count(path.join(" > ")) === 1 || scopes.includes(e)) break;
+    }
+    return path.join(" > ");
+  };
+  const backdrop = (from, ring) => {
+    const layers = [];
+    let level = 0;
+    let first = -1;
+    for (let e = from; e; e = e.parentElement, level++) {
+      const box = e.getBoundingClientRect();
+      const contains = box.left <= ring.left + 0.5 && box.top <= ring.top + 0.5 && box.right >= ring.right - 0.5 && box.bottom >= ring.bottom - 0.5;
+      if (!contains) continue;
+      if (first < 0) first = level;
+      const style = getComputedStyle(e);
+      if (style.backgroundImage !== "none") return { color: null, first };
+      const a = alpha(style.backgroundColor);
+      if (a > 0) layers.unshift(style.backgroundColor);
+      if (a >= 1) break;
+    }
+    return { color: paint(layers), first: Math.max(first, 0) };
+  };
+  const inflate = (box, by) => new DOMRect(box.x - by, box.y - by, box.width + 2 * by, box.height + 2 * by);
+  const px = (value) => parseFloat(value) || 0;
+  const html = (el) => el.outerHTML.replace(/\s+/g, " ").slice(0, 300);
+  const SIDES = ["Top", "Right", "Bottom", "Left"];
+  const visibleSide = (style, side) => {
+    const s = style;
+    return !["none", "hidden"].includes(s[`border${side}Style`]) && px(s[`border${side}Width`]) >= 0.99 ? s[`border${side}Color`] : null;
+  };
+  const candidates = (target) => {
+    const list = [target, ...target.querySelectorAll("*")];
+    for (const sibling of target.parentElement?.children ?? []) {
+      if (sibling !== target) list.push(sibling, ...sibling.querySelectorAll("*"));
+    }
+    return list.filter(inScope);
+  };
+  const signature = (el) => {
+    const s = getComputedStyle(el);
+    return JSON.stringify([
+      [s.outlineStyle, s.outlineWidth, s.outlineColor, s.outlineOffset],
+      s.boxShadow,
+      SIDES.map((side) => visibleSide(s, side))
+    ]);
+  };
+  const indicatorOf = (el, before) => {
+    const [outlineBefore, shadowBefore, bordersBefore] = JSON.parse(before);
+    const s = getComputedStyle(el);
+    const outline = [s.outlineStyle, s.outlineWidth, s.outlineColor, s.outlineOffset];
+    if (JSON.stringify(outline) !== JSON.stringify(outlineBefore) && s.outlineStyle !== "none" && px(s.outlineWidth) > 0) {
+      if (s.outlineStyle === "auto") return { channel: "browser", color: "", extent: 0 };
+      if (alpha(s.outlineColor) > 0) return { channel: "outline", color: s.outlineColor, extent: px(s.outlineOffset) + px(s.outlineWidth) };
+    }
+    if (s.boxShadow !== shadowBefore && s.boxShadow !== "none") {
+      const shadows = s.boxShadow.split(/,(?![^(]*\))/).map((part) => part.trim());
+      for (const shadow of shadows) {
+        if (/\binset\b/.test(shadow)) continue;
+        const color = /^(?:[a-z-]+\([^)]*\)|#[\da-f]+|[a-z]+)/i.exec(shadow)?.[0] ?? "";
+        if (!color || alpha(color) === 0) continue;
+        const [x = 0, y = 0, blur = 0, spread = 0] = (shadow.slice(color.length).match(/-?[\d.]+px/g) ?? []).map(px);
+        return { channel: "shadow", color, extent: Math.max(Math.abs(x), Math.abs(y)) + blur + spread };
+      }
+    }
+    const borders = SIDES.map((side) => visibleSide(s, side));
+    for (const [i, color] of borders.entries()) {
+      if (color && color !== bordersBefore[i] && alpha(color) > 0) return { channel: "border", color, extent: 0 };
+    }
+    return null;
+  };
+  switch (request.kind) {
+    case "focusables": {
+      const style = document.createElement("style");
+      style.id = request.styleId;
+      style.textContent = "*, *::before, *::after { transition: none !important; }";
+      document.head.append(style);
+      const focusable = 'a[href], area[href], button, input:not([type="hidden"]), select, textarea, summary, iframe, [tabindex], [contenteditable]:not([contenteditable="false"])';
+      const found = scopes.flatMap((scope) => [scope, ...scope.querySelectorAll(focusable)]).filter((el, i, all) => all.indexOf(el) === i && el.matches(focusable) && inScope(el)).filter((el) => el.tabIndex >= 0 && !el.matches(":disabled") && el.checkVisibility({ visibilityProperty: true }));
+      found.forEach((el, i) => el.setAttribute(request.attr, String(i)));
+      return found.length;
+    }
+    case "snapshot": {
+      const target = document.querySelector(`[${request.attr}="${request.index}"]`);
+      return candidates(target).map(signature);
+    }
+    case "measure": {
+      const target = document.querySelector(`[${request.attr}="${request.index}"]`);
+      const list = candidates(target);
+      for (const [i, el] of list.entries()) {
+        if (request.before[i] === void 0 || request.before[i] === signature(el)) continue;
+        const found = indicatorOf(el, request.before[i]);
+        if (!found) continue;
+        if (found.channel === "browser") return { kind: "browser" };
+        const ring = inflate(el.getBoundingClientRect(), Math.max(found.extent, 0));
+        const behind = backdrop(found.channel === "border" ? el.parentElement : el, found.extent < 0 ? el.getBoundingClientRect() : ring);
+        const offset = found.channel === "border" ? 1 : 0;
+        const common = {
+          channel: found.channel,
+          target: selectorFor(target),
+          indicator: selectorFor(el),
+          html: html(target),
+          ancestorsFrom: behind.first + offset
+        };
+        if (!behind.color) return { kind: "review", ...common };
+        const ratio = contrast(paint([rgb(behind.color), found.color]), behind.color);
+        return ratio < 3 ? { kind: "fail", ratio, ...common } : { kind: "pass" };
+      }
+      return { kind: "none" };
+    }
+    case "cleanup": {
+      document.getElementById(request.styleId)?.remove();
+      for (const el of document.querySelectorAll(`[${request.attr}]`)) el.removeAttribute(request.attr);
+      return null;
+    }
+    case "boundaries": {
+      const outcomes = [];
+      const control = "button, input, select, textarea, [aria-disabled]";
+      const inactive = (el) => {
+        const root = el.closest(request.root) ?? el;
+        const controls = [root, ...root.querySelectorAll(control)].filter((c) => c.matches(control));
+        return controls.length > 0 && controls.every((c) => c.matches(":disabled") || c.getAttribute("aria-disabled") === "true");
+      };
+      for (const part of request.parts) {
+        const elements = scopes.flatMap((scope) => [scope, ...scope.querySelectorAll(part.selector)]).filter((el, i, all) => all.indexOf(el) === i && el.matches(part.selector) && inScope(el)).filter((el) => !part.when || el.matches(part.when)).filter((el) => el.checkVisibility({ visibilityProperty: true }) && el.getBoundingClientRect().width > 0 && !inactive(el));
+        for (const el of elements) {
+          const style = getComputedStyle(el);
+          const behind = backdrop(el.parentElement, el.getBoundingClientRect());
+          const common = { label: part.label, target: selectorFor(el), html: html(el), ancestorsFrom: behind.first + 1 };
+          if (!behind.color) {
+            outcomes.push({ kind: "review", edge: null, surface: null, ...common });
+            continue;
+          }
+          const surfaceColor = paint([rgb(behind.color), style.backgroundColor]);
+          const surface = style.backgroundImage === "none" ? contrast(surfaceColor, behind.color) : null;
+          const edges = [];
+          const borderUnder = style.backgroundClip === "border-box" ? surfaceColor : behind.color;
+          for (const side of SIDES) {
+            const color = visibleSide(style, side);
+            if (color) edges.push({ channel: "border", color, under: borderUnder });
+          }
+          if (!["none", "auto"].includes(style.outlineStyle) && px(style.outlineWidth) >= 0.99) {
+            edges.push({ channel: "outline", color: style.outlineColor, under: px(style.outlineOffset) < 0 ? surfaceColor : behind.color });
+          }
+          const edge = edges.map(({ channel, color, under }) => ({ channel, ratio: contrast(paint([rgb(under), color]), behind.color) })).reduce((best, next) => best && best.ratio >= next.ratio ? best : next, null);
+          if ((edge?.ratio ?? 0) >= 3 || (surface ?? 0) >= 3) continue;
+          outcomes.push({ kind: surface === null ? "review" : "fail", edge, surface, ...common });
+        }
+      }
+      return outcomes;
+    }
+    case "describe": {
+      return request.values.map((value) => {
+        const el = document.querySelector(`[${request.attr}="${value}"]`);
+        return { target: selectorFor(el), html: html(el) };
+      });
+    }
+  }
+}
+function run(page, request) {
+  return page.evaluate(inPage, request);
+}
+function describeTagged(page, scope, exclude, attr, values) {
+  return run(page, { kind: "describe", scope, exclude, attr, values });
+}
+function ratioText(ratio) {
+  return `${Math.floor(ratio * 100) / 100}:1`;
+}
+async function scanFocusIndicators(page, scope, exclude) {
+  const cdp = await cdpSession(page);
+  const count = await run(page, { kind: "focusables", scope, exclude, attr: FOCUS_ATTR, styleId: NO_TRANSITION_ID });
+  const checked = [];
+  try {
+    const { root } = await cdp.send("DOM.getDocument", { depth: 0 });
+    for (let index = 0; index < count; index++) {
+      const { nodeId } = await cdp.send("DOM.querySelector", { nodeId: root.nodeId, selector: `[${FOCUS_ATTR}="${index}"]` });
+      const before = await run(page, { kind: "snapshot", attr: FOCUS_ATTR, index, scope, exclude });
+      await cdp.send("CSS.forcePseudoState", { nodeId, forcedPseudoClasses: FORCE });
+      let outcome;
+      try {
+        outcome = await run(page, { kind: "measure", attr: FOCUS_ATTR, index, scope, exclude, before });
+      } finally {
+        await cdp.send("CSS.forcePseudoState", { nodeId, forcedPseudoClasses: [] });
+      }
+      if (outcome.kind !== "fail" && outcome.kind !== "review") continue;
+      const where = outcome.indicator === outcome.target ? "" : ` on ${outcome.indicator}`;
+      checked.push({
+        result: {
+          rule: outcome.kind === "fail" ? "a11y-component" : "a11y-review",
+          engineRule: FOCUS_INDICATOR_RULE,
+          impact: null,
+          target: outcome.target,
+          html: outcome.html,
+          help: outcome.kind === "fail" ? `Focus ${outcome.channel}${where} ${ratioText(outcome.ratio)} against the backdrop, needs 3:1` : `Focus ${outcome.channel}${where} sits over a gradient or image. Check by eye that it contrasts 3:1 with the backdrop`,
+          helpUrl: NON_TEXT_URL
+        },
+        trace: { selector: outcome.indicator, forceOn: outcome.target, ancestorsFrom: outcome.ancestorsFrom }
+      });
+    }
+  } finally {
+    await run(page, { kind: "cleanup", attr: FOCUS_ATTR, styleId: NO_TRANSITION_ID });
+  }
+  return checked;
+}
+async function scanBoundaries(page, scope, exclude, parts, root) {
+  if (parts.length === 0) return [];
+  const outcomes = await run(page, { kind: "boundaries", scope, exclude, parts, root });
+  return outcomes.map((outcome) => {
+    const edge = outcome.edge === null ? "no border" : `${outcome.edge.channel} ${ratioText(outcome.edge.ratio)}`;
+    return {
+      result: {
+        rule: outcome.kind === "fail" ? "a11y-component" : "a11y-review",
+        engineRule: BOUNDARY_RULE,
+        impact: null,
+        target: outcome.target,
+        html: outcome.html,
+        help: outcome.kind === "fail" ? `${outcome.label} ${edge} and surface ${ratioText(outcome.surface)} against the backdrop, needs 3:1` : `${outcome.label} sits on or carries a gradient or image. Check by eye that its edge contrasts 3:1 with the backdrop`,
+        helpUrl: NON_TEXT_URL
+      },
+      trace: { selector: outcome.target, ancestorsFrom: outcome.ancestorsFrom }
+    };
+  });
+}
+
+// src/testing/support/textSpacingAndMotion.ts
+var TEXT_SPACING_URL = "https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html";
+var MOTION_MS = 200;
+var MOTION_URL = "https://www.w3.org/WAI/WCAG22/Techniques/css/C39";
+var TEXT_SPACING_RULE = "text-spacing";
+var REDUCED_MOTION_RULE = "prefers-reduced-motion";
+var SPACING_ATTR = "data-lt-spacing-probe";
+var MOTION_ATTR = "data-lt-motion-probe";
+var STILL_ID = "lt-spacing-probe-still";
+var TOLERANCE = 1;
+function textSpacingCss(scope) {
+  const every = scope ? `${scope}, ${scope} *` : "*";
+  const paragraphs = scope ? `${scope} p` : "p";
+  return `
+${every} { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
+${paragraphs} { margin-bottom: 2em !important; }
+`;
+}
+async function newUnderTextSpacing(page, observe, key, scope) {
+  const before = await observe();
+  const style = await page.addStyleTag({ content: textSpacingCss(scope) });
+  let after;
+  try {
+    after = await observe();
+  } finally {
+    await style.evaluate((node) => node.remove());
+  }
+  const known = /* @__PURE__ */ new Map();
+  for (const failure of before) known.set(key(failure), (known.get(key(failure)) ?? 0) + 1);
+  return after.filter((failure) => {
+    const left = known.get(key(failure)) ?? 0;
+    if (left > 0) known.set(key(failure), left - 1);
+    return left === 0;
+  });
+}
+function tagInScope(page, scope, exclude, own, attr) {
+  return page.evaluate(({ scope: scope2, exclude: exclude2, own: own2, attr: attr2 }) => {
+    const found = [...document.querySelectorAll(scope2)].flatMap((root) => [root, ...root.querySelectorAll("*")]).filter((el, i, all) => all.indexOf(el) === i && el.closest(own2) && !exclude2.some((selector) => el.closest(selector)));
+    found.forEach((el, i) => el.setAttribute(attr2, String(i)));
+    return found.length;
+  }, { scope, exclude, own: own.join(", "), attr });
+}
+function untag(page, attr, styleId) {
+  return page.evaluate(({ attr: attr2, styleId: styleId2 }) => {
+    if (styleId2) document.getElementById(styleId2)?.remove();
+    for (const el of document.querySelectorAll(`[${attr2}]`)) el.removeAttribute(attr2);
+  }, { attr, styleId });
+}
+function observeOverflow(page) {
+  return page.evaluate(({ attr, tolerance }) => [...document.querySelectorAll(`[${attr}]`)].flatMap((el) => {
+    const style = getComputedStyle(el);
+    if (style.display === "none" || style.display === "contents") return [];
+    if (el.clientWidth === 0 && el.clientHeight === 0) return [];
+    if (!el.textContent?.trim()) return [];
+    const index = el.getAttribute(attr);
+    const tag = el.tagName.toLowerCase();
+    const found = [];
+    const axes = [
+      ["x", el.scrollWidth, el.clientWidth, style.overflowX],
+      ["y", el.scrollHeight, el.clientHeight, style.overflowY]
+    ];
+    for (const [axis, content, box, overflow] of axes) {
+      if (overflow === "auto" || overflow === "scroll" || content <= box + tolerance) continue;
+      found.push({ index, axis, tag, content, box, overflow });
+    }
+    return found;
+  }), { attr: SPACING_ATTR, tolerance: TOLERANCE });
+}
+function groupBy(items, key) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of items) groups.set(key(item), [...groups.get(key(item)) ?? [], item]);
+  return groups;
+}
+async function scanTextSpacing(page, scope, exclude, own) {
+  await page.evaluate(({ id, scope: scope2 }) => {
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = `${scope2} *, ${scope2} *::before, ${scope2} *::after { transition: none !important; }`;
+    document.head.append(style);
+  }, { id: STILL_ID, scope });
+  try {
+    if (await tagInScope(page, scope, exclude, own, SPACING_ATTR) === 0) return [];
+    const found = await newUnderTextSpacing(page, () => observeOverflow(page), (o) => `${o.index}|${o.axis}`, scope);
+    if (found.length === 0) return [];
+    const byElement = groupBy(found, (o) => o.index);
+    const described = await describeTagged(page, scope, exclude, SPACING_ATTR, [...byElement.keys()]);
+    return [...byElement.values()].map((overflows, i) => ({
+      rule: "a11y-text-spacing",
+      engineRule: TEXT_SPACING_RULE,
+      impact: null,
+      target: described[i].target,
+      html: described[i].html,
+      help: `Under the text spacing override, ${overflows.map((o) => `<${o.tag}> holds ${o.content}px of content in ${o.box}px of ${o.axis === "x" ? "width" : "height"}, and its overflow-${o.axis} is ${o.overflow}`).join("; ")}`,
+      helpUrl: TEXT_SPACING_URL
+    }));
+  } finally {
+    await untag(page, SPACING_ATTR, STILL_ID);
+  }
+}
+function observeMotion(page) {
+  return page.evaluate(({ attr, limit }) => {
+    const ms = (time) => parseFloat(time) * (time.trim().endsWith("ms") ? 1 : 1e3) || 0;
+    const list = (value) => value.split(/,(?![^(]*\))/).map((part) => part.trim());
+    const at = (values, i) => values[i % values.length];
+    const found = [];
+    const tagged = [...document.querySelectorAll(`[${attr}]`)].filter((el) => el.checkVisibility());
+    for (const el of tagged) {
+      const index = el.getAttribute(attr);
+      for (const pseudo of ["", "::before", "::after"]) {
+        const style = getComputedStyle(el, pseudo || null);
+        if (pseudo && (style.content === "none" || style.content === "normal" || style.display === "none")) continue;
+        const durations = list(style.animationDuration);
+        const counts = list(style.animationIterationCount);
+        const delays = list(style.animationDelay);
+        list(style.animationName).forEach((name, i) => {
+          if (name === "none") return;
+          const count = at(counts, i);
+          const end = ms(at(delays, i)) + (count === "infinite" ? Infinity : ms(at(durations, i)) * parseFloat(count));
+          if (end > limit) found.push({ index, pseudo, kind: "animation", name: name.replace(/^svelte-[a-z0-9]+-/, ""), end });
+        });
+        const transitionDurations = list(style.transitionDuration);
+        const transitionDelays = list(style.transitionDelay);
+        list(style.transitionProperty).forEach((name, i) => {
+          const end = ms(at(transitionDurations, i)) + ms(at(transitionDelays, i));
+          if (name !== "none" && end > limit) found.push({ index, pseudo, kind: "transition", name, end });
+        });
+      }
+    }
+    for (const animation of document.getAnimations()) {
+      if (animation instanceof CSSAnimation || animation instanceof CSSTransition || animation.playState !== "running") continue;
+      const effect = animation.effect;
+      if (!(effect instanceof KeyframeEffect) || !effect.target?.hasAttribute(attr)) continue;
+      const end = Number(effect.getComputedTiming().endTime ?? 0);
+      if (end > limit) {
+        found.push({ index: effect.target.getAttribute(attr), pseudo: effect.pseudoElement ?? "", kind: "script", name: animation.id, end });
+      }
+    }
+    return found;
+  }, { attr: MOTION_ATTR, limit: MOTION_MS });
+}
+var capitalize = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+function describeMotion({ kind, name, end }) {
+  const what = kind === "animation" ? `the animation ${name}` : kind === "transition" ? `a transition of ${name}` : `a script animation${name ? ` ${name}` : ""}`;
+  return `${what} ${Number.isFinite(end) ? `lasts ${Math.round(end)} ms` : "runs without end"}`;
+}
+async function scanReducedMotion(page, scope, exclude, own) {
+  try {
+    if (await tagInScope(page, scope, exclude, own, MOTION_ATTR) === 0) return [];
+    if ((await observeMotion(page)).length === 0) return [];
+    let reduced;
+    await page.emulateMedia({ reducedMotion: "reduce" });
+    try {
+      await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))));
+      reduced = await observeMotion(page);
+    } finally {
+      await page.emulateMedia({ reducedMotion: null });
+    }
+    if (reduced.length === 0) return [];
+    const byTarget = groupBy(reduced, (m) => `${m.index}
+${m.pseudo}`);
+    const groups = [...byTarget.values()];
+    const described = await describeTagged(page, scope, exclude, MOTION_ATTR, groups.map((motions) => motions[0].index));
+    return groups.map((motions, i) => ({
+      result: {
+        rule: "a11y-reduced-motion",
+        engineRule: REDUCED_MOTION_RULE,
+        impact: null,
+        target: `${described[i].target}${motions[0].pseudo}`,
+        html: described[i].html,
+        help: capitalize(`${motions.map(describeMotion).join("; ")} under prefers-reduced-motion: reduce`),
+        helpUrl: MOTION_URL
+      },
+      trace: { selector: described[i].target }
+    }));
+  } finally {
+    await untag(page, MOTION_ATTR);
+  }
+}
+
+export {
+  TRACE_AXES,
+  traceProperties,
+  scanFocusIndicators,
+  scanBoundaries,
+  TEXT_SPACING_URL,
+  MOTION_MS,
+  MOTION_URL,
+  TEXT_SPACING_RULE,
+  newUnderTextSpacing,
+  scanTextSpacing,
+  scanReducedMotion
+};
+//# sourceMappingURL=chunk-SHLPDNAQ.js.map