@astryxdesign/core 0.7.5 → 0.7.6-canary.0bd3b37

package/src/__tests__/TestIcon.tsx

@@ -1,26 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file TestIcon.tsx
- * @input Standard SVG props
- * @output A minimal SVG React component for tests
- * @position Test fixture; a stand-in external SVG icon for Icon component-mode tests
- *
- * A trivial SVG component used by tests that need to pass a custom SVG icon to
- * `Icon` (component mode) or component `*Icon` props. It forwards all standard
- * SVG props and its ref so tests exercising prop/ref forwarding behave the same
- * as a real third-party icon component.
- */
-
-import React, {type SVGProps} from 'react';
-
-export function TestIcon({
-  ref,
-  ...props
-}: SVGProps<SVGSVGElement> & {ref?: React.Ref<SVGSVGElement>}) {
-  return (
-    <svg ref={ref} viewBox="0 0 24 24" {...props}>
-      <path d="M4 4h16v16H4z" />
-    </svg>
-  );
-}

package/src/__tests__/babelPluginAddExtensions.test.ts

@@ -1,190 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * Guards the build-time babel plugin that rewrites extensionless relative
- * specifiers to fully-specified ESM paths in dist (issue #4569: dynamic
- * `import()` specifiers were passed through untouched, so the published
- * "type": "module" dist broke strict-ESM consumers like Rspack and Node).
- *
- * The plugin resolves specifiers against the importing file's real directory
- * (fs.existsSync on .ts/.tsx/index siblings), so the file/directory cases run
- * against a temp fixture tree, and one case pins the exact in-repo bug site
- * (Text.tsx lazily importing ../Tooltip/Tooltip).
- */
-import fs from 'node:fs';
-import os from 'node:os';
-import {createRequire} from 'node:module';
-import path from 'node:path';
-import {describe, it, expect, beforeAll, afterAll} from 'vitest';
-
-const require = createRequire(__filename);
-const babel = require('@babel/core');
-const addExtensions = require('../../babel-plugin-add-extensions.cjs');
-
-/** Transform a snippet exactly as build:esm does for `filename`. */
-function transform(
-  code: string,
-  filename: string,
-  parserOpts?: Record<string, unknown>,
-): string {
-  const result = babel.transformSync(code, {
-    filename,
-    configFile: false,
-    babelrc: false,
-    plugins: [addExtensions],
-    ...(parserOpts ? {parserOpts} : {}),
-  });
-  return result?.code ?? '';
-}
-
-const textTsx = path.resolve(__dirname, '../Text/Text.tsx');
-
-let fixtureDir: string;
-let entry: string;
-
-beforeAll(() => {
-  fixtureDir = fs.mkdtempSync(path.join(os.tmpdir(), 'add-extensions-'));
-  fs.writeFileSync(path.join(fixtureDir, 'mod.ts'), 'export const x = 1;\n');
-  fs.mkdirSync(path.join(fixtureDir, 'dir'));
-  fs.writeFileSync(
-    path.join(fixtureDir, 'dir', 'index.ts'),
-    'export const y = 2;\n',
-  );
-  // `both` exists as a file AND a directory-with-index — the file must win.
-  fs.writeFileSync(path.join(fixtureDir, 'both.ts'), 'export const b = 3;\n');
-  fs.mkdirSync(path.join(fixtureDir, 'both'));
-  fs.writeFileSync(
-    path.join(fixtureDir, 'both', 'index.ts'),
-    'export const bi = 4;\n',
-  );
-  // The importing file itself never needs to exist — the plugin only uses
-  // its dirname as the resolution base.
-  entry = path.join(fixtureDir, 'entry.ts');
-});
-
-afterAll(() => {
-  fs.rmSync(fixtureDir, {recursive: true, force: true});
-});
-
-describe('babel-plugin-add-extensions', () => {
-  describe('dynamic import()', () => {
-    it('appends .js to a dynamic import() of a relative file', () => {
-      // The exact shape of the LazyXDSTooltip sites in Text/Heading/Timestamp.
-      const code = transform(
-        "const LazyXDSTooltip = lazy(async () => import('../Tooltip/Tooltip').then(mod => ({default: mod.Tooltip})));",
-        textTsx,
-      );
-      expect(code).toMatch(/import\(['"]\.\.\/Tooltip\/Tooltip\.js['"]\)/);
-    });
-
-    it('rewrites a dynamic import() of a directory to its index.js', () => {
-      const code = transform("const p = import('./dir');", entry);
-      expect(code).toMatch(/import\(['"]\.\/dir\/index\.js['"]\)/);
-    });
-
-    it('leaves a dynamic import() that already has an extension alone', () => {
-      const code = transform("const p = import('./mod.js');", entry);
-      expect(code).toMatch(/import\(['"]\.\/mod\.js['"]\)/);
-    });
-
-    it('leaves a dynamic import() of a bare specifier alone', () => {
-      const code = transform("const p = import('react');", entry);
-      expect(code).toMatch(/import\(['"]react['"]\)/);
-    });
-
-    it('leaves a dynamic import() of a non-literal specifier alone', () => {
-      const code = transform('const p = (s) => import(s);', entry);
-      expect(code).toContain('import(s)');
-    });
-
-    it('leaves a dynamic import() of a template literal alone', () => {
-      const code = transform(
-        'const p = (n) => import(`./locales/${n}`);',
-        entry,
-      );
-      expect(code).toContain('import(`./locales/${n}`)');
-    });
-
-    it('rewrites ImportExpression nodes (Babel 8 / createImportExpressions parse)', () => {
-      const code = transform("const p = import('./mod');", entry, {
-        createImportExpressions: true,
-      });
-      expect(code).toMatch(/import\(['"]\.\/mod\.js['"]\)/);
-    });
-
-    it('prefers the file over a same-named directory index', () => {
-      const code = transform("const p = import('./both');", entry);
-      expect(code).toMatch(/import\(['"]\.\/both\.js['"]\)/);
-    });
-
-    it("rewrites a dynamic import of '.' to './index.js'", () => {
-      const code = transform("const p = import('.');", entry);
-      expect(code).toMatch(/import\(['"]\.\/index\.js['"]\)/);
-    });
-
-    it('rewrites every dynamic import in a file', () => {
-      const code = transform(
-        "const a = import('./mod');\nconst b = import('./dir');",
-        entry,
-      );
-      expect(code).toMatch(/import\(['"]\.\/mod\.js['"]\)/);
-      expect(code).toMatch(/import\(['"]\.\/dir\/index\.js['"]\)/);
-    });
-
-    it('leaves a dynamic import() of a skipped extension alone', () => {
-      const code = transform("const p = import('./data.json');", entry);
-      expect(code).toMatch(/import\(['"]\.\/data\.json['"]\)/);
-    });
-
-    it('does not touch call expressions that are not import()', () => {
-      const code = transform(
-        "myImport('./mod');\nregistry.import('./mod');",
-        entry,
-      );
-      expect(code).toContain("myImport('./mod')");
-      expect(code).toContain("registry.import('./mod')");
-    });
-  });
-
-  describe('static declarations (pre-existing behavior)', () => {
-    it('appends .js to a static import of a relative file', () => {
-      const code = transform("import {x} from './mod';", entry);
-      expect(code).toMatch(/from ['"]\.\/mod\.js['"]/);
-    });
-
-    it('rewrites a static import of a directory to its index.js', () => {
-      const code = transform("import {y} from './dir';", entry);
-      expect(code).toMatch(/from ['"]\.\/dir\/index\.js['"]/);
-    });
-
-    it('appends .js to a re-export specifier', () => {
-      const code = transform("export {x} from './mod';", entry);
-      expect(code).toMatch(/from ['"]\.\/mod\.js['"]/);
-    });
-
-    it('appends .js to an export * specifier', () => {
-      const code = transform("export * from './mod';", entry);
-      expect(code).toMatch(/from ['"]\.\/mod\.js['"]/);
-    });
-
-    it("rewrites the '.' self-reference to './index.js'", () => {
-      const code = transform("export * from '.';", entry);
-      expect(code).toMatch(/from ['"]\.\/index\.js['"]/);
-    });
-
-    it('leaves bare specifiers alone', () => {
-      const code = transform("import {lazy} from 'react';", entry);
-      expect(code).toMatch(/from ['"]react['"]/);
-    });
-
-    it('appends .js even when no source sibling exists (fallback branch)', () => {
-      const code = transform("import {z} from './does-not-exist';", entry);
-      expect(code).toMatch(/from ['"]\.\/does-not-exist\.js['"]/);
-    });
-
-    it('leaves declarations without a source untouched', () => {
-      const code = transform('export const a = 1;', entry);
-      expect(code).toContain('export const a = 1;');
-    });
-  });
-});

package/src/__tests__/fastRoleQueries.ts

@@ -1,66 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file fastRoleQueries.ts
- * @input Uses @testing-library/react screen, dom-accessibility-api
- * @output getButton/queryButton — role+name lookups that stay O(match) in jsdom
- * @position Shared test helper; imported by component tests that render large
- *   always-mounted button collections (Calendar month grids)
- *
- * RTL's getByRole('button', {name}) computes the accessible name of EVERY
- * role candidate before filtering, and each computation consults jsdom's slow
- * getComputedStyle (~5ms per node). The date components keep a month grid of
- * ~35–85 role=button nodes mounted — visible in Calendar's case, inside the
- * closed popover for the *Input components — so a single trigger lookup cost
- * ~450ms and dominated those suites' runtime (DateRangeInput: 34s for 34
- * tests before this helper existed).
- *
- * These helpers keep RTL's exact name algorithm (dom-accessibility-api is the
- * library RTL uses internally) but:
- *   - collect candidates with {hidden: true}, skipping the per-node
- *     getComputedStyle visibility checks, and
- *   - inject a constant "visible" style stub into the name computation —
- *     names only consult display/visibility, and under {hidden: true}
- *     semantics visibility must not exclude candidates anyway.
- *
- * Trade-off vs getByRole: first match wins — no tree-wide uniqueness check.
- *
- * SYNC: When modified, update this header.
- */
-
-import {screen} from '@testing-library/react';
-import {computeAccessibleName} from 'dom-accessibility-api';
-
-// The name algorithm only reads getPropertyValue (for display/visibility/
-// content), so a Pick is all we need to type honestly — no object-literal
-// cast. The widening to CSSStyleDeclaration happens at the call site, where
-// getComputedStyle's signature demands the full type.
-const visibleStyleStub: Pick<CSSStyleDeclaration, 'getPropertyValue'> = {
-  getPropertyValue: prop =>
-    prop === 'display' ? 'block' : prop === 'visibility' ? 'visible' : '',
-};
-
-function matchesName(el: Element, name: string | RegExp): boolean {
-  const accessibleName = computeAccessibleName(el, {
-    getComputedStyle: () => visibleStyleStub as CSSStyleDeclaration,
-  });
-  return typeof name === 'string'
-    ? accessibleName === name
-    : name.test(accessibleName);
-}
-
-export function queryButton(name: string | RegExp): HTMLElement | null {
-  return (
-    screen
-      .queryAllByRole('button', {hidden: true})
-      .find(el => matchesName(el, name)) ?? null
-  );
-}
-
-export function getButton(name: string | RegExp): HTMLElement {
-  const el = queryButton(name);
-  if (!el) {
-    throw new Error(`Unable to find a role=button named ${String(name)}`);
-  }
-  return el;
-}

package/src/__tests__/forcedColors.ts

@@ -1,60 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file forcedColors.ts
- * @input Uses the jsdom document (StyleX dev runtime injects rules into it)
- * @output Exports getForcedColorsRules, getAllInjectedCss test helpers
- * @position Shared test utility for asserting forced-colors style output
- *
- * jsdom cannot emulate `@media (forced-colors: active)` rendering, so
- * component tests assert the next-best thing: that the StyleX dev runtime
- * (runtimeInjection in vitest.config.ts) actually injected the forced-colors
- * rules a component relies on for Windows High Contrast support (WCAG 1.4.11).
- * Visual behavior needs manual verification in a forced-colors environment.
- */
-
-/**
- * Collects the cssText of every injected CSS rule scoped to
- * `@media (forced-colors: active)`, including rules nested in other
- * conditions. Returns one string for substring assertions.
- */
-export function getForcedColorsRules(): string {
-  const chunks: string[] = [];
-  for (const sheet of Array.from(document.styleSheets)) {
-    let rules: CSSRule[];
-    try {
-      rules = Array.from(sheet.cssRules);
-    } catch {
-      continue;
-    }
-    for (const rule of rules) {
-      if (rule.cssText.includes('forced-colors: active')) {
-        chunks.push(rule.cssText);
-      }
-    }
-  }
-  return chunks.join('\n');
-}
-
-/**
- * Collects the cssText of every injected CSS rule, regardless of condition.
- * Use to assert declarations that live OUTSIDE `@media (forced-colors: active)`
- * yet still exist for forced-colors support — e.g. `forced-color-adjust: none`
- * (an unconditional declaration) or a hover tint gated behind
- * `(forced-colors: none)` so it cannot override the forced-colors state.
- */
-export function getAllInjectedCss(): string {
-  const chunks: string[] = [];
-  for (const sheet of Array.from(document.styleSheets)) {
-    let rules: CSSRule[];
-    try {
-      rules = Array.from(sheet.cssRules);
-    } catch {
-      continue;
-    }
-    for (const rule of rules) {
-      chunks.push(rule.cssText);
-    }
-  }
-  return chunks.join('\n');
-}

package/src/__tests__/pressState.ts

@@ -1,212 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file pressState.ts
- * @input Uses document.styleSheets (populated by StyleX runtime injection) and
- *   the press machine's release clock (utils/pressGesture.ts)
- * @output Exports rulesDeclaredFor, rulesWithSelector, hasPressedArm,
- *   declaresPressedOverlay, readsPressStrength, afterPaintsPress,
- *   pressArmsShadowedByDefault and hasReleaseFade test helpers
- * @position Shared test helper for asserting a control paints a pressed state
- *
- * jsdom does not compute `:active` (there is no real pointer), so a component
- * test asserts the next-best thing: that the StyleX dev runtime injected a
- * rule, keyed to the element's own classes, that paints the design system's
- * pressed overlay token while the control is pressed. The selector shape is
- * deliberately not pinned — a press may be read off the element itself
- * (`.x:active`) or off an ancestor scope marker (`.x:where(.marker:active *)`).
- *
- * The touch arms are asserted the same way: the paint reads the press's
- * strength (`--astryx-press-alpha`, see utils/interactionOverlay.stylex.ts)
- * and the element the controller writes to runs the release animation on the
- * machine's own clock.
- *
- * SYNC: When modified, update this header.
- */
-
-import {PRESS_FADE_MS} from '../utils/pressGesture';
-
-const PRESSED_TOKEN = '--color-overlay-pressed';
-const PRESS_STRENGTH = '--astryx-press-alpha';
-/** The press's paint at its strength, declared once by the shared styles. */
-const PRESS_PAINT = '--_press-paint';
-const FADING_ARM = '[data-astryx-press="fading"]';
-
-function walk(list: CSSRuleList, visit: (rule: CSSRule) => void): void {
-  for (const rule of Array.from(list)) {
-    visit(rule);
-    const nested = (rule as CSSGroupingRule).cssRules;
-    if (nested != null) {
-      walk(nested, visit);
-    }
-  }
-}
-
-/**
- * Every injected style rule (rules nested in `@media` included) whose selector
- * names one of the element's classes, as `selector {declarations}` text.
- */
-export function rulesDeclaredFor(el: Element): string[] {
-  const classes = el.className
-    .split(/\s+/)
-    .filter(Boolean)
-    .map(name => `.${name}`);
-  const out: string[] = [];
-  for (const sheet of Array.from(document.styleSheets)) {
-    let rules: CSSRuleList;
-    try {
-      rules = sheet.cssRules;
-    } catch {
-      continue;
-    }
-    walk(rules, rule => {
-      if (!(rule instanceof CSSStyleRule)) {
-        return;
-      }
-      const selector = rule.selectorText;
-      if (classes.some(cls => selector.startsWith(cls))) {
-        out.push(`${selector} {${rule.style.cssText}}`);
-      }
-    });
-  }
-  return out;
-}
-
-/** The rules on `el` whose selector matches `pseudo` (e.g. `:active`). */
-export function rulesWithSelector(el: Element, pseudo: string): string[] {
-  return rulesDeclaredFor(el).filter(rule => {
-    const selector = rule.slice(0, rule.indexOf('{'));
-    return selector.includes(pseudo);
-  });
-}
-
-/**
- * Does one of the element's own rules paint the pressed overlay token while
- * `pseudo` matches? `pseudo` defaults to `:active`, the arm a mouse press
- * takes.
- */
-export function hasPressedArm(el: Element, pseudo = ':active'): boolean {
-  return rulesWithSelector(el, pseudo).some(rule =>
-    rule.includes(PRESSED_TOKEN),
-  );
-}
-
-/**
- * Does one of the element's own classes paint the pressed overlay token
- * unconditionally — no pseudo-class, no ancestor scope — because the component
- * applies the class while it holds the press itself (a dragged slider thumb)?
- * StyleX's specificity padding (`:not(#\#)`) is not a condition.
- */
-export function declaresPressedOverlay(el: Element): boolean {
-  return rulesDeclaredFor(el).some(rule => {
-    const selector = rule
-      .slice(0, rule.indexOf('{'))
-      .replaceAll(':not(#\\#)', '');
-    return !selector.includes(':') && rule.includes(PRESSED_TOKEN);
-  });
-}
-
-/**
- * Does the element paint the touch press through the press's strength while
- * `arm` matches — the pressed token at `var(--astryx-press-alpha)`? That one
- * declaration is the instant onset (strength 1 on the on arm) and the fade
- * (the release animates it to 0), so it is asserted on both arms; `arm`
- * defaults to the release's.
- */
-export function readsPressStrength(el: Element, arm = FADING_ARM): boolean {
-  return rulesWithSelector(el, arm).some(
-    rule =>
-      rule.includes(`var(${PRESS_PAINT}`) ||
-      (rule.includes(PRESSED_TOKEN) && rule.includes(PRESS_STRENGTH)),
-  );
-}
-
-/**
- * Does the element's `::after` paint the press the controller writes as its
- * image while `arm` matches (`var(--_press-paint-image)`), with the layer's
- * own colour yielding to it (`transparent`) on the same arm? A card's overlay
- * layer paints this way; `arm` defaults to the release's.
- */
-export function afterPaintsPress(el: Element, arm = FADING_ARM): boolean {
-  const rules = rulesWithSelector(el, arm).filter(rule =>
-    rule.slice(0, rule.indexOf('{')).includes('::after'),
-  );
-  return (
-    rules.some(rule =>
-      /background-image:\s*var\(--_press-paint-image\)/.test(rule),
-    ) && rules.some(rule => /background-color:\s*transparent/.test(rule))
-  );
-}
-
-/**
- * The custom properties the element sets on a `data-astryx-press` arm that it
- * also declares without that attribute (unconditionally, or on a pseudo-class
- * or media arm). A layered stylesheet emits such a property's other
- * declarations outside the priority layers its attribute arms land in, and
- * those win whatever the arm's specificity, so the press never applies. An
- * element passes when this is empty.
- */
-export function pressArmsShadowedByDefault(el: Element): string[] {
-  const keyedOnPress = (rule: string) =>
-    rule.slice(0, rule.indexOf('{')).includes('[data-astryx-press');
-  const declared = (rule: string) =>
-    Array.from(rule.slice(rule.indexOf('{')).matchAll(/(--[\w-]+)\s*:/g)).map(
-      match => match[1],
-    );
-  const rules = rulesDeclaredFor(el);
-  const elsewhere = new Set(
-    rules.filter(rule => !keyedOnPress(rule)).flatMap(declared),
-  );
-  return Array.from(
-    new Set(rules.filter(keyedOnPress).flatMap(declared)),
-  ).filter(name => elsewhere.has(name));
-}
-
-/**
- * Does the element declare the press's paint, `--_press-paint`, as the pressed
- * token at the press's strength? That declaration lives in the shared overlay
- * styles and nowhere else; an element that composes one of them carries it,
- * and whatever paints for it reads the variable.
- */
-export function declaresPressPaint(el: Element): boolean {
-  return rulesDeclaredFor(el).some(
-    rule =>
-      rule.includes(`${PRESS_PAINT}:`) &&
-      rule.includes(PRESSED_TOKEN) &&
-      rule.includes(PRESS_STRENGTH),
-  );
-}
-
-/** `.2s`, `200ms`, `0.2s` → 200. */
-export function durationToMs(value: string): number {
-  const match = value.trim().match(/^([\d.]+)(ms|s)$/);
-  if (match == null) {
-    return Number.NaN;
-  }
-  return Number(match[1]) * (match[2] === 's' ? 1000 : 1);
-}
-
-/**
- * Does the element run the release animation on the fading arm, for exactly
- * the machine's release clock ({@link PRESS_FADE_MS}), with no animation on
- * the on arm (the onset is instant)? Asserted on the element the controller
- * writes to — the one that composes `pressedAlpha` or an overlay variant — not
- * on a descendant that merely reads the strength.
- */
-export function hasReleaseFade(el: Element): boolean {
-  const fading = rulesWithSelector(el, FADING_ARM);
-  const durations = fading.flatMap(rule => {
-    const match = rule.match(/animation-duration:\s*([^;}]+)/);
-    return match == null ? [] : [durationToMs(match[1])];
-  });
-  const named = fading.some(rule => /animation-name:\s*(?!none)/.test(rule));
-  const onArmAnimates = rulesWithSelector(el, '[data-astryx-press="on"]').some(
-    rule => rule.includes('animation'),
-  );
-  return (
-    named &&
-    durations.length === 1 &&
-    durations[0] === PRESS_FADE_MS &&
-    !onArmAnimates
-  );
-}

package/src/__tests__/stubMatchMedia.test.ts

@@ -1,79 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file stubMatchMedia.test.ts
- * @input Uses vitest, stubMatchMedia
- * @output Unit coverage for the shared query-aware matchMedia stub
- * @position Testing; guards the helper other suites trust to route queries
- *
- * The helper exists because a stub that ignores its query silently reroutes
- * code branching on a different one — the failure mode leaves every test
- * green. A helper sold on that promise has to be held to it, so these assert
- * the routing itself rather than any component behaviour.
- */
-
-import {describe, it, expect, afterEach, vi} from 'vitest';
-import {stubMatchMedia} from './stubMatchMedia';
-
-afterEach(() => {
-  vi.unstubAllGlobals();
-});
-
-describe('stubMatchMedia', () => {
-  it('routes prefers-reduced-motion independently of every other query', () => {
-    // The exact combination the blanket stub could not express: below a
-    // breakpoint (matches) while motion is NOT reduced.
-    stubMatchMedia({reduceMotion: false, matches: true});
-
-    expect(matchMedia('(prefers-reduced-motion: reduce)').matches).toBe(false);
-    expect(matchMedia('(max-width: 768px)').matches).toBe(true);
-  });
-
-  it('answers no-preference as the opposite of reduce', () => {
-    // Two spellings, opposite meanings. A substring test on
-    // 'prefers-reduced-motion' alone would hand both the same answer.
-    stubMatchMedia({reduceMotion: true});
-
-    expect(matchMedia('(prefers-reduced-motion: reduce)').matches).toBe(true);
-    expect(matchMedia('(prefers-reduced-motion: no-preference)').matches).toBe(
-      false,
-    );
-  });
-
-  it('treats the bare preference query as reduce', () => {
-    stubMatchMedia({reduceMotion: true});
-    expect(matchMedia('(prefers-reduced-motion)').matches).toBe(true);
-
-    stubMatchMedia({reduceMotion: false});
-    expect(matchMedia('(prefers-reduced-motion)').matches).toBe(false);
-  });
-
-  it('defaults to full motion and matching everything else', () => {
-    stubMatchMedia();
-
-    expect(matchMedia('(prefers-reduced-motion: reduce)').matches).toBe(false);
-    expect(matchMedia('(max-width: 768px)').matches).toBe(true);
-  });
-
-  it('lets a non-motion query be answered false', () => {
-    // Above the breakpoint, motion still reduced — the other axis of the
-    // combination, so neither knob can be quietly driving both.
-    stubMatchMedia({reduceMotion: true, matches: false});
-
-    expect(matchMedia('(prefers-reduced-motion: reduce)').matches).toBe(true);
-    expect(matchMedia('(max-width: 768px)').matches).toBe(false);
-  });
-
-  it('echoes the query and exposes the listener API components subscribe to', () => {
-    stubMatchMedia();
-    const mql = matchMedia('(max-width: 768px)');
-
-    // useMediaQuery subscribes; a stub without these throws on mount rather
-    // than failing an assertion, which reads as an unrelated crash.
-    expect(mql.media).toBe('(max-width: 768px)');
-    expect(typeof mql.addEventListener).toBe('function');
-    expect(typeof mql.removeEventListener).toBe('function');
-    expect(typeof mql.addListener).toBe('function');
-    expect(typeof mql.removeListener).toBe('function');
-  });
-});