@astryxdesign/lab 0.7.7-canary.eadd175 → 0.7.7-canary.f4edef8

package/dist/InfoTip/index.d.ts

@@ -1,6 +1,24 @@
 /**
- * @file InfoTip component barrel export
+ * @file InfoTip deprecated re-export
+ * @input `@astryxdesign/core/InfoTip`
+ * @output Exports InfoTip, InfoTipProps, InfoTipSize, each deprecated
+ * @position Lab entry kept for one release after InfoTip moved to Core;
+ *   consumed by packages/lab/src/index.ts
  */
-export { InfoTip } from './InfoTip.js';
-export type { InfoTipProps, InfoTipSize } from './InfoTip.js';
+import { InfoTip as CoreInfoTip, type InfoTipProps as CoreInfoTipProps, type InfoTipSize as CoreInfoTipSize } from '@astryxdesign/core/InfoTip';
+/**
+ * @deprecated InfoTip moved to Core: import it from `@astryxdesign/core`.
+ * This Lab export is removed in the next release.
+ */
+export declare const InfoTip: typeof CoreInfoTip;
+/**
+ * @deprecated Import `InfoTipProps` from `@astryxdesign/core`. This Lab
+ * export is removed in the next release.
+ */
+export type InfoTipProps = CoreInfoTipProps;
+/**
+ * @deprecated Import `InfoTipSize` from `@astryxdesign/core`. This Lab export
+ * is removed in the next release.
+ */
+export type InfoTipSize = CoreInfoTipSize;
 //# sourceMappingURL=index.d.ts.map

package/dist/InfoTip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InfoTip/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,WAAW,EAAC,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InfoTip/index.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,KAAK,YAAY,IAAI,gBAAgB,EACrC,KAAK,WAAW,IAAI,eAAe,EACpC,MAAM,4BAA4B,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,OAAO,oBAAc,CAAC;AAEnC;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC"}

package/dist/InfoTip/index.js

@@ -3,6 +3,26 @@
 'use client';
 
 /**
- * @file InfoTip component barrel export
+ * @file InfoTip deprecated re-export
+ * @input `@astryxdesign/core/InfoTip`
+ * @output Exports InfoTip, InfoTipProps, InfoTipSize, each deprecated
+ * @position Lab entry kept for one release after InfoTip moved to Core;
+ *   consumed by packages/lab/src/index.ts
  */
-export { InfoTip } from "./InfoTip.js";
+import { InfoTip as CoreInfoTip } from '@astryxdesign/core/InfoTip';
+
+/**
+ * @deprecated InfoTip moved to Core: import it from `@astryxdesign/core`.
+ * This Lab export is removed in the next release.
+ */
+export const InfoTip = CoreInfoTip;
+
+/**
+ * @deprecated Import `InfoTipProps` from `@astryxdesign/core`. This Lab
+ * export is removed in the next release.
+ */
+
+/**
+ * @deprecated Import `InfoTipSize` from `@astryxdesign/core`. This Lab export
+ * is removed in the next release.
+ */

package/dist/lab.css

