@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

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

@@ -0,0 +1,112 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Slider.a11y.chromium.spec.ts
+ * @input Built Slider stories and SLIDER_PATTERN in real Chromium
+ * @output Browser evidence for every slider expectation across the binding's states, reconciled against the exact known failures
+ * @position Chromium lane of the Slider binding (component:Slider AR1)
+ */
+
+import {
+  expect,
+  test,
+  type CDPSession,
+  type Locator,
+  type Page,
+} from '@playwright/test';
+import {
+  SLIDER_PATTERN,
+  blockingResults,
+  checkAccessibilitySpec,
+  formatFailures,
+  neverExercised,
+  summarize,
+  unmatchedKnownFailures,
+  type BindingResult,
+} from '@astryxdesign/a11y-spec';
+import {
+  createChromiumHarness,
+  holdMotionStill,
+} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+import {SLIDER_KNOWN_FAILURES} from './Slider.a11y.known-failures';
+import {
+  SLIDER_BINDING_STATES,
+  type SliderBindingState,
+} from './Slider.a11y.states';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+function storyUrl(storyId: string): string {
+  return `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`;
+}
+
+async function mountState(
+  page: Page,
+  state: SliderBindingState,
+): Promise<{subject: Locator; related: Record<string, Locator>}> {
+  await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
+  await holdMotionStill(page);
+  const subject = page
+    .locator('#storybook-root')
+    .getByRole('slider', {name: state.label});
+  await subject.waitFor({state: 'attached'});
+  return {subject, related: {}};
+}
+
+async function runState(
+  page: Page,
+  cdp: CDPSession,
+  state: SliderBindingState,
+): Promise<BindingResult> {
+  return checkAccessibilitySpec({
+    spec: SLIDER_PATTERN,
+    binding: 'Slider',
+    state: state.id,
+    facts: state.facts,
+    knownFailures: SLIDER_KNOWN_FAILURES,
+    mount: async () => {
+      const {subject, related} = await mountState(page, state);
+      return createChromiumHarness({page, cdp, subject, related});
+    },
+  });
+}
+
+test('every slider expectation is exercised by a Slider state', async ({
+  page,
+}) => {
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of SLIDER_BINDING_STATES) {
+    results.push(await runState(page, cdp, state));
+  }
+  expect(neverExercised(results)).toEqual([]);
+  expect(unmatchedKnownFailures(SLIDER_KNOWN_FAILURES, results)).toEqual([]);
+});
+
+for (const state of SLIDER_BINDING_STATES) {
+  test(`Slider [${state.id}] — ${state.summary}`, async ({page}) => {
+    const cdp = await page.context().newCDPSession(page);
+    const result = await runState(page, cdp, state);
+    const report = summarize(SLIDER_PATTERN, [result]);
+    // Required rows block (AST-020 FR9); advisory rows and exact known
+    // failures report.
+    expect(formatFailures(blockingResults([result]))).toBe('');
+    expect(report.unrunLayers).toEqual([]);
+    expect(report.counts.unexpectedPass).toBe(0);
+  });
+}

package/src/Slider/__tests__/Slider.a11y.known-failures.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Slider.a11y.known-failures.ts
+ * @input The exact slider-contract failures the shipped Slider produces today
+ * @output SLIDER_KNOWN_FAILURES — records both lanes reconcile against, so a fix shows up as an unexpected pass and any other failure stays a failure
+ * @position Known-failure ledger for the Slider binding
+ */
+
+import type {KnownFailure} from '@astryxdesign/a11y-spec';
+
+export const SLIDER_KNOWN_FAILURES: ReadonlyArray<KnownFailure> = [];

package/src/Slider/__tests__/Slider.a11y.renders.tsx

