@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/DateTimeInput/DateTimeInput.tsx

@@ -33,6 +33,7 @@ import {
   type KeyboardEvent,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import {inputDisabledFocusStyles} from '../Field/inputDisabledFocus';
 import {
   colorVars,
   sizeVars,
@@ -63,6 +64,11 @@ import {
 } from '../Calendar';
 import {useCalendarConstraints} from '../Calendar/hooks';
 import {usePopover} from '../Popover';
+import {
+  isFocusInsideOwnedLayer,
+  isPressInsideOwnedLayer,
+  useOutsidePress,
+} from '../Layer/outsidePress';
 import {useTooltip} from '../Tooltip';
 import {useInputContainer} from '../hooks/useInputContainer';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
@@ -98,7 +104,7 @@ import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
-import {useLocale, useTranslator} from '../i18n';
+import {useLocale} from '../i18n';
 import {
   formatLocaleTime,
   parseLocaleTime,
@@ -116,6 +122,13 @@ import {
   type PickerPresentation,
 } from '../utils/inputPresentation';
 import {useDevWarning} from '../hooks/useDevWarning';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/DateTimeInput/DateTimeInput.generated';
+
+registerEnglishFallback(english);
 export type ISODateTimeString = string & {
   readonly __brand: 'ISODateTimeString';
 };
@@ -149,18 +162,6 @@ export type {
 const HORIZONTAL_SEGMENT_BASIS = 196;
 
 const styles = stylex.create({
-  // The shared disabled style drops the focus ring; restore it while a
-  // control inside the field holds focus (spec:AST-085 FR6). Defaults repeat it.
-  disabledFocusRing: {
-    borderColor: {
-      default: colorVars['--color-border-emphasized'],
-      ':focus-within': colorVars['--color-accent'],
-    },
-    boxShadow: {
-      default: 'none',
-      ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
-    },
-  },
   row: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -668,7 +669,7 @@ function PointerDateTimeField({
     onKeyDown: onKeyDownProp,
     ...controlProps
   } = rest;
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const usesNativePicker = nativeMode !== 'off';
   // `forced` (`presentation="native"`, FR2): no Astryx fallback. `adaptive`
@@ -1154,10 +1155,9 @@ function PointerDateTimeField({
   const timeListboxId = useId();
   const [highlightedTimeIndex, setHighlightedTimeIndex] = useState(-1);
 
-  // With popover="auto", showing the popover between pointerdown and
-  // pointerup/click lets the browser's light-dismiss treat that same click as
-  // "outside" and close it again. Defer the show past the click, as
-  // BaseTypeahead does for the same reason.
+  // Defer a show that happens during a press past that press's click, so the
+  // list's outside-press watch starts after the press ends and never judges
+  // it, as BaseTypeahead does.
   const timePointerActiveRef = useRef(false);
 
   // Whether the highlight is still the one typing derived, or the user has
@@ -1177,14 +1177,35 @@ function PointerDateTimeField({
     );
   }, []);
 
+  // The time list is a manual popover: the browser's light dismiss counts a
+  // press in the time input as outside (a text input cannot be an invoker), so
+  // a press in the field would close the list it just opened. A press on the
+  // time field or in the list is inside; a press anywhere else closes it
+  // (architecture:layer-runtime, component:BaseTypeahead FR12's rule).
+  const timeOutsidePress = useOutsidePress();
   const timePopover = usePopover({
-    hasLightDismiss: true,
+    hasLightDismiss: false,
     hasCloseButton: false,
     hasAutoFocus: false,
     // The popup's own role="listbox" carries the semantics; the input keeps
     // DOM focus, so announcing a dialog here would misrepresent it.
     role: 'none',
-    onHide: () => setHighlightedTimeIndex(-1),
+    onShow: () => {
+      const field = timeContainerRef.current;
+      if (field == null) {
+        return;
+      }
+      timeOutsidePress.start(
+        field,
+        path => isPressInsideOwnedLayer(path, field, timePopover.id),
+        // Called after usePopover has returned, so `timePopover` is assigned.
+        () => timePopover.hide(),
+      );
+    },
+    onHide: () => {
+      timeOutsidePress.stop();
+      setHighlightedTimeIndex(-1);
+    },
   });
 
   // Anchor the list to the time wrapper, not the date input the field's own
@@ -1421,22 +1442,19 @@ function PointerDateTimeField({
     (e: FocusEvent<HTMLInputElement>) => {
       setIsTimeFocused(false);
 
-      // Native light dismiss only fires on outside clicks and Escape, so a focus
-      // move that is neither — Tab handled elsewhere, or a programmatic focus —
-      // would strand the listbox open in the top layer. Focus landing inside the
+      // The outside-press watch only answers pointer presses and Escape stays
+      // on the layer stack, so a focus move that is neither — Tab handled
+      // elsewhere, or a programmatic focus — would strand the listbox open. Focus landing inside the
       // field or the popup itself is not a leave. Mirrors BaseTypeahead.
-      if (timePopover.isOpen) {
-        const next = e.relatedTarget as Node | null;
-        const popoverEl = next ? document.getElementById(timePopover.id) : null;
-        if (
-          !next ||
-          !(
-            timeContainerRef.current?.contains(next) ||
-            popoverEl?.contains(next)
-          )
-        ) {
-          timePopover.hide();
-        }
+      if (
+        timePopover.isOpen &&
+        !isFocusInsideOwnedLayer(
+          e.relatedTarget,
+          timeContainerRef.current,
+          timePopover.id,
+        )
+      ) {
+        timePopover.hide();
       }
 
       if (timePendingInput === null) {
@@ -1692,7 +1710,7 @@ function PointerDateTimeField({
               sizeStyles[size],
               styles.dateWrapper,
               isEffectivelyDisabled && inputWrapperStyles.disabled,
-              isEffectivelyDisabled && styles.disabledFocusRing,
+              isEffectivelyDisabled && inputDisabledFocusStyles.withinRing,
               status && inputStatusBorderStyles[status.type],
               status &&
                 !isEffectivelyDisabled &&
@@ -1829,7 +1847,7 @@ function PointerDateTimeField({
           }
           // On the wrapper, not just the input: clicking the clock icon or the
           // padding is routed to the input as a synthetic click, which would
-          // otherwise open the list mid-gesture and let light dismiss eat it.
+          // otherwise open the list mid-gesture.
           onPointerDown={hasTimeOptions ? markTimePointerActive : undefined}
           {...mergeProps(
             themeProps('date-time-input-time-segment', {
@@ -1841,7 +1859,7 @@ function PointerDateTimeField({
               sizeStyles[size],
               styles.timeWrapper,
               isEffectivelyDisabled && inputWrapperStyles.disabled,
-              isEffectivelyDisabled && styles.disabledFocusRing,
+              isEffectivelyDisabled && inputDisabledFocusStyles.withinRing,
               status && inputStatusBorderStyles[status.type],
               status &&
                 !isEffectivelyDisabled &&

package/src/DateTimeInput/NativeDateSegment.tsx

@@ -33,7 +33,7 @@ import {hasEditableDateSegments} from '../DateInput/nativeDateSegments';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {Icon} from '../Icon';
-import {useLocale, useTranslator} from '../i18n';
+import {useLocale} from '../i18n';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {
   focusOutlineStyles,
@@ -47,6 +47,13 @@ import {
 import {chainEventHandlers} from '../utils/chainEventHandlers';
 import type {InputStatusType} from '../Field';
 import {nativePickerSegmentStyles as styles} from './nativePickerSegmentStyles';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/DateTimeInput/NativeDateSegment.generated';
+
+registerEnglishFallback(english);
 
 const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
 
@@ -100,7 +107,7 @@ export function NativeDateSegment({
     onBlur: onBlurProp,
     ...inputProps
   } = controlProps ?? {};
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const isTouchPointer = useMediaQuery('(pointer: coarse)');
   const internalInputRef = useRef<HTMLInputElement | null>(null);

package/src/DateTimeInput/NativeTimeSegment.tsx

@@ -34,7 +34,7 @@ import type {InputStatusType} from '../Field';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {Icon} from '../Icon';
-import {useLocale, useTranslator} from '../i18n';
+import {useLocale} from '../i18n';
 import {formatLocaleTime} from '../utils/timeFormat';
 import type {ThemeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
@@ -47,6 +47,13 @@ import {
 } from '../utils';
 import {chainEventHandlers} from '../utils/chainEventHandlers';
 import {nativePickerSegmentStyles as styles} from './nativePickerSegmentStyles';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/DateTimeInput/NativeTimeSegment.generated';
+
+registerEnglishFallback(english);
 
 const FRACTIONAL_SECONDS = /\.\d+$/;
 
@@ -124,7 +131,7 @@ export function NativeTimeSegment({
     onBlur: onBlurProp,
     ...inputProps
   } = controlProps ?? {};
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const isTouchPointer = useMediaQuery('(pointer: coarse)');
   const internalInputRef = useRef<HTMLInputElement | null>(null);

package/src/DateTimeInput/TouchDateTimeField.tsx

@@ -34,6 +34,7 @@ import {
   useTransition,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import {inputDisabledFocusStyles} from '../Field/inputDisabledFocus';
 import {BottomSheet} from '../BottomSheet';
 import {Button} from '../Button';
 import {useCalendarConstraints, type ISODateString} from '../Calendar';
@@ -50,7 +51,6 @@ import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {Icon} from '../Icon';
 import {IconButton} from '../IconButton';
-import {useTranslator, InternationalizationContext} from '../i18n';
 import {SegmentedControl, SegmentedControlItem} from '../SegmentedControl';
 import {useSize} from '../SizeContext/SizeContext';
 import {Spinner} from '../Spinner';
@@ -84,13 +84,13 @@ import {chainEventHandlers} from '../utils/chainEventHandlers';
 import {joinAriaIDs} from '../utils/inputAria';
 import {
   DATE_FORMAT_LONG,
-  DATE_FORMAT_MONTH_YEAR,
   DATE_FORMAT_WEEKDAY_ONLY,
   plainDateFormat,
   plainDateFromISO,
   plainDateToday,
   type PlainDate,
 } from '../utils/plainDate';
+import {plainDateFormatStandaloneMonthYear} from '../utils/plainDate';
 import {
   MonthScroller,
   type MonthScrollerHandle,
@@ -108,6 +108,14 @@ import {
   monthIndexOf,
 } from '../DateInput/monthGeometry';
 import type {DateTimeInputProps, ISODateTimeString} from './DateTimeInput';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import {InternationalizationContext} from '../i18n/InternationalizationContext';
+import english from '../i18n/generated-english/DateTimeInput/TouchDateTimeField.generated';
+
+registerEnglishFallback(english);
 
 function splitDateTime(dt: ISODateTimeString | undefined): {
   date: ISODateString | undefined;
@@ -159,17 +167,6 @@ const sizeStyles = stylex.create({
 const HORIZONTAL_SEGMENT_BASIS = 196;
 
 const styles = stylex.create({
-  // Same as DateTimeInput's: the focus ring for a focused disabled field.
-  disabledFocusRing: {
-    borderColor: {
-      default: colorVars['--color-border-emphasized'],
-      ':focus-within': colorVars['--color-accent'],
-    },
-    boxShadow: {
-      default: 'none',
-      ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
-    },
-  },
   iconButton: {
     display: 'flex',
     alignItems: 'center',
@@ -503,7 +500,7 @@ export function TouchDateTimeField({
     onKeyDown: onKeyDownProp,
     ...controlProps
   } = rest;
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const {locale} = use(InternationalizationContext);
   const placeholder =
@@ -672,9 +669,8 @@ export function TouchDateTimeField({
       ),
     [weekStartsOn, locale],
   );
-  const monthYearLabel = plainDateFormat(
+  const monthYearLabel = plainDateFormatStandaloneMonthYear(
     {year, month, day: 1},
-    DATE_FORMAT_MONTH_YEAR,
     locale,
   );
 
@@ -1347,7 +1343,7 @@ export function TouchDateTimeField({
               sizeStyles[size],
               styles.touchDateWrapper,
               isEffectivelyDisabled && inputWrapperStyles.disabled,
-              isEffectivelyDisabled && styles.disabledFocusRing,
+              isEffectivelyDisabled && inputDisabledFocusStyles.withinRing,
               status && inputStatusBorderStyles[status.type],
               status &&
                 !isEffectivelyDisabled &&
@@ -1438,7 +1434,7 @@ export function TouchDateTimeField({
               sizeStyles[size],
               styles.touchTimeWrapper,
               isEffectivelyDisabled && inputWrapperStyles.disabled,
-              isEffectivelyDisabled && styles.disabledFocusRing,
+              isEffectivelyDisabled && inputDisabledFocusStyles.withinRing,
               status && inputStatusBorderStyles[status.type],
               status &&
                 !isEffectivelyDisabled &&

package/src/Dialog/Dialog.tsx

@@ -41,12 +41,15 @@ import {
   useRef,
   type ReactNode,
 } from 'react';
+import {useIsHydrating} from '../hooks/useIsHydrating';
+import {useSettledOpen} from '../hooks/useSettledOpen';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {useScrollLock} from '../hooks/useScrollLock';
 import {layerTextReset} from '../Layer/layerTextReset.stylex';
 import {layerStructureReset} from '../Layer/layerStructureReset.stylex';
 import {LayerContentBoundary} from '../Layer/layerScopedContext';
+import {layerClickBoundary} from '../Layer/layerClickBoundary';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
 import {useLayerDismissal} from '../Layer/useLayerDismissal';
 import {useModalOutlet} from '../Layer/modalOutlet';
@@ -76,11 +79,7 @@ import {DialogContext} from './DialogContext';
 import {themeProps} from '../utils/themeProps';
 import type {DialogVariantMap} from './index';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {
-  getInteractionModality,
-  trackInteractionModalityIn,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {focusForLastInput} from '../utils/focusReturn';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 
@@ -230,6 +229,10 @@ const styles = stylex.create({
         'none',
     },
   },
+  // A dialog present on page load opens where it rests (spec:AST-013 FR13).
+  openSettled: {
+    animationName: 'none',
+  },
   // Backdrop using ::backdrop pseudo-element
   backdrop: {
     '::backdrop': {
@@ -467,7 +470,7 @@ export interface DialogProps extends BaseProps<HTMLDialogElement> {
  * ```
  */
 export function Dialog({
-  isOpen,
+  isOpen: isOpenProp,
   isInline = false,
   onOpenChange,
   width = 400,
@@ -483,6 +486,17 @@ export function Dialog({
   ref,
   ...props
 }: DialogProps) {
+  // A modal dialog open on the server renders closed until hydration, and
+  // opens in the render after it, the first one that can call showModal(): a
+  // <dialog> painted open with aria-modal before it is modal claims a state it
+  // does not have, over a live page (FR8). An inline dialog is not modal and
+  // renders as it is.
+  const isHydrating = useIsHydrating();
+  const isOpen = isOpenProp && (isInline || !isHydrating);
+  // A dialog open on the server was present on page load, so it opens settled,
+  // with no entry motion; its later opens animate as usual (spec:AST-013 FR13).
+  const [settledOpen] = useSettledOpen(isOpenProp && !isInline, isOpen, false);
+  const opensSettled = settledOpen && isOpen;
   // When no explicit padding prop, use theme default (--astryx-dialog-padding)
   const useThemeDefault = padding == null;
   const effectivePadding = padding ?? 4;
@@ -533,25 +547,17 @@ export function Dialog({
     [titleId, hasConsumerName],
   );
 
-  const mergedDialogRef = useMergedRefs(ref, attachDialog);
-
-  // Capture the element that was focused when the dialog opened, for
-  // directional animation origin and focus restoration on close.
-  const triggerElementRef = useRef<HTMLElement | null>(null);
-
-  useInteractionModalityTracking();
-
   // Input in a second document (a same-origin iframe, a Document
   // Picture-in-Picture window) never reaches the page's listeners, so the
   // dialog's own document keeps its own last input for the focus return while
   // this Dialog is mounted, from before it opens until it unmounts.
-  useEffect(() => {
-    const ownerDocument = dialogRef.current?.ownerDocument;
-    if (ownerDocument == null || ownerDocument === document) {
-      return undefined;
-    }
-    return trackInteractionModalityIn(ownerDocument);
-  }, [isInline]);
+  const {ref: modalityRef} = useInteractionModalityTracking();
+
+  const mergedDialogRef = useMergedRefs(ref, attachDialog, modalityRef);
+
+  // Capture the element that was focused when the dialog opened, for
+  // directional animation origin and focus restoration on close.
+  const triggerElementRef = useRef<HTMLElement | null>(null);
 
   // This runs in a layout effect so the capture lands before any descendant's
   // passive mount effect: all layout effects run before any passive effect,
@@ -622,11 +628,7 @@ export function Dialog({
       // the last input in that element's own document calls for.
       const trigger = triggerElementRef.current;
       if (trigger) {
-        focusForLastInput(
-          trigger,
-          undefined,
-          getInteractionModality(trigger.ownerDocument),
-        );
+        focusForLastInput(trigger);
       }
       triggerElementRef.current = null;
     }
@@ -842,14 +844,20 @@ export function Dialog({
             })(),
           isFullscreen && styles.fullscreen,
           isFullscreen && isOpen && styles.fullscreenOpen,
+          opensSettled && styles.openSettled,
           xstyle,
         ),
         className,
         style,
       )}
-      onClick={chainEventHandlers(handleClick, onClickProp)}
+      // Presses inside the dialog do not reach handlers around where it is
+      // written.
+      {...layerClickBoundary({
+        ...safeProps,
+        onClick: chainEventHandlers(handleClick, onClickProp),
+      })}
       onCancel={handleCancel}
-      aria-modal="true"
+      aria-modal={isHydrating ? undefined : 'true'}
       // The default aria-labelledby (from a DialogHeader title) is set
       // imperatively in `attachDialog`; a consumer-provided aria-labelledby
       // flows through {...safeProps} above and wins.

package/src/Dialog/DialogHeader.tsx

@@ -29,7 +29,13 @@ import {isRenderable} from '../utils/isRenderable';
 import {mergeProps} from '../utils/mergeProps';
 import {themeProps} from '../utils/themeProps';
 import {useDialogContext} from './DialogContext';
-import {useTranslator} from '../i18n/useTranslator';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Dialog/DialogHeader.generated';
+
+registerEnglishFallback(english);
 
 const styles = stylex.create({
   container: {
@@ -160,7 +166,7 @@ export function DialogHeader({
   ref,
   ...rest
 }: DialogHeaderProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const titleRef = useRef<HTMLHeadingElement>(null);
   const dialogContext = useDialogContext();
   const shouldAutoFocus = dialogContext?.isInline !== true;

package/src/Drawer/Drawer.tsx

@@ -53,13 +53,15 @@
  * - /packages/core/src/Drawer/Drawer.doc.mjs (props table, features, usage)
  * - /packages/core/src/Drawer/Drawer.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Drawer/__tests__/DrawerNonModalPageScroll.a11y.chromium.spec.ts (the page beside a non-modal drawer scrolls)
- * - /packages/core/src/Drawer/Drawer.spec.md (component contract)
+ * - /docs/specs/components/Drawer/Drawer.spec.md (component contract)
  * - /packages/core/src/Drawer/index.ts (exports if types change)
  * - /packages/cli/assets/templates/blocks/components/Drawer/ (showcase blocks)
  * - /apps/storybook/stories/Drawer.stories.tsx (examples and visual coverage)
  */
 
 import {useCallback, useRef, useState, type ReactNode} from 'react';
+import {useIsHydrating} from '../hooks/useIsHydrating';
+import {useSettledOpen} from '../hooks/useSettledOpen';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {
@@ -75,6 +77,7 @@ import {LayerDepthProvider, useLayerDismissal} from '../Layer';
 import {layerTextReset} from '../Layer/layerTextReset.stylex';
 import {layerStructureReset} from '../Layer/layerStructureReset.stylex';
 import {LayerContentBoundary} from '../Layer/layerScopedContext';
+import {layerClickBoundary} from '../Layer/layerClickBoundary';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 import {composeEventHandlers, mergeProps, themeProps} from '../utils';
 import {container, overlayPaddingReset} from '../Layout';
@@ -203,6 +206,14 @@ const styles = stylex.create({
       },
     },
   },
+  // A drawer present on page load opens where it rests (spec:AST-013 FR13):
+  // the collapse reduced motion uses, so the transition still ends.
+  openSettled: {
+    transitionDuration: '0.01s',
+    '::backdrop': {
+      transitionDuration: '0.01s',
+    },
+  },
   // Scrim via the browser's ::backdrop pseudo-element (top layer).
   scrim: {
     '::backdrop': {
@@ -426,7 +437,7 @@ export interface DrawerProps extends BaseProps<HTMLDialogElement> {
  * ```
  */
 export function Drawer({
-  isOpen,
+  isOpen: isOpenProp,
   onOpenChange,
   side = 'end',
   width = 400,
@@ -444,6 +455,17 @@ export function Drawer({
   ref,
   ...props
 }: DrawerProps) {
+  // A drawer open on the server renders closed until hydration, and opens in
+  // the render after it, the first one that can enter its native host: a
+  // <dialog> painted open with aria-modal before it is modal claims a state it
+  // does not have (FR17).
+  const isHydrating = useIsHydrating();
+  const isOpen = isOpenProp && !isHydrating;
+  // A drawer open on the server was present on page load, so it opens settled,
+  // with no slide-in; its later opens and closes animate as usual
+  // (spec:AST-013 FR13).
+  const [settledOpen] = useSettledOpen(isOpenProp, isOpen, false);
+  const opensSettled = settledOpen && isOpen;
   const dialogRef = useRef<HTMLDialogElement>(null);
   const {containerRef: focusTrapRef} = useFocusTrap<HTMLDialogElement>({
     isActive: isOpen && hasScrim,
@@ -567,6 +589,7 @@ export function Drawer({
           isOpen && sideOpenStyle,
           hasScrim && styles.scrim,
           hasScrim && isOpen && styles.scrimOpen,
+          opensSettled && styles.openSettled,
           xstyle,
         ),
         className,
@@ -575,11 +598,16 @@ export function Drawer({
       {...safeProps}
       popover={hasScrim ? undefined : 'manual'}
       aria-label={label}
-      aria-modal={hasScrim ? 'true' : undefined}
+      aria-modal={hasScrim && !isHydrating ? 'true' : undefined}
       {...(purpose === 'required' && hasScrim
         ? {role: 'alertdialog'}
         : undefined)}
-      onClick={composeEventHandlers(onClickProp, handleClick)}
+      // Presses inside the drawer do not reach handlers around where it is
+      // written.
+      {...layerClickBoundary({
+        ...safeProps,
+        onClick: composeEventHandlers(onClickProp, handleClick),
+      })}
       onKeyDown={onKeyDownProp}
       onCancel={handleCancel}>
       <ModalAnnounceProvider dialogRef={dialogRef} isOpen={isOpen && hasScrim}>

package/src/Drawer/DrawerHeader.tsx

@@ -34,8 +34,14 @@ import {Heading} from '../Heading';
 import {Icon} from '../Icon';
 import {LayoutHeader} from '../Layout';
 import {Text} from '../Text';
-import {useTranslator} from '../i18n';
 import {isRenderable, mergeProps, themeProps} from '../utils';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Drawer/DrawerHeader.generated';
+
+registerEnglishFallback(english);
 
 const styles = stylex.create({
   container: {
@@ -147,7 +153,7 @@ export function DrawerHeader({
   ref,
   ...rest
 }: DrawerHeaderProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const hasSubtitle = isRenderable(subtitle);
   const hasStartContent = isRenderable(startContent);
   const hasEndContent = isRenderable(endContent);

package/src/DropdownMenu/DropdownMenu.doc.mjs

@@ -158,7 +158,7 @@ export const docs = {
       {
         name: '--_dropdown-menu-radius',
         description: 'Border radius of the menu popup',
-        default: 'var(--radius-element)',
+        default: 'var(--radius-container)',
         private: true,
       },
       {
@@ -180,7 +180,7 @@ export const docs = {
       name: 'button',
       type: 'DropdownMenuButtonProps',
       description:
-        'Props for the trigger button (Button props except onClick). Mutually exclusive with `trigger`.',
+        'Props for the trigger button (Button props except onClick). Mutually exclusive with `renderTrigger`.',
       default: "{ label: 'Menu' }",
     },
     {