@@ -71,7 +71,6 @@
   .x1fx55se:not(#\#){padding:calc((var(--size-element-lg) - 28px) / 2 - var(--border-width))}
   .xnvfkzk:not(#\#){padding:calc((var(--size-element-md) - 24px) / 2 - var(--border-width))}
   .x5pt662:not(#\#){padding:calc((var(--size-element-sm) - 22px) / 2 - var(--border-width))}
-  .x12nba7r:not(#\#){padding:var(--spacing-0-5)}
   .x1b2ylru:not(#\#){padding:var(--spacing-3)}
   .x1shk3sm:not(#\#){padding:var(--spacing-4)}
   .x70o2i5:not(#\#):not(#\#){border-color:#26262a}
@@ -563,7 +562,6 @@
   .x80gvsz:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-medium)}
   .x15406qy:not(#\#):not(#\#):not(#\#){transition-property:background-color}
   .xq90yva:not(#\#):not(#\#):not(#\#){transition-property:border-color,background-color}
-  .xt3l3uh:not(#\#):not(#\#):not(#\#){transition-property:color}
   .x13b0p5u:not(#\#):not(#\#):not(#\#){transition-property:none}
   .x19991ni:not(#\#):not(#\#):not(#\#){transition-property:opacity}
   .x1gfj591:not(#\#):not(#\#):not(#\#){transition-property:top,left,width,height}
@@ -635,7 +633,6 @@
   @media (hover: hover){.x1fkayqs.x1fkayqs.x1fkayqs:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:#1d1d21}}
   @media (hover: hover){.xkqrm7g.xkqrm7g.xkqrm7g:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-background-muted)}}
   @media (hover: hover){.xoevpu5.xoevpu5.xoevpu5:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}}
-  @media (hover: hover){.x10ue8fs.x10ue8fs.x10ue8fs:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:var(--color-icon-primary)}}
   @container (max-width: 40rem){.x101j7pr.x101j7pr:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-body)}}
   @container (max-width: 40rem){.x12eanku.x12eanku:not(#\#):not(#\#):not(#\#){border-inline-start-width:0}}
   @container list-input (max-width: 640px){.x1jiamoa.x1jiamoa:not(#\#):not(#\#):not(#\#){display:block}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.7-canary.eadd175",
+  "version": "0.7.7-canary.f4edef8",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.7-canary.eadd175",
+    "@astryxdesign/core": "0.7.7-canary.f4edef8",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,9 +59,9 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.7-canary.eadd175",
-    "@astryxdesign/cli": "0.7.7-canary.eadd175",
-    "@astryxdesign/interaction-harness": "0.7.7-canary.eadd175",
+    "@astryxdesign/a11y-spec": "0.7.7-canary.f4edef8",
+    "@astryxdesign/cli": "0.7.7-canary.f4edef8",
+    "@astryxdesign/interaction-harness": "0.7.7-canary.f4edef8",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/InfoTip/InfoTip.test.tsx

@@ -2,237 +2,32 @@
 
 /**
  * @file InfoTip.test.tsx
- * @input Uses vitest, @testing-library/react, @testing-library/user-event, InfoTip component
- * @output Unit tests for InfoTip trigger accessibility and tooltip behavior
- * @position Testing; validates InfoTip.tsx implementation
- *
- * SYNC: When InfoTip.tsx changes, update tests to match new behavior
+ * @input The Lab InfoTip entry and the Core component
+ * @output Tests that the Lab entry re-exports the Core component, deprecated
+ * @position Testing; validates index.ts (component:InfoTip FR4)
  */
 
-import {describe, it, expect, vi, beforeAll, afterAll} from 'vitest';
-import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {InfoTip} from './InfoTip';
-
-// Store original matches to restore later
-const originalMatches = HTMLElement.prototype.matches;
-
-// Track popover open state per element
-const popoverOpenState = new WeakMap<HTMLElement, boolean>();
-
-// Mock Popover API for jsdom, and :focus-visible for keyboard-focus tests
-// (same harness as core Tooltip.test.tsx, plus :focus-visible)
-beforeAll(() => {
-  HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
-    popoverOpenState.set(this, true);
-  });
-  HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
-    popoverOpenState.set(this, false);
-  });
-
-  // Intercept :popover-open and :focus-visible, delegate everything else
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (HTMLElement.prototype as any).matches = function (
-    selector: string,
-  ): boolean {
-    if (selector === ':popover-open') {
-      return popoverOpenState.get(this) ?? false;
-    }
-    if (selector === ':focus-visible') {
-      // Treat any focused element as keyboard-focused in tests
-      return this === document.activeElement;
+import {readFileSync} from 'node:fs';
+import path from 'node:path';
+import {describe, expect, it} from 'vitest';
+import {InfoTip as CoreInfoTip} from '@astryxdesign/core/InfoTip';
+import {InfoTip} from './index';
+
+describe('Lab InfoTip', () => {
+  it('is the Core component', () => {
+    expect(InfoTip).toBe(CoreInfoTip);
+  });
+
+  it('marks each of its exports deprecated', () => {
+    // Static metadata only: editors and type checkers show it, and nothing
+    // warns at runtime.
+    const source = readFileSync(path.join(__dirname, 'index.ts'), 'utf8');
+    for (const name of ['InfoTip', 'InfoTipProps', 'InfoTipSize']) {
+      // The doc comment right above the export, whatever it contains.
+      const comment = new RegExp(
+        String.raw`/\*\*((?:(?!\*/)[\s\S])*)\*/\nexport (?:const|type) ${name}\b`,
+      ).exec(source);
+      expect(comment?.[1], name).toContain('@deprecated');
     }
-    return originalMatches.call(this, selector);
-  };
-});
-
-afterAll(() => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (HTMLElement.prototype as any).matches = originalMatches;
-});
-
-/** Focus the trigger the way a keyboard user would land on it. */
-function focusTrigger(trigger: HTMLElement) {
-  act(() => {
-    trigger.focus();
-  });
-  fireEvent.focusIn(trigger);
-}
-
-describe('InfoTip', () => {
-  it('renders a button trigger with the default accessible name', () => {
-    render(<InfoTip content="Helpful context" />);
-    expect(
-      screen.getByRole('button', {name: 'More information'}),
-    ).toBeInTheDocument();
-  });
-
-  it('uses a custom label as the accessible name', () => {
-    render(
-      <InfoTip content="30-day rolling average." label="About this metric" />,
-    );
-    const trigger = screen.getByRole('button', {name: 'About this metric'});
-    expect(trigger).toHaveAttribute('aria-label', 'About this metric');
-  });
-
-  it('links the trigger to the tooltip layer via aria-describedby', () => {
-    render(<InfoTip content="Helpful context" />);
-    const layer = screen.getByRole('tooltip', {hidden: true});
-    expect(layer).toHaveTextContent('Helpful context');
-    const trigger = screen.getByRole('button', {name: 'More information'});
-    expect(trigger.getAttribute('aria-describedby')).toBe(layer.id);
-  });
-
-  it('is reachable with Tab', async () => {
-    const user = userEvent.setup();
-    render(<InfoTip content="Helpful context" />);
-    const trigger = screen.getByRole('button', {name: 'More information'});
-    await user.tab();
-    expect(trigger).toHaveFocus();
-  });
-
-  it('shows the tooltip on hover', async () => {
-    vi.mocked(HTMLElement.prototype.showPopover).mockClear();
-    render(<InfoTip content="Helpful context" />);
-    const trigger = screen.getByRole('button', {name: 'More information'});
-
-    fireEvent.mouseEnter(trigger);
-
-    await waitFor(() => {
-      expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
-    });
-  });
-
-  it('shows the tooltip on keyboard focus', async () => {
-    vi.mocked(HTMLElement.prototype.showPopover).mockClear();
-    render(<InfoTip content="Helpful context" />);
-    const trigger = screen.getByRole('button', {name: 'More information'});
-
-    focusTrigger(trigger);
-
-    await waitFor(() => {
-      expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
-    });
-    const layer = screen.getByRole('tooltip', {hidden: true});
-    expect(popoverOpenState.get(layer)).toBe(true);
-  });
-
-  it('closes the tooltip on Escape', async () => {
-    render(<InfoTip content="Helpful context" />);
-    const trigger = screen.getByRole('button', {name: 'More information'});
-    const layer = screen.getByRole('tooltip', {hidden: true});
-
-    focusTrigger(trigger);
-    await waitFor(() => {
-      expect(popoverOpenState.get(layer)).toBe(true);
-    });
-
-    fireEvent.keyDown(trigger, {key: 'Escape'});
-
-    await waitFor(() => {
-      expect(popoverOpenState.get(layer)).toBe(false);
-    });
-  });
-
-  it('re-opens after Escape once the trigger is left and re-hovered', async () => {
-    render(<InfoTip content="Helpful context" />);
-    const trigger = screen.getByRole('button', {name: 'More information'});
-    const layer = screen.getByRole('tooltip', {hidden: true});
-
-    focusTrigger(trigger);
-    await waitFor(() => {
-      expect(popoverOpenState.get(layer)).toBe(true);
-    });
-
-    fireEvent.keyDown(trigger, {key: 'Escape'});
-    await waitFor(() => {
-      expect(popoverOpenState.get(layer)).toBe(false);
-    });
-
-    // Leave (resets dismissal), then re-enter
-    act(() => {
-      trigger.blur();
-    });
-    fireEvent.focusOut(trigger);
-    fireEvent.mouseLeave(trigger);
-
-    fireEvent.mouseEnter(trigger);
-    await waitFor(() => {
-      expect(popoverOpenState.get(layer)).toBe(true);
-    });
-  });
-
-  it('renders ReactNode tooltip content', () => {
-    render(<InfoTip content={<span data-testid="rich-content">Rich</span>} />);
-    expect(screen.getByTestId('rich-content')).toBeInTheDocument();
-  });
-  describe('touch', () => {
-    /**
-     * A tap, in the order a browser dispatches it: the finger's pointer events,
-     * the hover it synthesizes, then the `click` that says the touch was a tap.
-     */
-    const tap = (element: HTMLElement) => {
-      fireEvent.pointerEnter(element, {pointerType: 'touch'});
-      fireEvent.pointerDown(element, {pointerType: 'touch'});
-      fireEvent.pointerUp(element, {pointerType: 'touch'});
-      fireEvent.mouseEnter(element);
-      fireEvent.click(element);
-    };
-
-    it('opens on a tap, though the trigger is a button', async () => {
-      render(<InfoTip content="30-day rolling average." />);
-      const trigger = screen.getByRole('button');
-      const layer = screen.getByRole('tooltip', {hidden: true});
-
-      // Tooltip's `auto` rule would give this tap to the button and suppress
-      // the tooltip; revealing it is the button's whole purpose, so InfoTip
-      // opts in. Without this its content is unreachable on a phone.
-      tap(trigger);
-
-      await waitFor(() => {
-        expect(popoverOpenState.get(layer)).toBe(true);
-      });
-    });
-
-    it('closes on a second tap of the trigger', async () => {
-      render(<InfoTip content="30-day rolling average." />);
-      const trigger = screen.getByRole('button');
-      const layer = screen.getByRole('tooltip', {hidden: true});
-
-      tap(trigger);
-      await waitFor(() => {
-        expect(popoverOpenState.get(layer)).toBe(true);
-      });
-
-      tap(trigger);
-      await waitFor(() => {
-        expect(popoverOpenState.get(layer)).toBe(false);
-      });
-    });
-
-    it('closes on a tap outside', async () => {
-      render(
-        <>
-          <InfoTip content="30-day rolling average." />
-          <button type="button">Elsewhere</button>
-        </>,
-      );
-      const trigger = screen.getByRole('button', {name: 'More information'});
-      const layer = screen.getByRole('tooltip', {hidden: true});
-
-      tap(trigger);
-      await waitFor(() => {
-        expect(popoverOpenState.get(layer)).toBe(true);
-      });
-
-      // The tap outside counts when the finger lifts.
-      const elsewhere = screen.getByRole('button', {name: 'Elsewhere'});
-      fireEvent.pointerDown(elsewhere, {pointerType: 'touch'});
-      fireEvent.pointerUp(elsewhere, {pointerType: 'touch'});
-
-      await waitFor(() => {
-        expect(popoverOpenState.get(layer)).toBe(false);
-      });
-    });
   });
 });

package/src/InfoTip/index.ts

@@ -3,8 +3,33 @@
 'use client';
 
 /**
- * @file InfoTip component barrel export
+ * @file InfoTip deprecated re-export
+ * @input `@astryxdesign/core/InfoTip`
+ * @output Exports InfoTip, InfoTipProps, InfoTipSize, each deprecated
+ * @position Lab entry kept for one release after InfoTip moved to Core;
+ *   consumed by packages/lab/src/index.ts
  */
 
-export {InfoTip} from './InfoTip';
-export type {InfoTipProps, InfoTipSize} from './InfoTip';
+import {
+  InfoTip as CoreInfoTip,
+  type InfoTipProps as CoreInfoTipProps,
+  type InfoTipSize as CoreInfoTipSize,
+} from '@astryxdesign/core/InfoTip';
+
+/**
+ * @deprecated InfoTip moved to Core: import it from `@astryxdesign/core`.
+ * This Lab export is removed in the next release.
+ */
+export const InfoTip = CoreInfoTip;
+
+/**
+ * @deprecated Import `InfoTipProps` from `@astryxdesign/core`. This Lab
+ * export is removed in the next release.
+ */
+export type InfoTipProps = CoreInfoTipProps;
+
+/**
+ * @deprecated Import `InfoTipSize` from `@astryxdesign/core`. This Lab export
+ * is removed in the next release.
+ */
+export type InfoTipSize = CoreInfoTipSize;

package/src/MobilePowerSearch/MobilePowerSearch.test.tsx

@@ -822,6 +822,9 @@ describe('MobilePowerSearch Filters sheet', () => {
     const confirmation = screen.getByRole('alertdialog', {
       name: 'Clear all filters?',
     });
+    // A scrim press starts and ends on the dialog itself.
+    fireEvent.pointerDown(confirmation);
+    fireEvent.pointerUp(confirmation);
     fireEvent.click(confirmation);
     expect(
       screen.queryByRole('alertdialog', {name: 'Clear all filters?'}),

package/src/MobileTokenizer/MobileTokenizer.test.tsx

@@ -185,6 +185,9 @@ describe('MobileTokenizer (Lab, single-sheet flow)', () => {
     let discard = await screen.findByRole('alertdialog', {
       name: 'Discard changes?',
     });
+    // A scrim press starts and ends on the dialog itself.
+    fireEvent.pointerDown(discard);
+    fireEvent.pointerUp(discard);
     fireEvent.click(discard);
     await waitFor(() =>
       expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument(),

package/src/Schedule/__tests__/ScheduleEventPopover.a11y.chromium.spec.ts

@@ -443,38 +443,74 @@ test('long popover content scrolls from the keyboard: Tab reaches its named grou
       top: Math.round(element.scrollTop),
       max: element.scrollHeight - element.clientHeight,
     }));
-  // Keyboard scrolling is smooth, so each press is followed until the region
-  // settles; the key is pressed until a press no longer moves it.
-  const settle = async () => {
-    let last = -1;
-    for (let frame = 0; frame < 40; frame += 1) {
-      const {top} = await scroll();
-      if (top === last) {
-        return top;
-      }
-      last = top;
-      await page.waitForTimeout(50);
-    }
-    return last;
+  // Keyboard scrolling is smooth, and a busy browser can start it frames after
+  // the press, so each press is followed to the region's `scrollend`. A press
+  // that starts no scroll within 60 frames of its keydown is one that cannot
+  // move the region.
+  const press = async (key: string) => {
+    await region.evaluate(element => {
+      (window as unknown as {scrolled?: Promise<boolean>}).scrolled =
+        new Promise<boolean>(resolve => {
+          const listening = new AbortController();
+          const end = (scrolled: boolean) => {
+            listening.abort();
+            resolve(scrolled);
+          };
+          let started = false;
+          element.addEventListener(
+            'scroll',
+            () => {
+              started = true;
+            },
+            {signal: listening.signal},
+          );
+          element.addEventListener('scrollend', () => end(true), {
+            signal: listening.signal,
+          });
+          // The frames count from the key's own keydown, so a slow runner
+          // between this setup and the press does not use them up.
+          window.addEventListener(
+            'keydown',
+            () => {
+              let frames = 0;
+              const wait = () => {
+                if (started || listening.signal.aborted) {
+                  return;
+                }
+                frames += 1;
+                if (frames > 60) {
+                  end(false);
+                  return;
+                }
+                requestAnimationFrame(wait);
+              };
+              requestAnimationFrame(wait);
+            },
+            {capture: true, once: true, signal: listening.signal},
+          );
+        });
+    });
+    await page.keyboard.press(key);
+    return page.evaluate(
+      () => (window as unknown as {scrolled?: Promise<boolean>}).scrolled,
+    );
   };
-  const pressUntilStill = async (key: string) => {
-    let top = await settle();
+  // The key is pressed until the region reaches its end or a press no longer
+  // moves it.
+  const pressUntilEnd = async (key: string) => {
     for (let presses = 0; presses < 200; presses += 1) {
-      await page.keyboard.press(key);
-      const next = await settle();
-      if (next === top) {
+      const {top, max} = await scroll();
+      if (top >= max - 1 || !(await press(key))) {
         break;
       }
-      top = next;
     }
     return scroll();
   };
   const atStart = await scroll();
-  const afterPageDown = await pressUntilStill('PageDown');
-  await page.keyboard.press('Home');
-  await settle();
+  const afterPageDown = await pressUntilEnd('PageDown');
+  await press('Home');
   const afterHome = await scroll();
-  const afterArrowDown = await pressUntilStill('ArrowDown');
+  const afterArrowDown = await pressUntilEnd('ArrowDown');
   // The surface itself stays inside the viewport.
   const surface = await dialog.boundingBox();
   const viewportHeight = page.viewportSize()?.height ?? 0;

package/dist/InfoTip/InfoTip.d.ts

@@ -1,58 +0,0 @@
-/**
- * @file InfoTip.tsx
- * @input Uses React, stylex, Tooltip + Icon from @astryxdesign/core, color/spacing/radius/duration/ease tokens
- * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
- * @position Lab experiment (RFC meta/astryx#3349); core implementation consumed by index.ts
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/lab/src/InfoTip/InfoTip.doc.mjs (props table, features)
- * - /packages/lab/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
- * - /packages/lab/src/InfoTip/index.ts (exports if types change)
- */
-import { type ReactNode } from 'react';
-import { type IconSize } from '@astryxdesign/core/Icon';
-/**
- * Size of the info icon. Maps 1:1 to Icon sizes
- * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
- */
-export type InfoTipSize = IconSize;
-export interface InfoTipProps {
-    /**
-     * Content to display in the tooltip.
-     * Typically short, non-interactive text. Mirrors Tooltip's `content` prop.
-     */
-    content: ReactNode;
-    /**
-     * Accessible name for the trigger button.
-     * @default 'More information'
-     */
-    label?: string;
-    /**
-     * Size of the info icon.
-     * @default 'sm'
-     */
-    size?: InfoTipSize;
-}
-/**
- * An inline info-icon help affordance: a small "i" button that reveals a
- * tooltip on hover, keyboard focus, and tap. Use it next to labels, values,
- * and metrics for permission notes, metric definitions, and field help.
- *
- * The value over hand-composing Icon inside Tooltip is the pre-wired
- * accessible trigger: a real button with an aria-label, Tab-reachable,
- * tooltip on hover AND focus, and Escape dismissal.
- *
- * Composed entirely from core primitives (Tooltip + Icon); the info icon
- * resolves from the global icon registry, so themes can override it.
- *
- * @example
- * ```
- * <InfoTip content="Editors can change this field; viewers cannot." />
- * <InfoTip content="30-day rolling average." label="About this metric" />
- * ```
- */
-export declare function InfoTip({ content, label, size, }: InfoTipProps): ReactNode;
-export declare namespace InfoTip {
-    var displayName: string;
-}
-//# sourceMappingURL=InfoTip.d.ts.map

package/dist/InfoTip/InfoTip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InfoTip.d.ts","sourceRoot":"","sources":["../../src/InfoTip/InfoTip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AAW5D;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;AAEnC,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AA8BD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAA0B,EAC1B,IAAW,GACZ,EAAE,YAAY,GAAG,SAAS,CAqB1B;yBAzBe,OAAO"}

package/dist/InfoTip/InfoTip.js

@@ -1,94 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file InfoTip.tsx
- * @input Uses React, stylex, Tooltip + Icon from @astryxdesign/core, color/spacing/radius/duration/ease tokens
- * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
- * @position Lab experiment (RFC meta/astryx#3349); core implementation consumed by index.ts
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/lab/src/InfoTip/InfoTip.doc.mjs (props table, features)
- * - /packages/lab/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
- * - /packages/lab/src/InfoTip/index.ts (exports if types change)
- */
-import * as stylex from '@stylexjs/stylex';
-import { Icon } from '@astryxdesign/core/Icon';
-import { Tooltip } from '@astryxdesign/core/Tooltip';
-import '@astryxdesign/core/theme/tokens.stylex';
-import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
-import { focusOutlineStyles } from '@astryxdesign/core/utils';
-
-/**
- * Size of the info icon. Maps 1:1 to Icon sizes
- * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  trigger: {
-    k1xSpc: "x3nfvp2",
-    kGNEyG: "x6s0dn4",
-    kjj79g: "xl56j7k",
-    kXLuUW: "xxymvpz",
-    kmVPX3: "x12nba7r",
-    kogj98: "x1ghz6dp",
-    ksu8eU: "xng3xce",
-    kWkggS: "xjbqb8w",
-    kaIpWk: "xjspbzw",
-    kkrTdU: "x1ypdohk x16khyan",
-    kMwMTN: "xv9yike x10ue8fs",
-    k1ekBW: "xt3l3uh",
-    kIyJzY: "xuedmi6",
-    kAMwcw: "xlr8y92",
-    $$css: true
-  }
-};
-
-/**
- * An inline info-icon help affordance: a small "i" button that reveals a
- * tooltip on hover, keyboard focus, and tap. Use it next to labels, values,
- * and metrics for permission notes, metric definitions, and field help.
- *
- * The value over hand-composing Icon inside Tooltip is the pre-wired
- * accessible trigger: a real button with an aria-label, Tab-reachable,
- * tooltip on hover AND focus, and Escape dismissal.
- *
- * Composed entirely from core primitives (Tooltip + Icon); the info icon
- * resolves from the global icon registry, so themes can override it.
- *
- * @example
- * ```
- * <InfoTip content="Editors can change this field; viewers cannot." />
- * <InfoTip content="30-day rolling average." label="About this metric" />
- * ```
- */
-export function InfoTip({
-  content,
-  label = 'More information',
-  size = 'sm'
-}) {
-  // No local Escape handler: the trigger used to stopPropagation the press,
-  // which hid the tip but left the browser's close watcher to fire `cancel` on
-  // an enclosing Dialog, so one press took both (#5168). Tooltip's own entry in
-  // the shared dismissal stack takes it instead.
-  return /*#__PURE__*/_jsx(Tooltip, {
-    content: content
-    // The trigger is a real button, so Tooltip's `auto` touch rule would
-    // give the tap to the control and suppress the tooltip. Here the tooltip
-    // IS the control's only purpose, so the tap has to open it — otherwise
-    // an InfoTip's content is unreachable on a phone.
-    ,
-    touchTrigger: "tap",
-    children: /*#__PURE__*/_jsx("button", {
-      type: "button",
-      "aria-label": label,
-      ...stylex.props(focusOutlineStyles.focusVisible, styles.trigger),
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: "info",
-        size: size
-      })
-    })
-  });
-}
-InfoTip.displayName = 'InfoTip';

package/src/InfoTip/InfoTip.doc.mjs

@@ -1,100 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
-
-export const docs = {
-  name: 'InfoTip',
-  displayName: 'Info Tip',
-  category: 'Feedback & Status',
-  keywords: ["info","tooltip","help","hint","affordance","icon","label","field","metric","definition"],
-  props: [
-    {
-      name: 'content',
-      type: 'ReactNode',
-      description: 'Content to display in the tooltip. Typically short, non-interactive text. Mirrors Tooltip\'s content prop.',
-      required: true,
-    },
-    {
-      name: 'label',
-      type: 'string',
-      description: 'Accessible name for the trigger button.',
-      default: "'More information'",
-    },
-    {
-      name: 'size',
-      type: "'xsm' | 'sm' | 'md' | 'lg'",
-      description: 'Size of the info icon (12px, 16px, 20px, 24px). Maps 1:1 to Icon sizes.',
-      default: "'sm'",
-    },
-  ],
-  usage: {
-    description:
-      'An inline info-icon help affordance: a small "i" button that reveals a tooltip on hover, keyboard focus, and tap. Use it next to labels, values, and metrics for permission notes, metric definitions, and field help. Its value over hand-composing Icon inside Tooltip is the pre-wired accessible trigger: a real button with an aria-label, Tab-reachable, tooltip on hover AND focus AND tap, and Escape dismissal.',
-    bestPractices: [
-      { guidance: true, description: 'Keep tooltip content concise, plain, and non-interactive; use Popover or HoverCard for links and buttons.' },
-      { guidance: true, description: 'Override label when "More information" is too generic, e.g. "About this metric".' },
-      { guidance: true, description: 'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip touchTrigger to tap, so a tap opens the tooltip even though the trigger is a button, and a tap outside dismisses it.' },
-      { guidance: false, description: 'Hand-compose Icon inside Tooltip for info affordances; the bare Icon is aria-hidden and unfocusable, so keyboard and screen-reader users never see it.' },
-      { guidance: false, description: 'Use InfoTip for essential information users must see to complete a task; put that text inline instead.' },
-    ],
-  },
-};
-
-/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
-export const docsZh = {
-  name: 'InfoTip',
-  displayName: 'Info Tip',
-  props: [
-    {
-      name: 'content',
-      type: 'ReactNode',
-      description: '工具提示中显示的内容。通常为简短的非交互文本。与 Tooltip 的 content 属性一致。',
-      required: true,
-    },
-    {
-      name: 'label',
-      type: 'string',
-      description: '触发按钮的无障碍名称。',
-      default: "'More information'",
-    },
-    {
-      name: 'size',
-      type: "'xsm' | 'sm' | 'md' | 'lg'",
-      description: '信息图标的尺寸（12px、16px、20px、24px）。与 Icon 尺寸一一对应。',
-      default: "'sm'",
-    },
-  ],
-  usage: {
-    description:
-      'An inline info-icon help affordance: a small "i" button that reveals a tooltip on hover, keyboard focus, and tap. Use it next to labels, values, and metrics for permission notes, metric definitions, and field help.',
-    bestPractices: [
-      { guidance: true, description: 'Keep tooltip content concise, plain, and non-interactive; use Popover or HoverCard for links and buttons.' },
-      { guidance: true, description: 'Override label when "More information" is too generic, e.g. "About this metric".' },
-      { guidance: true, description: 'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip touchTrigger to tap, so a tap opens the tooltip even though the trigger is a button, and a tap outside dismisses it.' },
-      { guidance: false, description: 'Hand-compose Icon inside Tooltip for info affordances; the bare Icon is aria-hidden and unfocusable, so keyboard and screen-reader users never see it.' },
-      { guidance: false, description: 'Use InfoTip for essential information users must see to complete a task; put that text inline instead.' },
-    ],
-  },
-};
-
-/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
-export const docsDense = {
-  description:
-    'Inline info-icon help affordance: accessible "i" button trigger pre-wired into a Tooltip.',
-  usage: {
-    description:
-      'A small "i" button that reveals a tooltip on hover, keyboard focus, and tap. Use next to labels, values, and metrics for permission notes, metric definitions, and field help. Pre-wired accessible trigger: real button, aria-label, Tab-reachable, tooltip on hover AND focus AND tap, Escape dismissal.',
-    bestPractices: [
-      { guidance: true, description: 'Keep tooltip content concise, plain, and non-interactive; use Popover or HoverCard for links and buttons.' },
-      { guidance: true, description: 'Override label when "More information" is too generic, e.g. "About this metric".' },
-      { guidance: true, description: 'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip touchTrigger to tap, so a tap opens the tooltip even though the trigger is a button, and a tap outside dismisses it.' },
-      { guidance: false, description: 'Hand-compose Icon inside Tooltip for info affordances; the bare Icon is aria-hidden and unfocusable.' },
-      { guidance: false, description: 'Use InfoTip for essential information users must see to complete a task; put that text inline instead.' },
-    ],
-  },
-  propDescriptions: {
-    content: 'Tooltip content. Short, non-interactive text. Mirrors Tooltip content prop.',
-    label: "Accessible name for the trigger button. Default 'More information'.",
-    size: 'Info icon size (12/16/20/24px). Maps 1:1 to Icon sizes.',
-  },
-};

package/src/InfoTip/InfoTip.tsx

@@ -1,128 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file InfoTip.tsx
- * @input Uses React, stylex, Tooltip + Icon from @astryxdesign/core, color/spacing/radius/duration/ease tokens
- * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
- * @position Lab experiment (RFC meta/astryx#3349); core implementation consumed by index.ts
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/lab/src/InfoTip/InfoTip.doc.mjs (props table, features)
- * - /packages/lab/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
- * - /packages/lab/src/InfoTip/index.ts (exports if types change)
- */
-
-import {type ReactNode} from 'react';
-import * as stylex from '@stylexjs/stylex';
-
-import {Icon, type IconSize} from '@astryxdesign/core/Icon';
-import {Tooltip} from '@astryxdesign/core/Tooltip';
-import {
-  colorVars,
-  durationVars,
-  easeVars,
-  radiusVars,
-  spacingVars,
-} from '@astryxdesign/core/theme/tokens.stylex';
-import {focusOutlineStyles} from '@astryxdesign/core/utils';
-
-/**
- * Size of the info icon. Maps 1:1 to Icon sizes
- * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
- */
-export type InfoTipSize = IconSize;
-
-export interface InfoTipProps {
-  /**
-   * Content to display in the tooltip.
-   * Typically short, non-interactive text. Mirrors Tooltip's `content` prop.
-   */
-  content: ReactNode;
-  /**
-   * Accessible name for the trigger button.
-   * @default 'More information'
-   */
-  label?: string;
-  /**
-   * Size of the info icon.
-   * @default 'sm'
-   */
-  size?: InfoTipSize;
-}
-
-const styles = stylex.create({
-  trigger: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    verticalAlign: 'middle',
-    padding: spacingVars['--spacing-0-5'],
-    margin: 0,
-    borderStyle: 'none',
-    backgroundColor: 'transparent',
-    borderRadius: radiusVars['--radius-full'],
-    cursor: {
-      default: 'pointer',
-      ':is(:disabled,[aria-disabled="true"])': 'default',
-    },
-    color: {
-      default: colorVars['--color-icon-secondary'],
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        default: null,
-        '@media (hover: hover)': colorVars['--color-icon-primary'],
-      },
-    },
-    transitionProperty: 'color',
-    transitionDuration: durationVars['--duration-fast'],
-    transitionTimingFunction: easeVars['--ease-standard'],
-  },
-});
-
-/**
- * An inline info-icon help affordance: a small "i" button that reveals a
- * tooltip on hover, keyboard focus, and tap. Use it next to labels, values,
- * and metrics for permission notes, metric definitions, and field help.
- *
- * The value over hand-composing Icon inside Tooltip is the pre-wired
- * accessible trigger: a real button with an aria-label, Tab-reachable,
- * tooltip on hover AND focus, and Escape dismissal.
- *
- * Composed entirely from core primitives (Tooltip + Icon); the info icon
- * resolves from the global icon registry, so themes can override it.
- *
- * @example
- * ```
- * <InfoTip content="Editors can change this field; viewers cannot." />
- * <InfoTip content="30-day rolling average." label="About this metric" />
- * ```
- */
-export function InfoTip({
-  content,
-  label = 'More information',
-  size = 'sm',
-}: InfoTipProps): ReactNode {
-  // No local Escape handler: the trigger used to stopPropagation the press,
-  // which hid the tip but left the browser's close watcher to fire `cancel` on
-  // an enclosing Dialog, so one press took both (#5168). Tooltip's own entry in
-  // the shared dismissal stack takes it instead.
-  return (
-    <Tooltip
-      content={content}
-      // The trigger is a real button, so Tooltip's `auto` touch rule would
-      // give the tap to the control and suppress the tooltip. Here the tooltip
-      // IS the control's only purpose, so the tap has to open it — otherwise
-      // an InfoTip's content is unreachable on a phone.
-      touchTrigger="tap">
-      <button
-        type="button"
-        aria-label={label}
-        {...stylex.props(focusOutlineStyles.focusVisible, styles.trigger)}>
-        <Icon icon="info" size={size} />
-      </button>
-    </Tooltip>
-  );
-}
-
-InfoTip.displayName = 'InfoTip';