@@ -0,0 +1,42 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Slider.a11y.renders.tsx
+ * @input One Slider binding state
+ * @output The React tree every lane renders for that state (the jsdom test directly, the story through Storybook)
+ * @position Shared fixture for the Slider binding
+ */
+
+import {useState, type ReactElement} from 'react';
+import {Slider} from '../Slider';
+import type {SliderBindingState} from './Slider.a11y.states';
+
+function BoundSlider({state}: {state: SliderBindingState}) {
+  const [value, setValue] = useState(state.facts.value);
+  return (
+    <Slider
+      label={state.label}
+      min={state.facts.min}
+      max={state.facts.max}
+      step={state.facts.step}
+      value={value}
+      onChange={setValue}
+      orientation={state.facts.orientation}
+      isDisabled={!state.facts.operable}
+      disabledMessage={state.disabledMessage}
+      formatValue={
+        state.formatValue ? current => `${current} percent` : undefined
+      }
+    />
+  );
+}
+
+export function renderSliderState(state: SliderBindingState): ReactElement {
+  return (
+    <div dir={state.direction ?? 'ltr'} style={{padding: 24, width: 320}}>
+      <BoundSlider state={state} />
+    </div>
+  );
+}

package/src/Slider/__tests__/Slider.a11y.states.ts

@@ -0,0 +1,106 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Slider.a11y.states.ts
+ * @input Slider's representative thumb states and the facts SLIDER_PATTERN reads
+ * @output SLIDER_BINDING_STATES and the explicit ownership exclusions for this binding
+ * @position Binding inventory shared by the jsdom test, the Chromium spec, and the story (component:Slider AR1)
+ */
+
+import type {SliderStateFacts} from '@astryxdesign/a11y-spec';
+
+export interface SliderBindingState {
+  readonly id: string;
+  readonly summary: string;
+  readonly storyId: string;
+  /** The thumb's accessible name (the visible label). */
+  readonly label: string;
+  readonly facts: SliderStateFacts;
+  /** Props beyond label/min/max/step/value that shape the state. */
+  readonly disabledMessage?: string;
+  readonly formatValue?: boolean;
+  readonly direction?: 'ltr' | 'rtl';
+}
+
+function facts(overrides: Partial<SliderStateFacts> = {}): SliderStateFacts {
+  return {
+    min: 0,
+    max: 100,
+    step: 1,
+    value: 40,
+    orientation: 'horizontal',
+    rtl: false,
+    operable: true,
+    focusable: true,
+    valueText: null,
+    largeStep: 10,
+    ...overrides,
+  };
+}
+
+const story = (id: string) => `a11y-slider--${id}`;
+
+export const SLIDER_BINDING_STATES = [
+  {
+    id: 'horizontal',
+    summary: 'a horizontal single-thumb Slider at 40 of 0–100',
+    storyId: story('horizontal'),
+    label: 'Volume',
+    facts: facts(),
+  },
+  {
+    id: 'vertical',
+    summary: 'a vertical single-thumb Slider',
+    storyId: story('vertical'),
+    label: 'Temperature',
+    facts: facts({orientation: 'vertical'}),
+  },
+  {
+    id: 'horizontal-rtl',
+    summary:
+      'a horizontal Slider on a right-to-left page: ArrowLeft must raise the value',
+    storyId: story('horizontal-rtl'),
+    label: 'Volume',
+    facts: facts({rtl: true}),
+    direction: 'rtl',
+  },
+  {
+    id: 'formatted',
+    summary: 'a Slider that speaks a formatted value',
+    storyId: story('formatted'),
+    label: 'Brightness',
+    facts: facts({valueText: '40 percent'}),
+    formatValue: true,
+  },
+  {
+    id: 'disabled-with-message',
+    summary:
+      'a disabled Slider with a disabled message: the thumb keeps focus and its value',
+    storyId: story('disabled-with-message'),
+    label: 'Volume',
+    facts: facts({operable: false}),
+    disabledMessage: 'Volume is locked while sharing your screen',
+  },
+  {
+    id: 'step-three',
+    summary: 'a Slider with step 3 on a 0–100 range: End must reach 100',
+    storyId: story('step-three'),
+    label: 'Zoom',
+    facts: facts({step: 3, value: 48, largeStep: 30}),
+  },
+] as const satisfies ReadonlyArray<SliderBindingState>;
+
+export const SLIDER_EXCLUSIONS = [
+  {
+    id: 'range-thumb-separation',
+    owner: 'component:Slider AR1 and Slider.test.tsx',
+    reason:
+      "A range Slider renders two thumbs whose aria-valuemin/aria-valuemax narrow to the other thumb minus the minimum separation; that two-thumb coupling and the group semantics around them are the binding's own tests. This binding proves the single-thumb pattern each thumb follows.",
+  },
+  {
+    id: 'pointer-drag-model',
+    owner: 'Slider.test.tsx pointer suites and the Chromium pointer evidence',
+    reason:
+      "Dragging, track clicks (mirrored under RTL), and the value tooltip are pointer behavior outside the keyboard-and-semantics pattern; the component's own suites prove them.",
+  },
+] as const;

