@astryxdesign/lab 0.7.3-canary.fba04ed → 0.7.4-canary.31e54e4

package/dist/ListInput/ListInput.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file ListInput.tsx
- * @input React, StyleX, Astryx field/list/button/icon/layer/empty-state primitives, compact size context, browser scroll geometry, programmatic theme tokens, and shared Lab reorder styles
+ * @input React, StyleX, Astryx field/list/button/icon/layer/empty-state primitives, the container-reveal hook, compact size context, browser scroll geometry, programmatic theme tokens, and shared Lab reorder styles
  * @output Exports ListInput and its controlled data, column, renderer, and change types
  * @position Lab experiment (RFC facebook/astryx#4531) for editing compact repeated records
  *

package/dist/ListInput/ListInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListInput.d.ts","sourceRoot":"","sources":["../../src/ListInput/ListInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAOL,KAAK,GAAG,EACR,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,0BAA0B,CAAC;AAQjE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,0BAA0B,CAAC;AAa1D,MAAM,MAAM,eAAe,CAAC,CAAC,IACzB;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,GACrC;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,CAAC,CAAC;IACR,YAAY,EAAE,CAAC,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,GACxC;IAAC,IAAI,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,CAAC;AAEnE,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,sBAAsB;IACtB,IAAI,EAAE,CAAC,CAAC;IACR,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,CAAE,SAAQ,qBAAqB,CAAC,CAAC,CAAC;IACzE,uDAAuD;IACvD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,gFAAgF;IAChF,aAAa,EAAE,SAAS,CAAC;IACzB,uDAAuD;IACvD,UAAU,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,SAAS,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iDAAiD;IACjD,WAAW,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;CAChE;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,gDAAgD;IAChD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,gFAAgF;IAChF,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC/D,kEAAkE;IAClE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC;IAC7B,wDAAwD;IACxD,UAAU,EAAE,MAAM,CAAC,CAAC;IACpB,6CAA6C;IAC7C,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IACpE,gEAAgE;IAChE,cAAc,CAAC,EAAE,CACf,IAAI,EAAE,CAAC,EACP,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,KACV,WAAW,GAAG,SAAS,CAAC;IAC7B,0EAA0E;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAgcD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,EACV,OAAO,EACP,QAAiB,EACjB,MAAM,EACN,aAAa,EACb,cAAc,EACd,aAAqB,EACrB,UAAkB,EAClB,SAAiB,EACjB,QAAQ,EACR,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,SAAS,CAorC/B;yBAzsCe,SAAS"}
+{"version":3,"file":"ListInput.d.ts","sourceRoot":"","sources":["../../src/ListInput/ListInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAOL,KAAK,GAAG,EACR,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,0BAA0B,CAAC;AAYjE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,0BAA0B,CAAC;AAiB1D,MAAM,MAAM,eAAe,CAAC,CAAC,IACzB;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,GACrC;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,CAAC,CAAC;IACR,YAAY,EAAE,CAAC,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,GACxC;IAAC,IAAI,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,CAAC;AAEnE,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,sBAAsB;IACtB,IAAI,EAAE,CAAC,CAAC;IACR,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,CAAE,SAAQ,qBAAqB,CAAC,CAAC,CAAC;IACzE,uDAAuD;IACvD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,gFAAgF;IAChF,aAAa,EAAE,SAAS,CAAC;IACzB,uDAAuD;IACvD,UAAU,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,SAAS,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iDAAiD;IACjD,WAAW,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;CAChE;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,gDAAgD;IAChD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,gFAAgF;IAChF,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC/D,kEAAkE;IAClE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC;IAC7B,wDAAwD;IACxD,UAAU,EAAE,MAAM,CAAC,CAAC;IACpB,6CAA6C;IAC7C,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IACpE,gEAAgE;IAChE,cAAc,CAAC,EAAE,CACf,IAAI,EAAE,CAAC,EACP,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,KACV,WAAW,GAAG,SAAS,CAAC;IAC7B,0EAA0E;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA6dD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,EACV,OAAO,EACP,QAAiB,EACjB,MAAM,EACN,aAAa,EACb,cAAc,EACd,aAAqB,EACrB,UAAkB,EAClB,SAAiB,EACjB,QAAQ,EACR,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,SAAS,CAgtC/B;yBAruCe,SAAS"}

package/dist/ListInput/ListInput.js

@@ -4,7 +4,7 @@
 
 /**
  * @file ListInput.tsx
- * @input React, StyleX, Astryx field/list/button/icon/layer/empty-state primitives, compact size context, browser scroll geometry, programmatic theme tokens, and shared Lab reorder styles
+ * @input React, StyleX, Astryx field/list/button/icon/layer/empty-state primitives, the container-reveal hook, compact size context, browser scroll geometry, programmatic theme tokens, and shared Lab reorder styles
  * @output Exports ListInput and its controlled data, column, renderer, and change types
  * @position Lab experiment (RFC facebook/astryx#4531) for editing compact repeated records
  *
@@ -22,7 +22,7 @@ import { EmptyState } from '@astryxdesign/core/EmptyState';
 import { Field } from '@astryxdesign/core/Field';
 import { FieldStatus } from '@astryxdesign/core/FieldStatus';
 import { Icon } from '@astryxdesign/core/Icon';
-import { useAnnounce, useMediaQuery } from '@astryxdesign/core/hooks';
+import { useAnnounce, useContainerReveal, useMediaQuery } from '@astryxdesign/core/hooks';
 import { IconButton } from '@astryxdesign/core/IconButton';
 import { useTranslator } from '@astryxdesign/core/i18n';
 import { useLayer } from '@astryxdesign/core/Layer';
@@ -31,7 +31,7 @@ import { useTheme } from '@astryxdesign/core/theme';
 import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, fontWeightVars, sizeVars, spacingVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
-import { mergeProps, themeProps } from '@astryxdesign/core/utils';
+import { focusOutlineStyles, mergeProps, themeProps } from '@astryxdesign/core/utils';
 import { reorderStyles } from "../reorderStyles.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
@@ -54,18 +54,10 @@ const styles = {
     kumcoG: "x1mkdm3x",
     $$css: true
   },
-  rowWithReorder: {
-    kumcoG: "x1ni329g",
-    $$css: true
-  },
   rowWithRemove: {
     kumcoG: "x1ni329g",
     $$css: true
   },
-  rowWithBothControls: {
-    kumcoG: "x1nra26t",
-    $$css: true
-  },
   fields: {
     k1xSpc: "xrvj5dj x12gktpv",
     kGNEyG: "xpqajaz",
@@ -81,25 +73,22 @@ const styles = {
     kBCFzs: "x1rlpkp8",
     $$css: true
   },
-  contentBeforeBothControls: {
-    kBCFzs: "xez1zrf",
-    $$css: true
-  },
   itemStatus: {
     kbNqZ1: "x7sv70a x1nh3qrq",
     keoZOQ: "xcsaf9d xc47mtf",
     k7Eaqz: "xeuugli",
     $$css: true
   },
-  actionRow: {
-    k1xSpc: "xrvj5dj",
+  reorderGrip: {
+    k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
-    k1C7PZ: "x1lfs0n9",
-    keoZOQ: "xtbrsbv",
-    $$css: true
-  },
-  actionContent: {
-    k7Eaqz: "xeuugli",
+    kjj79g: "xl56j7k",
+    kzqmXN: "x1f0dxl5",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kMwMTN: "xtbr613 x100q762",
     $$css: true
   }
 };
@@ -128,40 +117,44 @@ const dynamicStyles = {
     "--x-viewTransitionName": name != null ? name : undefined
   }]
 };
+
+// The six-dot grip drawn at its own size, so the narrow reorder target needs no
+// square icon box around it.
 function GripVerticalIcon(props) {
   return /*#__PURE__*/_jsxs("svg", {
-    viewBox: "0 0 24 24",
+    viewBox: "0 0 6 10",
     fill: "none",
+    "aria-hidden": "true",
     ...props,
     children: [/*#__PURE__*/_jsx("circle", {
-      cx: "9",
-      cy: "6",
-      r: "1.5",
+      cx: "1",
+      cy: "1",
+      r: "1",
       fill: "currentColor"
     }), /*#__PURE__*/_jsx("circle", {
-      cx: "15",
-      cy: "6",
-      r: "1.5",
+      cx: "5",
+      cy: "1",
+      r: "1",
       fill: "currentColor"
     }), /*#__PURE__*/_jsx("circle", {
-      cx: "9",
-      cy: "12",
-      r: "1.5",
+      cx: "1",
+      cy: "5",
+      r: "1",
       fill: "currentColor"
     }), /*#__PURE__*/_jsx("circle", {
-      cx: "15",
-      cy: "12",
-      r: "1.5",
+      cx: "5",
+      cy: "5",
+      r: "1",
       fill: "currentColor"
     }), /*#__PURE__*/_jsx("circle", {
-      cx: "9",
-      cy: "18",
-      r: "1.5",
+      cx: "1",
+      cy: "9",
+      r: "1",
       fill: "currentColor"
     }), /*#__PURE__*/_jsx("circle", {
-      cx: "15",
-      cy: "18",
-      r: "1.5",
+      cx: "5",
+      cy: "9",
+      r: "1",
       fill: "currentColor"
     })]
   });
@@ -187,7 +180,9 @@ function joinIDs(...ids) {
   const resolved = ids.filter(Boolean);
   return resolved.length > 0 ? resolved.join(' ') : undefined;
 }
-const focusableFieldSelector = '[data-list-input-cell] input, [data-list-input-cell] select, [data-list-input-cell] textarea, [data-list-input-cell] button, [data-list-input-cell] [tabindex]:not([tabindex="-1"])';
+
+// The reorder grip shares the first field's cell but is not a field.
+const focusableFieldSelector = '[data-list-input-cell] input, [data-list-input-cell] select, [data-list-input-cell] textarea, [data-list-input-cell] button:not([data-list-input-reorder]), [data-list-input-cell] [tabindex]:not([tabindex="-1"]):not([data-list-input-reorder])';
 function getScrollableAncestors(element) {
   const scrollRoots = [];
   let current = element.parentElement;
@@ -411,6 +406,12 @@ export function ListInput({
   } = useLayer({
     mode: 'fixed'
   });
+  // Each record row reveals its row actions (Remove and, when reorderable, the
+  // grip) on hover or keyboard focus; touch keeps them visible.
+  const {
+    getContainerProps,
+    getContentRevealProps
+  } = useContainerReveal();
   const setReorderState = nextState => {
     reorderStateRef.current = nextState;
     setReorderStateState(nextState);
@@ -424,7 +425,7 @@ export function ListInput({
     }
     return moveItem(reorderState.originalValue, reorderState.fromIndex, reorderState.toIndex);
   }, [reorderState, value]);
-  const showReorderColumn = isReorderable;
+  const showReorderHandle = isReorderable;
   const showRemoveColumn = true;
   const fieldGridTemplate = useMemo(() => columns.map(column => resolveColumnTrack(column.width)).join(' '), [columns]);
   const pointerPlacement = useMemo(() => {
@@ -446,6 +447,7 @@ export function ListInput({
     };
   }, [getItemKey, reorderState]);
   const previewCloneKey = reorderState?.mode === 'pointer' ? String(reorderState.itemKey) : null;
+  const isPointerReorderActive = previewCloneKey != null;
   useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
       return;
@@ -1008,8 +1010,8 @@ export function ListInput({
       }));
     }
   };
-  const rowLayoutStyle = showReorderColumn ? showRemoveColumn ? styles.rowWithBothControls : styles.rowWithReorder : showRemoveColumn ? styles.rowWithRemove : styles.rowFieldsOnly;
-  const contentGridStyle = showReorderColumn ? styles.contentBeforeBothControls : showRemoveColumn ? styles.contentBeforeOneControl : styles.contentOnly;
+  const rowLayoutStyle = showRemoveColumn ? styles.rowWithRemove : styles.rowFieldsOnly;
+  const contentGridStyle = showRemoveColumn ? styles.contentBeforeOneControl : styles.contentOnly;
   const dragPreviewPosition = reorderState?.mode === 'pointer' && reorderState.pointerClientX != null && reorderState.pointerClientY != null && reorderState.pointerOffsetX != null && reorderState.pointerOffsetY != null && reorderState.previewWidth != null ? {
     x: reorderState.pointerClientX - reorderState.pointerOffsetX,
     y: reorderState.pointerClientY - reorderState.pointerOffsetY,
@@ -1078,6 +1080,91 @@ export function ListInput({
             const isPointerReorderSource = isActiveReorder && reorderState?.mode === 'pointer';
             const itemStatus = getItemStatus?.(item, index);
             const itemStatusID = itemStatus?.message ? `${groupID}-item-${index}-status` : undefined;
+            const reorderHandle = showReorderHandle ? /*#__PURE__*/_jsx("div", {
+              ...{
+                className: "x10l6tqk x13vifvy x1ey2m1c x1eu7cjg x78zum5 x1qjc9v5 x1djylfy"
+              },
+              children: /*#__PURE__*/_jsx("div", {
+                ...mergeProps(getContentRevealProps({
+                  isLayoutPreserved: true,
+                  // The grip owns an active reorder, so it stays
+                  // visible however the pointer moves.
+                  forceVisibility: isActiveReorder ? 'shown' : undefined
+                }), // A flex row, so the grip stretches to the field's height.
+                {
+                  className: "x78zum5"
+                }),
+                children: /*#__PURE__*/_jsx("button", {
+                  type: "button",
+                  "aria-label": t('@astryx.listInput.reorderItem', {
+                    itemName,
+                    position: index + 1
+                  }),
+                  disabled: isDisabled || isLoading,
+                  "aria-describedby": reorderInstructionsID,
+                  "aria-pressed": isActiveReorder || undefined,
+                  "data-list-input-reorder": "",
+                  ...stylex.props(focusOutlineStyles.focusVisible, styles.reorderGrip, reorderStyles.handle, isActiveReorder && reorderStyles.handleActive),
+                  onKeyDown: event => handleReorderKeyDown(event, item, index),
+                  onBlur: () => {
+                    const activeState = reorderStateRef.current;
+                    if (activeState?.mode === 'keyboard' && String(activeState.itemKey) === itemKeyString) {
+                      cancelReorder();
+                    }
+                  },
+                  onPointerDown: event => {
+                    if (event.button !== 0 || isDisabled || isLoading) {
+                      return;
+                    }
+                    const sourceRow = rowRefs.current.get(itemKeyString);
+                    if (sourceRow == null) {
+                      return;
+                    }
+                    const bounds = sourceRow.getBoundingClientRect();
+                    event.currentTarget.setPointerCapture?.(event.pointerId);
+                    startReorder(item, index, 'pointer', event.pointerId, {
+                      pointerStartX: event.clientX,
+                      pointerStartY: event.clientY,
+                      pointerOffsetX: event.clientX - bounds.left,
+                      pointerOffsetY: event.clientY - bounds.top,
+                      pointerClientX: event.clientX,
+                      pointerClientY: event.clientY,
+                      previewWidth: bounds.width
+                    });
+                  },
+                  onPointerMove: handlePointerMove,
+                  onPointerUp: event => {
+                    const activeState = reorderStateRef.current;
+                    if (activeState?.mode === 'pointer' && activeState.pointerId === event.pointerId) {
+                      commitReorder();
+                      if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+                        event.currentTarget.releasePointerCapture?.(event.pointerId);
+                      }
+                    }
+                  },
+                  onPointerCancel: event => {
+                    const activeState = reorderStateRef.current;
+                    if (activeState?.mode === 'pointer' && activeState.pointerId === event.pointerId) {
+                      cancelReorder();
+                      if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+                        event.currentTarget.releasePointerCapture?.(event.pointerId);
+                      }
+                    }
+                  },
+                  onLostPointerCapture: event => {
+                    const activeState = reorderStateRef.current;
+                    if (activeState?.mode === 'pointer' && activeState.pointerId === event.pointerId) {
+                      cancelReorder();
+                    }
+                  },
+                  children: /*#__PURE__*/_jsx(GripVerticalIcon, {
+                    ...{
+                      className: "x1lliihq x2lah0s x1wu31ai x14r7d11"
+                    }
+                  })
+                })
+              })
+            }) : null;
             return /*#__PURE__*/_jsx("li", {
               "data-list-input-motion-key": `item:${itemKeyString}`,
               "data-list-input-drop-target": dropPosition ?? undefined,
@@ -1096,7 +1183,11 @@ export function ListInput({
                   }
                 },
                 "data-list-input-row": itemKeyString,
-                ...stylex.props(styles.row, rowLayoutStyle, dynamicStyles.rowTransition(transitionName(groupID, itemKey)), isPointerReorderSource && reorderStyles.source),
+                ...mergeProps(getContainerProps({
+                  // A pointer drag owns the list: rows the pointer
+                  // crosses stay quiet instead of lighting their grips.
+                  forceState: isPointerReorderActive && !isActiveReorder ? 'inactive' : undefined
+                }), stylex.props(styles.row, rowLayoutStyle, dynamicStyles.rowTransition(transitionName(groupID, itemKey)), isPointerReorderSource && reorderStyles.source)),
                 children: [/*#__PURE__*/_jsx("div", {
                   ...stylex.props(styles.fields, dynamicStyles.fields(fieldGridTemplate)),
                   children: columns.map((column, columnIndex) => {
@@ -1139,18 +1230,28 @@ export function ListInput({
                           }
                         }[!!isRepeatedLabel << 0],
                         children: column.header
-                      }), /*#__PURE__*/_jsx("div", {
+                      }), /*#__PURE__*/_jsxs("div", {
                         ...{
-                          className: "xeuugli"
-                        },
-                        children: content
+                          0: {
+                            className: "xeuugli"
+                          },
+                          1: {
+                            className: "xeuugli x1n2onr6"
+                          }
+                        }[!!(columnIndex === 0 && showReorderHandle) << 0],
+                        children: [columnIndex === 0 ? reorderHandle : null, content]
                       })]
                     }, column.key);
                   })
                 }), showRemoveColumn ? /*#__PURE__*/_jsx("div", {
-                  ...{
+                  ...mergeProps(
+                  // Opacity only: Remove keeps its column, so the
+                  // fields never shift when it appears.
+                  getContentRevealProps({
+                    isLayoutPreserved: true
+                  }), {
                     className: "x78zum5 x6s0dn4 x7fd4wk xl56j7k x1uogy3y xm5moh1 x4qyour x15daork x1y9m8ji"
-                  },
+                  }),
                   children: /*#__PURE__*/_jsx(IconButton, {
                     label: t('@astryx.listInput.removeItem', {
                       itemName,
@@ -1172,79 +1273,6 @@ export function ListInput({
                     "data-list-input-remove": "",
                     onClick: () => handleRemove(item)
                   })
-                }) : null, showReorderColumn ? /*#__PURE__*/_jsx("div", {
-                  ...{
-                    className: "x78zum5 x6s0dn4 x7fd4wk xl56j7k x1uogy3y xm5moh1 x1b1z6u9 x15daork x1y9m8ji"
-                  },
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    label: t('@astryx.listInput.reorderItem', {
-                      itemName,
-                      position: index + 1
-                    }),
-                    icon: /*#__PURE__*/_jsx(Icon, {
-                      icon: GripVerticalIcon,
-                      size: "sm"
-                    }),
-                    variant: "ghost",
-                    size: "md",
-                    isDisabled: isDisabled || isLoading,
-                    "aria-describedby": reorderInstructionsID,
-                    "aria-pressed": isActiveReorder || undefined,
-                    "data-list-input-reorder": "",
-                    xstyle: [reorderStyles.handle, isActiveReorder && reorderStyles.handleActive],
-                    onKeyDown: event => handleReorderKeyDown(event, item, index),
-                    onBlur: () => {
-                      const activeState = reorderStateRef.current;
-                      if (activeState?.mode === 'keyboard' && String(activeState.itemKey) === itemKeyString) {
-                        cancelReorder();
-                      }
-                    },
-                    onPointerDown: event => {
-                      if (event.button !== 0 || isDisabled || isLoading) {
-                        return;
-                      }
-                      const sourceRow = rowRefs.current.get(itemKeyString);
-                      if (sourceRow == null) {
-                        return;
-                      }
-                      const bounds = sourceRow.getBoundingClientRect();
-                      event.currentTarget.setPointerCapture?.(event.pointerId);
-                      startReorder(item, index, 'pointer', event.pointerId, {
-                        pointerStartX: event.clientX,
-                        pointerStartY: event.clientY,
-                        pointerOffsetX: event.clientX - bounds.left,
-                        pointerOffsetY: event.clientY - bounds.top,
-                        pointerClientX: event.clientX,
-                        pointerClientY: event.clientY,
-                        previewWidth: bounds.width
-                      });
-                    },
-                    onPointerMove: handlePointerMove,
-                    onPointerUp: event => {
-                      const activeState = reorderStateRef.current;
-                      if (activeState?.mode === 'pointer' && activeState.pointerId === event.pointerId) {
-                        commitReorder();
-                        if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
-                          event.currentTarget.releasePointerCapture?.(event.pointerId);
-                        }
-                      }
-                    },
-                    onPointerCancel: event => {
-                      const activeState = reorderStateRef.current;
-                      if (activeState?.mode === 'pointer' && activeState.pointerId === event.pointerId) {
-                        cancelReorder();
-                        if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
-                          event.currentTarget.releasePointerCapture?.(event.pointerId);
-                        }
-                      }
-                    },
-                    onLostPointerCapture: event => {
-                      const activeState = reorderStateRef.current;
-                      if (activeState?.mode === 'pointer' && activeState.pointerId === event.pointerId) {
-                        cancelReorder();
-                      }
-                    }
-                  })
                 }) : null, itemStatus?.message ? /*#__PURE__*/_jsx(FieldStatus, {
                   id: itemStatusID,
                   type: itemStatus.type,
@@ -1259,10 +1287,14 @@ export function ListInput({
         }), /*#__PURE__*/_jsx("div", {
           ref: addActionRef,
           "data-list-input-motion-key": "action:add",
-          ...stylex.props(styles.actionRow, rowLayoutStyle),
+          ...{
+            className: "xrvj5dj x6s0dn4 x1lfs0n9 xtbrsbv x1ni329g"
+          },
           children: /*#__PURE__*/_jsx("div", {
             "data-list-input-add-content": "",
-            ...stylex.props(styles.actionContent, contentGridStyle),
+            ...{
+              className: "xeuugli x1rlpkp8"
+            },
             children: /*#__PURE__*/_jsx(Button, {
               ref: addButtonRef,
               label: t('@astryx.listInput.addItem', {
@@ -1280,7 +1312,7 @@ export function ListInput({
               onClick: handleAdd
             })
           })
-        }), showReorderColumn ? /*#__PURE__*/_jsx(VisuallyHidden, {
+        }), showReorderHandle ? /*#__PURE__*/_jsx(VisuallyHidden, {
           as: "div",
           id: reorderInstructionsID,
           children: t('@astryx.listInput.reorderInstructions')

package/dist/lab.css

@@ -115,7 +115,6 @@
   .x4h4c4w:not(#\#):not(#\#){grid-column:-2 / -1}
   .x1osaytk:not(#\#):not(#\#){grid-column:1 / -1}
   .x1rlpkp8:not(#\#):not(#\#){grid-column:1 / -2}
-  .xez1zrf:not(#\#):not(#\#){grid-column:1 / -3}
   .xgkxs2y:not(#\#):not(#\#){grid-column:1}
   .x17d9j0x:not(#\#):not(#\#){grid-column:2 / -1}
   .x1npkx4u:not(#\#):not(#\#){grid-column:2}
@@ -165,7 +164,6 @@
   @container list-input (max-width: 640px){.x6pnyrg.x6pnyrg:not(#\#):not(#\#){gap:var(--spacing-8)}}
   @container list-input (max-width: 640px){.x1v2w52t.x1v2w52t:not(#\#):not(#\#){grid-column:1}}
   @container list-input (max-width: 640px){.x4qyour.x4qyour:not(#\#):not(#\#){grid-column:2}}
-  @container list-input (max-width: 640px){.x1b1z6u9.x1b1z6u9:not(#\#):not(#\#){grid-column:3}}
   @container list-input (max-width: 640px){.x1y9m8ji.x1y9m8ji:not(#\#):not(#\#){grid-row:1}}
   @container list-input (max-width: 640px){.x1nh3qrq.x1nh3qrq:not(#\#):not(#\#){grid-row:auto}}
   @container (max-width: 40rem){.xf3ta42.xf3ta42:not(#\#):not(#\#){overscroll-behavior:auto}}
@@ -177,6 +175,7 @@
   .xuk3077:not(#\#):not(#\#):not(#\#){align-items:flex-end}
   .x1cy8zhl:not(#\#):not(#\#):not(#\#){align-items:flex-start}
   .x7a106z:not(#\#):not(#\#):not(#\#){align-items:start}
+  .x1qjc9v5:not(#\#):not(#\#):not(#\#){align-items:stretch}
   .x7fd4wk:not(#\#):not(#\#):not(#\#){align-self:end}
   .xqcrz7y:not(#\#):not(#\#):not(#\#){align-self:flex-start}
   .x1y8v6su:not(#\#):not(#\#):not(#\#){align-self:start}
@@ -203,6 +202,7 @@
   .x128ha8g:not(#\#):not(#\#):not(#\#){animation-timing-function:var(--ease-standard)}
   .xjyslct:not(#\#):not(#\#):not(#\#){appearance:none}
   .x1plog1:not(#\#):not(#\#):not(#\#){aspect-ratio:1}
+  .x14r7d11:not(#\#):not(#\#):not(#\#){aspect-ratio:3 / 5}
   .x11fneen:not(#\#):not(#\#):not(#\#){aspect-ratio:auto}
   .x1ta4xzc:not(#\#):not(#\#):not(#\#){background-clip:text}
   .x2kq1z0:not(#\#):not(#\#):not(#\#){background-color:#0a0a0a}
@@ -423,7 +423,6 @@
   .x1dl91lv:not(#\#):not(#\#):not(#\#){grid-template-columns:96px 52px minmax(0,1fr)}
   .x37c5m6:not(#\#):not(#\#):not(#\#){grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
   .xcjjqqt:not(#\#):not(#\#):not(#\#){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
-  .x1nra26t:not(#\#):not(#\#):not(#\#){grid-template-columns:minmax(0,1fr) var(--size-element-md) var(--size-element-md)}
   .x1ni329g:not(#\#):not(#\#):not(#\#){grid-template-columns:minmax(0,1fr) var(--size-element-md)}
   .x1mkdm3x:not(#\#):not(#\#):not(#\#){grid-template-columns:minmax(0,1fr)}
   .x1gj6vdr:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(7,minmax(0,1fr))}
@@ -437,6 +436,7 @@
   .x1eiw8i6:not(#\#):not(#\#):not(#\#){grid-template-rows:56px auto auto}
   .x1clt5hq:not(#\#):not(#\#):not(#\#){grid-template-rows:subgrid}
   .x1xxtoay:not(#\#):not(#\#):not(#\#){grid-template-rows:var(--x-gridTemplateRows)}
+  .x1eu7cjg:not(#\#):not(#\#):not(#\#){inset-inline-end:100%}
   .x1itk590:not(#\#):not(#\#):not(#\#){inset-inline-end:calc(var(--spacing-0-5) + var(--border-width))}
   .x1mcfs9z:not(#\#):not(#\#):not(#\#){inset-inline-end:var(--spacing-3)}
   .x1o0tod:not(#\#):not(#\#):not(#\#){inset-inline-start:0}
@@ -584,6 +584,7 @@
   .x173emx3:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform-origin:right bottom}
   .x135w3n3:focus-visible:not(#\#):not(#\#):not(#\#){z-index:1}
   .x16iypot:focus-visible:not(#\#):not(#\#):not(#\#){z-index:2}
+  .x100q762:disabled:not(#\#):not(#\#):not(#\#){color:var(--color-icon-disabled)}
   .xuqm82a:active:not(#\#):not(#\#):not(#\#){background-image:none}
   @media (prefers-reduced-motion: reduce){.xdn7m2a.xdn7m2a:not(#\#):not(#\#):not(#\#){animation-duration:1ms}}
   @media (prefers-reduced-motion: reduce){.xnh0sag.xnh0sag:not(#\#):not(#\#):not(#\#){animation-duration:3s}}
@@ -731,6 +732,8 @@
   .x1lout4y:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--astryx-chat-typing-indicator-dots-column-width,auto)}
   .x1oai4fc:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--icon-size)}
   .xw7hby4:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-0-5)}
+  .x1wu31ai:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-1-5)}
+  .x1f0dxl5:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-2)}
   .x1uyokj7:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x-inlineSize)}
   .x5lhr3w:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x-width)}
   .x14l7nz5:first-child:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:0}

package/package.json

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

package/src/CircularProgress/__tests__/CircularProgress.a11y.chromium.spec.ts

@@ -0,0 +1,114 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CircularProgress.a11y.chromium.spec.ts
+ * @input Built CircularProgress stories and PROGRESSBAR_PATTERN in real Chromium
+ * @output Browser evidence for every progressbar expectation across the binding's states, reconciled against the exact known failures
+ * @position Chromium lane of the CircularProgress binding
+ */
+
+import {
+  expect,
+  test,
+  type CDPSession,
+  type Locator,
+  type Page,
+} from '@playwright/test';
+import {
+  PROGRESSBAR_PATTERN,
+  blockingResults,
+  checkAccessibilitySpec,
+  formatFailures,
+  neverExercised,
+  summarize,
+  unmatchedKnownFailures,
+  type BindingResult,
+} from '@astryxdesign/a11y-spec';
+import {
+  createChromiumHarness,
+  holdMotionStill,
+} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+import {CIRCULAR_PROGRESS_KNOWN_FAILURES} from './CircularProgress.a11y.known-failures';
+import {
+  CIRCULAR_PROGRESS_BINDING_STATES,
+  type CircularProgressBindingState,
+} from './CircularProgress.a11y.states';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+function storyUrl(storyId: string): string {
+  return `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`;
+}
+
+async function mountState(
+  page: Page,
+  state: CircularProgressBindingState,
+): Promise<{subject: Locator; related: Record<string, Locator>}> {
+  await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
+  await holdMotionStill(page);
+  const subject = page
+    .locator('#storybook-root')
+    .getByRole('progressbar', {name: state.facts.name});
+  await subject.waitFor({state: 'attached'});
+  return {subject, related: {}};
+}
+
+async function runState(
+  page: Page,
+  cdp: CDPSession,
+  state: CircularProgressBindingState,
+): Promise<BindingResult> {
+  return checkAccessibilitySpec({
+    spec: PROGRESSBAR_PATTERN,
+    binding: 'CircularProgress',
+    state: state.id,
+    facts: state.facts,
+    knownFailures: CIRCULAR_PROGRESS_KNOWN_FAILURES,
+    mount: async () => {
+      const {subject, related} = await mountState(page, state);
+      return createChromiumHarness({page, cdp, subject, related});
+    },
+  });
+}
+
+test('every progressbar expectation is exercised by a CircularProgress state', async ({
+  page,
+}) => {
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of CIRCULAR_PROGRESS_BINDING_STATES) {
+    results.push(await runState(page, cdp, state));
+  }
+  expect(neverExercised(results)).toEqual([]);
+  expect(
+    unmatchedKnownFailures(CIRCULAR_PROGRESS_KNOWN_FAILURES, results),
+  ).toEqual([]);
+});
+
+for (const state of CIRCULAR_PROGRESS_BINDING_STATES) {
+  test(`CircularProgress [${state.id}] — ${state.summary}`, async ({page}) => {
+    const cdp = await page.context().newCDPSession(page);
+    const result = await runState(page, cdp, state);
+    const report = summarize(PROGRESSBAR_PATTERN, [result]);
+    // Required rows block (AST-020 FR9); advisory rows and exact known
+    // failures report.
+    expect(formatFailures(blockingResults([result]))).toBe('');
+    expect(report.unrunLayers).toEqual([]);
+    expect(report.counts.unexpectedPass).toBe(0);
+  });
+}