@astryxdesign/core 0.7.0 → 0.7.1-canary.0365e23

package/src/Switch/__tests__/Switch.a11y.chromium.spec.ts

@@ -166,29 +166,17 @@ test('the state inventory describes the labels the page actually renders', async
   expect(wrong).toEqual([]);
 });
 
-test('every expectation is exercised by at least one bound state', async ({
-  page,
-}) => {
-  // A whole-binding sweep: every state, every expectation, a fresh mount each
-  // time. That is minutes of real browser work, not the seconds a single-state
-  // test takes.
-  test.setTimeout(5 * 60 * 1000);
-  const cdp = await page.context().newCDPSession(page);
-  const results: BindingResult[] = [];
-  for (const state of SWITCH_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
-  }
-  // An expectation that applies to nothing is not coverage, however green it
-  // looks. This is the only place that can notice: the contract never sees the
-  // states, so whether a condition matches a real one is a binding-side fact.
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(SWITCH_KNOWN_FAILURES, results)).toEqual([]);
-});
+// Each state's result, recorded by its own test below so the whole-suite check
+// at the end reads it instead of measuring every state a second time. A state
+// whose test did not run in this worker (a filtered run, or a worker restarted
+// after a failure) is measured by the whole-suite check itself.
+const recorded = new Map<string, BindingResult>();
 
 for (const state of SWITCH_BINDING_STATES) {
   test(`Switch [${state.id}] — ${state.summary}`, async ({page}) => {
     const cdp = await page.context().newCDPSession(page);
     const result = await runState(page, cdp, state);
+    recorded.set(state.id, result);
     const report = summarize(SWITCH_PATTERN, [result]);
     // eslint-disable-next-line no-console -- the report is this run's artifact
     console.log(formatReport(report));
@@ -201,3 +189,22 @@ for (const state of SWITCH_BINDING_STATES) {
     expect(report.counts.unexpectedPass).toBe(0);
   });
 }
+
+test('every expectation is exercised by at least one bound state', async ({
+  page,
+}) => {
+  // A whole-binding sweep: every state's result, read from its own test or,
+  // when that test did not run in this worker, measured here (minutes of real
+  // browser work in that case, so the budget stays).
+  test.setTimeout(5 * 60 * 1000);
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of SWITCH_BINDING_STATES) {
+    results.push(recorded.get(state.id) ?? (await runState(page, cdp, state)));
+  }
+  // An expectation that applies to nothing is not coverage, however green it
+  // looks. This is the only place that can notice: the contract never sees the
+  // states, so whether a condition matches a real one is a binding-side fact.
+  expect(neverExercised(results)).toEqual([]);
+  expect(unmatchedKnownFailures(SWITCH_KNOWN_FAILURES, results)).toEqual([]);
+});

package/src/TabList/__tests__/Tabs.a11y.chromium.spec.ts

@@ -163,24 +163,18 @@ test('every binding fact matches the rendered semantic state', async ({
   expect(wrong).toEqual([]);
 });
 
-test('every expectation is exercised by at least one bound state', async ({
-  page,
-}) => {
-  test.setTimeout(5 * 60 * 1000);
-  const cdp = await page.context().newCDPSession(page);
-  const results: BindingResult[] = [];
-  for (const state of TABS_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
-  }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(TABS_KNOWN_FAILURES, results)).toEqual([]);
-});
+// Each state's result, recorded by its own test below so the whole-suite check
+// at the end reads it instead of measuring every state a second time. A state
+// whose test did not run in this worker (a filtered run, or a worker restarted
+// after a failure) is measured by the whole-suite check itself.
+const recorded = new Map<string, BindingResult>();
 
 for (const state of TABS_BINDING_STATES) {
   test(`${state.binding} [${state.id}] — ${state.summary}`, async ({page}) => {
     test.setTimeout(3 * 60 * 1000);
     const cdp = await page.context().newCDPSession(page);
     const result = await runState(page, cdp, state);
+    recorded.set(state.id, result);
     const report = summarize(TABS_PATTERN, [result]);
     // eslint-disable-next-line no-console -- the report is this run's artifact
     console.log(formatReport(report));
@@ -189,3 +183,16 @@ for (const state of TABS_BINDING_STATES) {
     expect(report.counts.unexpectedPass).toBe(0);
   });
 }
+
+test('every expectation is exercised by at least one bound state', async ({
+  page,
+}) => {
+  test.setTimeout(5 * 60 * 1000);
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of TABS_BINDING_STATES) {
+    results.push(recorded.get(state.id) ?? (await runState(page, cdp, state)));
+  }
+  expect(neverExercised(results)).toEqual([]);
+  expect(unmatchedKnownFailures(TABS_KNOWN_FAILURES, results)).toEqual([]);
+});