package/src/Slider/__tests__/Slider.a11y.test.tsx

@@ -0,0 +1,105 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/** @vitest-environment jsdom */
+
+/**
+ * @file Slider.a11y.test.tsx
+ * @input SLIDER_PATTERN bound to Slider's representative states
+ * @output jsdom-lane proof of the DOM expectations and an honest "unrun" report for the browser layers
+ * @position Binding test for component:Slider AR1 (the Chromium spec covers the rest)
+ */
+
+import {cleanup, render, screen} from '@testing-library/react';
+import {describe, expect, it} from 'vitest';
+import {
+  SLIDER_PATTERN,
+  checkAccessibilitySpec,
+  createJsdomHarness,
+  expectAccessibilitySpec,
+  summarize,
+  type BindingResult,
+} from '@astryxdesign/a11y-spec';
+import {SLIDER_KNOWN_FAILURES} from './Slider.a11y.known-failures';
+import {renderSliderState} from './Slider.a11y.renders';
+import {
+  SLIDER_BINDING_STATES,
+  SLIDER_EXCLUSIONS,
+  type SliderBindingState,
+} from './Slider.a11y.states';
+
+function thumb(state: SliderBindingState): HTMLElement {
+  return screen.getByRole('slider', {name: state.label});
+}
+
+async function checkState(state: SliderBindingState): Promise<BindingResult> {
+  return checkAccessibilitySpec({
+    spec: SLIDER_PATTERN,
+    binding: 'Slider',
+    state: state.id,
+    facts: state.facts,
+    knownFailures: SLIDER_KNOWN_FAILURES,
+    mount: async () => {
+      render(renderSliderState(state));
+      return createJsdomHarness({subject: thumb(state), related: {}});
+    },
+    unmount: cleanup,
+  });
+}
+
+describe('Slider — slider pattern, jsdom lane', () => {
+  it.each(
+    SLIDER_BINDING_STATES.map(
+      state => [state.id, state.summary, state] as const,
+    ),
+  )('%s — %s', async (_id, _summary, state) => {
+    await expectAccessibilitySpec({
+      spec: SLIDER_PATTERN,
+      binding: 'Slider',
+      state: state.id,
+      facts: state.facts,
+      knownFailures: SLIDER_KNOWN_FAILURES,
+      render: () => {
+        render(renderSliderState(state));
+      },
+      subject: () => thumb(state),
+      related: () => ({}),
+      cleanup,
+    });
+  });
+
+  it('runs the DOM layer and reports the browser-owned outcomes as unrun', async () => {
+    const results: BindingResult[] = [];
+    for (const state of SLIDER_BINDING_STATES) {
+      results.push(await checkState(state));
+    }
+    const report = summarize(SLIDER_PATTERN, results);
+    expect(report.counts.pass).toBeGreaterThan(0);
+    expect(report.unrunLayers).toEqual(['accessibility-tree', 'real-browser']);
+    expect(report.counts.unexpectedPass).toBe(0);
+  });
+});
+
+describe('Slider binding inventory', () => {
+  it('gives every representative state a distinct checked-in story', () => {
+    const stories = SLIDER_BINDING_STATES.map(state => state.storyId);
+    expect(new Set(stories).size).toBe(stories.length);
+  });
+
+  it('keeps range coupling and pointer ownership explicit', () => {
+    expect(SLIDER_EXCLUSIONS.map(exclusion => exclusion.id)).toEqual([
+      'range-thumb-separation',
+      'pointer-drag-model',
+    ]);
+    for (const exclusion of SLIDER_EXCLUSIONS) {
+      expect(exclusion.owner.length, exclusion.id).toBeGreaterThan(20);
+      expect(exclusion.reason.length, exclusion.id).toBeGreaterThan(80);
+    }
+  });
+
+  it('renders exactly one named thumb for every state', () => {
+    for (const state of SLIDER_BINDING_STATES) {
+      render(renderSliderState(state));
+      expect(thumb(state), state.id).toBeTruthy();
+      cleanup();
+    }
+  });
+});

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/Tokenizer/Tokenizer.test.tsx

