@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/dist/DateInput/DateInput.js

@@ -17,6 +17,7 @@
  */
 import { use, useId, useState, useCallback, useRef, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
@@ -34,6 +35,7 @@ import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { usePopover } from "../Popover/index.js";
+import { isFocusInsideOwnedLayer, isPressInsideOwnedLayer, useOutsidePress } from "../Layer/outsidePress.js";
 import { NativeDateField } from "./NativeDateField.js";
 import { TouchDateField } from "./TouchDateField.js";
 import { useTooltip } from "../Tooltip/index.js";
@@ -43,11 +45,6 @@ import { plainDateFromISO, plainDateToISO, formatSharedDate } from "../utils/pla
 import { effectivePickerPresentation, resolvePickerPresentation } from "../utils/inputPresentation.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 const styles = {
-  disabledFocusRing: {
-    kVAM5u: "xvy26l8 x2uiyk",
-    kGVxlE: "x1gnnqk1 xxsos93",
-    $$css: true
-  },
   iconButton: {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
@@ -118,9 +115,12 @@ import { joinAriaIDs } from "../utils/inputAria.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
-import { useLocale, useTranslator } from "../i18n/index.js";
+import { useLocale } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/DateInput/DateInput.generated.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+registerEnglishFallback(english);
 /**
  * The pointer that decides which surface a `DateInput` renders.
  *
@@ -140,6 +140,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 const TOUCH_POINTER_QUERY = '(pointer: coarse)';
 
+/**
+ * Whether `target` is a label whose control is `input`. Checked by nodeType
+ * and tag name, so a label in a same-origin iframe counts.
+ */
+function isLabelFor(target, input) {
+  const node = target;
+  return input != null && node.nodeType === 1 && node.localName === 'label' && node.control === input;
+}
+
 /**
  * The pointer-driven field: a text input you can type into, with a calendar
  * in a popover beside it. `DateInput` renders this whenever the primary
@@ -196,7 +205,7 @@ function PointerDateField({
     onKeyDown: onKeyDownProp,
     ...controlProps
   } = rest;
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
@@ -291,18 +300,40 @@ function PointerDateField({
 
   // Check if current input is valid (for styling purposes)
   const isInputValid = pendingInput === null || !pendingInput.trim() ? true : parseDateInput(pendingInput, locale) !== null;
+  const fieldElementRef = useRef(null);
+  // Set just before a close that focus already left the field for, so onHide
+  // does not pull focus back to the input.
+  const isFocusMovingAwayRef = useRef(false);
+  const outsidePress = useOutsidePress();
   const popover = usePopover({
+    // A text input cannot be an invoker. Light dismiss would count a press in
+    // it as outside and close the calendar.
+    hasLightDismiss: false,
+    onShow: () => {
+      const field = fieldElementRef.current;
+      if (field == null) {
+        return;
+      }
+      outsidePress.start(field,
+      // The label counts too: a press there focuses the input, which would
+      // otherwise close the calendar and reopen it on the same press.
+      path => isPressInsideOwnedLayer(path, field, popover.id) || path.some(target => isLabelFor(target, inputRef.current)),
+      // Called after usePopover has returned, so `popover` is assigned.
+      () => popover.hide());
+    },
     dialogLabel: t('@astryx.dateInput.dialogLabel'),
     closeButtonLabel: t('@astryx.dateInput.closeCalendar'),
     // Return focus to the input when the calendar closes — but only when the
     // dismiss left focus detached (Escape, or a click on non-focusable empty
-    // space), which the focus trap can't restore on its own. A native
-    // popover="auto" light-dismiss fires synchronously with the pointer event
-    // that moved focus, so if the user clicked another control — the clear
-    // button, another field, anywhere — focus has already landed there;
-    // reclaiming it would fight their click.
+    // space), which the focus trap can't restore on its own. An outside press
+    // closes the calendar after the pointer event that moved focus, so if the
+    // user clicked another control — another field, anywhere — focus has
+    // already landed there; reclaiming it would fight their click.
     onHide: () => {
-      if (isFocusDetached()) {
+      outsidePress.stop();
+      const isFocusMovingAway = isFocusMovingAwayRef.current;
+      isFocusMovingAwayRef.current = false;
+      if (!isFocusMovingAway && isFocusDetached()) {
         inputRef.current?.focus();
       }
     }
@@ -418,11 +449,23 @@ function PointerDateField({
     setPendingInput(null);
   }, [pendingInput, isEffectivelyDisabled, value, fireChange, isDateDisabled, locale]);
 
-  // Handle blur - validate, check constraints, and clear pending input
+  // Handle blur - validate, check constraints, and clear pending input.
   const handleBlur = useCallback(() => {
     commitPendingInput();
   }, [commitPendingInput]);
 
+  // A manual popover has no auto-popover exclusivity, so without this close
+  // the next field's calendar would open beside this one. Focus going nowhere
+  // (a window switch) leaves it open.
+  const handleFieldBlur = useCallback(e => {
+    const next = e.relatedTarget;
+    if (!popover.isOpen || next == null || isFocusInsideOwnedLayer(next, fieldElementRef.current, popover.id)) {
+      return;
+    }
+    isFocusMovingAwayRef.current = true;
+    popover.hide();
+  }, [popover]);
+
   // Handle keyboard events on input
   const handleInputKeyDown = useCallback(e => {
     // An in-progress IME composition uses Enter to commit the candidate and
@@ -452,12 +495,14 @@ function PointerDateField({
   }, [popover, commitPendingInput, isEffectivelyDisabled]);
   const inputWrapper = /*#__PURE__*/_jsxs("div", {
     ref: el => {
+      fieldElementRef.current = el;
       popover.triggerRef(el);
       // Anchor + hover/focus listeners for the disabled-message tooltip.
       // Handlers are gated internally by isEnabled, and anchor names
       // compose, so attaching unconditionally is safe.
       disabledMessageTooltip.ref(el);
     },
+    onBlur: handleFieldBlur,
     ...(inputGroup ? inputGroupItemProps : undefined),
     ...mergeProps(themeProps('date-input', {
       size,
@@ -467,7 +512,7 @@ function PointerDateField({
     // Disabled paint belongs to the disabled state only; a busy field
     // keeps its ordinary paint and shows the Spinner (spec:AST-085
     // FR6, family:buttons FR4).
-    isDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
+    isDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && inputDisabledFocusStyles.inputFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
     children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
       id: inputLabelID,
       children: label

package/dist/DateInput/MonthScroller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAoDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAQf,MAAM,UAAU,CAAC;AAgNlB,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACxD,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,+BAA+B;IAC/B,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,gCAAgC;IAChC,YAAY,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,kBAAkB,+BA0fpB;yBArgBe,aAAa"}
+{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAqDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAOf,MAAM,UAAU,CAAC;AAgNlB,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACxD,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,+BAA+B;IAC/B,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,gCAAgC;IAChC,YAAY,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,kBAAkB,+BA0fpB;yBArgBe,aAAa"}

package/dist/DateInput/MonthScroller.js

@@ -36,7 +36,8 @@ import { useDirection, useLocale } from "../i18n/index.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, fontWeightVars, typeScaleVars, durationVars, borderVars } from "../theme/tokens.stylex.js";
 import { focusOutlineStyles } from "../utils/index.js";
-import { plainDateAddDays, plainDateDayOfWeek, plainDateFormat, plainDateIsEqual, plainDateToISO, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_WITH_WEEKDAY } from "../utils/index.js";
+import { plainDateFormatStandaloneMonthYear } from "../utils/plainDate.js";
+import { plainDateAddDays, plainDateDayOfWeek, plainDateFormat, plainDateIsEqual, plainDateToISO, DATE_FORMAT_WITH_WEEKDAY } from "../utils/index.js";
 import "./tokens.stylex.js";
 import { dateInputTouchSizes, dateInputTouchGeometry } from "./tokens.stylex.js";
 import { useOwnScrollGesture } from "./useOwnScrollGesture.js";
@@ -647,11 +648,11 @@ function MonthPane({
     // with them every snap offset below this month.
     hasVariableRowCount: false
   });
-  const monthLabel = plainDateFormat({
+  const monthLabel = plainDateFormatStandaloneMonthYear({
     year,
     month,
     day: 1
-  }, DATE_FORMAT_MONTH_YEAR, locale);
+  }, locale);
 
   // Exactly one day per pane is tab-reachable, so Tab moves through the
   // picker rather than through 42 buttons: the focused day if the keyboard

package/dist/DateInput/NativeDateField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/NativeDateField.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AA0NhD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAGhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,aAAa,EAC3B,MAAoB,EACpB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAwbhB;yBA3de,eAAe"}
+{"version":3,"file":"NativeDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/NativeDateField.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAqNhD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAGhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,aAAa,EAC3B,MAAoB,EACpB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAwbhB;yBA3de,eAAe"}

package/dist/DateInput/NativeDateField.js

@@ -27,6 +27,7 @@
  */
 import { useCallback, useEffect, useId, useOptimistic, useRef, useState, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import { useCalendarConstraints } from "../Calendar/index.js";
 import { hasEditableDateSegments } from "./nativeDateSegments.js";
 import { Field, InputClearButton, inputStatusBorderStyles, inputStatusFocusWithinStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
@@ -35,7 +36,7 @@ import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { Icon } from "../Icon/index.js";
-import { useLocale, useTranslator } from "../i18n/index.js";
+import { useLocale } from "../i18n/index.js";
 import { useInputGroup } from "../InputGroup/index.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { joinAriaIDs } from "../utils/inputAria.js";
@@ -48,13 +49,11 @@ import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { focusOutlineStyles, formatSharedDate, getInputARIA, mergeProps, parseDateInput, plainDateFromISO, plainDateToISO, themeProps } from "../utils/index.js";
 import { chainEventHandlers } from "../utils/chainEventHandlers.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/DateInput/NativeDateField.generated.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+registerEnglishFallback(english);
 const styles = {
-  disabledFocusRing: {
-    kVAM5u: "xvy26l8 x2uiyk",
-    kGVxlE: "x1gnnqk1 xxsos93",
-    $$css: true
-  },
   wrapper: {
     kOIVth: "x1txdalj",
     $$css: true
@@ -152,7 +151,7 @@ export function NativeDateField({
     onBlur: onBlurProp,
     ...controlProps
   } = rest;
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
@@ -410,7 +409,7 @@ export function NativeDateField({
     // Disabled paint belongs to the disabled state only; a busy field
     // keeps its ordinary paint and shows the Spinner (spec:AST-085
     // FR6, family:buttons FR4).
-    isDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
+    isDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && inputDisabledFocusStyles.inputFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
     children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
       id: inputLabelID,
       children: label

package/dist/DateInput/TouchDateField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AA6ehD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAixBhB;yBArzBe,cAAc"}
+{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAwehD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAgxBhB;yBApzBe,cAAc"}

package/dist/DateInput/TouchDateField.js

@@ -49,6 +49,7 @@
  */
 import { useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import { BottomSheet } from "../BottomSheet/index.js";
 import { Button } from "../Button/index.js";
 import { useCalendarConstraints } from "../Calendar/index.js";
@@ -58,7 +59,7 @@ import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
 import { Icon } from "../Icon/index.js";
 import { IconButton } from "../IconButton/index.js";
-import { useLocale, useTranslator } from "../i18n/index.js";
+import { useLocale } from "../i18n/index.js";
 import { useInputGroup } from "../InputGroup/index.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { joinAriaIDs } from "../utils/inputAria.js";
@@ -69,7 +70,8 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, sizeVars, borderVars, fontWeightVars, typeScaleVars, typographyVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
-import { focusOutlineStyles, getInputARIA, isImeKeyEvent, mergeProps, rtlStyles, themeProps, formatSharedDate, plainDateFromISO, plainDateToday, plainDateFormat, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_WEEKDAY_ONLY } from "../utils/index.js";
+import { focusOutlineStyles, getInputARIA, isImeKeyEvent, mergeProps, rtlStyles, themeProps, formatSharedDate, plainDateFromISO, plainDateToday, plainDateFormat, DATE_FORMAT_WEEKDAY_ONLY } from "../utils/index.js";
+import { plainDateFormatStandaloneMonthYear } from "../utils/plainDate.js";
 import { chainEventHandlers } from "../utils/chainEventHandlers.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
@@ -79,12 +81,15 @@ import { MonthYearWheels } from "./MonthYearWheels.js";
 import { DEFAULT_MONTH_REACH, clampIndex, fromMonthIndex, monthIndexOf } from "./monthGeometry.js";
 import "./tokens.stylex.js";
 import { dateInputTouchSizes, dateInputTouchGeometry } from "./tokens.stylex.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/DateInput/TouchDateField.generated.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+registerEnglishFallback(english);
 
 /**
  * The comfortable minimum tap target on both iOS and Android, honoured by
  * every target inside the sheet.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TOUCH_TARGET = dateInputTouchSizes.daySize;
 
 /**
@@ -123,11 +128,6 @@ const sizeStyles = {
   }
 };
 const styles = {
-  disabledFocusRing: {
-    kVAM5u: "xvy26l8 x2uiyk",
-    kGVxlE: "x1gnnqk1 xxsos93",
-    $$css: true
-  },
   wrapper: {
     kOIVth: "x1txdalj",
     $$css: true
@@ -259,7 +259,7 @@ export function TouchDateField({
     ...controlProps
   } = rest;
   const pressable = usePressFeedback();
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
@@ -369,11 +369,11 @@ export function TouchDateField({
     month: 1,
     day: 4 + (weekStartsOn + offset) % 7
   }, DATE_FORMAT_WEEKDAY_ONLY, locale)), [locale, weekStartsOn]);
-  const monthYearLabel = plainDateFormat({
+  const monthYearLabel = plainDateFormatStandaloneMonthYear({
     year,
     month,
     day: 1
-  }, DATE_FORMAT_MONTH_YEAR, locale);
+  }, locale);
 
   // Formats the committed value only. A function format is called with the ISO
   // value; a named one reuses Timestamp's shared date mapping, so the same
@@ -812,7 +812,7 @@ export function TouchDateField({
     // Disabled paint belongs to the disabled state only; a busy field
     // keeps its ordinary paint and shows the Spinner (spec:AST-085
     // FR6, family:buttons FR4).
-    isDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
+    isDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && inputDisabledFocusStyles.inputFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
     children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
       id: inputLabelID,
       children: label

package/dist/DateRangeInput/DateRangeInput.d.ts

@@ -1,7 +1,8 @@
-import { type InputStatus, type FieldStatusVariant } from '../Field/index.js';
+import { type InputStatus } from '../Field/index.js';
 import { type ISODateString, type DateRange, type DayOfWeek, type DayOfWeekName } from '../Calendar/index.js';
 import { type FieldInputBaseProps } from '../Field/fieldParts.js';
 import type { SizeValue } from '../utils/types.js';
+import type { FieldStatusPlacement } from '../Field/fieldStatusPlacement.js';
 export type { DateRange } from '../Calendar/index.js';
 export interface DateRangePreset {
     label: string;
@@ -150,7 +151,7 @@ export interface DateRangeInputProps extends Omit<FieldInputBaseProps<HTMLButton
      * - '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
      * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they

package/dist/DateRangeInput/DateRangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AA6CA,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAOrB,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAU9C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AASxE,YAAY,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAE3C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,YAAY,EACV,WAAW,IAAI,oBAAoB,EACnC,eAAe,IAAI,wBAAwB,GAC5C,MAAM,UAAU,CAAC;AA2KlB,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,mBAAmB,CAAC,iBAAiB,CAAC,EACtC,UAAU,GAAG,cAAc,CAC5B;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAExB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEjE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAE1B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;IAErC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,cAAkB,EAClB,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,mBAAmB,+BA2WrB;yBA9Ye,cAAc"}

package/dist/DateRangeInput/DateRangeInput.js

@@ -17,6 +17,7 @@
  */
 import { useId, useCallback, useMemo, useOptimistic, useRef, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import { plainDateFromISO, plainDateToday, plainDateFormat, plainDateDiffDays, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR } from "../utils/plainDate.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
@@ -39,14 +40,12 @@ import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
-import { useLocale, useTranslator } from "../i18n/index.js";
+import { useLocale } from "../i18n/index.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/DateRangeInput/DateRangeInput.generated.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+registerEnglishFallback(english);
 const styles = {
-  disabledFocusRing: {
-    kVAM5u: "xvy26l8 x6q1khz",
-    kGVxlE: "x1gnnqk1 xuihb5h",
-    $$css: true
-  },
   iconButton: {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
@@ -221,7 +220,7 @@ export function DateRangeInput({
     onClick: onClickProp,
     ...controlProps
   } = rest;
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
@@ -355,7 +354,7 @@ export function DateRangeInput({
         size,
         status: status?.type ?? null,
         disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isEffectivelyDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], controlXstyle), controlClassName, controlStyle),
+      }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isEffectivelyDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && inputDisabledFocusStyles.withinRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], controlXstyle), controlClassName, controlStyle),
       children: [/*#__PURE__*/_jsx("button", {
         type: "button",
         onClick: handleToggle,

package/dist/DateTimeInput/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"AA4CA,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AA2BrB,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAmB9C,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG;IACvC,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC;CACvC,CAAC;AAEF,qFAAqF;AACrF,MAAM,MAAM,yBAAyB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErE,uGAAuG;AACvG,MAAM,MAAM,yBAAyB,GAAG,kBAAkB,CAAC;AAE3D,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,4EAA4E;AAC5E,MAAM,MAAM,0BAA0B,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,+BAA+B,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEpE,YAAY,EACV,WAAW,IAAI,mBAAmB,EAClC,eAAe,IAAI,uBAAuB,GAC3C,MAAM,UAAU,CAAC;AAiKlB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,cAAc,CAC5B;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAElC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,GAAG,CAAC,EAAE,iBAAiB,CAAC;IAExB;;;OAGG;IACH,GAAG,CAAC,EAAE,iBAAiB,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,uBAAuB,CAAC;IAErC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAE3C;;;;;;;;;;;;;;;OAeG;IACH,kBAAkB,CAAC,EAAE,+BAA+B,CAAC;IAErD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,YAAY,CAAC,EAAE,yBAAyB,CAAC;IAEzC;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,EAAE,yBAAyB,CAAC;CAC1C;AAu7CD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BA4CtD;yBA5Ce,aAAa"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}

package/dist/DateTimeInput/DateTimeInput.js

@@ -21,6 +21,7 @@
  */
 import { useId, useState, useCallback, useEffect, useRef, useMemo, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
 import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
@@ -30,6 +31,7 @@ import { Spinner } from "../Spinner/index.js";
 import { Calendar } from "../Calendar/index.js";
 import { useCalendarConstraints } from "../Calendar/hooks/index.js";
 import { usePopover } from "../Popover/index.js";
+import { isFocusInsideOwnedLayer, isPressInsideOwnedLayer, useOutsidePress } from "../Layer/outsidePress.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
@@ -45,7 +47,7 @@ import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
-import { useLocale, useTranslator } from "../i18n/index.js";
+import { useLocale } from "../i18n/index.js";
 import { formatLocaleTime, parseLocaleTime, resolveHourFormat } from "../utils/timeFormat.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useHighlightedOptionScroll } from "../hooks/useHighlightedOptionScroll.js";
@@ -54,6 +56,10 @@ import { NativeTimeSegment } from "./NativeTimeSegment.js";
 import { TouchDateTimeField } from "./TouchDateTimeField.js";
 import { effectivePickerPresentation, resolvePickerPresentation } from "../utils/inputPresentation.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/DateTimeInput/DateTimeInput.generated.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+registerEnglishFallback(english);
 
 /** @deprecated Use {@link DateTimeInputPresentation} via the `presentation` prop. */
 
@@ -65,16 +71,11 @@ import { useDevWarning } from "../hooks/useDevWarning.js";
  * Supported minute cadences for the preset-time dropdown. Every value divides
  * an hour evenly, so each option lands on a round clock time.
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+
 // Two 196px segments plus the 8px gap fit at exactly 400px. Below that,
 // flex wrapping moves each growing segment onto its own full-width row.
 const HORIZONTAL_SEGMENT_BASIS = 196;
 const styles = {
-  disabledFocusRing: {
-    kVAM5u: "xvy26l8 x6q1khz",
-    kGVxlE: "x1gnnqk1 xuihb5h",
-    $$css: true
-  },
   row: {
     k1xSpc: "x78zum5",
     kwnvtZ: "x1a02dak",
@@ -280,7 +281,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`
@@ -643,10 +644,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
@@ -662,14 +662,33 @@ function PointerDateTimeField({
       once: true
     });
   }, []);
+
+  // 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
@@ -848,16 +867,12 @@ function PointerDateTimeField({
   const handleTimeBlur = useCallback(e => {
     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;
-      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) {
       return;
@@ -1037,7 +1052,7 @@ function PointerDateTimeField({
         ...mergeProps(themeProps('date-time-input-date-segment', {
           size,
           status: status?.type ?? null
-        }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.dateWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type])),
+        }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.dateWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && inputDisabledFocusStyles.withinRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type])),
         children: [usesNativePicker ? /*#__PURE__*/_jsx(NativeDateSegment, {
           id: dateInputId,
           inputRef: mergedDateInputRef,
@@ -1144,13 +1159,13 @@ function PointerDateTimeField({
         onMouseUp: usesNativeTimePicker ? undefined : handleTimeWrapperMouseUp
         // 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', {
           size,
           status: status?.type ?? null
-        }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.timeWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type])),
+        }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.timeWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && inputDisabledFocusStyles.withinRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type])),
         children: usesNativeTimePicker ? /*#__PURE__*/_jsx(NativeTimeSegment, {
           id: timeInputId,
           inputRef: timeInputRef,

package/dist/DateTimeInput/NativeDateSegment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeDateSegment.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/NativeDateSegment.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EACV,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,qBAAqB,CAAC;AAO7B,OAAO,EAIL,gBAAgB,EAGhB,KAAK,aAAa,EACnB,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAK9C,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,cAAc,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,KAAK,OAAO,CAAC;IACvE,qBAAqB,EAAE,OAAO,CAAC;IAC/B,kFAAkF;IAClF,mBAAmB,EAAE,OAAO,CAAC;IAC7B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,IAAI,CACjB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,mBAAmB,GAAG,UAAU,GAAG,cAAc,CACxD,CAAC;CACH,CAAC;AAEF,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,WAAW,EACX,GAAG,EACH,GAAG,EACH,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,MAAM,EACN,UAAU,EACV,eAAe,EACf,YAAY,GACb,EAAE,sBAAsB,+BAyOxB;yBAzPe,iBAAiB"}
+{"version":3,"file":"NativeDateSegment.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/NativeDateSegment.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EACV,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,qBAAqB,CAAC;AAO7B,OAAO,EAIL,gBAAgB,EAGhB,KAAK,aAAa,EACnB,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAY9C,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,cAAc,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,KAAK,OAAO,CAAC;IACvE,qBAAqB,EAAE,OAAO,CAAC;IAC/B,kFAAkF;IAClF,mBAAmB,EAAE,OAAO,CAAC;IAC7B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,IAAI,CACjB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,mBAAmB,GAAG,UAAU,GAAG,cAAc,CACxD,CAAC;CACH,CAAC;AAEF,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,WAAW,EACX,GAAG,EACH,GAAG,EACH,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,MAAM,EACN,UAAU,EACV,eAAe,EACf,YAAY,GACb,EAAE,sBAAsB,+BAyOxB;yBAzPe,iBAAiB"}