@astryxdesign/core 0.7.7-canary.f9ac85f → 0.7.7

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';
@@ -559,6 +561,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.
  *
@@ -836,10 +853,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/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={

package/src/CheckboxList/CheckboxListContext.tsx

@@ -37,6 +37,12 @@ export interface CheckboxListContextValue {
    */
   disabledMessageID?: string;
   isReadOnly: boolean;
+  /**
+   * True when the list has an error `status`. Each checkbox is then
+   * `aria-invalid`. Some screen readers skip a group's invalid state when a
+   * checkbox takes focus.
+   */
+  isInvalid?: boolean;
   /**
    * Values of the items whose `changeAction` is pending. Each matching item
    * renders an in-checkbox spinner and blocks re-toggling; the list is empty

package/src/CheckboxList/CheckboxListItem.tsx

@@ -24,6 +24,7 @@ import {colorVars} from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {CheckboxInput} from '../CheckboxInput/CheckboxInput';
 import type {CheckboxInputProps} from '../CheckboxInput/CheckboxInput';
+import type {InputStatus} from '../Field/types';
 import {ListItem} from '../List/ListItem';
 import {ListContext} from '../List/ListContext';
 import {CheckboxListContext} from './CheckboxListContext';
@@ -149,6 +150,8 @@ export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
 // Component
 // =============================================================================
 
+const ERROR_STATUS: InputStatus = {type: 'error'};
+
 /**
  * The row's visible description is the checkbox's accessible description. Item
  * renders that element and owns its id, and publishes the id through
@@ -167,11 +170,17 @@ function DescribedCheckboxInput(
   props: Omit<CheckboxInputProps, 'aria-describedby'>,
 ) {
   const describedBy = use(ItemDescriptionContext);
-  const reasonID = use(CheckboxListContext)?.disabledMessageID;
+  const listContext = use(CheckboxListContext);
   return (
     <CheckboxInput
       {...props}
-      aria-describedby={joinAriaIDs(describedBy ?? undefined, reasonID)}
+      aria-describedby={joinAriaIDs(
+        describedBy ?? undefined,
+        listContext?.disabledMessageID,
+      )}
+      // The status has no message, so CheckboxInput renders nothing. The list
+      // renders the message.
+      status={listContext?.isInvalid ? ERROR_STATUS : undefined}
     />
   );
 }

package/src/DateInput/DateInput.tsx

@@ -884,12 +884,18 @@ function PointerDateField({
         if (!isEffectivelyDisabled) {
           popover.show({skipAutoFocus: true});
         }
-      } else if (e.key === 'Enter') {
+      } else if (
+        e.key === 'Enter' &&
+        (pendingInput !== null || isEffectivelyDisabled)
+      ) {
+        // Typed text holds Enter back, or a form would submit the value from
+        // before the commit. A disabled or busy field must not submit its
+        // form either. Otherwise Enter keeps its default, as in any text field.
         e.preventDefault();
         commitPendingInput();
       }
     },
-    [popover, commitPendingInput, isEffectivelyDisabled],
+    [popover, commitPendingInput, isEffectivelyDisabled, pendingInput],
   );
 
   const inputWrapper = (

package/src/DateInput/MonthScroller.tsx

@@ -38,6 +38,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import {flushSync} from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
 import {useCalendarDays} from '../Calendar';
 import {useDirection, useLocale} from '../i18n';
@@ -62,7 +63,11 @@ import {
   plainDateToISO,
   DATE_FORMAT_WITH_WEEKDAY,
 } from '../utils';
-import {reducedMotionFade} from '../motion/reducedMotion';
+import {
+  playReducedMotionDip,
+  reducedMotionFade,
+  type ReducedMotionDip,
+} from '../motion/reducedMotion';
 import {dateInputTouchSizes, dateInputTouchGeometry} from './tokens.stylex';
 import {useOwnScrollGesture} from './useOwnScrollGesture';
 import {useScrollSettle} from './useScrollSettle';
@@ -434,17 +439,12 @@ export function MonthScroller({
 
   // The Reduced Motion dip of a step on a touch screen, owned here so a
   // second step or the unmount clears it.
-  const dipRef = useRef<{animation: Animation; timer: number} | null>(null);
+  const dipRef = useRef<ReducedMotionDip | null>(null);
   const stopDip = useCallback(() => {
-    const dip = dipRef.current;
-    if (dip != null) {
-      window.clearTimeout(dip.timer);
-      dip.animation.cancel();
-      dipRef.current = null;
-    }
+    dipRef.current?.cancel();
+    dipRef.current = null;
   }, []);
-  // Synchronizes with the dip's timer and animation: neither outlives the
-  // scroller.
+  // Synchronizes with the dip's animations: they do not outlive the scroller.
   useEffect(() => stopDip, [stopDip]);
 
   const scrollToMonth = useCallback(
@@ -505,18 +505,14 @@ export function MonthScroller({
           land();
           return;
         }
-        // A second step within the dip has replaced the first (above): only
-        // its scroll lands, at its own dip's middle.
-        dipRef.current = {
-          animation: scroller.animate(
-            [{opacity: 1}, {opacity: 0}, {opacity: 1}],
-            {duration: fade.duration, easing: fade.easing},
-          ),
-          timer: window.setTimeout(() => {
-            dipRef.current = null;
-            land();
-          }, fade.duration / 2),
-        };
+        // A newer step replaces this one: only its scroll lands.
+        dipRef.current = playReducedMotionDip(scroller, fade, () => {
+          dipRef.current = null;
+          // The fade-in starts as soon as this returns. So render now: the
+          // scroll lands in the layout effect, before the fade-in.
+          // eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the month must change before the dip's fade-in starts
+          flushSync(land);
+        });
         return;
       }
       steeredRowRef.current = row;

package/src/DateInput/Wheel.tsx

@@ -49,7 +49,11 @@ import {
   durationVars,
 } from '../theme/tokens.stylex';
 import {focusOutlineStyles} from '../utils';
-import {reducedMotionFade} from '../motion/reducedMotion';
+import {
+  playReducedMotionDip,
+  reducedMotionFade,
+  type ReducedMotionDip,
+} from '../motion/reducedMotion';
 import {dateInputTouchSizes, dateInputTouchGeometry} from './tokens.stylex';
 import {useOwnScrollGesture} from './useOwnScrollGesture';
 import {usePointerDragScroll} from './usePointerDragScroll';
@@ -331,19 +335,19 @@ export function Wheel({
   // once on a fine one.
   const lastPointerRef = useRef<string | null>(null);
 
-  // A reduced-motion dip whose rows have not landed yet: its timer and the
-  // row it lands on. While one is pending the rows stay put for it, so they
-  // never move at full opacity, and a further step retargets it.
-  const pendingFadeRef = useRef<{timer: number; top: number} | null>(null);
+  // A reduced-motion dip whose rows have not landed yet: the row they land
+  // on. While one is pending the rows stay put for it, so they never move at
+  // full opacity, and a further step retargets it.
+  const pendingFadeRef = useRef<{top: number} | null>(null);
   // The running dip, so a step during its fade-in starts the next one where
   // the column is.
-  const dipRef = useRef<Animation | null>(null);
+  const dipRef = useRef<ReducedMotionDip | null>(null);
+  // Synchronizes with the dip's animations: an unmounted wheel lands nothing.
   useEffect(
     () => () => {
-      if (pendingFadeRef.current != null) {
-        window.clearTimeout(pendingFadeRef.current.timer);
-        pendingFadeRef.current = null;
-      }
+      pendingFadeRef.current = null;
+      dipRef.current?.cancel();
+      dipRef.current = null;
     },
     [],
   );
@@ -368,19 +372,15 @@ export function Wheel({
           ? reducedMotionFade(scroller, {touchRelease})
           : null;
       const pending = pendingFadeRef.current;
+      // A change that lands now replaces a pending landing. Its dip goes on
+      // and fades back in.
       if (fadeTiming == null) {
-        if (pending != null) {
-          window.clearTimeout(pending.timer);
-          pendingFadeRef.current = null;
-        }
+        pendingFadeRef.current = null;
         scroller.scrollTo({top, behavior});
         return;
       }
       if (fadeTiming.duration === 0 || typeof scroller.animate !== 'function') {
-        if (pending != null) {
-          window.clearTimeout(pending.timer);
-          pendingFadeRef.current = null;
-        }
+        pendingFadeRef.current = null;
         scroller.scrollTo({top, behavior: 'auto'});
         return;
       }
@@ -389,26 +389,24 @@ export function Wheel({
         pending.top = top;
         return;
       }
-      const {duration, easing} = fadeTiming;
       // A step during the last dip's fade-in starts the new dip at the
       // column's current opacity, not at full opacity. A leaving element fades
       // out from where it is.
       const shown = Number.parseFloat(getComputedStyle(scroller).opacity);
       dipRef.current?.cancel();
-      dipRef.current = scroller.animate(
-        [
-          {opacity: Number.isFinite(shown) ? shown : 1, easing},
-          {opacity: 0, easing},
-          {opacity: 1},
-        ],
-        {duration, easing: 'linear'},
-      );
-      const landing = {top, timer: 0};
-      landing.timer = window.setTimeout(() => {
-        pendingFadeRef.current = null;
-        scroller.scrollTo({top: landing.top, behavior: 'auto'});
-      }, duration / 2);
+      const landing = {top};
       pendingFadeRef.current = landing;
+      dipRef.current = playReducedMotionDip(
+        scroller,
+        fadeTiming,
+        () => {
+          if (pendingFadeRef.current === landing) {
+            pendingFadeRef.current = null;
+            scroller.scrollTo({top: landing.top, behavior: 'auto'});
+          }
+        },
+        Number.isFinite(shown) ? shown : 1,
+      );
     },
     [itemBlockSize],
   );

package/src/DateTimeInput/DateTimeInput.tsx

@@ -1143,12 +1143,18 @@ function PointerDateTimeField({
         if (!isEffectivelyDisabled) {
           popover.show({skipAutoFocus: true});
         }
-      } else if (e.key === 'Enter') {
+      } else if (
+        e.key === 'Enter' &&
+        (datePendingInput !== null || isEffectivelyDisabled)
+      ) {
+        // Typed text holds Enter back, or a form would submit the value from
+        // before the commit. A disabled or busy field must not submit its
+        // form either. Otherwise Enter keeps its default, as in any text field.
         e.preventDefault();
         commitDatePendingInput();
       }
     },
-    [popover, commitDatePendingInput, isEffectivelyDisabled],
+    [popover, commitDatePendingInput, isEffectivelyDisabled, datePendingInput],
   );
 
   // --- Time-option popover (#2727) ---

package/src/Dialog/Dialog.tsx

@@ -189,8 +189,22 @@ const styles = stylex.create({
     position: 'fixed',
     margin: 'auto',
     padding: 0,
-    borderWidth: 0,
-    borderStyle: 'none',
+    // The backdrop does not blur the page. Forced colors override the
+    // backdrop's colour, so a 1px border keeps the modal separate from the
+    // page. It is a border, not an outline: the focus ring
+    // (focusOutlineProps) owns the outline longhands on this element.
+    borderWidth: {
+      default: 0,
+      '@media (forced-colors: active)': 1,
+    },
+    borderStyle: {
+      default: 'none',
+      '@media (forced-colors: active)': 'solid',
+    },
+    borderColor: {
+      default: null,
+      '@media (forced-colors: active)': 'CanvasText',
+    },
     backgroundColor: colorVars['--color-background-surface'],
     '--_dialog-radius': radiusVars['--radius-container'],
     borderRadius: 'var(--_dialog-radius)',
@@ -236,11 +250,10 @@ const styles = stylex.create({
   openSettled: {
     animationName: 'none',
   },
-  // Backdrop using ::backdrop pseudo-element
+  // No backdrop-filter: a full-viewport blur is costly to repaint.
   backdrop: {
     '::backdrop': {
       backgroundColor: colorVars['--color-overlay'],
-      backdropFilter: 'blur(2px)',
     },
   },
   fullscreen: {
@@ -249,6 +262,8 @@ const styles = stylex.create({
     maxWidth: '100dvw',
     maxHeight: '100dvh',
     borderRadius: 0,
+    // Nothing of the page shows around a full-screen dialog: no edge.
+    borderWidth: 0,
     margin: 0,
     inset: 0,
   },

package/src/Drawer/Drawer.tsx

@@ -222,8 +222,8 @@ const styles = stylex.create({
   // Scrim via the browser's ::backdrop pseudo-element (top layer).
   scrim: {
     '::backdrop': {
+      // No backdrop-filter: a full-viewport blur is costly to repaint.
       backgroundColor: colorVars['--color-overlay'],
-      backdropFilter: 'blur(2px)',
       opacity: 0,
       transitionProperty: 'opacity',
       transitionDuration: durationVars['--duration-medium'],

package/src/Drawer/useDrawerDialogPresence.ts

@@ -33,6 +33,7 @@ import {
 } from 'react';
 import {flushSync} from 'react-dom';
 import {notifyTopLayerEntry} from '../Layer/modalOutlet';
+import {runPopoverOperation} from '../Layer/popoverOperations';
 
 /** Slack past the computed transition before the backstop gives up waiting. */
 const EXIT_BACKSTOP_BUFFER_MS = 50;
@@ -71,7 +72,10 @@ function showDrawerHost(dialog: HTMLDialogElement, isModal: boolean): void {
   if (isModal) {
     dialog.showModal();
   } else if (typeof dialog.showPopover === 'function') {
-    dialog.showPopover();
+    // The dialog's show focuses its first control. A tooltip on that control
+    // then asks to show. The browser refuses a show inside another show.
+    // Counting this show makes the tooltip wait until it ends.
+    runPopoverOperation(dialog.ownerDocument, () => dialog.showPopover());
     // The drawer is now the newest top-layer entry: global hosts shown before
     // it (the toast viewport) re-enter above it, as they do above a modal.
     notifyTopLayerEntry();

package/src/Field/PanelSearchInput.tsx

@@ -58,6 +58,7 @@ import {
 } from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {textEntryTraitAttributes} from './textEntryTraits';
+import {inputWrapperStyles} from './inputStyles.stylex';
 
 const styles = stylex.create({
   // Gutter only. Matches the option list's own padding so the field below
@@ -185,6 +186,14 @@ export interface PanelSearchInputProps extends Omit<
    * the field to the same height as its rows.
    */
   fieldXstyle?: StyleXStyles;
+  /**
+   * Draw the field as the shared input box — the input border, accent while
+   * focused, surface and radius — instead of the borderless panel row. A
+   * touch sheet is a full-width surface, not a bordered panel, so its field
+   * reads as a form input.
+   * @default false
+   */
+  hasInputBox?: boolean;
 }
 
 /**
@@ -208,6 +217,7 @@ export function PanelSearchInput({
   onBlur,
   onContainerKeyDown,
   fieldXstyle,
+  hasInputBox = false,
   xstyle,
   className,
   style,
@@ -268,6 +278,7 @@ export function PanelSearchInput({
         {...stylex.props(
           styles.field,
           isKeyboardFocus && styles.fieldKeyboardFocus,
+          hasInputBox && inputWrapperStyles.base,
           fieldXstyle,
         )}>
         <Icon icon="search" size="sm" color="secondary" xstyle={styles.icon} />

package/src/InfoTip/InfoTip.doc.mjs

@@ -66,7 +66,7 @@ export const docs = {
       {
         guidance: true,
         description:
-          'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip triggerBehavior to toggle, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
+          'Rely on InfoTip rather than a hand-rolled info button on touch: it pins its help on a press, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
       },
       {
         guidance: false,
@@ -131,7 +131,7 @@ export const docsZh = {
       {
         guidance: true,
         description:
-          'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip triggerBehavior to toggle, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
+          'Rely on InfoTip rather than a hand-rolled info button on touch: it pins its help on a press, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
       },
       {
         guidance: false,
@@ -168,7 +168,7 @@ export const docsDense = {
       {
         guidance: true,
         description:
-          'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip triggerBehavior to toggle, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
+          'Rely on InfoTip rather than a hand-rolled info button on touch: it pins its help on a press, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
       },
       {
         guidance: false,

package/src/InfoTip/InfoTip.tsx

@@ -23,7 +23,7 @@ import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {Icon, type IconSize} from '../Icon/Icon';
-import {Tooltip} from '../Tooltip/Tooltip';
+import {TooltipWithTriggerBehavior} from '../Tooltip/Tooltip';
 import {
   registerEnglishFallback,
   useComponentTranslator,
@@ -122,8 +122,8 @@ const styles = stylex.create({
  * labels, values, and metrics for permission notes, metric definitions, and
  * field help.
  *
- * InfoTip is Tooltip with `triggerBehavior="toggle"` on a named button: Tooltip
- * opens, pins, announces, and closes the help. The info icon resolves from
+ * InfoTip is a press-to-pin Tooltip on a named button: Tooltip opens, pins,
+ * announces, and closes the help. The info icon resolves from
  * the icon registry, so themes can replace it.
  *
  * @example
@@ -157,7 +157,7 @@ export function InfoTip({
   // stack takes Escape, so one press never closes both the help and an
   // enclosing Dialog.
   return (
-    <Tooltip
+    <TooltipWithTriggerBehavior
       content={content}
       // The tooltip is the button's only purpose. A click, a tap, Enter, or
       // Space pins it open, and the press stops at the button. So an InfoTip's
@@ -179,7 +179,7 @@ export function InfoTip({
         )}>
         <Icon icon="info" size={size} />
       </button>
-    </Tooltip>
+    </TooltipWithTriggerBehavior>
   );
 }