package/src/TextInput/__tests__/TextInput.a11y.chromium.spec.ts

@@ -176,26 +176,18 @@ test('every state declaration matches the browser accessibility node', async ({
   expect(wrong).toEqual([]);
 });
 
-test('every expectation is exercised and every known failure matches once', async ({
-  page,
-}) => {
-  test.setTimeout(8 * 60 * 1000);
-  const cdp = await page.context().newCDPSession(page);
-  const results: BindingResult[] = [];
-  for (const state of TEXT_INPUT_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
-  }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(TEXT_INPUT_KNOWN_FAILURES, results)).toEqual(
-    [],
-  );
-});
+// Each state's result, recorded by its own test below so the whole-suite check
+// at the end reads it instead of measuring every state a second time. A state
+// whose test did not run in this worker (a filtered run, or a worker restarted
+// after a failure) is measured by the whole-suite check itself.
+const recorded = new Map<string, BindingResult>();
 
 for (const state of TEXT_INPUT_BINDING_STATES) {
   test(`${state.binding} [${state.id}] — ${state.summary}`, async ({page}) => {
     test.setTimeout(3 * 60 * 1000);
     const cdp = await page.context().newCDPSession(page);
     const result = await runState(page, cdp, state);
+    recorded.set(state.id, result);
     const report = summarize(TEXT_INPUT_PATTERN, [result]);
     // eslint-disable-next-line no-console -- the report is this run's artifact
     console.log(formatReport(report));
@@ -204,3 +196,18 @@ for (const state of TEXT_INPUT_BINDING_STATES) {
     expect(report.counts.unexpectedPass).toBe(0);
   });
 }
+
+test('every expectation is exercised and every known failure matches once', async ({
+  page,
+}) => {
+  test.setTimeout(8 * 60 * 1000);
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of TEXT_INPUT_BINDING_STATES) {
+    results.push(recorded.get(state.id) ?? (await runState(page, cdp, state)));
+  }
+  expect(neverExercised(results)).toEqual([]);
+  expect(unmatchedKnownFailures(TEXT_INPUT_KNOWN_FAILURES, results)).toEqual(
+    [],
+  );
+});

package/src/ToggleButton/__tests__/ToggleButton.a11y.chromium.spec.ts

@@ -143,22 +143,17 @@ test('the state inventory matches rendered labels and applicability facts', asyn
   expect(wrong).toEqual([]);
 });
 
-test('every expectation is exercised by at least one ToggleButton state', async ({
-  page,
-}) => {
-  test.setTimeout(5 * 60 * 1000);
-  const cdp = await page.context().newCDPSession(page);
-  const results: BindingResult[] = [];
-  for (const state of TOGGLE_BUTTON_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
-  }
-  expect(neverExercised(results)).toEqual([]);
-});
+// Each state's result, recorded by its own test below so the whole-suite check
+// at the end reads it instead of measuring every state a second time. A state
+// whose test did not run in this worker (a filtered run, or a worker restarted
+// after a failure) is measured by the whole-suite check itself.
+const recorded = new Map<string, BindingResult>();
 
 for (const state of TOGGLE_BUTTON_BINDING_STATES) {
   test(`ToggleButton [${state.id}] — ${state.summary}`, async ({page}) => {
     const cdp = await page.context().newCDPSession(page);
     const result = await runState(page, cdp, state);
+    recorded.set(state.id, result);
     const report = summarize(TOGGLE_BUTTON_PATTERN, [result]);
     // eslint-disable-next-line no-console -- the report is this run's evidence
     console.log(formatReport(report));
@@ -167,3 +162,15 @@ for (const state of TOGGLE_BUTTON_BINDING_STATES) {
     expect(report.counts.unexpectedPass).toBe(0);
   });
 }
+
+test('every expectation is exercised by at least one ToggleButton state', async ({
+  page,
+}) => {
+  test.setTimeout(5 * 60 * 1000);
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of TOGGLE_BUTTON_BINDING_STATES) {
+    results.push(recorded.get(state.id) ?? (await runState(page, cdp, state)));
+  }
+  expect(neverExercised(results)).toEqual([]);
+});

package/src/Typeahead/BaseTypeahead.test.tsx

