@astryxdesign/core 0.2.0 → 0.3.0

package/src/__tests__/forcedColors.ts

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

package/src/__tests__/inputWidthContract.test.tsx

@@ -43,7 +43,14 @@ const inputDocsSuite = [
 describe('Input Family width Prop Contract (#4163)', () => {
   inputDocsSuite.forEach(({name, docs}) => {
     it(`documents the width prop for ${name}`, () => {
-      const propsList = (docs.props || docs.components?.[0]?.props) as {
+      // `docs` is the ComponentDoc union (single vs multi component); narrow it
+      // for structural access to either the top-level props or the first
+      // sub-component's props.
+      const doc = docs as {
+        props?: {name: string; type: string}[];
+        components?: {props?: {name: string; type: string}[]}[];
+      };
+      const propsList = (doc.props || doc.components?.[0]?.props) as {
         name: string;
         type: string;
       }[];

package/src/doc-mjs.d.ts

@@ -11,9 +11,12 @@
  */
 
 declare module '*.doc.mjs' {
-  import type {ComponentDoc, TranslationDoc} from './docs-types';
+  import type {
+    ComponentDoc,
+    ComponentTranslationDoc,
+  } from '@astryxdesign/cli/authoring';
 
   export const docs: ComponentDoc;
   export const docsZh: ComponentDoc;
-  export const docsDense: TranslationDoc;
+  export const docsDense: ComponentTranslationDoc;
 }

package/src/docPropLiterals.test.ts

@@ -11,7 +11,7 @@
  * without revealing what may be written into it. Readers without an IDE —
  * agents especially — then guess: `gap={16}` (pixels, not a scale step),
  * `direction: 'desc'` (the type says `'descending'`). Both fail to compile.
- * `PropDoc.type` in docs-types.ts already asks for inlined unions
+ * `ComponentPropDoc.type` in docs-types.ts already asks for inlined unions
  * (`"'primary' | 'secondary' | 'ghost'"`); this test holds docs to it.
  *
  * Two ways a doc prop can hide values, checked at different strictness:

package/src/docPropReferences.test.ts

@@ -30,7 +30,7 @@ type DocModule = {
 };
 
 /**
- * Props intentionally omitted from doc props[]: PropDoc in docs-types.ts
+ * Props intentionally omitted from doc props[]: ComponentPropDoc in docs-types.ts
  * says to skip internal/styling props, so prose may reference them even
  * though no doc lists them.
  */

package/src/hooks/containerReveal.pool.stylex.ts

@@ -0,0 +1,571 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file containerReveal.pool.stylex.ts
+ * @input Uses StyleX, theme tokens
+ * @output A fixed pool of scoped markers, each paired with its reveal style
+ *   blocks (reveal / conceal, each with a layout-preserved variant) compiled
+ *   against that marker.
+ * @position Internal to useContainerReveal. GENERATED by
+ *   scripts/gen-container-reveal-pool.mjs — do not edit by hand.
+ *
+ * WHY A POOL: `stylex.when.ancestor(':hover', marker)` welds the marker's
+ * class into the compiled selector (`.marker:hover *`), so a marker and the
+ * styles referencing it are inseparable at compile time. A single shared
+ * marker would leak hover/focus across NESTED reveal containers (an ancestor
+ * container's `:hover` matches a descendant container's revealed content).
+ * Pre-declaring N markers lets useContainerReveal hand each concurrently
+ * mounted container a distinct marker (free-list in useContainerReveal),
+ * isolating nested containers without the caller authoring any StyleX.
+ *
+ * SYNC: When the block shape changes, edit
+ * scripts/gen-container-reveal-pool.mjs and useContainerReveal.ts, then
+ * regenerate (node scripts/gen-container-reveal-pool.mjs) and commit.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import {durationVars, easeVars} from '../theme/tokens.stylex';
+
+export const POOL_SIZE = 6;
+
+export const m0 = stylex.defineMarker();
+const s0 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
+  reveal: {
+    transitionProperty: 'opacity, position',
+    transitionDuration: {
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m0)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m0)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m0)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m0)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+export const m1 = stylex.defineMarker();
+const s1 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
+  reveal: {
+    transitionProperty: 'opacity, position',
+    transitionDuration: {
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m1)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m1)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m1)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m1)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+export const m2 = stylex.defineMarker();
+const s2 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
+  reveal: {
+    transitionProperty: 'opacity, position',
+    transitionDuration: {
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m2)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m2)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m2)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m2)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+export const m3 = stylex.defineMarker();
+const s3 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
+  reveal: {
+    transitionProperty: 'opacity, position',
+    transitionDuration: {
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m3)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m3)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m3)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m3)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+export const m4 = stylex.defineMarker();
+const s4 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
+  reveal: {
+    transitionProperty: 'opacity, position',
+    transitionDuration: {
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m4)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m4)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m4)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m4)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+export const m5 = stylex.defineMarker();
+const s5 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
+  reveal: {
+    transitionProperty: 'opacity, position',
+    transitionDuration: {
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m5)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m5)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m5)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m5)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+// The compiled StyleX style objects carry `when.ancestor` conditionals that
+// the public `StyleXStyles` type does not model, so the slot shape is inferred
+// from the generated blocks rather than annotated.
+export const POOL = [
+  {
+    marker: m0,
+    reveal: s0.reveal,
+    revealLayoutPreserved: s0.revealLayoutPreserved,
+    conceal: s0.conceal,
+    concealLayoutPreserved: s0.concealLayoutPreserved,
+  },
+  {
+    marker: m1,
+    reveal: s1.reveal,
+    revealLayoutPreserved: s1.revealLayoutPreserved,
+    conceal: s1.conceal,
+    concealLayoutPreserved: s1.concealLayoutPreserved,
+  },
+  {
+    marker: m2,
+    reveal: s2.reveal,
+    revealLayoutPreserved: s2.revealLayoutPreserved,
+    conceal: s2.conceal,
+    concealLayoutPreserved: s2.concealLayoutPreserved,
+  },
+  {
+    marker: m3,
+    reveal: s3.reveal,
+    revealLayoutPreserved: s3.revealLayoutPreserved,
+    conceal: s3.conceal,
+    concealLayoutPreserved: s3.concealLayoutPreserved,
+  },
+  {
+    marker: m4,
+    reveal: s4.reveal,
+    revealLayoutPreserved: s4.revealLayoutPreserved,
+    conceal: s4.conceal,
+    concealLayoutPreserved: s4.concealLayoutPreserved,
+  },
+  {
+    marker: m5,
+    reveal: s5.reveal,
+    revealLayoutPreserved: s5.revealLayoutPreserved,
+    conceal: s5.conceal,
+    concealLayoutPreserved: s5.concealLayoutPreserved,
+  },
+] as const;
+
+export type RevealSlot = (typeof POOL)[number];