@astryxdesign/core 0.7.2-canary.fe2c655 → 0.7.2

package/src/TreeList/TreeListItem.tsx

@@ -14,7 +14,7 @@
  * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 
-import {useId, useMemo, type ReactNode} from 'react';
+import {useId, useMemo, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -27,6 +27,10 @@ import {
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
+import {
+  hasInteractiveAncestor,
+  useClickableContainer,
+} from '../hooks/useClickableContainer';
 import {Icon} from '../Icon';
 import {mergeProps} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
@@ -46,6 +50,13 @@ const styles = stylex.create({
     padding: 0,
     position: 'relative',
     width: '100%',
+    // Publish whether THIS treeitem has keyboard focus, for its row's
+    // `zIndex` (see `contentWrapper`). Every nested <li> redeclares the
+    // default, so a focused ancestor never lifts its descendants' rows.
+    '--_tree-focus-z': {
+      default: 'auto',
+      ':focus-visible': '2',
+    },
     // The treeitem row is the roving-tabindex focus owner; suppress the
     // native focus ring in favor of the row's :focus-visible outline below.
     outline: 'none',
@@ -82,6 +93,9 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     gap: spacingVars['--spacing-2'],
+    // The row's own inline padding only. The per-level indent lives on
+    // `indentedContent` inside it, so a theme or caller padding here composes
+    // with the indent instead of replacing it.
     paddingInline: spacingVars['--spacing-2'],
     // No `outline: 'none'` here: this element receives the shared focus ring,
     // which already defaults to none, and the shorthand would erase it.
@@ -89,12 +103,38 @@ const styles = stylex.create({
     position: 'relative',
     boxSizing: 'border-box',
     textAlign: 'start',
-    // Per-level indent. Declared here (not inline) so it lives in
-    // `@layer astryx-base` and the theme layer can override it in normal
-    // cascade order — an inline longhand would outrank every layer. The row
-    // publishes only the computed distance as `--_tree-indent`; the per-level
-    // step is the public `--tree-list-indent` lever (see TreeList `root`).
-    marginInlineStart: 'var(--_tree-indent, 0px)',
+  },
+  // Guide lines draw above the rows (TreeListBranches) so a row's fill does
+  // not break them. Lift the row whose focus ring is showing above the guides
+  // too, so no guide cuts through the ring: when focus is inside the row, or
+  // when its own treeitem publishes focus (`--_tree-focus-z` on `wrapper`).
+  // The ring is the row's outline, so it cannot be lifted on its own: a
+  // focused row that is also filled (selected or hovered) covers the guides at
+  // that row. That is the accepted trade-off (DD3). Applied only with
+  // `focusWithinOrPublished`, the rows that draw the ring: a plain row shows
+  // no ring, so its fill stays under the guides.
+  focusLift: {
+    zIndex: {
+      default: 'var(--_tree-focus-z, auto)',
+      ':has(:focus-visible)': 2,
+    },
+  },
+  // Per-level indent, drawn INSIDE the row box: the row (`contentWrapper`)
+  // stays full width, so a nested row's hover and selected fill spans the
+  // list like a root row's, while its content sits exactly where a margin
+  // indent would put it. A child of the row rather than the row's own padding,
+  // so a theme or caller that sets the row's padding keeps the indent. It
+  // inherits the row's flex alignment and gap, so a theme that retunes those
+  // on `tree-list-item` still lays the content out. The row publishes only the
+  // computed distance as `--_tree-indent`; the per-level step is the public,
+  // themeable `--tree-list-indent` lever (see TreeList `root`).
+  indentedContent: {
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+    alignItems: 'inherit',
+    gap: 'inherit',
+    paddingInlineStart: 'var(--_tree-indent, 0px)',
   },
   interactive: {
     cursor: {
@@ -369,6 +409,7 @@ export function TreeListItem({
   const labelId = useId();
   const descriptionId = useId();
   const LinkComponent = useLinkComponent();
+  const linkRef = useRef<HTMLAnchorElement>(null);
   const isInteractive = onClick != null || href != null;
 
   const handleToggle = useMemo(
@@ -388,8 +429,10 @@ export function TreeListItem({
         if (isDisabled) {
           return;
         }
-        const el = e.target as HTMLElement;
-        if (el.closest('button, a, input, select, textarea')) {
+        // Controls inside the row, native or role-based, keep their own
+        // activation (FR7): the same rule link rows get from the shared
+        // enlarged-surface hook below.
+        if (hasInteractiveAncestor(e.target as Element, e.currentTarget)) {
           return;
         }
         if (onClick != null) {
@@ -402,6 +445,34 @@ export function TreeListItem({
     return undefined;
   }, [onClick, hasChildren, onToggle, id, isDisabled]);
 
+  // A link row (an `href` and no other row action) is an enlarged surface for
+  // its link: the indent is part of the row, so a click anywhere in it must
+  // follow the link, as Enter already does. Built on the shared
+  // enlarged-surface hook (family:navigation-destinations), which skips
+  // clicks on nested controls, native or role-based, and text selections.
+  // - Clicks are delegated: the hook re-dispatches the click on the anchor
+  //   with its modifier keys, so the link component and the browser handle
+  //   same-tab, new-tab and new-window activation, and stops the original, so
+  //   ancestors see one click per press.
+  // - Middle-click has no synthetic equivalent, so it takes the hook's href
+  //   path, which opens the destination in a new tab after the shared
+  //   navigation rule.
+  // The container ref is attached to link rows only, so every other row stays
+  // a plain element and both hook instances stay inert on it.
+  const forwardsToLink = href != null && handleClick == null;
+  const linkRowRef = useRef<HTMLDivElement>(null);
+  const {onClick: delegateToLink} = useClickableContainer({
+    containerRef: linkRowRef,
+    interactiveRef: linkRef,
+    disabled: isDisabled || !forwardsToLink,
+  });
+  const {onMouseUp: openLinkOnMiddleClick} = useClickableContainer({
+    containerRef: linkRowRef,
+    href,
+    target,
+    disabled: isDisabled || !forwardsToLink,
+  });
+
   // Per-level indent distance. The per-level step is the public, themeable
   // `--tree-list-indent` lever (default `--spacing-4`, set on the tree-list
   // root). A leaf adds a fixed chevron-column offset (chevron width + gap) so
@@ -411,8 +482,8 @@ export function TreeListItem({
   // every row sits flush, like a parent at that level. That offset is tied to
   // the chevron's own dimensions, not the indent step, so it does not scale
   // with the lever. Published as the private `--_tree-indent` and consumed by
-  // `contentWrapper`'s stylesheet `margin-inline-start` (kept out of the inline
-  // style so the theme layer can override it — see #4308).
+  // `indentedContent`'s stylesheet `padding-inline-start`; the step stays
+  // themeable through `--tree-list-indent` (see #4308).
   const reservesChevronColumn = !hasChildren && hasExpandableItems;
   const indentDistance = reservesChevronColumn
     ? `calc(${nestedLevel} * var(--tree-list-indent) + ${spacingVars['--spacing-4']} + ${spacingVars['--spacing-2']})`
@@ -521,6 +592,7 @@ export function TreeListItem({
       )}
       {href != null ? (
         <LinkComponent
+          ref={linkRef}
           href={href}
           target={target}
           aria-disabled={isDisabled || undefined}
@@ -599,6 +671,7 @@ export function TreeListItem({
             isInteractive || (hasChildren && onClick == null)
               ? focusOutlineProps.focusWithinOrPublished(
                   styles.contentWrapper,
+                  styles.focusLift,
                   densityStyles[density],
                   styles.interactive,
                   interactionOverlayStyles.backgroundImage,
@@ -620,8 +693,10 @@ export function TreeListItem({
             className,
             {...indentStyle, ...style},
           )}
-          onClick={handleClick}>
-          {innerContent}
+          ref={forwardsToLink ? linkRowRef : undefined}
+          onClick={forwardsToLink ? delegateToLink : handleClick}
+          onMouseUp={forwardsToLink ? openLinkOnMiddleClick : undefined}>
+          <div {...stylex.props(styles.indentedContent)}>{innerContent}</div>
         </div>
       </div>
       {isExpanded && renderedChildren != null && (

package/src/docPropLiterals.test.ts

@@ -3,7 +3,8 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 /**
  * @file Guards doc prop types against opaque named unions (#1645).
- * @input Every {Name}.doc.mjs plus the TypeScript sources they describe.
+ * @input Every {Name}.doc.mjs plus the TypeScript sources they describe,
+ *   including same-file private aliases used by exported literal unions.
  * @output Fails when a documented prop type hides its legal literal values.
  * @position Repo-wide doc-shape guard, sibling of docPropReferences.test.ts.
  *
@@ -188,18 +189,34 @@ for (const file of findFiles(SRC_DIR, ['.ts', '.tsx'])) {
   // markers the comment-stripped `src` has already removed.
   const rawTypeRhs = new Map<string, string>();
   for (const m of raw.matchAll(
-    /export type ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
+    /\btype ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
   )) {
     rawTypeRhs.set(m[1], m[2]);
   }
-  for (const m of src.matchAll(
-    /export type ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
-  )) {
-    const [, name, rhsRaw] = m;
-    const rhs = rhsRaw.replace(/\s+/g, ' ').trim();
-    if (LITERAL_UNION.test(rhs)) {
+  const declarations = [
+    ...src.matchAll(
+      /\b(export )?type ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
+    ),
+  ];
+  // Resolve same-file literal aliases before registering exported types.
+  // Repeat until no new literal unions are found.
+  const fileLiterals = new Map<string, string>();
+  let previousSize: number;
+  do {
+    previousSize = fileLiterals.size;
+    for (const [, , name, rhsRaw] of declarations) {
+      const rhs = rhsRaw
+        .replace(/\s+/g, ' ')
+        .trim()
+        .split('|')
+        .map(part => fileLiterals.get(part.trim()) ?? part.trim())
+        .join(' | ');
+
+      if (!LITERAL_UNION.test(rhs)) {
+        continue;
+      }
       const deprecated = deprecatedLiteralMembers(rawTypeRhs.get(name) ?? '');
-      literalUnions.set(
+      fileLiterals.set(
         name,
         rhs
           .replace(/^\|\s*/, '')
@@ -209,8 +226,17 @@ for (const file of findFiles(SRC_DIR, ['.ts', '.tsx'])) {
           .filter(member => !deprecated.has(member))
           .join(' | '),
       );
+    }
+  } while (fileLiterals.size !== previousSize);
+  for (const [, exported, name, rhsRaw] of declarations) {
+    if (!exported) {
+      continue;
+    }
+    const literals = fileLiterals.get(name);
+    if (literals !== undefined) {
+      literalUnions.set(name, literals);
     } else {
-      namedBodies.set(name, rhs);
+      namedBodies.set(name, rhsRaw.replace(/\s+/g, ' ').trim());
     }
   }
   for (const m of src.matchAll(

package/src/hooks/useMenuHover.ts

@@ -230,19 +230,6 @@ export function useMenuHover<T extends HTMLElement = HTMLElement>(
   const hoverOpenedAtRef = useRef(0);
   const prevIsOpenRef = useRef(isOpen);
 
-  // Catches every close, whatever caused it. A layout effect, not render: it
-  // must land before the browser hit-tests the vanished panel and fires the
-  // mouseenter REOPEN_SUPPRESS_MS exists to swallow.
-  useIsomorphicLayoutEffect(() => {
-    const wasOpen = prevIsOpenRef.current;
-    prevIsOpenRef.current = isOpen;
-    if (wasOpen && !isOpen) {
-      hoverModeRef.current = false;
-      hoverOpenedAtRef.current = 0;
-      closedAtRef.current = Date.now();
-    }
-  }, [isOpen]);
-
   const clearTimeouts = useCallback(() => {
     if (showTimerRef.current) {
       clearTimeout(showTimerRef.current);
@@ -256,6 +243,24 @@ export function useMenuHover<T extends HTMLElement = HTMLElement>(
     safeTriangleCleanupRef.current = null;
   }, []);
 
+  // Catches every close, whatever caused it. A layout effect, not render: it
+  // must land before the browser hit-tests the vanished panel and fires the
+  // mouseenter REOPEN_SUPPRESS_MS exists to swallow.
+  useIsomorphicLayoutEffect(() => {
+    const wasOpen = prevIsOpenRef.current;
+    prevIsOpenRef.current = isOpen;
+    if (wasOpen && !isOpen) {
+      // A hover-open scheduled before the close must not fire afterwards and
+      // reopen what just closed from elsewhere — e.g. the root menu's light
+      // dismiss closing a submenu flyout mid hover-intent (#6893). A fresh
+      // mouseenter still opens; only the stale timer is cancelled.
+      clearTimeouts();
+      hoverModeRef.current = false;
+      hoverOpenedAtRef.current = 0;
+      closedAtRef.current = Date.now();
+    }
+  }, [isOpen, clearTimeouts]);
+
   // useListFocus needs an onEscape that is defined in terms of its own listRef;
   // the indirection avoids the use-before-declare.
   const escapeHandlerRef = useRef<() => void>(() => {});

package/src/postinstall.test.mjs

@@ -11,17 +11,22 @@
  */
 
 import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+import {spawnSync} from 'node:child_process';
 import * as fs from 'node:fs';
 import * as os from 'node:os';
 import * as path from 'node:path';
+import {fileURLToPath} from 'node:url';
 // Core's own package-local contract copy — what actually runs at install time.
 import {
   isAstryxInitialized,
+  isAstryxPromptInReach,
   shouldNudge,
   AGENT_DOC_PATHS,
   INIT_MARKERS,
   SETUP_NUDGE,
+  setupNudge,
 } from '../scripts/agent-doc-state.mjs';
+import {cliInvocation} from '../scripts/postinstall.mjs';
 // Dev-only, monorepo-relative: core must not depend on the CLI at runtime (the
 // CLI peer-depends on core), but the test can read the source and the generator.
 import * as cliLeaf from '../../cli/foundation/agent-docs/agent-doc-state.mjs';
@@ -92,12 +97,58 @@ describe('core postinstall — one authoritative source, no drift', () => {
     expect(AGENT_DOC_PATHS).toEqual(cliLeaf.AGENT_DOC_PATHS);
     expect(INIT_MARKERS).toEqual(cliLeaf.INIT_MARKERS);
     expect(SETUP_NUDGE).toBe(cliLeaf.SETUP_NUDGE);
+    expect(setupNudge('pnpm exec astryx')).toBe(
+      cliLeaf.setupNudge('pnpm exec astryx'),
+    );
   });
 
   it('agrees with the CLI leaf on a real project', () => {
     write('AGENTS.md', `# doc\n${MARKER}\nbody`);
     expect(isAstryxInitialized(tmp)).toBe(cliLeaf.isAstryxInitialized(tmp));
   });
+
+  it('agrees with the CLI leaf on a monorepo package', () => {
+    fs.mkdirSync(path.join(tmp, '.git'));
+    write('AGENTS.md', MARKER);
+    write('packages/app/package.json', '{"name":"app"}');
+    const app = path.join(tmp, 'packages/app');
+    expect(isAstryxPromptInReach(app)).toBe(true);
+    expect(isAstryxPromptInReach(app)).toBe(cliLeaf.isAstryxPromptInReach(app));
+  });
+});
+
+// Install time, end to end: core's real script and its contract copy, installed
+// under a monorepo's node_modules, run the way npm runs them for a package.
+describe('core postinstall — inside a monorepo package', () => {
+  const CORE = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+  const install = () => {
+    const installed = path.join(tmp, 'node_modules/@astryxdesign/core/scripts');
+    fs.mkdirSync(installed, {recursive: true});
+    for (const file of ['postinstall.mjs', 'agent-doc-state.mjs']) {
+      fs.copyFileSync(path.join(CORE, 'scripts', file), path.join(installed, file));
+    }
+    return spawnSync(process.execPath, [path.join(installed, 'postinstall.mjs')], {
+      env: {...process.env, INIT_CWD: path.join(tmp, 'packages/app'), npm_command: 'install'},
+      encoding: 'utf8',
+    });
+  };
+  beforeEach(() => {
+    fs.mkdirSync(path.join(tmp, '.git'));
+    write('packages/app/package.json', '{"name":"app"}');
+  });
+
+  it('stays quiet when init ran at the repository root', () => {
+    write('AGENTS.md', MARKER);
+    const r = install();
+    expect(r.status).toBe(0);
+    expect(r.stdout).toBe('');
+  });
+
+  it('still nudges when no folder up to the repository root ran init', () => {
+    const r = install();
+    expect(r.status).toBe(0);
+    expect(r.stdout).toMatch(/finish setup and install the Astryx agent prompt/);
+  });
 });
 
 describe('core postinstall — shouldNudge', () => {
@@ -135,3 +186,31 @@ describe('core postinstall — shouldNudge', () => {
     }
   });
 });
+
+describe('core postinstall — the nudge names the command the CLI would print', () => {
+  it('words the nudge around the stem it is given', () => {
+    expect(setupNudge('pnpm exec astryx')).toContain(
+      'run `pnpm exec astryx init` to finish setup',
+    );
+    expect(SETUP_NUDGE).toContain('run `npx @astryxdesign/cli init`');
+  });
+
+  it("asks the project's installed CLI for its stem", async () => {
+    write('package.json', '{"name":"app"}');
+    write('pnpm-lock.yaml', '');
+    write('node_modules/.bin/astryx', '');
+    fs.mkdirSync(path.join(tmp, 'node_modules/@astryxdesign'), {
+      recursive: true,
+    });
+    fs.symlinkSync(
+      path.resolve(import.meta.dirname, '../../cli'),
+      path.join(tmp, 'node_modules/@astryxdesign/cli'),
+    );
+    expect(await cliInvocation(tmp)).toBe('pnpm exec astryx');
+  });
+
+  it('has no stem to offer when the CLI is not installed', async () => {
+    write('package.json', '{"name":"app"}');
+    expect(await cliInvocation(tmp)).toBeUndefined();
+  });
+});

package/src/reset.a11y.chromium.spec.ts

@@ -4,7 +4,8 @@
  * @file reset.a11y.chromium.spec.ts
  * @input packages/core/src/reset.css, alone on a blank Chromium page
  * @output Browser evidence that the reset reaches ::before, ::after,
- *   ::placeholder and the search field's cancel button
+ *   ::placeholder, the search field's cancel button and the dropdown marker
+ *   of a field with a list
  * @position reset.css integration proof. A pseudo-element inside :where() is
  *   invalid, and the forgiving list drops it without an error, so only a
  *   shipping engine shows which of the reset's rules still match.
@@ -13,6 +14,8 @@
 import * as fs from 'node:fs';
 import {fileURLToPath} from 'node:url';
 import {expect, test, type Page} from '@playwright/test';
+// @ts-expect-error -- pngjs ships no declarations; runtime support is pinned.
+import {PNG} from 'pngjs';
 
 const RESET_CSS = fs.readFileSync(
   fileURLToPath(new URL('./reset.css', import.meta.url)),
@@ -154,6 +157,54 @@ test('a search field has no cancel button to clear it', async ({page}) => {
   await expect(query).toHaveValue('query');
 });
 
+test('the dropdown marker of a field with a list sits in its middle', async ({
+  page,
+}) => {
+  // Chromium shows the marker while the pointer is over the field and draws
+  // it as a glyph set on the field's line-height, the 1.5 the reset inherits.
+  await page.evaluate(() => {
+    const field = document.createElement('input');
+    field.id = 'fruit';
+    field.setAttribute('list', 'fruits');
+    const options = document.createElement('datalist');
+    options.id = 'fruits';
+    options.append(new Option('Apple'));
+    document.body.append(field, options);
+  });
+  await page.addStyleTag({
+    content: `
+      #fruit {
+        display: block;
+        width: 240px;
+        padding: 7px 11px;
+        border: 1px solid;
+        line-height: 1.5;
+      }
+    `,
+  });
+  const field = page.locator('#fruit');
+  await field.hover();
+  const png = PNG.sync.read(await field.screenshot({caret: 'hide'}));
+  // The marker is the only ink in the field's last 32px, inside the border.
+  const inkRows: number[] = [];
+  for (let y = 2; y < png.height - 2; y++) {
+    for (let x = png.width - 32; x < png.width - 2; x++) {
+      const offset = (y * png.width + x) * 4;
+      const luminance =
+        (png.data[offset] + png.data[offset + 1] + png.data[offset + 2]) / 3;
+      if (luminance < 160) {
+        inkRows.push(y);
+        break;
+      }
+    }
+  }
+  expect(inkRows.length, 'the hovered field shows its marker').toBeGreaterThan(
+    0,
+  );
+  const markerMiddle = (inkRows[0] + inkRows[inkRows.length - 1] + 1) / 2;
+  expect(Math.abs(markerMiddle - png.height / 2)).toBeLessThanOrEqual(1);
+});
+
 test('a later layer and an unlayered rule still override the reset', async ({
   page,
 }) => {

package/src/reset.css

@@ -203,35 +203,6 @@
     height: auto;
   }
 
-  /* ===========================================================================
-     AspectRatio Fit Baseline
-     =========================================================================== */
-
-  /*
-   * Child sizing for AspectRatio's `fit` prop — the component marks the
-   * child's direct parent with `data-astryx-aspect-ratio-override` (carrying
-   * the fit value), and these direct-child rules size the child, so
-   * consumers don't hand-write width/height/object-fit on every media child.
-   * The marker sits on the parent itself, so the rules don't depend on
-   * AspectRatio's internal element structure or its theming surface. As with
-   * the [data-astryx-media] baseline below, the rules are zero-specificity
-   * and any styling the child sets itself still wins. `fit="center"` needs
-   * no rules here — the component centers the child from its own wrapper.
-   */
-  :where([data-astryx-aspect-ratio-override="cover"], [data-astryx-aspect-ratio-override="contain"])
-    > :where(*) {
-    width: 100%;
-    height: 100%;
-  }
-
-  :where([data-astryx-aspect-ratio-override="cover"]) > :where(img, video) {
-    object-fit: cover;
-  }
-
-  :where([data-astryx-aspect-ratio-override="contain"]) > :where(img, video) {
-    object-fit: contain;
-  }
-
   /* ===========================================================================
      Forms
      =========================================================================== */
@@ -294,6 +265,15 @@
     color: var(--color-text-secondary, light-dark(#4E606F, #AAAFB5));
   }
 
+  /*
+   * Chromium draws the dropdown marker of a field with a `list` as a glyph
+   * set on the line-height the field inherits, so with any line-height above
+   * 1 the marker sits below the middle of the field.
+   */
+  :where([list])::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
   /*
    * Remove the inner padding and cancel buttons in search inputs
    * for Chrome and Safari.

package/src/reset.test.ts

@@ -172,6 +172,17 @@ describe('reset.css pseudo-element rules', () => {
     ).toBe(true);
   });
 
+  it('sets the dropdown marker of a field with a list on a single line', () => {
+    const marker = ruleBlocks.filter(({selector}) =>
+      topLevelSelectors(selector).some(entry =>
+        entry.endsWith('::-webkit-calendar-picker-indicator'),
+      ),
+    );
+    expect(marker.map(({body}) => body).join('\n')).toMatch(
+      /line-height:\s*1;/,
+    );
+  });
+
   it('falls back to the --color-text-secondary default for placeholders', () => {
     // A page that loads only the reset never defines the token. The fallback
     // repeats the token's own default, so that page shows the placeholder an

package/src/theme/derivedVarRegistry.test.ts

@@ -261,6 +261,9 @@ const CROSS_COMPONENT_VARS: Record<string, string[]> = {
   // The destructive item variant recolors the Item it renders; Item owns,
   // documents and reads both slots.
   DropdownMenu: ['--_item-label-color', '--_item-description-color'],
+  // List's edge="flush" zeroes the inline inset of the Item each ListItem
+  // renders; Item owns, documents and reads it.
+  List: ['--_item-inset-inline'],
   // A layer content root stops an outer Stepper's connector gap; Stepper owns,
   // documents and reads it.
   Layer: ['--step-connector-gap'],
@@ -316,6 +319,10 @@ const VARS_WITHOUT_DERIVED_MAPPING = new Set([
   '--tree-list-indent',
   '--_tree-indent',
   '--tree-list-row-gap',
+  // Published by each treeitem while it has keyboard focus and read as its
+  // row's z-index, so the focused row paints above the guide lines. Focus
+  // state, not a value a theme author sets.
+  '--_tree-focus-z',
   // Clipped on the ONE side each on-track connector segment faces the
   // indicator from — trailing above the node, leading below it, mirrored
   // again per axis. No standard property maps onto this purpose-based seam:

package/src/unicodePropertyEscapes.source-build.test.mjs

@@ -0,0 +1,69 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file unicodePropertyEscapes.source-build.test.mjs
+ * @input Every Core source module a bundler compiles (tests and stories
+ *   excluded)
+ * @output Fails when a module writes a Unicode property escape (`\p{…}` or
+ *   `\P{…}`) as a regular expression literal
+ * @position Guard for source builds: for targets without property escapes, or
+ *   with no browserslist, Babel rewrites such a literal, and the copy bundled
+ *   with Next.js lacks the Unicode data to do it, so the build fails with
+ *   "Unknown property". Modules build these expressions at runtime instead,
+ *   as NumberInput/numberParser.ts does.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {parseSync} from '@babel/core';
+import {describe, expect, it} from 'vitest';
+
+const SRC = path.dirname(fileURLToPath(import.meta.url));
+const SKIPPED = /\.(test|stories)\.tsx?$|\.d\.ts$/;
+
+function sourceFiles(dir) {
+  return fs.readdirSync(dir, {withFileTypes: true}).flatMap(entry => {
+    const file = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      return entry.name === '__tests__' ? [] : sourceFiles(file);
+    }
+    return /\.tsx?$/.test(entry.name) && !SKIPPED.test(entry.name)
+      ? [file]
+      : [];
+  });
+}
+
+/** Every regular expression literal in a parsed tree. */
+function regexLiterals(node, found = []) {
+  if (node == null || typeof node !== 'object') return found;
+  if (node.type === 'RegExpLiteral') found.push(node);
+  for (const [key, value] of Object.entries(node)) {
+    if (key !== 'loc' && key !== 'extra') regexLiterals(value, found);
+  }
+  return found;
+}
+
+describe('Core regular expressions in source builds', () => {
+  it('writes no Unicode property escape as a regex literal', () => {
+    const offenders = [];
+    for (const file of sourceFiles(SRC)) {
+      const source = fs.readFileSync(file, 'utf8');
+      if (!/\\[pP]\{/.test(source)) continue;
+      const ast = parseSync(source, {
+        filename: file,
+        babelrc: false,
+        configFile: false,
+        parserOpts: {plugins: ['typescript', 'jsx']},
+      });
+      for (const literal of regexLiterals(ast)) {
+        if (/\\[pP]\{/.test(literal.pattern)) {
+          offenders.push(
+            `${path.relative(SRC, file)}:${literal.loc.start.line} /${literal.pattern}/${literal.flags}`,
+          );
+        }
+      }
+    }
+    expect(offenders).toEqual([]);
+  });
+});