@@ -3,7 +3,7 @@
 /**
  * @file BaseTypeahead.test.tsx
  * @input BaseTypeahead public props and a synchronous SearchSource
- * @output Combobox contract tests, including stale source refresh on reopen
+ * @output Combobox contract tests, including stale source refresh on focus and reopen
  * @position Colocated verification for BaseTypeahead
  */
 
@@ -209,6 +209,104 @@ describe('BaseTypeahead', () => {
     expect(input).toHaveFocus();
   });
 
+  it.each([
+    ['a click', 'click'],
+    ['keyboard focus', 'tab'],
+  ] as const)(
+    'bootstraps the replacement source when %s refocuses the input',
+    async (_label, refocus) => {
+      const user = userEvent.setup();
+      const originalSource: SearchSource<SearchableItem> = {
+        search: () => [],
+        bootstrap: () => [resultItem],
+      };
+      const updatedBootstrap = vi.fn(() => [
+        {id: '2', label: 'Updated result'},
+      ]);
+      const updatedSource: SearchSource<SearchableItem> = {
+        search: () => [],
+        bootstrap: updatedBootstrap,
+      };
+      const renderField = (searchSource: SearchSource<SearchableItem>) => (
+        <>
+          <BaseTypeahead
+            searchSource={searchSource}
+            value={null}
+            onChange={() => {}}
+            hasEntriesOnFocus
+          />
+          <button type="button">Sort</button>
+        </>
+      );
+      const {rerender} = render(renderField(originalSource));
+      const input = screen.getByRole('combobox');
+      const sortButton = screen.getByRole('button', {name: 'Sort'});
+
+      await user.click(input);
+      await waitFor(() => {
+        expect(input).toHaveAttribute('aria-expanded', 'true');
+      });
+
+      // Focus moves to another control, which then hands the field a new
+      // source (a sort or filter change rebuilding the caller's source).
+      await user.click(sortButton);
+      expect(input).not.toHaveFocus();
+      expect(input).toHaveAttribute('aria-expanded', 'false');
+      rerender(renderField(updatedSource));
+
+      if (refocus === 'click') {
+        await user.click(input);
+      } else {
+        await user.tab({shift: true});
+      }
+      expect(input).toHaveFocus();
+      await waitFor(() => {
+        expect(input).toHaveAttribute('aria-expanded', 'true');
+        expect(
+          screen.getByRole('option', {name: 'Updated result', hidden: true}),
+        ).toBeInTheDocument();
+      });
+      expect(
+        screen.queryByRole('option', {name: 'Result', hidden: true}),
+      ).not.toBeInTheDocument();
+      expect(updatedBootstrap).toHaveBeenCalledTimes(1);
+    },
+  );
+
+  it('re-shows cached results without bootstrapping again when the source is unchanged', async () => {
+    const user = userEvent.setup();
+    const bootstrap = vi.fn(() => [resultItem]);
+    const source: SearchSource<SearchableItem> = {search: () => [], bootstrap};
+    render(
+      <>
+        <BaseTypeahead
+          searchSource={source}
+          value={null}
+          onChange={() => {}}
+          hasEntriesOnFocus
+        />
+        <button type="button">Sort</button>
+      </>,
+    );
+    const input = screen.getByRole('combobox');
+
+    await user.click(input);
+    await waitFor(() => {
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+    });
+    await user.click(screen.getByRole('button', {name: 'Sort'}));
+    expect(input).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(input);
+    await waitFor(() => {
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+    });
+    expect(
+      screen.getByRole('option', {name: 'Result', hidden: true}),
+    ).toBeInTheDocument();
+    expect(bootstrap).toHaveBeenCalledTimes(1);
+  });
+
   it('counts grapheme clusters when enforcing minQueryLength', async () => {
     const search = vi.fn(() => [resultItem]);
     render(

package/src/Typeahead/BaseTypeahead.tsx

@@ -5,7 +5,7 @@
 /**
  * @file BaseTypeahead.tsx
  * @input Uses React, StyleX, usePopover, TypeaheadItem
- * @output Exports BaseTypeahead with focused-input menu reactivation
+ * @output Exports BaseTypeahead; focus bootstraps a replaced search source
  * @position Core implementation; used by Typeahead and Tokenizer
  *
  * Pure combobox engine: input, search, keyboard navigation, dropdown.
@@ -610,6 +610,10 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   // in the closure are stale (a selection cleared them) and shouldn't
   // be re-shown.
   const resultsGenRef = useRef(0);
+  // The generation at which the current searchSource took over. Results
+  // populated before it (resultsGenRef below this) came from a replaced
+  // source: they can never be re-shown, so focus bootstraps the new source.
+  const sourceGenRef = useRef(0);
 
   // Results still arriving from a replaced source must not land in the new
   // one's menu.
@@ -617,7 +621,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   if (prevSearchSourceRef.current !== searchSource) {
     prevSearchSourceRef.current.cancel?.();
     prevSearchSourceRef.current = searchSource;
-    searchGenRef.current++;
+    sourceGenRef.current = ++searchGenRef.current;
   }
 
   // Layer for dropdown
@@ -889,11 +893,21 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   // Shared by handleFocus and handleClick: bootstrap entries if none are
   // loaded yet, or re-show cached results that haven't been invalidated by
   // a selection since (comparing the two generation refs catches that).
+  // Results cached from a replaced search source count as none, so focusing
+  // an empty field bootstraps the new source instead of opening nothing.
+  // Results a selection invalidated still keep the menu closed when the
+  // selection returns focus to the input.
   const openIfEligible = useCallback(() => {
     if (isDisabled) {
       return;
     }
-    if (hasEntriesOnFocus && results.length === 0 && query.length === 0) {
+    const hasResultsFromCurrentSource =
+      results.length > 0 && resultsGenRef.current >= sourceGenRef.current;
+    if (
+      hasEntriesOnFocus &&
+      !hasResultsFromCurrentSource &&
+      query.length === 0
+    ) {
       void performBootstrap();
     } else if (
       results.length > 0 &&

package/src/theme/syntax/SyntaxTheme.tsx

@@ -20,6 +20,8 @@ import {
   type SyntaxThemeTokenKey,
 } from './defineSyntaxTheme';
 import {useMediaQuery} from '../../hooks/useMediaQuery';
+import {useTheme} from '../useTheme';
+import {formatColor, parseColor} from '../../utils/color';
 
 // =============================================================================
 // Context
@@ -59,6 +61,22 @@ export interface UseSyntaxThemeReturn {
 // Hook
 // =============================================================================
 
+/** The strength of the default diff row paints: the muted tokens at 25%. */
+const DIFF_TINT_STRENGTH = 0.25;
+
+/**
+ * The colour `color-mix(in srgb, <colour> <strength>, transparent)` paints, as
+ * a value a canvas can use. Returns undefined for a colour the shared parser
+ * does not read (the CSS default then stands).
+ */
+function mixWithTransparent(
+  colour: string,
+  strength: number,
+): string | undefined {
+  const parsed = parseColor(colour);
+  return parsed ? formatColor({...parsed, a: parsed.a * strength}) : undefined;
+}
+
 /**
  * Access the current syntax theme's token values, resolved for the active
  * color mode. Returns null if no SyntaxTheme provider is present.
@@ -74,6 +92,7 @@ export interface UseSyntaxThemeReturn {
  */
 export function useSyntaxTheme(): UseSyntaxThemeReturn | null {
   const ctx = use(SyntaxThemeContext);
+  const page = useTheme();
   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
   const effectiveMode: 'light' | 'dark' = prefersDark ? 'dark' : 'light';
 
@@ -83,13 +102,35 @@ export function useSyntaxTheme(): UseSyntaxThemeReturn | null {
     }
     const resolved: Partial<Record<SyntaxThemeTokenKey, string>> = {};
     for (const key of ALL_SYNTAX_KEYS) {
-      resolved[key] = resolveSyntaxTokenForMode(
-        ctx.theme.__inputTokens[key],
-        effectiveMode,
-      );
+      const input = ctx.theme.__inputTokens[key];
+      if (input !== undefined) {
+        resolved[key] = resolveSyntaxTokenForMode(input, effectiveMode);
+      }
+    }
+    // A diff row slot the theme did not set follows its CSS default; a canvas
+    // consumer needs a colour it can paint, so the marker slots take the
+    // theme's own resolved punctuation colour and the row paints derive from
+    // the enclosing page theme's resolved tokens (the same mix the CSS
+    // default makes), never from a probe outside the nearest Theme.
+    for (const key of ALL_SYNTAX_KEYS) {
+      if (resolved[key] !== undefined) {
+        continue;
+      }
+      const fallback = ctx.theme.tokens[key] ?? '';
+      if (key === 'added-marker' || key === 'removed-marker') {
+        resolved[key] = resolved.punctuation ?? fallback;
+      } else if (key === 'added' || key === 'removed') {
+        const base = page.token(
+          key === 'added' ? '--color-success-muted' : '--color-error-muted',
+        );
+        resolved[key] =
+          mixWithTransparent(base, DIFF_TINT_STRENGTH) ?? fallback;
+      } else {
+        resolved[key] = fallback;
+      }
     }
     return resolved as Record<SyntaxThemeTokenKey, string>;
-  }, [ctx, effectiveMode]);
+  }, [ctx, effectiveMode, page]);
 
   if (!ctx || !tokens) {
     return null;

package/src/theme/syntax/defineSyntaxTheme.diff.test.ts

@@ -0,0 +1,91 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it, vi} from 'vitest';
+import {
+  defineSyntaxTheme,
+  REQUIRED_SYNTAX_KEYS,
+  syntaxThemeStyle,
+  syntaxThemeToCSS,
+} from './defineSyntaxTheme';
+import {syntaxTokenDefaults} from './tokens';
+import {dracula} from './presets';
+
+const base = Object.fromEntries(
+  REQUIRED_SYNTAX_KEYS.map(key => [key, '#123456']),
+) as Parameters<typeof defineSyntaxTheme>[0]['tokens'];
+
+describe('diff row slots in a syntax theme', () => {
+  it('are optional: a theme that sets none keeps the semantic defaults', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const theme = defineSyntaxTheme({name: 't', tokens: base});
+    expect(warn).not.toHaveBeenCalled();
+    expect(theme.tokens.added).toBe(
+      syntaxTokenDefaults['--color-syntax-added'],
+    );
+    expect(theme.tokens.removed).toBe(
+      syntaxTokenDefaults['--color-syntax-removed'],
+    );
+    // A defined theme that sets no header paint gets none: the header row
+    // sits on the theme's own background with punctuation text.
+    expect(theme.tokens['diff-header']).toBe('transparent');
+    // A theme that sets no marker colour keeps its own line-number colour.
+    expect(theme.tokens['added-marker']).toBe(
+      'var(--color-syntax-punctuation)',
+    );
+    expect(theme.tokens['removed-marker']).toBe(
+      'var(--color-syntax-punctuation)',
+    );
+    warn.mockRestore();
+  });
+
+  it('may be overridden to harmonize with the theme', () => {
+    const theme = defineSyntaxTheme({
+      name: 't',
+      tokens: {...base, added: ['#e6ffed', '#1b3a24'], removed: '#ffeef0'},
+    });
+    expect(theme.tokens.added).toBe('light-dark(#e6ffed, #1b3a24)');
+    expect(theme.tokens.removed).toBe('#ffeef0');
+    expect(theme.tokens['diff-header']).toBe('transparent');
+  });
+
+  it('skips unset diff slots in the CSS and style output of a hand-built definition', () => {
+    const tokens = {...dracula.tokens};
+    delete (tokens as Partial<typeof tokens>).added;
+    delete (tokens as Partial<typeof tokens>)['added-marker'];
+    const theme = {...dracula, tokens};
+    expect(syntaxThemeToCSS(theme)).not.toContain('undefined');
+    expect(syntaxThemeToCSS(theme)).not.toContain('--color-syntax-added:');
+    expect(syntaxThemeStyle(theme)).not.toHaveProperty('--color-syntax-added');
+    expect(syntaxThemeStyle(theme)).toHaveProperty('--color-syntax-removed');
+  });
+
+  it('leaves the shipped presets valid without them: row paints default, markers follow punctuation', () => {
+    expect(dracula.tokens.added).toBe(
+      syntaxTokenDefaults['--color-syntax-added'],
+    );
+    expect(dracula.tokens['added-marker']).toBe(
+      'var(--color-syntax-punctuation)',
+    );
+    expect(dracula.tokens['removed-marker']).toBe(
+      'var(--color-syntax-punctuation)',
+    );
+  });
+
+  it('defaults derive from the semantic tokens, never a literal colour', () => {
+    expect(syntaxTokenDefaults['--color-syntax-added']).toBe(
+      'color-mix(in srgb, var(--color-success-muted) 25%, transparent)',
+    );
+    expect(syntaxTokenDefaults['--color-syntax-removed']).toBe(
+      'color-mix(in srgb, var(--color-error-muted) 25%, transparent)',
+    );
+    expect(syntaxTokenDefaults['--color-syntax-diff-header']).toBe(
+      'var(--color-background-muted)',
+    );
+    expect(syntaxTokenDefaults['--color-syntax-added-marker']).toBe(
+      'var(--color-text-green)',
+    );
+    expect(syntaxTokenDefaults['--color-syntax-removed-marker']).toBe(
+      'var(--color-text-red)',
+    );
+  });
+});