@astryxdesign/core 0.7.9-canary.d7a7dd3 → 0.7.9-canary.dd5ca29

package/dist/BottomSheet/useSheetGestures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"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"}

package/dist/BottomSheet/useSheetGestures.js

@@ -333,18 +333,26 @@ export function useSheetGestures({
   // onDismiss() and sets `pending`; the host answers in the same update, so
   // the first render afterwards says whether it took the close (its
   // controlled state now says closed: the exit under way is the drag's) or
-  // refused it (a guarded onOpenChange left it open: the sheet snaps back and
-  // the request is spent). Either way the flag is settled during render, the
-  // prev-prop pattern, and derived back to false once the sheet is open
-  // again — so a later close from a control, Escape or code is never
-  // mistaken for a drag.
+  // refused it (a guarded onOpenChange left it open: the sheet snaps back,
+  // its scrim with it, and the request is spent). Either way the flag is
+  // settled during render, the prev-prop pattern, and derived back to false
+  // once the sheet is open again — so a later close from a control, Escape
+  // or code is never mistaken for a drag.
   const [touchDragDismissal, setTouchDragDismissal] = useState(null);
+  // The render that spends a refused request counts it. The layout effect
+  // below answers each count.
+  const [refusedDismissalCount, setRefusedDismissalCount] = useState(0);
   if (touchDragDismissal != null) {
     if (touchDragDismissal.pending) {
-      setTouchDragDismissal(isOpenRequested ? null : {
-        isTouch: touchDragDismissal.isTouch,
-        pending: false
-      });
+      if (isOpenRequested) {
+        setTouchDragDismissal(null);
+        setRefusedDismissalCount(count => count + 1);
+      } else {
+        setTouchDragDismissal({
+          isTouch: touchDragDismissal.isTouch,
+          pending: false
+        });
+      }
     } else if (isOpenRequested) {
       setTouchDragDismissal(null);
     }
@@ -452,6 +460,24 @@ export function useSheetGestures({
     hasFixedHeightRef.current = hasFixedHeight;
   });
 
+  // The release cannot know whether the host takes the close. The host
+  // answers through `isOpenRequested` in the next render. Keep the left
+  // detent's scrim until then.
+  const restingScrimOpacityRef = useRef(null);
+  // Syncs the host's scrim (its backdrop, written through `onScrimOpacity`)
+  // with the panel's return to rest after a refusal: the panel rests on that
+  // detent again, so the scrim the drag thinned toward the dismiss line rests
+  // with it. The refusal changes none of the host's own scrim inputs, so the
+  // drag's last value would otherwise stand.
+  useLayoutEffect(() => {
+    const restingScrimOpacity = restingScrimOpacityRef.current;
+    if (refusedDismissalCount === 0 || restingScrimOpacity == null) {
+      return;
+    }
+    restingScrimOpacityRef.current = null;
+    onScrimOpacityRef.current?.(restingScrimOpacity);
+  }, [refusedDismissalCount]);
+
   // Live drag bookkeeping (refs so pointermove doesn't churn renders).
   const dragStateRef = useRef(null);
 
@@ -770,6 +796,7 @@ export function useSheetGestures({
     if (dir > 0 && projected > dismissOffset) {
       if (canDismissRef.current) {
         prepareScrollAreaSettle(baseLayoutOffset, baseOffset, baseLayoutOffset, baseLayoutOffset, baseLayoutOffset, naturalEndGap, false);
+        restingScrimOpacityRef.current = scrimOpacityForOffset(baseOffset, offsets, dismissOffset, peekOffset);
         setTouchDragDismissal({
           isTouch,
           pending: true

package/dist/Icon/index.d.ts

@@ -62,6 +62,10 @@ export interface ComponentIconSlotMap {
     'timestamp-copy': {
         readonly copied: boolean;
     };
+    /** A sortable Table column's sort indicator, by the column's sort direction. */
+    'table-sort-indicator': {
+        readonly direction: 'ascending' | 'descending' | 'none';
+    };
 }
 /** A slot name from the augmentable {@link ComponentIconSlotMap}. */
 export type ComponentIconSlotName = keyof ComponentIconSlotMap & string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Icon/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AACnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,WAAW,cAAc;CAAG;AAElC,kEAAkE;AAClE,MAAM,MAAM,WAAW,GAAG,MAAM,cAAc,GAAG,MAAM,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,oBAAoB;IACnC,iFAAiF;IACjF,iBAAiB,EAAE;QAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAA;KAAC,CAAC;IAC9C,kGAAkG;IAClG,gBAAgB,EAAE;QAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAA;KAAC,CAAC;CAC9C;AAED,qEAAqE;AACrE,MAAM,MAAM,qBAAqB,GAAG,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAExE;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,CAAC,OAAO,SAAS,MAAM,GAAG,WAAW,IACnE,QAAQ,CAAC;IACP,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC,CAAC;AAEL;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,CAAC,KAAK,EAAE,OAAO,SAAS,MAAM,GAAG,WAAW,IACtE,QAAQ,GACR,IAAI,GACJ,oBAAoB,CAAC,OAAO,CAAC,GAC7B,CAAC,CACC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,KACnB,oBAAoB,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE3D,4EAA4E;AAC5E,MAAM,MAAM,gBAAgB,CAAC,OAAO,SAAS,MAAM,GAAG,WAAW,IAAI;KAClE,IAAI,IAAI,qBAAqB,CAAC,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,SAAS,IAAI,GACrE,QAAQ,GAAG,IAAI,GAAG,oBAAoB,CAAC,OAAO,CAAC,GAC/C,kBAAkB,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;CAC5D,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAC1C,MAAM,CAAC,qBAAqB,EAAE,QAAQ,GAAG,IAAI,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAC9E,CAAC;AAEF,OAAO,EAAC,IAAI,EAAE,cAAc,EAAC,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,QAAQ,CAAC;AAGrE,OAAO,EACL,aAAa,EACb,eAAe,EACf,OAAO,EACP,eAAe,EACf,UAAU,GACX,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,WAAW,GACZ,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Icon/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AACnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,WAAW,cAAc;CAAG;AAElC,kEAAkE;AAClE,MAAM,MAAM,WAAW,GAAG,MAAM,cAAc,GAAG,MAAM,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,oBAAoB;IACnC,iFAAiF;IACjF,iBAAiB,EAAE;QAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAA;KAAC,CAAC;IAC9C,kGAAkG;IAClG,gBAAgB,EAAE;QAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAA;KAAC,CAAC;IAC7C,gFAAgF;IAChF,sBAAsB,EAAE;QACtB,QAAQ,CAAC,SAAS,EAAE,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;KACzD,CAAC;CACH;AAED,qEAAqE;AACrE,MAAM,MAAM,qBAAqB,GAAG,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAExE;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,CAAC,OAAO,SAAS,MAAM,GAAG,WAAW,IACnE,QAAQ,CAAC;IACP,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC,CAAC;AAEL;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,CAAC,KAAK,EAAE,OAAO,SAAS,MAAM,GAAG,WAAW,IACtE,QAAQ,GACR,IAAI,GACJ,oBAAoB,CAAC,OAAO,CAAC,GAC7B,CAAC,CACC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,KACnB,oBAAoB,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE3D,4EAA4E;AAC5E,MAAM,MAAM,gBAAgB,CAAC,OAAO,SAAS,MAAM,GAAG,WAAW,IAAI;KAClE,IAAI,IAAI,qBAAqB,CAAC,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,SAAS,IAAI,GACrE,QAAQ,GAAG,IAAI,GAAG,oBAAoB,CAAC,OAAO,CAAC,GAC/C,kBAAkB,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;CAC5D,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAC1C,MAAM,CAAC,qBAAqB,EAAE,QAAQ,GAAG,IAAI,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAC9E,CAAC;AAEF,OAAO,EAAC,IAAI,EAAE,cAAc,EAAC,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,QAAQ,CAAC;AAGrE,OAAO,EACL,aAAa,EACb,eAAe,EACf,OAAO,EACP,eAAe,EACf,UAAU,GACX,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,WAAW,GACZ,MAAM,sBAAsB,CAAC"}

package/dist/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}

package/dist/Item/Item.js

@@ -331,6 +331,7 @@ export function Item({
   });
   useDevWarning('Item', '`interactiveRef` is mutually exclusive with `onClick`/`href`. In ' + 'delegation mode the row only forwards clicks to the referenced control, ' + 'so `onClick`/`href` are ignored. Drop one of them.', isDelegate && (onClick != null || href != null));
   const isInteractive = onClick != null || href != null || isDelegate;
+  const hasStateFill = isHighlighted || isSelected;
   const {
     target,
     rel
@@ -593,11 +594,17 @@ export function Item({
       highlighted: isHighlighted ? 'highlighted' : null,
       selected: isSelected ? 'selected' : null,
       disabled: isDisabled ? 'disabled' : null
-    }), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, align === 'first-line' && styles.alignFirstLine, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor,
+    }), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, align === 'first-line' && styles.alignFirstLine, isInteractive && styles.interactive,
+    // A row with a state fill keeps the fill as its background colour.
+    // Its overlay paints as an image layer over the fill.
+    isInteractive && (hasStateFill ? interactionOverlayStyles.backgroundImage : interactionOverlayStyles.backgroundColor),
     // The touch press on a compositor layer (after the overlay, whose
     // own touch paint it turns off): the release keeps fading while
     // script runs.
-    isInteractive && rowPressLayerStyles.cell, isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
+    isInteractive && rowPressLayerStyles.cell,
+    // A highlighted row's fill is already the hover tone, so it shows
+    // only its press. A selected row also shows its hover.
+    isInteractive && hasStateFill && (isSelected ? rowPressLayerStyles.cellOnImage : rowPressLayerStyles.cellOnImagePressOnly), isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
     role: role,
     onClick: rootOnClick,
     children: [/*#__PURE__*/_jsx(ItemDescriptionContext, {

package/dist/Table/plugins/sortable/useTableSortable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSortable.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/sortable/useTableSortable.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAarB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE5D;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAC9D,2EAA2E;IAC3E,OAAO,EAAE,QAAQ,CAAC;IAClB,0BAA0B;IAC1B,SAAS,EAAE,kBAAkB,CAAC;CAC/B;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM,IACzD,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;AAM7B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,sBAAsB,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IACtE,iEAAiE;IACjE,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE/B;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAEvD;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAwND;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM,EAChC,MAAM,EAAE,sBAAsB,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CA2F1D"}
+{"version":3,"file":"useTableSortable.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/sortable/useTableSortable.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAarB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE5D;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAC9D,2EAA2E;IAC3E,OAAO,EAAE,QAAQ,CAAC;IAClB,0BAA0B;IAC1B,SAAS,EAAE,kBAAkB,CAAC;CAC/B;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM,IACzD,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;AAM7B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,sBAAsB,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IACtE,iEAAiE;IACjE,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE/B;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAEvD;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AA6ND;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM,EAChC,MAAM,EAAE,sBAAsB,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CA2F1D"}

package/dist/Table/plugins/sortable/useTableSortable.js

@@ -4,7 +4,8 @@
 
 /**
  * @file useTableSortable.tsx
- * @input React, types, Icon, theme tokens, i18n (useComponentTranslator)
+ * @input React, types, Icon, the theme's `table-sort-indicator` icon slot,
+ *   theme tokens, i18n (useComponentTranslator)
  * @output Exports useTableSortable hook and sort-related types
  * @position Sortable plugin; consumed by Table via plugins prop
  *
@@ -18,6 +19,7 @@ import "../../../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars } from "../../../theme/tokens.stylex.js";
 import { focusOutlineProps } from "../../../utils/focusOutline.stylex.js";
 import { Icon } from "../../../Icon/index.js";
+import { ComponentIcon } from "../../../Icon/ComponentIcon.js";
 import { resolveContextActions } from "../../tableContextMenu.js";
 import { registerEnglishFallback, useComponentTranslator } from "../../../i18n/useComponentTranslator.js";
 import english from "../../../i18n/generated-english/Table/plugins/sortable/useTableSortable.generated.js";
@@ -149,7 +151,7 @@ function SortHeaderButton({
   const direction = entry?.direction ?? null;
   const isMultiSort = config.isMultiSortEnabled === true && config.sort.length > 1;
   const rank = isMultiSort && entryIndex >= 0 ? entryIndex + 1 : null;
-  const iconName = direction === 'ascending' ? 'arrowUp' : direction === 'descending' ? 'arrowDown' : 'arrowsUpDown';
+  const indicator = direction === 'ascending' ? 'arrowUp' : direction === 'descending' ? 'arrowDown' : 'arrowsUpDown';
 
   // The button is named by its column's text, so the column header keeps
   // that name; direction lives in the header's aria-sort. Only the multi-sort
@@ -210,15 +212,21 @@ function SortHeaderButton({
       }), /*#__PURE__*/_jsx("span", {
         ...{
           0: {
-            className: "x3nfvp2 x3onkmb xof6bs x25t5g8"
+            className: "x3nfvp2 xjl7jj x6s0dn4 xqtp20y"
           },
           1: {
-            className: "x3nfvp2"
+            className: "x3nfvp2 xjl7jj x6s0dn4 xqtp20y x3onkmb xof6bs x25t5g8"
           }
-        }[!!(direction != null) << 0],
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: iconName,
-          size: "xsm",
+        }[!!(direction == null) << 0],
+        children: /*#__PURE__*/_jsx(ComponentIcon, {
+          slot: "table-sort-indicator",
+          state: {
+            direction: direction ?? 'none'
+          },
+          fallback: {
+            icon: indicator,
+            size: 'xsm'
+          },
           color: direction != null ? 'accent' : 'secondary'
         })
       }), rank != null && /*#__PURE__*/_jsx("span", {

package/dist/privateAttributes/press.stylex.d.ts

@@ -3,7 +3,8 @@
  * @input StyleX, the overlay color tokens, the touch press strength
  *   (`pressVars`) and the row layer's clocks (utils/rowPressLayer.stylex.ts)
  * @output `rowPressLayerStyles`, the compositor press layer for list rows
- *   (`cell`, `cellOnImage` for a `backgroundImage` row), and
+ *   (`cell`, `cellOnImage` for a `backgroundImage` row,
+ *   `cellOnImagePressOnly` for a row whose fill is the hover tone), and
  *   `rowPressPaintStyles`, a CheckboxList row's press paint for its box
  * @position Owner module of the private press attribute: the press controller
  *   (utils/pressFeedback.ts) writes it, and this file reads it. No package
@@ -133,6 +134,9 @@ export declare const rowPressLayerStyles: Readonly<{
     readonly cellOnImage: Readonly<{
         readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", string | null>;
     }>;
+    readonly cellOnImagePressOnly: Readonly<{
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", string | null>;
+    }>;
 }>;
 export declare const rowPressPaintStyles: Readonly<{
     readonly checkboxRow: Readonly<{

package/dist/privateAttributes/press.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"press.stylex.d.ts","sourceRoot":"","sources":["../../src/privateAttributes/press.stylex.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqD3C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2K9B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;EAgB9B,CAAC"}
+{"version":3,"file":"press.stylex.d.ts","sourceRoot":"","sources":["../../src/privateAttributes/press.stylex.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqD3C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8L9B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;EAgB9B,CAAC"}

package/dist/privateAttributes/press.stylex.js

@@ -8,7 +8,8 @@
  * @input StyleX, the overlay color tokens, the touch press strength
  *   (`pressVars`) and the row layer's clocks (utils/rowPressLayer.stylex.ts)
  * @output `rowPressLayerStyles`, the compositor press layer for list rows
- *   (`cell`, `cellOnImage` for a `backgroundImage` row), and
+ *   (`cell`, `cellOnImage` for a `backgroundImage` row,
+ *   `cellOnImagePressOnly` for a row whose fill is the hover tone), and
  *   `rowPressPaintStyles`, a CheckboxList row's press paint for its box
  * @position Owner module of the private press attribute: the press controller
  *   (utils/pressFeedback.ts) writes it, and this file reads it. No package
@@ -91,6 +92,10 @@ export const rowPressLayerStyles = {
   cellOnImage: {
     kKwaWg: "x7uyq82 x3f84ok x7ngsy6 x10ogxw0 xubczrd x18xnkjv xmvprkv xetgvay",
     $$css: true
+  },
+  cellOnImagePressOnly: {
+    kKwaWg: "x7uyq82 x3f84ok x7ngsy6 x10ogxw0 xubczrd x18xnkjv",
+    $$css: true
   }
 };
 export const rowPressPaintStyles = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.9-canary.d7a7dd3",
+  "version": "0.7.9-canary.dd5ca29",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -880,9 +880,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.9-canary.d7a7dd3",
-    "@astryxdesign/cli": "0.7.9-canary.d7a7dd3",
-    "@astryxdesign/interaction-harness": "0.7.9-canary.d7a7dd3",
+    "@astryxdesign/a11y-spec": "0.7.9-canary.dd5ca29",
+    "@astryxdesign/cli": "0.7.9-canary.dd5ca29",
+    "@astryxdesign/interaction-harness": "0.7.9-canary.dd5ca29",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/BottomSheet/useSheetGestures.ts

@@ -560,22 +560,29 @@ export function useSheetGestures({
   // onDismiss() and sets `pending`; the host answers in the same update, so
   // the first render afterwards says whether it took the close (its
   // controlled state now says closed: the exit under way is the drag's) or
-  // refused it (a guarded onOpenChange left it open: the sheet snaps back and
-  // the request is spent). Either way the flag is settled during render, the
-  // prev-prop pattern, and derived back to false once the sheet is open
-  // again — so a later close from a control, Escape or code is never
-  // mistaken for a drag.
+  // refused it (a guarded onOpenChange left it open: the sheet snaps back,
+  // its scrim with it, and the request is spent). Either way the flag is
+  // settled during render, the prev-prop pattern, and derived back to false
+  // once the sheet is open again — so a later close from a control, Escape
+  // or code is never mistaken for a drag.
   const [touchDragDismissal, setTouchDragDismissal] = useState<{
     isTouch: boolean;
     pending: boolean;
   } | null>(null);
+  // The render that spends a refused request counts it. The layout effect
+  // below answers each count.
+  const [refusedDismissalCount, setRefusedDismissalCount] = useState(0);
   if (touchDragDismissal != null) {
     if (touchDragDismissal.pending) {
-      setTouchDragDismissal(
-        isOpenRequested
-          ? null
-          : {isTouch: touchDragDismissal.isTouch, pending: false},
-      );
+      if (isOpenRequested) {
+        setTouchDragDismissal(null);
+        setRefusedDismissalCount(count => count + 1);
+      } else {
+        setTouchDragDismissal({
+          isTouch: touchDragDismissal.isTouch,
+          pending: false,
+        });
+      }
     } else if (isOpenRequested) {
       setTouchDragDismissal(null);
     }
@@ -712,6 +719,24 @@ export function useSheetGestures({
     hasFixedHeightRef.current = hasFixedHeight;
   });
 
+  // The release cannot know whether the host takes the close. The host
+  // answers through `isOpenRequested` in the next render. Keep the left
+  // detent's scrim until then.
+  const restingScrimOpacityRef = useRef<number | null>(null);
+  // Syncs the host's scrim (its backdrop, written through `onScrimOpacity`)
+  // with the panel's return to rest after a refusal: the panel rests on that
+  // detent again, so the scrim the drag thinned toward the dismiss line rests
+  // with it. The refusal changes none of the host's own scrim inputs, so the
+  // drag's last value would otherwise stand.
+  useLayoutEffect(() => {
+    const restingScrimOpacity = restingScrimOpacityRef.current;
+    if (refusedDismissalCount === 0 || restingScrimOpacity == null) {
+      return;
+    }
+    restingScrimOpacityRef.current = null;
+    onScrimOpacityRef.current?.(restingScrimOpacity);
+  }, [refusedDismissalCount]);
+
   // Live drag bookkeeping (refs so pointermove doesn't churn renders).
   const dragStateRef = useRef<{
     // Whether the touch path drives this drag. Such a drag holds no pointer
@@ -1169,6 +1194,12 @@ export function useSheetGestures({
             naturalEndGap,
             false,
           );
+          restingScrimOpacityRef.current = scrimOpacityForOffset(
+            baseOffset,
+            offsets,
+            dismissOffset,
+            peekOffset,
+          );
           setTouchDragDismissal({isTouch, pending: true});
           onDismissRef.current();
         } else {

package/src/Icon/index.ts

@@ -66,6 +66,10 @@ export interface ComponentIconSlotMap {
   'code-block-copy': {readonly copied: boolean};
   /** A Timestamp hover card row's copy button. `copied` is true while the copied feedback shows. */
   'timestamp-copy': {readonly copied: boolean};
+  /** A sortable Table column's sort indicator, by the column's sort direction. */
+  'table-sort-indicator': {
+    readonly direction: 'ascending' | 'descending' | 'none';
+  };
 }
 
 /** A slot name from the augmentable {@link ComponentIconSlotMap}. */

package/src/Item/Item.tsx

@@ -692,6 +692,7 @@ export function Item({
   );
 
   const isInteractive = onClick != null || href != null || isDelegate;
+  const hasStateFill = isHighlighted || isSelected;
   const {target, rel} = computeTargetAndRel(targetFromProps, relFromProps);
   // When a semantic role is provided (e.g. "menuitem"), a parent component
   // handles keyboard access. Skip the invisible button/anchor and put
@@ -1019,11 +1020,23 @@ export function Item({
           align === 'start' && styles.alignStart,
           align === 'first-line' && styles.alignFirstLine,
           isInteractive && styles.interactive,
-          isInteractive && interactionOverlayStyles.backgroundColor,
+          // A row with a state fill keeps the fill as its background colour.
+          // Its overlay paints as an image layer over the fill.
+          isInteractive &&
+            (hasStateFill
+              ? interactionOverlayStyles.backgroundImage
+              : interactionOverlayStyles.backgroundColor),
           // The touch press on a compositor layer (after the overlay, whose
           // own touch paint it turns off): the release keeps fading while
           // script runs.
           isInteractive && rowPressLayerStyles.cell,
+          // A highlighted row's fill is already the hover tone, so it shows
+          // only its press. A selected row also shows its hover.
+          isInteractive &&
+            hasStateFill &&
+            (isSelected
+              ? rowPressLayerStyles.cellOnImage
+              : rowPressLayerStyles.cellOnImagePressOnly),
           isLinkRoot && styles.linkRoot,
           isHighlighted && styles.highlighted,
           isSelected && styles.selected,

package/src/Overlay/useOverlay.doc.mjs

@@ -0,0 +1,176 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
+export const docs = {
+  name: 'useOverlay',
+  displayName: 'useOverlay',
+  group: 'Overlay',
+  keywords: [
+    'overlay',
+    'scrim',
+    'hover reveal',
+    'focus-within',
+    'quick view',
+    'card actions',
+    'media overlay',
+  ],
+  params: [
+    {
+      name: 'options',
+      type: 'UseOverlayOptions',
+      description: 'Overlay configuration. Every field is optional.',
+      required: false,
+    },
+    {
+      name: 'options.content',
+      type: 'ReactNode',
+      description:
+        'Content to render inside the scrim. When set, the hook returns it pre-rendered as element.',
+      required: false,
+    },
+    {
+      name: 'options.showOn',
+      type: "'hover' | 'always' | 'focus' | 'hover-or-focus'",
+      description:
+        "Visibility trigger, read with CSS from the container. 'hover' also reveals on focus within the container for keyboard users; 'hover-or-focus' is an alias for it. On a touch device (hover: none), a hover overlay toggles on a tap on the container instead.",
+      default: "'always'",
+      required: false,
+    },
+    {
+      name: 'options.isOpen',
+      type: 'boolean',
+      description:
+        'Controlled visibility. When set, it takes precedence over showOn and the touch toggle.',
+      required: false,
+    },
+    {
+      name: 'options.scrim',
+      type: "'dark' | 'light' | false",
+      description:
+        'Scrim background. false renders the content with no scrim background.',
+      default: "'dark'",
+      required: false,
+    },
+    {
+      name: 'options.position',
+      type: "'fill' | 'bottom' | 'top'",
+      description:
+        'Where the scrim sits: over the whole positioned area, or as a strip along its bottom or top edge.',
+      default: "'fill'",
+      required: false,
+    },
+    {
+      name: 'options.align',
+      type: "'start' | 'center' | 'end'",
+      description: 'Alignment of the content within the scrim.',
+      default: "'end'",
+      required: false,
+    },
+  ],
+  returns: [
+    {
+      name: 'containerRef',
+      type: 'RefObject<HTMLElement | null>',
+      description: 'Attach to the container element.',
+    },
+    {
+      name: 'containerProps',
+      type: 'OverlayContainerProps',
+      description:
+        'Spread on the same container: className and style mark it as the overlay scope (positioned, clipped), and on a touch device with a hover overlay onClick and onMouseUp toggle it on a tap.',
+    },
+    {
+      name: 'element',
+      type: 'ReactElement | null',
+      description:
+        'The scrim with options.content, ready to render once inside the container. null when content is not set.',
+    },
+    {
+      name: 'renderOverlay',
+      type: '(children: ReactNode) => ReactElement',
+      description:
+        'Renders the scrim around the children you pass, for content that changes or a scrim you mount yourself. Use it or element, not both.',
+    },
+  ],
+  usage: {
+    description:
+      "Adds overlay behavior to a container you already render, such as a Card or a custom media frame, without the wrapper Overlay adds. Spread containerRef and containerProps on the container, then render element (or renderOverlay(children)) once inside it. The scrim is absolutely positioned, so it covers the nearest positioned ancestor: the container itself, or a positioned section inside it such as an image area. Visibility is CSS-driven from the container's :hover and :focus-within, so with showOn 'hover' a keyboard user reveals the content by moving focus into the container. Hidden content is not focusable, so the container needs a focusable element before the overlay content in tab order. A revealed scrim takes pointer input over the area it covers, so put that element outside the scrim, or use a top or bottom strip and keep it in the part the strip leaves uncovered.",
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          "Use showOn 'hover' for actions on media cards: it also reveals on keyboard focus within the container.",
+      },
+      {
+        guidance: true,
+        description:
+          'Put a focusable element (a link or the card title) before the overlay content in the container, so Tab reveals the content and the next Tab reaches it.',
+      },
+      {
+        guidance: true,
+        description:
+          'Use the Overlay component when you do not already have a container element to attach to.',
+      },
+      {
+        guidance: false,
+        description:
+          'Put the only way to reach an action behind hover with nothing focusable before it; keyboard users cannot focus content that is hidden.',
+      },
+    ],
+  },
+  relatedComponents: ['Overlay', 'Card', 'AspectRatio'],
+  relatedHooks: ['useClickableContainer'],
+  importPath: '@astryxdesign/core/Overlay',
+  category: 'interaction',
+};
+
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
+export const docsDense = {
+  description:
+    "Overlay behavior on a container you already render (Card, media frame) w/o Overlay's wrapper. Spread containerRef + containerProps on it, render element / renderOverlay(children) once inside. CSS-driven via container :hover/:focus-within; hover mode also reveals on keyboard focus. Hidden content is not focusable, so put a focusable element before it, outside the area a revealed scrim covers (the scrim takes pointer input).",
+  paramDescriptions: {
+    options: 'overlay config; all fields optional.',
+    'options.content':
+      'content inside the scrim; returned pre-rendered as element.',
+    'options.showOn':
+      "CSS visibility trigger. 'hover' also reveals on focus-within; 'hover-or-focus' = alias. Touch (hover: none): hover overlays toggle on tap.",
+    'options.isOpen': 'controlled visibility; wins over showOn + touch toggle.',
+    'options.scrim': 'scrim background; false = no background.',
+    'options.position': "scrim placement: 'fill', or a 'bottom' / 'top' strip.",
+    'options.align': 'content alignment in the scrim.',
+  },
+  returnDescriptions: {
+    containerRef: 'attach to the container.',
+    containerProps:
+      'spread on the container: overlay scope className/style (positioned, clipped) + tap toggle handlers for hover overlays on touch devices.',
+    element:
+      'scrim with content, render once inside the container; null w/o content.',
+    renderOverlay:
+      '(children) => scrim; for dynamic content or self-mounted scrim. Use it or element.',
+  },
+  usage: {
+    description:
+      'Overlay behavior on an existing container: spread containerRef + containerProps, render element once inside. Scrim covers nearest positioned ancestor. CSS :hover/:focus-within; hover mode reveals on keyboard focus too. Put a focusable element before hidden content.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          "showOn 'hover' for media card actions; also reveals on keyboard focus.",
+      },
+      {
+        guidance: true,
+        description:
+          'Put a focusable element before the overlay content so Tab reveals it, next Tab reaches it.',
+      },
+      {
+        guidance: true,
+        description: 'Use Overlay when there is no container to attach to.',
+      },
+      {
+        guidance: false,
+        description:
+          'Hide the only route to an action behind hover with nothing focusable before it.',
+      },
+    ],
+  },
+};

package/src/Table/Table.doc.mjs

@@ -143,6 +143,25 @@ export const docs = {
       {className: 'astryx-table-cell', visualProps: ['density']},
       {className: 'astryx-table-header-cell', visualProps: ['density']},
     ],
+    componentIcons: [
+      {
+        slot: 'table-sort-indicator',
+        description:
+          "The sort direction glyph beside a sortable column's label (`useTableSortable`).",
+        fallback:
+          '`arrowUp` ascending; `arrowDown` descending; `arrowsUpDown` unsorted',
+        state: [
+          {
+            name: 'direction',
+            type: "'ascending' | 'descending' | 'none'",
+            description:
+              "The column's sort direction; `none` while the column is not sorted.",
+          },
+        ],
+        whenNull:
+          'Hides the glyph. The Sort control keeps its label and its click and keyboard sorting; the column header keeps `aria-sort`.',
+      },
+    ],
   },
   description:
     'Styled, data-driven table with density, dividers, hover highlight, striped rows, and named plugin support. T must extend Record<string, unknown>.',

package/src/Table/plugins/sortable/useTableSortable.tsx

@@ -4,7 +4,8 @@
 
 /**
  * @file useTableSortable.tsx
- * @input React, types, Icon, theme tokens, i18n (useComponentTranslator)
+ * @input React, types, Icon, the theme's `table-sort-indicator` icon slot,
+ *   theme tokens, i18n (useComponentTranslator)
  * @output Exports useTableSortable hook and sort-related types
  * @position Sortable plugin; consumed by Table via plugins prop
  *
@@ -18,6 +19,7 @@ import * as stylex from '@stylexjs/stylex';
 import {colorVars, spacingVars, radiusVars} from '../../../theme/tokens.stylex';
 import {focusOutlineProps} from '../../../utils/focusOutline.stylex';
 import {Icon} from '../../../Icon';
+import {ComponentIcon} from '../../../Icon/ComponentIcon';
 import {resolveContextActions} from '../../tableContextMenu';
 import type {
   TablePlugin,
@@ -153,17 +155,22 @@ const sortStyles = stylex.create({
   buttonAlignEnd: {
     justifyContent: 'flex-end',
   },
+  // The wrapper takes no block size, so a theme's larger glyph overflows it
+  // instead of growing the Sort control or the header row. When the slot
+  // hides the glyph, the empty wrapper collapses, so the button's gap does
+  // not offset an end-aligned label.
+  iconWrapper: {
+    display: {default: 'inline-flex', ':empty': 'none'},
+    alignItems: 'center',
+    blockSize: 0,
+  },
   iconWrapperUnsorted: {
-    display: 'inline-flex',
     opacity: {
       default: 0.35,
       ':is(th:hover *)': 1,
       ':focus-visible': 1,
     },
   },
-  iconWrapperActive: {
-    display: 'inline-flex',
-  },
   rank: {
     fontSize: 10,
     // eslint-disable-next-line @astryx/no-hardcoded-styles -- no token for lineHeight:1 (tight badge)
@@ -227,7 +234,7 @@ function SortHeaderButton<T extends Record<string, unknown>>({
     config.isMultiSortEnabled === true && config.sort.length > 1;
   const rank = isMultiSort && entryIndex >= 0 ? entryIndex + 1 : null;
 
-  const iconName =
+  const indicator =
     direction === 'ascending'
       ? 'arrowUp'
       : direction === 'descending'
@@ -299,13 +306,13 @@ function SortHeaderButton<T extends Record<string, unknown>>({
         <span>{children}</span>
         <span
           {...stylex.props(
-            direction != null
-              ? sortStyles.iconWrapperActive
-              : sortStyles.iconWrapperUnsorted,
+            sortStyles.iconWrapper,
+            direction == null && sortStyles.iconWrapperUnsorted,
           )}>
-          <Icon
-            icon={iconName}
-            size="xsm"
+          <ComponentIcon
+            slot="table-sort-indicator"
+            state={{direction: direction ?? 'none'}}
+            fallback={{icon: indicator, size: 'xsm'}}
             color={direction != null ? 'accent' : 'secondary'}
           />
         </span>

package/src/privateAttributes/press.stylex.ts

@@ -8,7 +8,8 @@
  * @input StyleX, the overlay color tokens, the touch press strength
  *   (`pressVars`) and the row layer's clocks (utils/rowPressLayer.stylex.ts)
  * @output `rowPressLayerStyles`, the compositor press layer for list rows
- *   (`cell`, `cellOnImage` for a `backgroundImage` row), and
+ *   (`cell`, `cellOnImage` for a `backgroundImage` row,
+ *   `cellOnImagePressOnly` for a row whose fill is the hover tone), and
  *   `rowPressPaintStyles`, a CheckboxList row's press paint for its box
  * @position Owner module of the private press attribute: the press controller
  *   (utils/pressFeedback.ts) writes it, and this file reads it. No package
@@ -240,6 +241,25 @@ export const rowPressLayerStyles = stylex.create({
       },
     },
   },
+  /**
+   * `cellOnImage` without the hover arm, for a row whose fill is already the
+   * hover tone (a highlighted Item row). A hover layer on it would match a
+   * pressed row, so the row shows only its press.
+   */
+  cellOnImagePressOnly: {
+    backgroundImage: {
+      default: null,
+      [ENABLED]: {
+        default: null,
+        ':active': {
+          default: pressedImage,
+          [COARSE]: 'none',
+        },
+        [PRESSED_ON]: {default: pressedOverlayImage, [COARSE]: 'none'},
+        [PRESSED_FADING]: {default: pressedOverlayImage, [COARSE]: 'none'},
+      },
+    },
+  },
 });
 
 export const rowPressPaintStyles = stylex.create({