@@ -920,6 +920,93 @@ describe('Tokenizer', () => {
       expect(screen.queryByText('Create "existing"')).not.toBeInTheDocument();
     });
 
+    it('does not show Create option for an already-selected label whose id differs from it', async () => {
+      // Real selections usually carry an opaque id (`u1` under the label
+      // "Alice"). The duplicate check used to compare the typed text against
+      // selected ids only, and the search results could not catch the match
+      // because filteredSource had already removed the selected item — so
+      // typing the label of an existing token offered "Create", which added a
+      // duplicate token under a new id.
+      const source: SearchSource = {
+        search: (query: string) =>
+          [{id: 'u1', label: 'Alice'}].filter(u =>
+            u.label.toLowerCase().includes(query.toLowerCase()),
+          ),
+        bootstrap: () => [],
+      };
+      const onChange = vi.fn();
+      render(
+        <Tokenizer
+          label="Tags"
+          searchSource={source}
+          value={[{id: 'u1', label: 'Alice'}]}
+          onChange={onChange}
+          hasCreate
+          debounceMs={0}
+        />,
+      );
+
+      const input = screen.getByRole('combobox');
+      await act(async () => {
+        fireEvent.change(input, {target: {value: 'Alice'}});
+      });
+      await act(async () => {
+        await new Promise(r => setTimeout(r, 50));
+      });
+
+      expect(screen.queryByText('Create "Alice"')).not.toBeInTheDocument();
+    });
+
+    it('does not add a duplicate token when a stale Create entry is committed', async () => {
+      // The guard in handleAdd must apply the same label check: a Create
+      // entry rendered before the selection changed still commits through
+      // here, and an opaque id must not let a same-label token through.
+      const source: SearchSource = {
+        search: (query: string) =>
+          // A label that contains the query but is not exactly it, so the
+          // Create entry for the query itself is legitimately offered.
+          [{id: 'u2', label: 'Alice Smith'}].filter(u =>
+            u.label.toLowerCase().includes(query.toLowerCase()),
+          ),
+        bootstrap: () => [],
+      };
+      const onChange = vi.fn();
+      const {rerender} = render(
+        <Tokenizer
+          label="Tags"
+          searchSource={source}
+          value={[]}
+          onChange={onChange}
+          hasCreate
+          debounceMs={0}
+        />,
+      );
+
+      const input = screen.getByRole('combobox');
+      await act(async () => {
+        fireEvent.change(input, {target: {value: 'Alice'}});
+      });
+      await act(async () => {
+        await new Promise(r => setTimeout(r, 50));
+      });
+      // The Create entry exists while the selection is empty...
+      expect(screen.queryByText('Create "Alice"')).toBeInTheDocument();
+      // ...then the selection gains Alice (under an opaque id) before the
+      // entry is committed.
+      rerender(
+        <Tokenizer
+          label="Tags"
+          searchSource={source}
+          value={[{id: 'u1', label: 'Alice'}]}
+          onChange={onChange}
+          hasCreate
+          debounceMs={0}
+        />,
+      );
+      fireEvent.click(screen.getByText('Create "Alice"'));
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
     it('does not show Create option when hasCreate is false', async () => {
       render(
         <Tokenizer