@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

package/src/BottomSheet/useSheetGestures.ts

@@ -5,7 +5,8 @@
 /**
  * @file useSheetGestures.ts
  * @input Uses React (useCallback, useEffect, useMemo, useRef, useState)
- * @output Exports useSheetGestures hook and its option/result types
+ * @output Exports useSheetGestures hook, its option/result types, and the
+ *   height and end-inset formats a host renders for the layout split
  * @position Internal to BottomSheet; not exported from the core entry point
  *
  * Drag + snap machinery for the bottom sheet. Tracks a pointer drag down the
@@ -26,10 +27,18 @@
  * A live drag writes that transform straight to the sheet element, once per
  * input sample, and renders nothing: React state changes when the drag begins
  * and ends, and in between only when the layout split changes (a drag that
- * crosses above its base detent restores the full height). The live offset
- * is readable through `activeOffsetRef`. The host owns the element's
- * transform outside a drag and writes the resting value after each commit,
- * so a settle animates from wherever the finger left the sheet.
+ * crosses above its base detent restores the full height). That crossing
+ * changes three things that only look right together: the transform, the
+ * sheet's height and the scrolling area's end inset. The move writes all
+ * three to the elements in the same task, so the browser paints them in one
+ * frame, and the render it schedules catches the host up to the same values
+ * whenever it commits; it never decides what the next frame shows. The live
+ * offset is readable through `activeOffsetRef`. The host owns the element's
+ * transform, height and end inset outside a drag and writes their resting
+ * values after each commit (a host with a fixed height of its own keeps that
+ * height, and the drag never writes it), so a settle animates from wherever the finger
+ * left the sheet, and a release processed before the crossing move's render
+ * commits still leaves the sheet drawn at its resting detent.
  *
  * Those are pixels, and the stops behind them are relative to the viewport, so
  * a sheet at rest re-resolves its detent on `resize` / `orientationchange`,
@@ -206,6 +215,28 @@ function preservationInsetForOffset(
   return Math.max(0, baseOffset - targetOffset - naturalEndGap);
 }
 
+/**
+ * The sheet's height, in px, while it is in motion or rests with a layout
+ * split: the fully open height less the part the scrolling area gives up.
+ * The host renders it and a live drag writes it; one format keeps the two
+ * identical, so the render that follows a written value changes nothing.
+ */
+export function sheetLayoutHeight(
+  sheetHeight: number,
+  layoutOffset: number,
+): string {
+  return `${Math.max(0, sheetHeight - Math.max(0, layoutOffset))}px`;
+}
+
+/**
+ * The scrolling area's end padding that preserves its scroll position across
+ * a height change, or nothing when there is none to add. Shared by the host's
+ * render and a live drag's write for the same reason as sheetLayoutHeight.
+ */
+export function scrollPreservationPadding(inset: number): string | undefined {
+  return inset > 0 ? `${inset}px` : undefined;
+}
+
 function renderedBlockEndPadding(element: HTMLElement): number {
   const value = Number.parseFloat(getComputedStyle(element).paddingBlockEnd);
   return Number.isFinite(value) ? value : 0;
@@ -368,6 +399,14 @@ export interface UseSheetGesturesOptions {
    * on the dismiss overshoot. Lets the owner mirror it onto the scrim.
    */
   onScrimOpacity?: (opacity: number) => void;
+  /**
+   * Whether the host draws the sheet at a fixed height of its own (a caller's
+   * height) rather than the layout-split height. A drag across the base
+   * detent then writes only the transform and the end inset, and leaves the
+   * element's height to the host.
+   * @default false
+   */
+  hasFixedHeight?: boolean;
 }
 
 export interface SheetContentProps {
@@ -508,6 +547,7 @@ export function useSheetGestures({
   snapHeights,
   onSnap,
   onScrimOpacity,
+  hasFixedHeight = false,
 }: UseSheetGesturesOptions): UseSheetGesturesResult {
   const [dragOffset, setDragOffset] = useState(0);
   const [settledOffset, setSettledOffset] = useState(0);
@@ -657,11 +697,13 @@ export function useSheetGestures({
   const canDismissRef = useRef(canDismiss);
   const onSnapRef = useRef(onSnap);
   const onScrimOpacityRef = useRef(onScrimOpacity);
+  const hasFixedHeightRef = useRef(hasFixedHeight);
   useEffect(() => {
     onDismissRef.current = onDismiss;
     canDismissRef.current = canDismiss;
     onSnapRef.current = onSnap;
     onScrimOpacityRef.current = onScrimOpacity;
+    hasFixedHeightRef.current = hasFixedHeight;
   });
 
   // Live drag bookkeeping (refs so pointermove doesn't churn renders).
@@ -954,6 +996,31 @@ export function useSheetGestures({
     [],
   );
 
+  // A live drag's layout split moved. The transform written beside this call
+  // is only correct on the new split, so the height and end inset that pair
+  // with it go to the elements in the same task. They are the values the host
+  // renders from the state this move also sets, in the same format, so its
+  // commit, whenever it lands, leaves them as they are. If the drag ends
+  // before that commit, the host's post-commit write puts the resting values
+  // back, since React sees no change from what it committed before the drag.
+  // A host with a fixed height of its own renders that height throughout and
+  // never restores a written one, so its height is not written.
+  const writeLiveLayout = useCallback(
+    (sheetHeight: number, layoutOffset: number) => {
+      const element = sheetElRef.current;
+      // Unmeasured, the host renders no height to pair with.
+      if (element != null && sheetHeight > 0 && !hasFixedHeightRef.current) {
+        element.style.height = sheetLayoutHeight(sheetHeight, layoutOffset);
+      }
+      const body = bodyNodeRef.current;
+      if (body != null) {
+        body.style.paddingBlockEnd =
+          scrollPreservationPadding(scrollPreservationInsetRef.current) ?? '';
+      }
+    },
+    [],
+  );
+
   const cancelDrag = useCallback(
     (target?: HTMLElement) => {
       const state = dragStateRef.current;
@@ -1262,23 +1329,28 @@ export function useSheetGestures({
       state.renderedOffset = next;
       state.layoutOffset = layoutOffset;
       activeOffsetRef.current = next;
+      updateScrollPreservationInset(
+        preservationInsetForOffset(
+          state.baseLayoutOffset,
+          layoutOffset,
+          state.naturalEndGap,
+        ),
+      );
       writeLiveTransform(next, layoutOffset);
       if (hasLayoutChanged) {
-        // The layout split moved: the host renders the new height, reading
-        // the offset it has to pair with it from state.
+        // The layout split moved. The new height and end inset are written
+        // with the transform, in this task: a render scheduled normally can
+        // commit after the next paint, and the transform alone on the old
+        // height would put the sheet the whole split away from the finger
+        // for that frame. The host still renders them from state, reading
+        // the offset it has to pair with the height from here.
+        writeLiveLayout(state.height, layoutOffset);
         setDragOffset(next);
       }
       if (!state.hasTraveled && next !== state.baseOffset) {
         state.hasTraveled = true;
         setIsTraveling(true);
       }
-      updateScrollPreservationInset(
-        preservationInsetForOffset(
-          state.baseLayoutOffset,
-          layoutOffset,
-          state.naturalEndGap,
-        ),
-      );
 
       // Mirror the scrim to the live drag: full at/above the mid detent,
       // fading to hidden as it collapses onto the peek detent and through the
@@ -1295,7 +1367,12 @@ export function useSheetGestures({
         scrimOpacityForOffset(next, offsets, dismissOffset, peekOffset),
       );
     },
-    [resolveDetents, updateScrollPreservationInset, writeLiveTransform],
+    [
+      resolveDetents,
+      updateScrollPreservationInset,
+      writeLiveLayout,
+      writeLiveTransform,
+    ],
   );
 
   const endDrag = useCallback(

package/src/Breadcrumbs/BreadcrumbItem.tsx

@@ -527,7 +527,7 @@ function BreadcrumbMenuTrigger({
   // The menu's rows move focus with the last input
   // (`architecture:interaction-modality` INV1); this menu has no press model
   // to activate the tracking they read, so it activates it itself.
-  useInteractionModalityTracking();
+  const {ref: modalityRef} = useInteractionModalityTracking();
 
   const popover = usePopover({
     hasLightDismiss: true,
@@ -646,6 +646,7 @@ function BreadcrumbMenuTrigger({
         ref={useMergedRefs(
           ref as React.Ref<HTMLButtonElement>,
           buttonRef,
+          modalityRef,
           popover.triggerRef,
         )}
         type="button"

package/src/Center/Center.tsx

@@ -8,7 +8,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Center/Center.doc.mjs
- * - /packages/core/src/Center/Center.spec.md
+ * - /docs/specs/components/Center/Center.spec.md
  * - /packages/core/src/Center/Center.test.tsx
  * - /apps/storybook/stories/Center.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Center/ (showcase blocks)

package/src/Chat/ChatComposer.tsx

@@ -54,11 +54,9 @@ import {ChatSendButton} from './ChatSendButton';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 import {useAnnounceRenderedText} from '../hooks/useAnnounceRenderedText';
+import {useMergedRefs} from '../hooks/useMergedRefs';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
-import {
-  getInteractionModality,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
 
 // =============================================================================
 // Types
@@ -394,8 +392,6 @@ export function ChatComposer(props: ChatComposerProps) {
   const [internalValue, setInternalValue] = useState('');
   const [hasKeyboardEditorFocus, setHasKeyboardEditorFocus] = useState(false);
 
-  useInteractionModalityTracking();
-
   const isControlled = controlledValue !== undefined;
   const currentValue = isControlled ? controlledValue : internalValue;
 
@@ -424,6 +420,8 @@ export function ChatComposer(props: ChatComposerProps) {
   const canSend = currentValue.trim().length > 0 && !isDisabled;
 
   const bodyRef = useRef<HTMLDivElement>(null);
+  const {ref: modalityRef, readModality} = useInteractionModalityTracking();
+  const bodyComposedRef = useMergedRefs(bodyRef, modalityRef);
 
   // Input slot registers its focus (and future) control here so the shell can
   // drive it without knowing its DOM shape. Stable ref — safe in the memoized
@@ -458,11 +456,10 @@ export function ChatComposer(props: ChatComposerProps) {
   const handleBodyFocusCapture = useCallback(
     (event: FocusEvent<HTMLDivElement>) => {
       setHasKeyboardEditorFocus(
-        isComposerEditor(event.target) &&
-          getInteractionModality() === 'keyboard',
+        isComposerEditor(event.target) && readModality() === 'keyboard',
       );
     },
-    [],
+    [readModality],
   );
 
   const handleBodyBlurCapture = useCallback(
@@ -550,7 +547,7 @@ export function ChatComposer(props: ChatComposerProps) {
         {drawer}
 
         <div
-          ref={bodyRef}
+          ref={bodyComposedRef}
           onClick={handleBodyClick}
           onPointerDownCapture={() => setHasKeyboardEditorFocus(false)}
           onFocusCapture={handleBodyFocusCapture}

package/src/Chat/ChatComposerDrawer.tsx

@@ -15,7 +15,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/ChatComposerDrawer.test.tsx
  * - /packages/core/src/Chat/ChatComposerDrawer.doc.mjs
- * - /packages/core/src/Chat/ChatComposerDrawer.spec.md
+ * - /docs/specs/components/Chat/ChatComposerDrawer.spec.md
  * - /apps/storybook/stories/ChatComposerDrawer.stories.tsx
  * - /packages/core/src/Chat/index.ts (exports)
  * - /packages/cli/assets/templates/blocks/components/ChatComposerDrawer/ (block examples)

package/src/Chat/ChatComposerInput.tsx

@@ -20,7 +20,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/ChatComposerInput.test.tsx
  * - /packages/core/src/Chat/ChatComposerInput.doc.mjs
- * - /packages/core/src/Chat/ChatComposerInput.spec.md
+ * - /docs/specs/components/Chat/ChatComposerInput.spec.md
  * - /apps/storybook/stories/ChatComposerInput.stories.tsx
  * - /packages/core/src/Chat/index.ts
  * - /apps/storybook/stories/ChatComposer.stories.tsx

package/src/Chat/ChatLayout.tsx

@@ -119,12 +119,6 @@ const styles = stylex.create({
   rootScrollable: {
     overflowY: 'auto',
     overflowX: 'hidden',
-    // Hide scrollbar during programmatic scroll animation
-    // to prevent flash. Restored when animation settles.
-    scrollbarWidth: {
-      default: null,
-      ':is([data-astryx-scrolling])': 'none',
-    },
   },
 
   messageArea: {
@@ -255,6 +249,7 @@ const styles = stylex.create({
 // =============================================================================
 
 function hasVisibleContent(children: ReactNode): boolean {
+  // eslint-disable-next-line @astryx/no-nullish-jsx-guard -- component:ChatLayout FR5 names exactly null, undefined, false and an empty array as empty children; '' and true are not
   if (children == null || children === false) {
     return false;
   }

package/src/Chat/ChatMessageList.tsx

@@ -254,6 +254,7 @@ export function ChatMessageList({
   }, [layoutContext]);
 
   const hasChildren =
+    // eslint-disable-next-line @astryx/no-nullish-jsx-guard -- component:ChatMessageList FR4 shows the empty state only for nullish, false or an empty top-level array children
     children != null &&
     children !== false &&
     !(Array.isArray(children) && children.length === 0);

package/src/Chat/ChatPastedTextToken.tsx

@@ -4,12 +4,14 @@
 
 /**
  * @file ChatPastedTextToken.tsx
- * @input Uses React, StyleX, Badge, HoverCard, Button, provider-bound translator
+ * @input Uses React, StyleX, Badge, HoverCard, Button, provider-bound translator,
+ *   the shared tap stop (`useTapStop`)
  * @output Exports ChatPastedTextToken component
  * @position Inline token for pasted text with hover card preview + expand
  *
- * Hover: card with truncated text preview and "Expand" button.
- * Expand replaces the token with the full text in the contentEditable.
+ * Hover, or a tap by finger or pen: card with truncated text preview and
+ * "Expand" button. Expand replaces the token with the full text in the
+ * contentEditable.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts (exports)
@@ -26,6 +28,7 @@ import {Badge} from '../Badge';
 import {Button} from '../Button';
 import {HoverCard} from '../HoverCard';
 import {useTranslator, type TranslatorFn} from '../i18n';
+import {useTapStop} from '../Layer/useTouchTrigger';
 
 // =============================================================================
 // Types
@@ -92,6 +95,13 @@ export function ChatPastedTextToken({
 }: ChatPastedTextTokenProps) {
   const t = useTranslator();
   const label = formatLabel(text, t);
+  // A tap on the token, by finger or pen, asks for its preview, so it stops
+  // there: cancelling the mouse press the browser makes of it keeps the
+  // composer around the token from taking focus and the caret, which on a
+  // touch device raises the keyboard over the preview. The tap's click still
+  // reaches the card's trigger. A mouse press still places the caret, and
+  // hover opens the preview.
+  const tapStop = useTapStop('mousedown');
 
   const cardContent = (
     <div {...stylex.props(styles.preview)}>
@@ -116,7 +126,7 @@ export function ChatPastedTextToken({
       placement="above"
       alignment="start"
       hasHoverIndication={false}>
-      <Badge label={label} variant="neutral" />
+      <Badge label={label} variant="neutral" {...tapStop} />
     </HoverCard>
   );
 }

package/src/Chat/ChatSystemMessage.tsx

@@ -29,6 +29,7 @@ import {
   typographyVars,
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
+import {isRenderable} from '../utils/isRenderable';
 import {Divider} from '../Divider';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
@@ -152,7 +153,9 @@ export function ChatSystemMessage({
       )}
       {...rest}>
       <span {...stylex.props(styles.content)}>
-        {icon != null && <span {...stylex.props(styles.icon)}>{icon}</span>}
+        {isRenderable(icon) && (
+          <span {...stylex.props(styles.icon)}>{icon}</span>
+        )}
         {children}
       </span>
     </div>

package/src/Chat/ChatToolCalls.tsx

@@ -465,6 +465,7 @@ function CallRow({
       {call.node != null && (
         <Badge label={call.node} variant="neutral" xstyle={styles.nodePill} />
       )}
+      {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `target` is a string field: an empty string still marks a target */}
       {call.target != null && (
         <span {...stylex.props(styles.callLabel)}>{call.target}</span>
       )}
@@ -472,11 +473,13 @@ function CallRow({
         call.deletions != null ||
         call.stats != null) && (
         <span {...stylex.props(styles.stats)}>
+          {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `additions` is a count: 0 renders "+0" */}
           {call.additions != null && (
             <span {...stylex.props(styles.statsAdditions)}>
               +{call.additions}
             </span>
           )}
+          {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `deletions` is a count: 0 renders "-0" */}
           {call.deletions != null && (
             <span {...stylex.props(styles.statsDeletions)}>
               -{call.deletions}
@@ -485,6 +488,7 @@ function CallRow({
           {call.stats}
         </span>
       )}
+      {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `duration` is a string field, not a slot */}
       {call.duration != null && status === 'complete' && (
         <span {...stylex.props(styles.callDuration)}>{call.duration}</span>
       )}
@@ -657,6 +661,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
               <VisuallyHidden>{latestStatusAnnouncement}</VisuallyHidden>
             </span>
             <span {...stylex.props(styles.callName)}>{latestCall.name}</span>
+            {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `target` is a string field: an empty string still marks a target */}
             {latestCall.target != null && (
               <span {...stylex.props(styles.callLabel)}>
                 {latestCall.target}

package/src/CheckboxList/CheckboxList.tsx

@@ -202,7 +202,9 @@ export function CheckboxList({
   // Disabled-reason tooltip. Applies to the whole-group disabled state. Disabled
   // controls swallow pointer events, so the tooltip listeners attach to the
   // group container and the checkboxes stay perceivable via aria-disabled
-  // instead of the disabled attribute. Toggling is blocked in the item.
+  // instead of the disabled attribute. Toggling is blocked in the item. The
+  // reason describes the group and each checkbox (see
+  // CheckboxListContextValue.disabledMessageID).
   const showsDisabledMessage = isDisabled && !!disabledMessage;
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
@@ -240,6 +242,9 @@ export function CheckboxList({
       onChange: isCollectionMode ? handleChange : undefined,
       isDisabled,
       hasDisabledMessage: showsDisabledMessage,
+      disabledMessageID: showsDisabledMessage
+        ? disabledMessageTooltip.describedBy
+        : undefined,
       isReadOnly,
       loadingValues,
     }),
@@ -249,6 +254,7 @@ export function CheckboxList({
       handleChange,
       isDisabled,
       showsDisabledMessage,
+      disabledMessageTooltip.describedBy,
       isReadOnly,
       loadingValues,
     ],

package/src/CheckboxList/CheckboxListContext.tsx

@@ -28,6 +28,14 @@ export interface CheckboxListContextValue {
    * and AT-discoverable; toggling is still blocked.
    */
   hasDisabledMessage?: boolean;
+  /**
+   * The id of the group's reason tooltip while `hasDisabledMessage` is true.
+   * The reason describes the group (CheckboxList FR1) and every checkbox adds
+   * it to its own `aria-describedby` (FR9): a screen reader announces a
+   * checkbox's description when the checkbox takes focus, which it does not
+   * reliably do for a description on the group.
+   */
+  disabledMessageID?: string;
   isReadOnly: boolean;
   /**
    * Values of the items whose `changeAction` is pending. Each matching item

package/src/CheckboxList/CheckboxListItem.tsx

@@ -29,6 +29,7 @@ import {ListContext} from '../List/ListContext';
 import {CheckboxListContext} from './CheckboxListContext';
 import {useTranslator} from '../i18n';
 import {ItemDescriptionContext} from '../Item/ItemDescriptionContext';
+import {joinAriaIDs} from '../utils/inputAria';
 import type {ItemAlign} from '../Item';
 
 // =============================================================================
@@ -153,14 +154,19 @@ export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
  *
  * This component owns `aria-describedby`, so the prop is omitted rather than
  * accepted and overwritten: a caller passing one would otherwise lose the id
- * silently.
+ * silently. After the row's description comes the group's disabled reason
+ * (CheckboxList's disabledMessage), which describes each checkbox (FR9).
  */
 function DescribedCheckboxInput(
   props: Omit<CheckboxInputProps, 'aria-describedby'>,
 ) {
   const describedBy = use(ItemDescriptionContext);
+  const reasonID = use(CheckboxListContext)?.disabledMessageID;
   return (
-    <CheckboxInput {...props} aria-describedby={describedBy ?? undefined} />
+    <CheckboxInput
+      {...props}
+      aria-describedby={joinAriaIDs(describedBy ?? undefined, reasonID)}
+    />
   );
 }
 

package/src/Code/Code.tsx

@@ -8,7 +8,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Code/Code.doc.mjs (consumer API and theming metadata)
- * - /packages/core/src/Code/Code.spec.md (behavior and verification map)
+ * - /docs/specs/components/Code/Code.spec.md (behavior and verification map)
  * - /packages/core/src/CodeBlock/index.ts (compatibility re-exports if types change)
  * - /packages/cli/assets/templates/blocks/components/Code/ (showcase blocks)
  * - /packages/cli/assets/templates/blocks/components/CodeBlock/ (showcase blocks)

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -37,10 +37,7 @@ import {useDialogContext} from '../Dialog/DialogContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {
-  getInteractionModality,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
@@ -223,13 +220,13 @@ export function CommandPaletteInput({
   // Text-entry controls match :focus-visible after pointer focus in Chromium.
   // Keep the shared selector, but narrow its ring to focus acquired through
   // keyboard navigation so a click or pointer-opened palette stays unringed.
-  useInteractionModalityTracking();
+  const {ref: modalityRef, readModality} = useInteractionModalityTracking();
   const handleFocus = useCallback(
     (event: React.FocusEvent<HTMLInputElement>) => {
-      setIsKeyboardFocus(getInteractionModality() === 'keyboard');
+      setIsKeyboardFocus(readModality() === 'keyboard');
       onFocus?.(event);
     },
-    [onFocus],
+    [onFocus, readModality],
   );
   const handleBlur = useCallback(
     (event: React.FocusEvent<HTMLInputElement>) => {
@@ -312,7 +309,7 @@ export function CommandPaletteInput({
       </span>
       <input
         {...props}
-        ref={useMergedRefs(ref, inputRef)}
+        ref={useMergedRefs(ref, inputRef, modalityRef)}
         {...(isKeyboardFocus
           ? focusOutlineProps.focusVisible(styles.input)
           : focusOutlineProps.suppressed(styles.input))}

package/src/ComplexSelector/ComplexSelector.tsx

@@ -37,7 +37,7 @@ import {useDevWarning} from '../hooks/useDevWarning';
 import {mergeRefs} from '../utils/mergeRefs';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
-import {Field, inputWrapperStyles, type FieldStatusVariant} from '../Field';
+import {Field, inputWrapperStyles} from '../Field';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import {Spinner} from '../Spinner';
 import {useTranslator} from '../i18n';
@@ -64,6 +64,12 @@ import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {layerViewportInset} from '../Layer/layerViewportInset.stylex';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
+
+// The popup content's own block-size cap; the viewport cap is the layer
+// runtime's.
+const CONTENT_BLOCK_CAP = '480px';
 
 const styles = stylex.create({
   // The tooltip-placement status info-tip sits beside the chevron and keeps
@@ -207,7 +213,12 @@ const styles = stylex.create({
   // rotation through a single selector. The wrapper keeps only layout.
   triggerIconRotation: {
     transitionProperty: 'transform',
-    transitionDuration: durationVars['--duration-fast'],
+    // Under reduced motion the chevron turns at once: an in-place state
+    // change moves nothing (design:reduced-motion DR1–DR3).
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
     transitionTimingFunction: easeVars['--ease-standard'],
     transformOrigin: 'center',
   },
@@ -219,7 +230,14 @@ const styles = stylex.create({
   },
   content: {
     boxSizing: 'border-box',
-    maxHeight: 'min(480px, calc(100vh - 32px))',
+    // The content's own cap, under the layer runtime's viewport cap: the
+    // viewport minus its gutters and any bar the app declares through
+    // LayerProvider's `inset` (spec:AST-059 FR2, FR6), so the last rows never
+    // paint under that bar.
+    maxHeight: stylex.firstThatWorks(
+      `min(${CONTENT_BLOCK_CAP}, ${layerViewportInset.maxBlockSize})`,
+      `min(${CONTENT_BLOCK_CAP}, ${layerViewportInset.maxBlockSizeFallback})`,
+    ),
     overflow: 'auto',
     padding: spacingVars['--spacing-3'],
   },
@@ -400,7 +418,7 @@ export interface ComplexSelectorProps<Value> extends Omit<
    * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
    * @default 'attached' for input selectors; 'detached' for secondary and ghost selectors
    */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusPlacement;
   /** Tooltip text displayed next to the label. */
   labelTooltip?: string;
   /** Trigger and field size. */

package/src/DateInput/DateInput.tsx

@@ -41,7 +41,6 @@ import {
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
-  type FieldStatusVariant,
 } from '../Field';
 import {Icon} from '../Icon';
 import {VisuallyHidden} from '../VisuallyHidden';
@@ -215,6 +214,7 @@ import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {useLocale, useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
 export interface DateInputProps extends Omit<
   FieldInputBaseProps<HTMLInputElement>,
   'onChange' | 'defaultValue'
@@ -344,7 +344,7 @@ export interface DateInputProps extends Omit<
    * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
    * @default 'attached'
    */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusPlacement;
 
   /**
    * Width of the field. Numbers are treated as pixels, strings are used as-is