@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/Tooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA2ClC;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;CAChB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAqYtE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA2ClC;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;CAChB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CA0YtE"}

package/dist/Tooltip/useTooltip.js

@@ -13,7 +13,7 @@
  */
 import { useCallback, useEffect, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { useLayer } from "../Layer/useLayer.js";
+import { useLayerInternal } from "../Layer/useLayer.js";
 import { useTouchTrigger } from "../Layer/useTouchTrigger.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
@@ -108,10 +108,16 @@ export function useTooltip(options = {}) {
     onShow,
     onHide
   } = options;
-  const layer = useLayer({
+
+  // A tooltip stays open while its trigger is hovered, so it must never settle
+  // over the trigger: content taller than the room above and below opens
+  // beside it, or on the roomier side sized to that room, and scrolls what does not
+  // fit inside the surface, which stays hoverable (spec:AST-059 FR4).
+  const layer = useLayerInternal({
     mode: 'context',
     onShow,
-    onHide
+    onHide,
+    keepsAnchorClear: true
   });
   const {
     ref: layerRef,

package/dist/TopNav/TopNavHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4L5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAwYpB;yBA1Ze,aAAa"}
+{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgM5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAqapB;yBAvbe,aAAa"}

package/dist/TopNav/TopNavHeading.js

@@ -30,6 +30,10 @@ import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps } from "../utils/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useMenuHover } from "../hooks/useMenuHover.js";
+import { useMenuPress } from "../hooks/useMenuPress.js";
+import { pressOnItemsOnly } from "../hooks/menuPressOnItems.js";
+import { menuTouchActionStyles } from "../DropdownMenu/menuTouchAction.stylex.js";
+import { useMenuOverflow } from "../DropdownMenu/useMenuOverflow.js";
 import { NavHeadingCloseContext } from "../NavMenu/NavMenuContext.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
@@ -173,6 +177,20 @@ export function TopNavHeading({
     isEnabled: !!menu,
     showDelay: 0
   });
+
+  // A press that slides across the product menu's items acts on the item it
+  // lifts on, the highlight following the pointer (`family:action-groups`
+  // FR1-FR3, FR5); a mouse released outside closes it. Only the role="menu"
+  // region is tracked, not the heading above it.
+  const productMenuRef = useRef(null);
+  const productMenuPress = useMenuPress({
+    menuRef: productMenuRef,
+    itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
+    onDismiss: closeMenu,
+    isEnabled: !!menu
+  });
+  const productMenuPointerDown = pressOnItemsOnly(productMenuPress.menuProps.onPointerDown, '[role="menuitem"]:not([aria-disabled="true"])');
+  const productMenuTouch = stylex.props(useMenuOverflow(productMenuRef, menu, popover.isOpen) ? menuTouchActionStyles.scrolls : menuTouchActionStyles.fits);
   const closeMenuCtx = useMemo(() => ({
     closeMenu
   }), [closeMenu]);
@@ -348,8 +366,12 @@ export function TopNavHeading({
         },
         ...contentProps,
         children: [popoverHeadingContent, /*#__PURE__*/_jsx("div", {
+          ref: productMenuRef,
           role: "menu",
           "aria-label": heading ?? t('@astryx.topNav.heading.dialogLabel'),
+          ...productMenuPress.menuProps,
+          onPointerDown: productMenuPointerDown,
+          ...productMenuTouch,
           children: /*#__PURE__*/_jsx(NavHeadingCloseContext, {
             value: closeMenuCtx,
             children: menu
@@ -415,8 +437,12 @@ export function TopNavHeading({
         },
         ...contentProps,
         children: [popoverHeadingContent, /*#__PURE__*/_jsx("div", {
+          ref: productMenuRef,
           role: "menu",
           "aria-label": heading ?? t('@astryx.topNav.heading.dialogLabel'),
+          ...productMenuPress.menuProps,
+          onPointerDown: productMenuPointerDown,
+          ...productMenuTouch,
           children: /*#__PURE__*/_jsx(NavHeadingCloseContext, {
             value: closeMenuCtx,
             children: menu

package/dist/TopNav/TopNavMegaMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMegaMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgN5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAW,EACX,SAAe,EACf,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,mBAAmB,4BAuCrB;yBAhDe,cAAc"}
+{"version":3,"file":"TopNavMegaMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiO5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAW,EACX,SAAe,EACf,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,mBAAmB,4BAuCrB;yBAhDe,cAAc"}

package/dist/TopNav/TopNavMegaMenu.js

@@ -95,10 +95,10 @@ const styles = {
   },
   panelAnimation: {
     kSiTet: "xg01cxk xofkqq2",
-    k3aq6I: "x1bvilyr x9cjr8z",
-    k1ekBW: "x4bbghf",
-    kIyJzY: "xgneliz",
-    kAMwcw: "xlr8y92",
+    k3aq6I: "x1bvilyr x9cjr8z xuupxpy",
+    k1ekBW: "x4bbghf x3ya4ca",
+    kIyJzY: "xgneliz xh0ie4q xuh6ohu",
+    kAMwcw: "xlr8y92 x19dgjhz",
     kzIqYQ: "xd00j3c",
     kamtoy: "x4itv7f",
     k1tdAh: "x12p7p72",

package/dist/TopNav/TopNavMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkN5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,EACf,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,IAAI,EACR,EAAE,eAAe,4BA8QjB;yBA3Re,UAAU"}
+{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoN5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,EACf,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,IAAI,EACR,EAAE,eAAe,4BAqSjB;yBAlTe,UAAU"}

package/dist/TopNav/TopNavMenu.js

@@ -19,6 +19,10 @@ import React, { useCallback, useId, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { usePopover } from "../Popover/usePopover.js";
 import { useMenuHover } from "../hooks/useMenuHover.js";
+import { useMenuPress } from "../hooks/useMenuPress.js";
+import { pressOnItemsOnly } from "../hooks/menuPressOnItems.js";
+import { menuTouchActionStyles } from "../DropdownMenu/menuTouchAction.stylex.js";
+import { useMenuOverflow } from "../DropdownMenu/useMenuOverflow.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { useTypeahead } from "../hooks/useTypeahead.js";
 import { Icon } from "../Icon/index.js";
@@ -84,6 +88,15 @@ const styles = {
     k3aq6I: "x19jd1h0",
     $$css: true
   },
+  menuContainer: {
+    kfSwDN: "x87ps6o",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kOIVth: "xzye2dw",
+    k7Eaqz: "x1u2d2a2",
+    kmVPX3: "x9epnlk",
+    $$css: true
+  },
   menuItem: {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
@@ -280,6 +293,16 @@ export function TopNavMenu({
   // focus management) and the list-focus ref (for roving tabindex/typeahead).
   const setMenuRef = useMergedRefs(menuRef, listRef);
 
+  // A press that slides across the items acts on the item it lifts on, the
+  // highlight following the pointer, as every menu does
+  // (`family:action-groups` FR1-FR3); a mouse released outside closes it.
+  const menuPress = useMenuPress({
+    menuRef: listRef,
+    itemSelector: '[role="menuitem"]',
+    onDismiss: close
+  });
+  const hasOverflow = useMenuOverflow(listRef, items.length, popover.isOpen);
+
   // Mobile bar: hide menus entirely
   if (renderMode === 'mobile-bar') {
     return null;
@@ -376,14 +399,15 @@ export function TopNavMenu({
       role: "menu",
       "aria-label": label,
       ...contentProps,
+      ...menuPress.menuProps,
+      onPointerDown: pressOnItemsOnly(menuPress.menuProps.onPointerDown, '[role="menuitem"]')
       // After the contentProps spread so the full APG composition (roving
       // tabindex + typeahead + Enter/Space activation) replaces the hover
       // hook's basic arrow-key handler.
+      ,
       onKeyDown: menuKeyDown,
       onFocus: handleFocus,
-      ...{
-        className: "x78zum5 xdt5ytf xzye2dw x1u2d2a2 x9epnlk"
-      },
+      ...stylex.props(styles.menuContainer, hasOverflow ? menuTouchActionStyles.scrolls : menuTouchActionStyles.fits),
       children: items.map(item => {
         const Element = item.href ? 'a' : 'div';
         return /*#__PURE__*/_jsxs(Element, {
@@ -392,7 +416,11 @@ export function TopNavMenu({
           // promotes exactly one item to 0.
           ,
           tabIndex: -1,
-          href: item.href != null && isSafeUrl(item.href) ? item.href : undefined,
+          href: item.href != null && isSafeUrl(item.href) ? item.href : undefined
+          // A menu row is never a draggable link: a mouse press that
+          // slides to another item would start a drag instead.
+          ,
+          draggable: item.href != null ? false : undefined,
           onClick: item.onClick,
           ...focusOutlineProps.focusVisible(styles.menuItem),
           children: [/*#__PURE__*/_jsx("div", {

package/dist/TreeList/TreeList.d.ts

@@ -13,10 +13,17 @@
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps.js';
 import type { TreeListItemData, TreeListDensity, TreeListVariant } from './TreeListTypes.js';
+import { type AnimatedLayout } from '../motion/animatedLayout.js';
 export { type TreeListDensity, type TreeListVariant } from './TreeListTypes.js';
 export interface TreeListProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDivElement>;
+    /**
+     * The handle from `useAnimatedLayout({containerRef})`. With it, expanding
+     * or collapsing a row glides the rows and content after it, up to that
+     * container, instead of jumping, and the chevron turns on the same timing.
+     */
+    animatedLayout?: AnimatedLayout;
     /**
      * Tree items as a recursive data structure.
      * Each item can have nested `children` arrays.
@@ -49,29 +56,7 @@ export interface TreeListProps extends BaseProps<HTMLDivElement> {
      */
     'data-testid'?: string;
 }
-/**
- * A data-driven tree list component for rendering hierarchical data.
- *
- * Accepts an `items` array of recursive config objects. Expansion state is
- * managed internally — seed initial state by setting `isExpanded: true` on
- * individual items in the data.
- * Positional data (nestedLevel, isLast, ancestorsIsLast) is computed during
- * rendering — no context, no cloneElement, no force-update mechanism.
- *
- * @example
- * ```
- * <TreeList
- *   items={[
- *     { id: 'src', label: 'src', isExpanded: true, children: [
- *       { id: 'app', label: 'App.tsx' },
- *       { id: 'index', label: 'index.tsx' },
- *     ]},
- *     { id: 'pkg', label: 'package.json' },
- *   ]}
- * />
- * ```
- */
-export declare function TreeList({ items, density, variant, header, xstyle, className, style, 'data-testid': testId, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ref, onKeyDown: onKeyDownProp, ...restProps }: TreeListProps): import("react").JSX.Element;
+export declare function TreeList({ items, density, variant, header, xstyle, className, style, 'data-testid': testId, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ref, onKeyDown: onKeyDownProp, animatedLayout, ...restProps }: TreeListProps): import("react").JSX.Element;
 export declare namespace TreeList {
     var displayName: string;
 }

package/dist/TreeList/TreeList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAAC,KAAK,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuFD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAoB,EACpB,OAAsB,EACtB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,EACH,SAAS,EAAE,aAAa,EACxB,GAAG,SAAS,EACb,EAAE,aAAa,+BA8Lf;yBA5Me,QAAQ"}
+{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAML,KAAK,cAAc,EAEpB,MAAM,0BAA0B,CAAC;AAMlC,OAAO,EAAC,KAAK,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;;OAIG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA6HD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAoB,EACpB,OAAsB,EACtB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,EACH,SAAS,EAAE,aAAa,EACxB,cAAc,EACd,GAAG,SAAS,EACb,EAAE,aAAa,+BA4Xf;yBA3Ye,QAAQ"}

package/dist/TreeList/TreeList.js

@@ -14,7 +14,7 @@
  * - /apps/storybook/stories/TreeList.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
-import { useId, useState, useMemo, useCallback } from 'react';
+import { useId, useState, useMemo, useCallback, useLayoutEffect, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
@@ -22,6 +22,8 @@ import { mergeProps } from "../utils/index.js";
 import { TreeListItem } from "./TreeListItem.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTreeFocusInternal } from "../hooks/useTreeFocus.js";
+import { LayoutChangeSnapshot } from "../motion/LayoutChangeSnapshot.js";
+import { applyLayoutChangeTransition, holdLayoutExit, playLayoutChange, releaseLayoutExit, reportLayoutChange } from "../motion/animatedLayout.js";
 
 // =============================================================================
 // Types
@@ -114,6 +116,21 @@ function findInitialTabbableId(items) {
  * />
  * ```
  */
+/** Whether two sets of row ids hold the same rows. */
+function sameIds(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (a.size !== b.size) {
+    return false;
+  }
+  for (const id of a) {
+    if (!b.has(id)) {
+      return false;
+    }
+  }
+  return true;
+}
 export function TreeList({
   items,
   density = 'balanced',
@@ -127,6 +144,7 @@ export function TreeList({
   'aria-labelledby': ariaLabelledby,
   ref,
   onKeyDown: onKeyDownProp,
+  animatedLayout,
   ...restProps
 }) {
   const headerId = useId();
@@ -136,6 +154,118 @@ export function TreeList({
 
   // User overrides: only stores IDs the user has explicitly toggled.
   const [expandedKeysOverride, setExpandedKeysOverride] = useState(() => new Map());
+
+  // With an `animatedLayout` handle, a row's size change (its children shown
+  // or hidden) animates up to the handle's container: the rows and content after it glide, and
+  // the shown group plays its own entrance on the same timing
+  // (`architecture:react-component-runtime` INV12). Read through a ref
+  // because the tree element comes from the focus hook below.
+  const treeElementRef = useRef(null);
+  // The rows expanded now, whatever expanded them (a click, the keyboard, or
+  // `isExpanded` changed in `items`).
+  const expandedIds = useMemo(() => {
+    const out = new Set();
+    const walk = list => {
+      for (const item of list) {
+        if (item.children == null || item.children.length === 0) {
+          continue;
+        }
+        const isExpanded = expandedKeysOverride.has(item.id) ? expandedKeysOverride.get(item.id) ?? false : expandedKeysFromProps.has(item.id);
+        if (isExpanded) {
+          out.add(item.id);
+          walk(item.children);
+        }
+      }
+    };
+    walk(items);
+    return out;
+  }, [items, expandedKeysOverride, expandedKeysFromProps]);
+  // Rows whose collapse is still playing its exit: their child group stays
+  // rendered (the exit makes it inert and gives up its space) until it ends
+  // (`spec:AST-105` FR4). Derived from the expanded rows as they change,
+  // during render, so the collapsing commit already keeps the group.
+  const [exitingIds, setExitingIds] = useState(() => new Set());
+  const [renderedExpandedIds, setRenderedExpandedIds] = useState(expandedIds);
+  if (!sameIds(renderedExpandedIds, expandedIds)) {
+    setRenderedExpandedIds(expandedIds);
+    if (animatedLayout != null) {
+      const next = new Set(exitingIds);
+      for (const id of renderedExpandedIds) {
+        if (!expandedIds.has(id)) {
+          next.add(id);
+        }
+      }
+      for (const id of expandedIds) {
+        next.delete(id);
+      }
+      setExitingIds(next);
+    }
+  }
+  const endExit = useCallback(id => {
+    // Called from the exit effect: holdLayoutExit decides from layout read
+    // in the collapsing commit (the group's place in the area's visible part,
+    // Reduce Motion and the pointer, and whether an end margin frees its
+    // space); a group it does not hold goes before the frame paints.
+    setExitingIds(prev => {
+      if (!prev.has(id)) {
+        return prev;
+      }
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  // Every expansion change is measured before it lands (`spec:AST-105` FR1):
+  // LayoutChangeSnapshot calls this in the commit, before the DOM changes,
+  // for each row whose expansion changed. The row's own chevron (the Icon in
+  // its toggle, the first one in the row) turns on the glide's motion.
+  const pendingLayoutRef = useRef([]);
+  const measureChanges = useCallback(previous => {
+    const changed = [...[...previous].filter(id => !expandedIds.has(id)), ...[...expandedIds].filter(id => !previous.has(id))];
+    const rows = new Map();
+    for (const id of changed) {
+      const row = treeElementRef.current?.querySelector(`[data-tree-id="${CSS.escape(id)}"]`);
+      if (row != null) {
+        rows.set(id, row);
+      }
+    }
+    // A changed row inside another changed row (a child left expanded when
+    // its parent collapses) is not a change of its own: its group goes with
+    // the outer one, so the content after them moves once (`spec:AST-105`
+    // FR3).
+    const outerOf = row => [...rows].find(([, other]) => other !== row && other.contains(row))?.[0];
+    const nested = new Map();
+    for (const [id, row] of rows) {
+      const outer = outerOf(row);
+      if (outer != null) {
+        nested.set(outer, [...(nested.get(outer) ?? []), id]);
+      }
+    }
+    for (const [id, row] of rows) {
+      if (outerOf(row) != null) {
+        continue;
+      }
+      applyLayoutChangeTransition(animatedLayout, row.querySelector('[data-tree-toggle] > .astryx-icon'));
+      const change = reportLayoutChange(animatedLayout, () => row);
+      change.measureBefore();
+      pendingLayoutRef.current.push({
+        change,
+        id,
+        isExpanding: expandedIds.has(id),
+        nested: nested.get(id) ?? []
+      });
+    }
+  }, [animatedLayout, expandedIds]);
+  // Without a handle the chevrons keep the theme's own turn: a spring a
+  // handle set stays only while it is passed (`spec:AST-105` FR2).
+  useLayoutEffect(() => {
+    if (animatedLayout != null) {
+      return;
+    }
+    for (const chevron of treeElementRef.current?.querySelectorAll('[data-tree-toggle] > .astryx-icon') ?? []) {
+      applyLayoutChangeTransition(null, chevron);
+    }
+  }, [animatedLayout]);
   const handleToggle = useCallback(id => {
     setExpandedKeysOverride(prev => {
       const next = new Map(prev);
@@ -173,6 +303,38 @@ export function TreeList({
     }
     return false;
   }, []);
+  useLayoutEffect(() => {
+    const pendings = pendingLayoutRef.current;
+    pendingLayoutRef.current = [];
+    for (const pending of pendings) {
+      const isMeasured = pending.change.animate();
+      const group = treeElementRef.current?.querySelector(`[data-tree-id="${CSS.escape(pending.id)}"] > [role="group"]`);
+      if (pending.isExpanding) {
+        if (group != null) {
+          // Expanded again mid-exit: the group takes its place in flow.
+          releaseLayoutExit(group);
+          if (isMeasured) {
+            playLayoutChange(animatedLayout, group);
+          }
+        }
+        continue;
+      }
+      // The rows nested in it leave with it, once its exit ends.
+      const endAll = () => {
+        endExit(pending.id);
+        for (const id of pending.nested) {
+          endExit(id);
+        }
+      };
+      const isHeld = isMeasured && group != null && holdLayoutExit(animatedLayout, group, endAll);
+      if (!isHeld) {
+        // An exit holdLayoutExit did not hold (out of view, Reduce Motion
+        // with a fine pointer, or no margin frees its space): the group goes
+        // before this frame paints.
+        endAll();
+      }
+    }
+  }, [expandedIds, animatedLayout, endExit]);
   const {
     treeRef,
     handleKeyDown,
@@ -183,7 +345,12 @@ export function TreeList({
     hasRovingTabIndex: true,
     // Rows are named by their label (AR1); typeahead matches that label, not
     // the chevron toggle, start content or description.
-    matchLabelledBy: true
+    matchLabelledBy: true,
+    // Rows of a group still playing its collapse are gone already.
+    itemSelector: '[role="treeitem"]:not([data-tree-exiting] *)'
+  });
+  useLayoutEffect(() => {
+    treeElementRef.current = treeRef.current;
   });
   const handleRootKeyDown = useCallback(e => {
     onKeyDownProp?.(e);
@@ -211,7 +378,8 @@ export function TreeList({
       const isExpanded = expandedKeysOverride.has(item.id) ? expandedKeysOverride.get(item.id) ?? false : expandedKeysFromProps.has(item.id);
       const hasChildren = item.children != null && item.children.length > 0;
       const ancestorsIsLastForChildren = hasChildren ? [...ancestorsIsLast, isLast] : ancestorsIsLast;
-      const renderedChildren = isExpanded && hasChildren ? renderItems(item.children ?? [], nestedLevel + 1, ancestorsIsLastForChildren) : undefined;
+      const isExiting = exitingIds.has(item.id);
+      const renderedChildren = (isExpanded || isExiting) && hasChildren ? renderItems(item.children ?? [], nestedLevel + 1, ancestorsIsLastForChildren) : undefined;
       return /*#__PURE__*/_jsx(TreeListItem, {
         id: item.id,
         label: item.label,
@@ -232,6 +400,7 @@ export function TreeList({
         isLast: isLast,
         ancestorsIsLast: ancestorsIsLast,
         isExpanded: isExpanded,
+        isExiting: isExiting && !isExpanded,
         onToggle: handleToggle,
         density: density,
         variant: variant,
@@ -257,6 +426,9 @@ export function TreeList({
         className: "x1p37lm5"
       },
       children: header
+    }), animatedLayout != null && /*#__PURE__*/_jsx(LayoutChangeSnapshot, {
+      value: expandedIds,
+      onBeforeChange: measureChanges
     }), /*#__PURE__*/_jsx("ul", {
       ref: treeRef,
       role: "tree",

package/dist/TreeList/TreeListBranches.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListBranches.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListBranches.tsx"],"names":[],"mappings":"AA8EA,UAAU,qBAAqB;IAC7B,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;CACrB;AAMD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,MAAM,EACN,WAAW,GACZ,EAAE,qBAAqB,+BAsDvB;yBA1De,gBAAgB"}
+{"version":3,"file":"TreeListBranches.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListBranches.tsx"],"names":[],"mappings":"AAgFA,UAAU,qBAAqB;IAC7B,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;CACrB;AAMD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,MAAM,EACN,WAAW,GACZ,EAAE,qBAAqB,+BAsDvB;yBA1De,gBAAgB"}

package/dist/TreeList/TreeListBranches.js

@@ -19,12 +19,14 @@ import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const LINE_WIDTH = 1;
+const GUIDE_COLUMN_WIDTH = spacingVars['--spacing-5'];
 
 /**
- * Branch margin from the left edge. No exact spacing token for 10px,
- * so we use calc(--spacing-2 + --spacing-0-5) = 8 + 2 = 10.
+ * The guide owns its alignment to the chevron column. Its 20px container starts
+ * where centering it on the natural 16px chevron leaves it after the row's 8px
+ * inline padding: 8px + 16px / 2 - 20px / 2 = 6px.
  */
-const BRANCH_MARGIN = `calc(${spacingVars['--spacing-2']} + ${spacingVars['--spacing-0-5']})`;
+const GUIDE_COLUMN_START = `calc(${spacingVars['--spacing-2']} + ${spacingVars['--spacing-4']} / 2 - ${GUIDE_COLUMN_WIDTH} / 2)`;
 
 /** Per-level indent width. Reads the public, themeable `--tree-list-indent`
  * lever set on the tree-list root (default `--spacing-4`, 16px), so the guide
@@ -54,7 +56,7 @@ export function TreeListBranches({
 }) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [ancestorsIsLast.map((ancestorIsLast, level) => {
-      const branchOffset = `calc(${BRANCH_MARGIN} + ${level} * ${LEVEL_INDENT})`;
+      const branchOffset = `calc(${GUIDE_COLUMN_START} + ${level} * ${LEVEL_INDENT})`;
       return (
         // Skip the level that the current-item connector occupies
         // (nestedLevel - 1), since that position is rendered below
@@ -79,7 +81,7 @@ export function TreeListBranches({
         className: "x5yr21d x10l6tqk xfyiiit x1vjfegm x47corl"
       }, {
         style: {
-          insetInlineStart: `calc(${BRANCH_MARGIN} + ${nestedLevel - 1} * ${LEVEL_INDENT})`
+          insetInlineStart: `calc(${GUIDE_COLUMN_START} + ${nestedLevel - 1} * ${LEVEL_INDENT})`
         }
       }),
       children: /*#__PURE__*/_jsx("div", {

package/dist/TreeList/TreeListItem.d.ts

@@ -42,6 +42,12 @@ export interface TreeListItemInternalProps {
     isLast: boolean;
     ancestorsIsLast: ReadonlyArray<boolean>;
     isExpanded: boolean;
+    /**
+     * The row collapsed and its child group is playing its exit: the group
+     * stays rendered (the exit makes it inert) until it ends, and its rows
+     * leave the tree's keyboard order at once.
+     */
+    isExiting?: boolean;
     onToggle?: (id: string) => void;
     density: TreeListDensity;
     /**
@@ -63,7 +69,7 @@ export interface TreeListItemInternalProps {
      */
     isTabbable: boolean;
 }
-export declare function TreeListItem({ id, label, description, startContent, endContent, xstyle, className, style, onClick, href, target, isDisabled, isSelected, hasChildren, hasExpandableItems, nestedLevel, isLast, ancestorsIsLast, isExpanded, onToggle, density, variant, renderedChildren, posInSet, setSize, isTabbable, }: TreeListItemInternalProps): import("react").JSX.Element;
+export declare function TreeListItem({ id, label, description, startContent, endContent, xstyle, className, style, onClick, href, target, isDisabled, isSelected, hasChildren, hasExpandableItems, nestedLevel, isLast, ancestorsIsLast, isExpanded, isExiting, onToggle, density, variant, renderedChildren, posInSet, setSize, isTabbable, }: TreeListItemInternalProps): import("react").JSX.Element;
 export declare namespace TreeListItem {
     var displayName: string;
 }

package/dist/TreeList/TreeListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAoB3C,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AA8RtE,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BAkT3B;yBA7Ue,YAAY"}
+{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAoB3C,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AA0RtE,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BAqT3B;yBAjVe,YAAY"}

package/dist/TreeList/TreeListItem.js

@@ -170,6 +170,7 @@ export function TreeListItem({
   isLast,
   ancestorsIsLast,
   isExpanded,
+  isExiting = false,
   onToggle,
   density,
   variant,
@@ -331,7 +332,7 @@ export function TreeListItem({
     themeProps('tree-list-chevron', {
       state: isExpanded ? 'expanded' : 'collapsed'
     }), {
-      className: "x78zum5 x6s0dn4 xl56j7k x12xnipv x6b6gus xho7bvi x1ypdohk x16khyan xv9yike xx3sua9 x11g1kdw xmequkd"
+      className: "x78zum5 x6s0dn4 xl56j7k x12xnipv x6b6gus xho7bvi x1ypdohk x16khyan xv9yike xx3sua9"
     }),
     children: chevronIcon
   }) :
@@ -341,7 +342,7 @@ export function TreeListItem({
     ...mergeProps(themeProps('tree-list-chevron', {
       state: isExpanded ? 'expanded' : 'collapsed'
     }), {
-      className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x12xnipv x6b6gus xho7bvi x1ypdohk x16khyan xc342km xng3xce xjbqb8w x1717udv xv9yike xx3sua9 x11g1kdw xmequkd"
+      className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x12xnipv x6b6gus xho7bvi x1ypdohk x16khyan xc342km xng3xce xjbqb8w x1717udv xv9yike xx3sua9"
     }),
     children: chevronIcon
   }) : null;
@@ -454,8 +455,9 @@ export function TreeListItem({
           children: innerContent
         })
       })
-    }), isExpanded && renderedChildren != null && /*#__PURE__*/_jsx("ul", {
+    }), (isExpanded || isExiting) && renderedChildren != null && /*#__PURE__*/_jsx("ul", {
       role: "group",
+      "data-tree-exiting": isExiting ? '' : undefined,
       ...{
         className: "x1ghz6dp x1717udv x3ct3a4"
       },

package/dist/Typeahead/BaseTypeahead.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file BaseTypeahead.tsx
  * @input Uses React, StyleX, usePopover, TypeaheadItem
- * @output Exports BaseTypeahead; focus bootstraps a replaced search source
+ * @output Exports BaseTypeahead; empty feedback belongs to the current settled query
  * @position Core implementation; used by Typeahead and Tokenizer
  *
  * Pure combobox engine: input, search, keyboard navigation, dropdown.

package/dist/Typeahead/BaseTypeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA2BnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAY1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;;;;;OAaG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAEtD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAoKD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,EA03BrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA2BnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAY1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;;;;;OAaG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAEtD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAoKD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,EA04BrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}