@astryxdesign/core 0.7.7-canary.c0929c8 → 0.7.7-canary.c19ca12

package/src/BottomSheet/BottomSheet.tsx

@@ -75,6 +75,7 @@ import {
 import {useDevWarning} from '../hooks/useDevWarning';
 import {useScrollLock} from '../hooks/useScrollLock';
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {observeMutations} from '../utils/sharedMutationObserver';
 import {mergeProps} from '../utils/mergeProps';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
@@ -147,12 +148,17 @@ const styles = stylex.create({
   },
   // An open standalone dialog positions its panel: the panel sits at its
   // block end, centred, with no wrapper. A tap beside a narrower panel lands
-  // on the dialog, which light dismiss reads. The stack's recede applies to
-  // this dialog too, so a covered sheet shrinks and lifts as one.
+  // on the dialog, which light dismiss reads. A flex row, not a grid: WebKit
+  // lays a grid host out again on each render inside the sheet, which makes
+  // each update slower. Not a column: WebKit then drops the content's
+  // block-end padding from the scroll range. In a row the panel's height is
+  // its own cross size, so a sheet taller than the viewport runs past the top
+  // edge, as in a grid. The stack's recede applies to this dialog too, so a
+  // covered sheet shrinks and lifts as one.
   dialogPanelHost: {
-    display: 'grid',
-    alignContent: 'end',
-    justifyItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-end',
   },
   // A non-modal sheet is in the top layer as a manual popover, so it has no
   // page z-index (AST-027). Below the Popover API floor, `show()` leaves it
@@ -207,6 +213,10 @@ const styles = stylex.create({
       transitionTimingFunction: 'linear',
     },
   },
+  // A closing sheet that keeps focus takes no pointer input during its exit.
+  exitHoldingFocus: {
+    pointerEvents: 'none',
+  },
   positioner: {
     position: 'absolute',
     insetInline: 0,
@@ -255,6 +265,24 @@ function stackPositionerStyles(view: BottomSheetStackView) {
 }
 
 /** The `data-sheet-stack` value for a host: only set while sheets stack. */
+/** Stops a click, from any input, before it reaches its target. */
+function ignoreActivation(event: React.MouseEvent): void {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+/**
+ * Stops every key except Tab before it reaches the focused control, so no
+ * key handler runs and no text changes (a search field's Enter, a typed
+ * letter, Backspace, an arrow that reopens a list). Tab still moves focus.
+ */
+function ignoreKeyDuringExit(event: React.KeyboardEvent): void {
+  if (event.key !== 'Tab') {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
+
 function stackStateAttribute(
   view: BottomSheetStackView,
   isOpen: boolean,
@@ -445,10 +473,14 @@ function StandaloneBottomSheet({
   // `isOpen` restarts the flag during render, and the layout effect below
   // settles a close.
   const [isCloseSettled, setIsCloseSettled] = useState(false);
+  // Whether focus was inside the sheet when it closed. Such a sheet stays out
+  // of `inert` and `aria-hidden` until its exit ends and focus has left.
+  const [isExitFocusHeld, setIsExitFocusHeld] = useState(false);
   const [settledIsOpen, setSettledIsOpen] = useState(isOpen);
   if (settledIsOpen !== isOpen) {
     setSettledIsOpen(isOpen);
     setIsCloseSettled(false);
+    setIsExitFocusHeld(false);
   }
   const panelState: BottomSheetPanelState = isOpen
     ? {kind: 'open', entering: stackView.isReplacing}
@@ -576,9 +608,8 @@ function StandaloneBottomSheet({
   }, [hasScrim, shouldPresent, writeScrim]);
   useLayoutEffect(() => {
     if (!isOpen) {
-      // Read before the browser's focus fixup for the exiting sheet's
-      // `inert` runs (at the next rendering opportunity), so this is where
-      // focus was when the person closed the sheet.
+      // Where focus was when the person closed the sheet. The closing sheet
+      // is not inert yet, so focus has not moved.
       const dialog = dialogRef.current;
       hadFocusAtCloseRef.current =
         dialog != null && dialog.contains(dialog.ownerDocument.activeElement);
@@ -591,6 +622,8 @@ function StandaloneBottomSheet({
       // that was not paired as a replace is an exit from here on.
       // eslint-disable-next-line @eslint-react/set-state-in-effect -- settles the close once the registry has answered
       setIsCloseSettled(true);
+      // Read with the close, before the sheet can go inert.
+      setIsExitFocusHeld(hadFocusAtCloseRef.current);
     }
   }, [hasScrim, isOpen, shouldPresent]);
 
@@ -694,7 +727,44 @@ function StandaloneBottomSheet({
   );
 
   const {ref: modalityRef} = useInteractionModalityTracking();
-  const dialogComposedRef = useMergedRefs(dialogRef, modalityRef);
+  // Ends the exit hold once focus has left the sheet: moved elsewhere, or
+  // dropped to the page because the focused control was removed or disabled.
+  // Native listeners, because React drops the `focusout` a browser sends while
+  // React removes the focused element, and Firefox and WebKit send no
+  // `focusout` for a removed element at all, so a subtree change is read too.
+  // Each reads the focus after the event. They attach only while a closing
+  // sheet holds focus, so a closed or open sheet observes nothing.
+  const isWatchingExitFocus =
+    !isOpen && isPresented && !isReplaced && isExitFocusHeld;
+  const exitFocusRef = useCallback(
+    (dialog: HTMLDialogElement | null) => {
+      if (dialog == null || !isWatchingExitFocus) {
+        return;
+      }
+      const releaseIfFocusLeft = () => {
+        if (!dialog.contains(dialog.ownerDocument.activeElement)) {
+          setIsExitFocusHeld(false);
+        }
+      };
+      const onFocusOut = () => queueMicrotask(releaseIfFocusLeft);
+      dialog.addEventListener('focusout', onFocusOut);
+      const unobserve = observeMutations(
+        dialog,
+        {
+          childList: true,
+          subtree: true,
+          attributeFilter: ['disabled', 'hidden', 'inert'],
+        },
+        releaseIfFocusLeft,
+      );
+      return () => {
+        dialog.removeEventListener('focusout', onFocusOut);
+        unobserve();
+      };
+    },
+    [isWatchingExitFocus],
+  );
+  const dialogComposedRef = useMergedRefs(dialogRef, modalityRef, exitFocusRef);
   useScrollLock(shouldPresent && hasScrim);
   useDevWarning(
     'BottomSheet',
@@ -764,7 +834,16 @@ function StandaloneBottomSheet({
   // that contains no presented sheet is marked inert and hidden as well, so
   // the state is explicit; one that does contain the top sheet is left alone,
   // because inert on it would reach the top sheet too.
-  const isInert = isExiting || stackView.isBlocked;
+  // A sheet that closes with focus inside it is neither inert nor hidden
+  // while that focus stays: `inert` would drop the focus to the page, and
+  // `aria-hidden` would hide the focused control. When the exit ends, the
+  // dialog closes and focus returns in the same task. When focus leaves the
+  // sheet first (into a sheet opened above it, for example), the sheet goes
+  // inert at once. Until the close settles, no closing sheet is inert, so the
+  // first commit of a close never hides focus.
+  const isExitHoldingFocus =
+    isExiting && !isReplaced && (!isCloseSettled || isExitFocusHeld);
+  const isInert = (isExiting && !isExitHoldingFocus) || stackView.isBlocked;
 
   return (
     <dialog
@@ -779,6 +858,7 @@ function StandaloneBottomSheet({
         hasScrim && styles.scrim,
         hasScrim && isEntrySettled && styles.scrimSettled,
         hasScrim && isExiting && styles.scrimClosing,
+        isExitHoldingFocus && styles.exitHoldingFocus,
         !hasScrim && styles.dialogNonModal,
       )}
       ref={dialogComposedRef}
@@ -800,6 +880,11 @@ function StandaloneBottomSheet({
         hasScrim && stackView.depth > 0 ? stackView.depth : undefined
       }
       onCancel={handleCancel}
+      // A closing sheet that keeps focus takes no activation during its
+      // exit: no click and no key but Tab reaches the control that has focus.
+      onClickCapture={isExitHoldingFocus ? ignoreActivation : undefined}
+      onKeyDownCapture={isExitHoldingFocus ? ignoreKeyDuringExit : undefined}
+      onKeyUpCapture={isExitHoldingFocus ? ignoreKeyDuringExit : undefined}
       // Presses inside the sheet do not reach handlers around where it is
       // written. The dialog, not the panel, is the root, as in a switcher.
       {...layerClickBoundary({onClick: handleClick})}>

package/src/BottomSheet/BottomSheetPanel.tsx

@@ -296,14 +296,19 @@ const styles = stylex.create({
   },
   content: {
     // Preserve the body's block formatting (including margin/float isolation)
-    // and its definite percentage-height basis. min-content lets this real
+    // and its definite percentage-height basis. fit-content lets this real
     // observed box grow with async content beyond a fixed-height viewport.
     // This box is also the sheet's container: it carries the padding and
     // publishes it, so a lone Section child escapes it exactly as in Dialog.
     display: 'flow-root',
     boxSizing: 'border-box',
     height: '100%',
-    minHeight: 'min-content',
+    // fit-content, not min-content: they are one size in the block axis, but
+    // WebKit ignores min-content on a block's min-height. There the box keeps
+    // its body's height on a budget-height sheet. Content placed directly in
+    // it then overflows the box, and its block-end padding leaves the scroll
+    // range.
+    minHeight: 'fit-content',
   },
   tallKeyboardBody: {
     scrollPaddingBlockEnd: MOBILE_KEYBOARD_BOTTOM_CLEARANCE,
@@ -413,6 +418,7 @@ function waitForTransition(
 
   let done = false;
   let timer: ReturnType<typeof setTimeout> | null = null;
+  let backstopMs = 0;
   const finish = () => {
     if (done) {
       return;
@@ -426,9 +432,24 @@ function waitForTransition(
     complete();
   };
   const handleTransitionEnd = (event: TransitionEvent) => {
-    if (event.target === element && event.propertyName === propertyName) {
-      finish();
+    if (event.target !== element || event.propertyName !== propertyName) {
+      return;
+    }
+    // The engine cancels a transition whose end value changes mid-flight. A
+    // percentage transform does when the closing frame moves the height by a
+    // fraction of a pixel. A replacement runs on from where it was. That one
+    // ends the motion, not the cancel.
+    if (
+      event.type === 'transitioncancel' &&
+      hasRunningTransition(element, propertyName)
+    ) {
+      if (timer != null) {
+        clearTimeout(timer);
+        timer = setTimeout(finish, backstopMs);
+      }
+      return;
     }
+    finish();
   };
   element.addEventListener('transitionend', handleTransitionEnd);
   element.addEventListener('transitioncancel', handleTransitionEnd);
@@ -479,7 +500,8 @@ function waitForTransition(
     return () => {};
   }
 
-  timer = setTimeout(finish, transitionMs + TRANSITION_BACKSTOP_BUFFER_MS);
+  backstopMs = transitionMs + TRANSITION_BACKSTOP_BUFFER_MS;
+  timer = setTimeout(finish, backstopMs);
   return () => {
     if (timer != null) {
       clearTimeout(timer);
@@ -489,6 +511,19 @@ function waitForTransition(
   };
 }
 
+// Whether a CSS transition of `propertyName` still runs on `element`.
+function hasRunningTransition(
+  element: HTMLElement,
+  propertyName: string,
+): boolean {
+  return (element.getAnimations?.() ?? []).some(
+    animation =>
+      (animation as Animation & {transitionProperty?: string})
+        .transitionProperty === propertyName &&
+      (animation.playState === 'running' || animation.playState === 'paused'),
+  );
+}
+
 function parseTransitionTime(value: string): number | null {
   const normalizedValue = value.trim();
   if (!/^-?(?:\d+|\d*\.\d+)(?:ms|s)$/.test(normalizedValue)) {

package/src/BottomSheet/bottomSheetStack.ts

@@ -866,12 +866,16 @@ function openModalsOutside(element: Element): HTMLDialogElement[] {
     if (dialog === element || dialog.contains(element)) {
       continue;
     }
-    // A modal on its way out (a closing sheet keeps its dialog modal through
-    // the exit animation, inert and hidden) blocks nothing any more: it is
-    // gone for this decision.
+    // A modal on its way out blocks nothing any more: it is gone for this
+    // decision. A closing sheet keeps its dialog modal through the exit
+    // animation; it is inert and hidden then, unless focus was inside it at
+    // the close, so the registry's own record of the close counts too.
     if (
       dialog.hasAttribute('inert') ||
-      dialog.getAttribute('aria-hidden') === 'true'
+      dialog.getAttribute('aria-hidden') === 'true' ||
+      state.entries.some(
+        entry => !entry.isOpen && entry.getElement() === dialog,
+      )
     ) {
       continue;
     }

package/src/BottomSheet/useSheetGestures.ts

@@ -738,7 +738,9 @@ export function useSheetGestures({
         }
         return;
       }
-      recordSheetHeight(node.getBoundingClientRect().height);
+      // No measure here: reading the height while the sheet mounts forces a
+      // layout in the middle of the open. The observer's first report comes
+      // after the browser's own layout, before the first paint.
       const ro = new ResizeObserver(entries => {
         const entry = entries[0];
         if (entry) {

package/src/Breadcrumbs/BreadcrumbItem.tsx

@@ -7,7 +7,8 @@
  * @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext,
  *   rtlStyles for the contextual default slash, and (for the menu trigger)
  *   usePopover + the shared DropdownMenu item API (renderDropdownItems,
- *   DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
+ *   DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus), and
+ *   the AppShell mobile drawer helpers
  * @output Exports BreadcrumbItem component and BreadcrumbItemProps
  * @position Individual breadcrumb item; used inside Breadcrumbs
  *
@@ -72,6 +73,10 @@ import {
 import type {DropdownMenuOption} from '../DropdownMenu/DropdownMenu';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {
+  useCloseMobileDrawerOnActivate,
+  useIsInAppShellMobileDrawer,
+} from '../AppShell/useCloseMobileDrawerOnActivate';
 import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {isRenderable} from '../utils/isRenderable';
 // =============================================================================
@@ -306,6 +311,11 @@ export function BreadcrumbItem({
   // aria-current on this instead of guessing the <li>'s last child.
   const contentRef = useRef<HTMLElement>(null);
 
+  const closeDrawerAfter = useCloseMobileDrawerOnActivate(
+    useIsInAppShellMobileDrawer(),
+  );
+  const handleActivate = closeDrawerAfter(onClick);
+
   const isCurrent = isCurrentProp === true;
   const isAutoCandidate = isCurrentProp == null;
   const hasMenu = menu != null;
@@ -456,7 +466,7 @@ export function BreadcrumbItem({
         <LinkComponent
           ref={contentRef}
           href={href}
-          onClick={onClick}
+          onClick={handleActivate}
           {...focusOutlineProps.focusVisible(
             itemStyles.link,
             isSupporting ? itemStyles.supportingLink : itemStyles.defaultLink,
@@ -467,7 +477,7 @@ export function BreadcrumbItem({
         <button
           ref={contentRef as React.RefObject<HTMLButtonElement | null>}
           type="button"
-          onClick={onClick}
+          onClick={handleActivate}
           {...focusOutlineProps.focusVisible(
             itemStyles.link,
             itemStyles.buttonReset,

package/src/Button/Button.tsx

@@ -19,6 +19,7 @@
  */
 
 import {
+  isValidElement,
   use,
   useEffect,
   useRef,
@@ -44,6 +45,7 @@ import {
   focusVars,
 } from '../theme/tokens.stylex';
 import {Spinner} from '../Spinner/Spinner';
+import {Icon} from '../Icon/Icon';
 import {VisuallyHidden} from '../VisuallyHidden/VisuallyHidden';
 import {IconDefaultSizeProvider} from '../Icon/IconDefaultSizeContext';
 import {iconBoxSizeStyles, type IconSize} from '../Icon/IconSize.stylex';
@@ -51,6 +53,7 @@ import {iconBoxSizeStyles, type IconSize} from '../Icon/IconSize.stylex';
 import {EDGE_COMP_ATTR} from '../Layout/edgeCompensation.stylex';
 import {useSize} from '../SizeContext/SizeContext';
 import {useButtonGroup} from '../ButtonGroup/ButtonGroupContext';
+import {PressGroupContext} from '../hooks/pressGroupContext';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
 import {InputGroupInternalContext} from '../InputGroup/InputGroupInternalContext';
 import {
@@ -75,6 +78,12 @@ import {isRenderable} from '../utils/isRenderable';
 
 registerEnglishFallback(english);
 
+/**
+ * Written by the press controller or a group's tracker while a press is
+ * believed. Typed `string`, so StyleX reads it as a computed key.
+ */
+const PRESSED_ON: string = '[data-astryx-press="on"]';
+
 /**
  * Base button styles
  * Pseudo-classes are nested within properties per StyleX recommendation:
@@ -136,7 +145,19 @@ const styles = stylex.create({
         default: 'scale(0.98)',
         '@media (pointer: coarse)': 'scale(1)',
       },
-      '[data-astryx-press="on"]': 'scale(0.98)',
+      [PRESSED_ON]: 'scale(0.98)',
+    },
+  },
+  // A tracked action's own `:active` image paints nothing: the tracker paints
+  // the action under the pointer, which need not be the one pressed first.
+  trackedOverlay: {
+    backgroundSize: {default: null, [`:active:not(${PRESSED_ON})`]: '0 0'},
+  },
+  // A tracked action's press is painted by its group's tracker alone.
+  pressableTracked: {
+    transform: {
+      default: 'scale(1)',
+      [PRESSED_ON]: 'scale(0.98)',
     },
   },
   inactive: {
@@ -145,7 +166,7 @@ const styles = stylex.create({
     transform: {
       default: 'none',
       ':active': 'none',
-      '[data-astryx-press="on"]': 'none',
+      [PRESSED_ON]: 'none',
     },
   },
   disabled: {
@@ -158,7 +179,7 @@ const styles = stylex.create({
     backgroundImage: {
       default: 'none',
       ':active': 'none',
-      '[data-astryx-press="on"]': 'none',
+      [PRESSED_ON]: 'none',
     },
   },
   iconOnly: {
@@ -559,6 +580,21 @@ const groupStyles = stylex.create({
   },
 });
 
+/**
+ * Whether `node` adds nothing to a content name: nothing renders, or an Icon
+ * with no label. Any other node can add text.
+ */
+function addsNoName(node: ReactNode): boolean {
+  if (!isRenderable(node)) {
+    return true;
+  }
+  if (!isValidElement<{label?: unknown}>(node) || node.type !== Icon) {
+    return false;
+  }
+  const {label} = node.props;
+  return typeof label !== 'string' || label.trim() === '';
+}
+
 /**
  * A versatile button component with multiple variants.
  *
@@ -615,6 +651,7 @@ export function Button({
   const t = useComponentTranslator();
   const size = useSize(sizeProp, 'md');
   const buttonGroup = useButtonGroup();
+  const isGroupTracked = use(PressGroupContext);
   const inputGroup = useInputGroup();
 
   const [isPending, startTransition] = useTransition();
@@ -743,11 +780,13 @@ export function Button({
     sizeStyles[size],
     isIconOnly && styles.iconOnly,
     interactionOverlayStyles.backgroundImage,
+    isGroupTracked && styles.trackedOverlay,
     buttonDisabled && styles.inactive,
     isTrueDisabled && styles.disabled,
     useAriaDisabled && styles.ariaDisabled,
     renderAsLink && styles.link,
-    !buttonGroup && styles.pressable,
+    !buttonGroup &&
+      (isGroupTracked ? styles.pressableTracked : styles.pressable),
     buttonGroup &&
       (buttonGroup.orientation === 'horizontal'
         ? groupStyles.horizontal
@@ -836,10 +875,29 @@ export function Button({
     (children != null && children !== label);
   const ariaLabelProp = needsAriaLabel ? {'aria-label': label} : null;
 
+  // The Button's accessible name when props decide it: the derived
+  // aria-label, else a caller aria-label, else the label text alone. It is
+  // not known here when a caller aria-labelledby names the Button from other
+  // elements, or when `icon` or `endContent` can add text to its content
+  // name (a count, for example). A decorative Icon in either slot adds none.
+  const accessibleName =
+    props['aria-labelledby'] != null
+      ? undefined
+      : needsAriaLabel
+        ? label
+        : (props['aria-label'] ??
+          (addsNoName(icon) && addsNoName(endContent) ? label : undefined));
+  // A tooltip that repeats the name adds nothing to the description, so a
+  // screen reader does not read the same words twice.
+  const isTooltipName =
+    tooltip != null &&
+    accessibleName != null &&
+    tooltip.trim() === accessibleName.trim();
+
   // When a tooltip is attached via the hook, point aria-describedby at the
   // tooltip content (composing with any consumer-provided value).
   const describedByProp =
-    tooltip != null
+    tooltip != null && !isTooltipName
       ? {
           'aria-describedby':
             [props['aria-describedby'], tooltipHook.describedBy]

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -151,6 +151,15 @@ export const docs = {
       },
       {className: 'astryx-checkbox-label'},
     ],
+    vars: [
+      {
+        name: '--_indicator-press-image',
+        description:
+          "The row's touch press image, handed down to a first-party indicator that paints its own press. Set from the press paint only while the row itself is pressed; only this row declares it.",
+        default: 'none',
+        private: true,
+      },
+    ],
   },
   usage: {
     accessibility: [
@@ -390,6 +399,15 @@ export const docsZh = {
       },
       {className: 'astryx-checkbox-label'},
     ],
+    vars: [
+      {
+        name: '--_indicator-press-image',
+        description:
+          '复选框行的触摸按下图像，传递给自行绘制按下效果的第一方指示器。仅在该行自身被按下时根据按下涂层设置，只有该行声明它。',
+        default: 'none',
+        private: true,
+      },
+    ],
   },
 };
 

package/src/CheckboxInput/CheckboxInput.tsx

@@ -46,6 +46,7 @@ import {useTooltip} from '../Tooltip/useTooltip';
 import {mergeProps} from '../utils/mergeProps';
 import {rtlStyles} from '../utils/rtlStyles';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
+import {indicatorPressScope} from '../internal/indicatorPress.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
@@ -63,6 +64,11 @@ import english from '../i18n/generated-english/CheckboxInput/CheckboxInput.gener
 
 registerEnglishFallback(english);
 
+/** Written by the touch press controller while the row is pressed. */
+const PRESSED_ON = '[data-astryx-press="on"]';
+/** Written by the touch press controller for the press's release. */
+const PRESSED_FADING = '[data-astryx-press="fading"]';
+
 // The touch press's paint, declared by the shared overlay styles on the
 // element the controller writes to (`pressedAlpha`) at the press's strength,
 // 1 while on and 1 → 0 over the release, and inherited resolved by the layer
@@ -78,6 +84,20 @@ const styles = stylex.create({
   containerLabelHidden: {
     gap: 0,
   },
+  // An indicator in another package may not name this row's private press
+  // attribute. So the row hands its touch press image down to an indicator
+  // that paints its own press, but only in its own press states. A pressed
+  // ancestor row reaches it no more than it reaches the built-in box. The
+  // property has no default: a layered stylesheet ranks a default above the
+  // arms. Only this row declares it. A menu item paints its own press, so a
+  // mapped indicator there paints none.
+  indicatorPressImage: {
+    '--_indicator-press-image': {
+      default: null,
+      [PRESSED_ON]: 'var(--_press-paint-image)',
+      [PRESSED_FADING]: 'var(--_press-paint-image)',
+    },
+  },
   checkboxWrapper: {
     position: 'relative',
     display: 'flex',
@@ -86,15 +106,22 @@ const styles = stylex.create({
     flexShrink: 0,
     isolation: 'isolate',
   },
-  // The owner paints this layer over the resolved indicator, so a theme
-  // replacement cannot accidentally drop the component's pressed contract.
+  // The owner paints this layer over the resolved indicator, so a plain theme
+  // replacement keeps the pressed feedback. An indicator with
+  // `indicatorPressScope` paints its own press from what the row hands down,
+  // so this layer stays off over it.
   // Two pointers, two press models (see interactionOverlay.stylex.ts): a
   // mouse keeps `:active`; under a coarse pointer that arm is dropped and the
   // touch press controller writes `data-astryx-press` on the row, which this layer
   // reads off the same scope marker as the hover tint.
   indicatorPressOverlay: {
     '::after': {
-      content: '""',
+      // `when.descendant` takes a pseudo-class; `:is(*)` matches any marked
+      // indicator.
+      content: {
+        default: '""',
+        [stylex.when.descendant(':is(*)', indicatorPressScope)]: 'none',
+      },
       position: 'absolute',
       inset: 0,
       borderRadius: radiusVars['--radius-inner'],
@@ -112,15 +139,14 @@ const styles = stylex.create({
       // what moves. Coarse pointers only, like the drop above.
       backgroundImage: {
         default: null,
-        [stylex.when.ancestor('[data-astryx-press="on"]', indicatorScope)]: {
+        [stylex.when.ancestor(PRESSED_ON, indicatorScope)]: {
+          default: null,
+          '@media (pointer: coarse)': pressedOverlayImage,
+        },
+        [stylex.when.ancestor(PRESSED_FADING, indicatorScope)]: {
           default: null,
           '@media (pointer: coarse)': pressedOverlayImage,
         },
-        [stylex.when.ancestor('[data-astryx-press="fading"]', indicatorScope)]:
-          {
-            default: null,
-            '@media (pointer: coarse)': pressedOverlayImage,
-          },
       },
     },
   },
@@ -450,6 +476,7 @@ export function CheckboxInput({
           // Hover and focus reach the checkbox visual through this ancestor
           // marker rather than props, so the whole row drives it.
           !isDisabled && indicatorScope,
+          !isDisabled && styles.indicatorPressImage,
           // The touch press's strength and release live on the row the
           // controller writes to; the layer over the checkbox box inherits
           // and paints it.

package/src/CheckboxList/CheckboxList.doc.mjs

@@ -178,12 +178,14 @@ export const docs = {
     {
       name: 'containerClassName',
       type: 'string',
-      description: 'Class name for the field container. Same targeting as `containerXstyle`.',
+      description:
+        'Class name for the field container. Same targeting as `containerXstyle`.',
     },
     {
       name: 'containerStyle',
       type: 'CSSProperties',
-      description: 'Inline styles for the field container. Same targeting as `containerXstyle`.',
+      description:
+        'Inline styles for the field container. Same targeting as `containerXstyle`.',
     },
     {
       name: 'controlXstyle',

package/src/CheckboxList/CheckboxList.tsx

@@ -246,6 +246,7 @@ export function CheckboxList({
         ? disabledMessageTooltip.describedBy
         : undefined,
       isReadOnly,
+      isInvalid: status?.type === 'error',
       loadingValues,
     }),
     [
@@ -256,6 +257,7 @@ export function CheckboxList({
       showsDisabledMessage,
       disabledMessageTooltip.describedBy,
       isReadOnly,
+      status?.type,
       loadingValues,
     ],
   );
@@ -298,6 +300,10 @@ export function CheckboxList({
             controlStyle,
           )}
           role="group"
+          // Screen readers announce the whole group as unavailable. Its dimmed
+          // label then labels a disabled control. An enabled list keeps a
+          // caller's own value.
+          aria-disabled={isDisabled || rest['aria-disabled']}
           // A caller aria-labelledby names the group together with its label.
           aria-labelledby={joinAriaIDs(labelID, ariaLabelledByProp)}
           aria-describedby={