@astryxdesign/core 0.7.4 → 0.7.5-canary.04434e7

package/src/Tokenizer/__tests__/TokenizerEndLane.a11y.chromium.spec.ts

@@ -0,0 +1,471 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file TokenizerEndLane.a11y.chromium.spec.ts
+ * @input `Core/Tokenizer` and `Core/PowerSearch` stories in a built Storybook.
+ * @output Real-engine proof that tokens, the overflow count and the input's
+ *   text box never paint under the end lane (clear-all and busy indicator),
+ *   across field widths, both writing directions and both overflow modes.
+ * @position Run with `pnpm test:a11y-contract`. The lane is absolutely
+ *   positioned, so whether a token reaches it depends on how rows wrap at a
+ *   given width, which only a shipping layout engine can show.
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+type Direction = 'ltr' | 'rtl';
+
+async function open(
+  page: Page,
+  id: string,
+  direction: Direction,
+  args = '',
+): Promise<void> {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=${id}&viewMode=story&globals=direction:${direction}${args ? `&args=${args}` : ''}`,
+    {waitUntil: 'load'},
+  );
+  await page
+    .locator('button[aria-label="Clear all"]')
+    .first()
+    .waitFor({state: 'attached'});
+  await page.evaluate(async () => {
+    await document.fonts.ready;
+  });
+}
+
+/**
+ * Sets the story's sizing container to `width` and, for every field with a
+ * visible clear-all lane, returns each visible box that intersects the lane:
+ * tokens, the "+N more" count, and the input's content box (where its text
+ * and caret paint).
+ */
+async function overlapsAt(page: Page, width: number): Promise<string[]> {
+  return page.evaluate(async width => {
+    // The story decorator's fixed-width box; the layer mode's popover takes
+    // its width from the in-flow field inside it.
+    const host = document.querySelector<HTMLElement>(
+      '#storybook-root [style*="width"]',
+    );
+    if (!host) {
+      throw new Error('No sizing container in the story');
+    }
+    host.style.width = `${width}px`;
+    for (let frame = 0; frame < 4; frame++) {
+      await new Promise(resolve => requestAnimationFrame(resolve));
+    }
+
+    const isShown = (el: Element) =>
+      el.checkVisibility({visibilityProperty: true}) &&
+      !el.closest('[aria-hidden="true"]');
+    const lanes = [
+      ...document.querySelectorAll('button[aria-label="Clear all"]'),
+    ]
+      .filter(isShown)
+      .map(clear => clear.parentElement)
+      .filter(lane => lane?.parentElement != null) as HTMLElement[];
+    if (lanes.length === 0) {
+      throw new Error('No clear-all lane is visible');
+    }
+
+    return lanes.flatMap((lane, fieldIndex) => {
+      const field = lane.parentElement as HTMLElement;
+      const boxes: {name: string; rect: DOMRect}[] = [];
+      field.querySelectorAll('.astryx-token').forEach((token, index) => {
+        if (isShown(token)) {
+          boxes.push({
+            name: `token ${index}`,
+            rect: token.getBoundingClientRect(),
+          });
+        }
+      });
+      field.querySelectorAll('span').forEach(span => {
+        if (/^\+\d+ more$/.test(span.textContent ?? '') && isShown(span)) {
+          boxes.push({
+            name: 'overflow count',
+            rect: span.getBoundingClientRect(),
+          });
+        }
+      });
+      const input = field.querySelector<HTMLInputElement>('[role="combobox"]');
+      if (input && isShown(input) && getComputedStyle(input).opacity !== '0') {
+        const style = getComputedStyle(input);
+        const rect = input.getBoundingClientRect();
+        const left = rect.left + parseFloat(style.paddingLeft);
+        const right = rect.right - parseFloat(style.paddingRight);
+        if (right > left) {
+          boxes.push({
+            name: 'input text box',
+            rect: new DOMRect(left, rect.top, right - left, rect.height),
+          });
+        }
+      }
+
+      const laneRect = lane.getBoundingClientRect();
+      return boxes.flatMap(({name, rect}) => {
+        const x =
+          Math.min(rect.right, laneRect.right) -
+          Math.max(rect.left, laneRect.left);
+        const y =
+          Math.min(rect.bottom, laneRect.bottom) -
+          Math.max(rect.top, laneRect.top);
+        return x > 0.5 && y > 0.5
+          ? [
+              `${width}px field ${fieldIndex}: ${name} overlaps the end lane by ${x.toFixed(1)}px`,
+            ]
+          : [];
+      });
+    });
+  }, width);
+}
+
+async function sweep(page: Page, from: number, to: number): Promise<string[]> {
+  const found: string[] = [];
+  for (let width = from; width <= to; width += 4) {
+    found.push(...(await overlapsAt(page, width)));
+  }
+  return found;
+}
+
+/**
+ * The same sweep with a search in flight at every width. The busy Spinner joins
+ * the lane only while a search runs, so each width is measured while the
+ * combobox reports `aria-busy`, typing again whenever the last search settled.
+ */
+async function sweepWhileBusy(
+  page: Page,
+  from: number,
+  to: number,
+): Promise<string[]> {
+  const search = page.getByRole('combobox');
+  const found: string[] = [];
+  for (let width = from; width <= to; width += 4) {
+    for (;;) {
+      if ((await search.getAttribute('aria-busy')) !== 'true') {
+        await search.press('a');
+        await expect(search).toHaveAttribute('aria-busy', 'true');
+      }
+      const overlaps = await overlapsAt(page, width);
+      if ((await search.getAttribute('aria-busy')) === 'true') {
+        found.push(...overlaps);
+        break;
+      }
+    }
+  }
+  return found;
+}
+
+/**
+ * Sizes the story container (a pixel width, or `max-content` for a
+ * content-sized field) and returns the field's border box.
+ */
+async function fieldBoxAt(
+  page: Page,
+  width: string,
+): Promise<{width: number; height: number}> {
+  return page.evaluate(async width => {
+    const host = document.querySelector<HTMLElement>(
+      '#storybook-root [style*="width"]',
+    );
+    const field = document.querySelector('button[aria-label="Clear all"]')
+      ?.parentElement?.parentElement;
+    if (!host || !field) {
+      throw new Error('Field or sizing container did not render');
+    }
+    host.style.width = width;
+    for (let frame = 0; frame < 4; frame++) {
+      await new Promise(resolve => requestAnimationFrame(resolve));
+    }
+    const {width: w, height: h} = field.getBoundingClientRect();
+    return {
+      width: Math.round(w * 100) / 100,
+      height: Math.round(h * 100) / 100,
+    };
+  }, width);
+}
+
+/** Adds tokens through the menu, as a person would. */
+async function addTokens(page: Page, names: string[]): Promise<void> {
+  const search = page.getByRole('combobox');
+  for (const name of names) {
+    await search.fill(name.split(' ')[0]);
+    await page.getByRole('option', {name}).click();
+    await expect(search).not.toHaveAttribute('aria-busy', 'true');
+  }
+}
+
+/**
+ * The field's box with a search settled and again with one in flight. The
+ * query is non-empty both times, so only the busy state differs.
+ */
+async function settledAndBusy(
+  page: Page,
+  width: string,
+): Promise<string | null> {
+  const search = page.getByRole('combobox');
+  await search.fill('a');
+  await expect(search).not.toHaveAttribute('aria-busy', 'true');
+  const settled = await fieldBoxAt(page, width);
+  await search.press('b');
+  await expect(search).toHaveAttribute('aria-busy', 'true');
+  const busy = await fieldBoxAt(page, width);
+  const stillBusy = (await search.getAttribute('aria-busy')) === 'true';
+  if (!stillBusy) {
+    throw new Error(`The search settled before ${width} was measured`);
+  }
+  return settled.width === busy.width && settled.height === busy.height
+    ? null
+    : `${width}: settled ${settled.width}x${settled.height}, busy ${busy.width}x${busy.height}`;
+}
+
+/**
+ * With four tokens on the Loading story, every width from 200px to 400px and a
+ * content-sized container where the field's box differs settled vs busy.
+ */
+async function busyLayoutChanges(page: Page, step: number): Promise<string[]> {
+  await addTokens(page, ['Bob Smith', 'Charlie Brown', 'Diana Prince']);
+  await expect(page.locator('.astryx-token')).toHaveCount(4);
+  const changed: string[] = [];
+  for (let width = 200; width <= 400; width += step) {
+    const change = await settledAndBusy(page, `${width}px`);
+    if (change) {
+      changed.push(change);
+    }
+  }
+  // Content-sized: the field may not widen while busy (input-fields FR1).
+  const contentSized = await settledAndBusy(page, 'max-content');
+  if (contentSized) {
+    changed.push(contentSized);
+  }
+  return changed;
+}
+
+/**
+ * The blurred, collapsed field at `width`: its border box, how many tokens
+ * show, and the "+N more" count.
+ */
+async function collapsedRowAt(page: Page, width: string): Promise<string> {
+  const box = await fieldBoxAt(page, width);
+  const row = await page.evaluate(() => {
+    const field = document.querySelector('button[aria-label="Clear all"]')
+      ?.parentElement?.parentElement;
+    if (!field) {
+      throw new Error('Field did not render');
+    }
+    const shown = [...field.querySelectorAll('.astryx-token')].filter(
+      token =>
+        token.checkVisibility({visibilityProperty: true}) &&
+        !token.closest('[aria-hidden="true"]'),
+    ).length;
+    const count = [...field.querySelectorAll('span')].find(span =>
+      /^\+\d+ more$/.test(span.textContent ?? ''),
+    );
+    return `${shown} tokens, ${count?.textContent ?? 'no count'}`;
+  });
+  return `${box.width}x${box.height}, ${row}`;
+}
+
+for (const direction of ['ltr', 'rtl'] as const) {
+  test.describe(direction, () => {
+    test('PowerSearch tokens (custom renderToken) wrap before the end lane', async ({
+      page,
+    }) => {
+      await open(page, 'core-powersearch--near-full-token-row', direction);
+      expect(await sweep(page, 160, 640)).toEqual([]);
+    });
+
+    test('a token wider than the row truncates short of the end lane', async ({
+      page,
+    }) => {
+      await open(page, 'core-tokenizer--long-token-end-lane', direction);
+      expect(await sweep(page, 160, 400)).toEqual([]);
+    });
+
+    test('default Tokenizer tokens wrap before the end lane', async ({
+      page,
+    }) => {
+      await open(
+        page,
+        'core-tokenizer--with-preselected',
+        direction,
+        'hasClear:!true',
+      );
+      expect(await sweep(page, 160, 400)).toEqual([]);
+    });
+
+    test('tokens stay clear of the lane while a search is busy', async ({
+      page,
+    }) => {
+      await open(page, 'core-tokenizer--loading', direction);
+      await page.getByRole('combobox').focus();
+      expect(await sweepWhileBusy(page, 200, 400)).toEqual([]);
+    });
+
+    test('a search starting does not move the field or its token rows', async ({
+      page,
+    }) => {
+      test.setTimeout(240_000);
+      await open(page, 'core-tokenizer--loading', direction);
+      expect(await busyLayoutChanges(page, 4)).toEqual([]);
+    });
+
+    test('the reserved Spinner costs no frames and stays silent while idle', async ({
+      page,
+    }) => {
+      await open(page, 'core-tokenizer--loading', direction);
+      const search = page.getByRole('combobox');
+      const cdp = await page.context().newCDPSession(page);
+      await cdp.send('Performance.enable');
+      // Style recalculations over a short window: a ticking ring animation
+      // recalculates every frame (about 30 in 500ms), an unrendered one does
+      // not. The idle allowance absorbs a stray one-off recalculation.
+      const recalcsOver = async (ms: number) => {
+        const count = async () => {
+          const {metrics} = await cdp.send('Performance.getMetrics');
+          return metrics.find(m => m.name === 'RecalcStyleCount')?.value ?? 0;
+        };
+        const before = await count();
+        await page.waitForTimeout(ms);
+        return (await count()) - before;
+      };
+      const spinnerState = async () =>
+        page.evaluate(() => {
+          const spinner = document
+            .querySelector('button[aria-label="Clear all"]')
+            ?.parentElement?.querySelector('.astryx-spinner');
+          if (!spinner) {
+            throw new Error('The lane holds no Spinner');
+          }
+          return {
+            hidden: spinner.getAttribute('aria-hidden') === 'true',
+            width: spinner.getBoundingClientRect().width,
+          };
+        });
+      const idle = await spinnerState();
+      expect(idle.hidden).toBe(true);
+      expect(await recalcsOver(500)).toBeLessThanOrEqual(2);
+      await search.focus();
+      await search.press('a');
+      await expect(search).toHaveAttribute('aria-busy', 'true');
+      const busy = await spinnerState();
+      expect(busy.hidden).toBe(false);
+      expect(await recalcsOver(500)).toBeGreaterThanOrEqual(10);
+      expect(busy.width).toBe(idle.width);
+    });
+
+    test('the idle Spinner paints nothing, even when a theme styles its box', async ({
+      page,
+    }) => {
+      await page.goto(
+        `${storybook.origin}/iframe.html?id=core-tokenizer--loading&viewMode=story&globals=direction:${direction};astryxTheme:probe`,
+        {waitUntil: 'load'},
+      );
+      await page
+        .locator('button[aria-label="Clear all"]')
+        .waitFor({state: 'attached'});
+      const search = page.getByRole('combobox');
+      const spinnerPaint = async () =>
+        page.evaluate(() => {
+          const spinner = document
+            .querySelector('button[aria-label="Clear all"]')
+            ?.parentElement?.querySelector('.astryx-spinner');
+          if (!spinner) {
+            throw new Error('The lane holds no Spinner');
+          }
+          const style = getComputedStyle(spinner);
+          return {
+            visible: spinner.checkVisibility({visibilityProperty: true}),
+            visibility: style.visibility,
+            background: style.backgroundColor,
+          };
+        });
+      const idle = await spinnerPaint();
+      // The probe theme paints the Spinner's own box, so a box that is only
+      // content-skipped would still show beside Clear all.
+      expect(idle.background).not.toBe('rgba(0, 0, 0, 0)');
+      expect(idle.visibility).toBe('hidden');
+      expect(idle.visible).toBe(false);
+      await search.focus();
+      await search.press('a');
+      await expect(search).toHaveAttribute('aria-busy', 'true');
+      expect((await spinnerPaint()).visible).toBe(true);
+    });
+
+    test('a themed, larger Spinner keeps its space too', async ({page}) => {
+      test.setTimeout(240_000);
+      await open(page, 'core-tokenizer--loading', direction);
+      // The public size var a theme sets for a named Spinner size.
+      await page.addStyleTag({
+        content: '.astryx-spinner { --spinner-diameter: 24px !important; }',
+      });
+      expect(await busyLayoutChanges(page, 8)).toEqual([]);
+    });
+
+    test('a search settling after blur does not change the collapsed row', async ({
+      page,
+    }) => {
+      test.setTimeout(240_000);
+      await open(
+        page,
+        'core-tokenizer--loading',
+        direction,
+        'tokenOverflowBehavior:unfocusedInline',
+      );
+      const search = page.getByRole('combobox');
+      await search.focus();
+      await addTokens(page, ['Bob Smith', 'Charlie Brown', 'Diana Prince']);
+      const changed: string[] = [];
+      for (let width = 200; width <= 400; width += 8) {
+        await search.focus();
+        await search.fill('');
+        await search.press('a');
+        await expect(search).toHaveAttribute('aria-busy', 'true');
+        await search.blur();
+        const busy = await collapsedRowAt(page, `${width}px`);
+        await expect(search).not.toHaveAttribute('aria-busy', 'true');
+        const settled = await collapsedRowAt(page, `${width}px`);
+        if (busy !== settled) {
+          changed.push(`${width}px: busy ${busy}, settled ${settled}`);
+        }
+      }
+      expect(changed).toEqual([]);
+    });
+
+    for (const mode of ['overflow-inline', 'overflow-layer']) {
+      test(`${mode}: blurred and focused tokens stay clear of the end lane`, async ({
+        page,
+      }) => {
+        await open(page, `core-powersearch--${mode}`, direction);
+        // Blurred: only the inline mode keeps its lane on the page.
+        if (mode === 'overflow-inline') {
+          expect(await sweep(page, 320, 640)).toEqual([]);
+        }
+        // The field's own corner, clear of every token: the click a person
+        // makes to start typing, which expands both modes.
+        await page
+          .locator('.astryx-tokenizer')
+          .first()
+          .click({position: {x: 1, y: 1}});
+        await expect(page.getByRole('combobox')).toBeFocused();
+        expect(await sweep(page, 320, 640)).toEqual([]);
+      });
+    }
+  });
+}

package/src/Tokenizer/useEndLaneReserve.ts

@@ -81,8 +81,9 @@ const reserveStyles = stylex.create({
  *
  * Takes the lane's inset from the field's inline-end border, as the CSS
  * expression that positions it. Returns a ref callback for the lane, and the
- * ordinary input reserve style. Tokenizer's compact input reads the same custom
- * property directly so its empty-query hit surface can stop before the lane.
+ * ordinary input reserve style. With tokens, Tokenizer's field wrapper reads the
+ * same custom property directly so every token row, and the input after the
+ * last token, stops before the lane.
  * With no lane mounted the variable is absent and either rule resolves to its
  * no-lane fallback, so neither path needs to know whether a search is running.
  */

package/src/Tooltip/Tooltip.test.tsx

@@ -365,7 +365,11 @@ describe('Tooltip', () => {
       __resetInteractionModalityForTest();
     });
 
-    /** A tap: the pointer sequence a finger produces before hover is faked. */
+    /**
+     * A tap, in the order a browser dispatches it: the finger's pointer events,
+     * then the hover it synthesizes, then the `click` that says the touch was a
+     * tap and not the start of a scroll.
+     */
     const tap = (element: HTMLElement) => {
       // A finger's arrival fires pointerenter too, and that is the path a pen
       // must not take — cover it here rather than starting at pointerdown.
@@ -374,6 +378,14 @@ describe('Tooltip', () => {
       fireEvent.pointerUp(element, {pointerType: 'touch'});
       // Touch synthesizes hover after the press; the tooltip must not act on it.
       fireEvent.mouseEnter(element);
+      fireEvent.click(element);
+    };
+
+    /** A tap outside: what a finger landing and lifting elsewhere dispatches. */
+    const tapOutside = (element: HTMLElement) => {
+      fireEvent.pointerDown(element, {pointerType: 'touch'});
+      fireEvent.pointerUp(element, {pointerType: 'touch'});
+      fireEvent.click(element);
     };
 
     it('opens on a tap when the trigger performs no action', async () => {
@@ -479,9 +491,141 @@ describe('Tooltip', () => {
         expect(onOpenChange).toHaveBeenCalledWith(true);
       });
 
-      fireEvent.pointerDown(screen.getByRole('button', {name: 'Elsewhere'}), {
-        pointerType: 'touch',
+      tapOutside(screen.getByRole('button', {name: 'Elsewhere'}));
+
+      await waitFor(() => {
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+      });
+    });
+
+    it('opens when the finger lifts, not when it lands', async () => {
+      const onOpenChange = vi.fn();
+      render(
+        <Tooltip content="Tooltip text" onOpenChange={onOpenChange} delay={0}>
+          Abbreviation
+        </Tooltip>,
+      );
+
+      const trigger = screen.getByText('Abbreviation');
+      fireEvent.pointerEnter(trigger, {pointerType: 'touch'});
+      fireEvent.pointerDown(trigger, {pointerType: 'touch'});
+      // The finger is still down: it may be starting a scroll.
+      await new Promise(resolve => setTimeout(resolve, 50));
+      expect(onOpenChange).not.toHaveBeenCalled();
+
+      fireEvent.pointerUp(trigger, {pointerType: 'touch'});
+      fireEvent.click(trigger);
+      await waitFor(() => {
+        expect(onOpenChange).toHaveBeenCalledWith(true);
       });
+    });
+
+    it('never opens for a touch that turns into a scroll', async () => {
+      const onOpenChange = vi.fn();
+      render(
+        <Tooltip content="Tooltip text" onOpenChange={onOpenChange} delay={0}>
+          Abbreviation
+        </Tooltip>,
+      );
+
+      const trigger = screen.getByText('Abbreviation');
+      fireEvent.pointerEnter(trigger, {pointerType: 'touch'});
+      fireEvent.pointerDown(trigger, {pointerType: 'touch'});
+      // The browser takes the touch for the page scroll: no tap follows.
+      fireEvent.pointerCancel(trigger, {pointerType: 'touch'});
+
+      await new Promise(resolve => setTimeout(resolve, 50));
+      expect(onOpenChange).not.toHaveBeenCalled();
+    });
+
+    it('never opens for a press the browser did not count as a tap', async () => {
+      const onOpenChange = vi.fn();
+      render(
+        <Tooltip content="Tooltip text" onOpenChange={onOpenChange} delay={0}>
+          Abbreviation
+        </Tooltip>,
+      );
+
+      const trigger = screen.getByText('Abbreviation');
+      // A long press: the finger lifts, but the browser fires no click
+      // (it selected text or showed its own menu instead).
+      fireEvent.pointerDown(trigger, {pointerType: 'touch'});
+      fireEvent.pointerUp(trigger, {pointerType: 'touch'});
+
+      await new Promise(resolve => setTimeout(resolve, 50));
+      expect(onOpenChange).not.toHaveBeenCalled();
+    });
+
+    it('does not take a later keyboard click for the tap of an earlier press', async () => {
+      const onOpenChange = vi.fn();
+      render(
+        <Tooltip
+          content="What this metric means"
+          onOpenChange={onOpenChange}
+          touchTrigger="tap"
+          delay={0}>
+          <button type="button">Info</button>
+        </Tooltip>,
+      );
+
+      const trigger = screen.getByRole('button', {name: 'Info'});
+      // A press that never became a tap ...
+      fireEvent.pointerDown(trigger, {pointerType: 'touch'});
+      fireEvent.pointerUp(trigger, {pointerType: 'touch'});
+      // ... then Enter on the focused button, which fires its own click.
+      fireEvent.keyDown(trigger, {key: 'Enter'});
+      fireEvent.click(trigger);
+
+      await new Promise(resolve => setTimeout(resolve, 50));
+      expect(onOpenChange).not.toHaveBeenCalledWith(true);
+    });
+
+    it('closes on a tap outside when the finger lifts, not when it lands', async () => {
+      const onOpenChange = vi.fn();
+      render(
+        <>
+          <Tooltip content="Tooltip text" onOpenChange={onOpenChange} delay={0}>
+            Abbreviation
+          </Tooltip>
+          <button type="button">Elsewhere</button>
+        </>,
+      );
+
+      tap(screen.getByText('Abbreviation'));
+      await waitFor(() => {
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+      });
+
+      const elsewhere = screen.getByRole('button', {name: 'Elsewhere'});
+      fireEvent.pointerDown(elsewhere, {pointerType: 'touch'});
+      await new Promise(resolve => setTimeout(resolve, 50));
+      expect(onOpenChange).not.toHaveBeenCalledWith(false);
+
+      fireEvent.pointerUp(elsewhere, {pointerType: 'touch'});
+      await waitFor(() => {
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+      });
+    });
+
+    it('closes when a scroll starts outside', async () => {
+      const onOpenChange = vi.fn();
+      render(
+        <>
+          <Tooltip content="Tooltip text" onOpenChange={onOpenChange} delay={0}>
+            Abbreviation
+          </Tooltip>
+          <p>Page content</p>
+        </>,
+      );
+
+      tap(screen.getByText('Abbreviation'));
+      await waitFor(() => {
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+      });
+
+      const page = screen.getByText('Page content');
+      fireEvent.pointerDown(page, {pointerType: 'touch'});
+      fireEvent.pointerCancel(page, {pointerType: 'touch'});
 
       await waitFor(() => {
         expect(onOpenChange).toHaveBeenCalledWith(false);
@@ -543,6 +687,7 @@ describe('Tooltip', () => {
       fireEvent.pointerEnter(trigger, {pointerType: 'pen', buttons: 0});
       fireEvent.pointerDown(trigger, {pointerType: 'pen'});
       fireEvent.pointerUp(trigger, {pointerType: 'pen'});
+      fireEvent.click(trigger);
 
       await waitFor(() => {
         expect(onOpenChange).toHaveBeenCalledWith(true);

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

@@ -98,9 +98,9 @@ export const TOOLTIP_EXCLUSIONS = [
   {
     id: 'touch-trigger',
     owner:
-      'useTooltip.test.tsx and Tooltip.test.tsx (touchTrigger suites) through the shared useTouchTrigger hook',
+      'useTooltip.test.tsx and Tooltip.test.tsx (touchTrigger suites) through the shared useTouchTrigger hook, and TouchTrigger.a11y.chromium.spec.ts for real touch input',
     reason:
-      'On a touch pointer there is no hover, so a tap opens the tooltip or leaves it to the control the tap operates; the APG defines no touch behaviour, and the Chromium lane drives a mouse and a keyboard only.',
+      'On a touch pointer there is no hover, so a tap opens the tooltip or leaves it to the control the tap operates; the APG defines no touch behaviour, and this contract drives a mouse and a keyboard only, so the touch outcomes have their own real-touch Chromium proof.',
   },
   {
     id: 'controlled-and-disabled',

package/src/VisuallyHidden/VisuallyHidden.doc.mjs

@@ -23,7 +23,7 @@ export const docs = {
     },
   ],
   usage: {
-    description: 'Renders content in the accessibility tree while hiding it visually. Use for accessible names on icon-only controls, aria-live announcement regions, and supplementary screen-reader context. Deliberately has no styling props; the whole point is to stay invisible.',
+    description: 'Renders content in the accessibility tree while hiding it visually. Use for accessible names on icon-only controls, aria-live announcement regions, and supplementary screen-reader context. Deliberately has no styling props; the whole point is to stay invisible. `xstyle` is still accepted and ignored, only so code written against 0.7.2 keeps compiling; a planned minor removes it.',
     bestPractices: [
       { guidance: true, description: 'Use to give icon-only buttons and controls an accessible name that screen readers announce.' },
       { guidance: true, description: 'Render as a block element (as="div") with aria-live to announce dynamic updates like drag-and-drop or result counts.' },