@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/Markdown/plugins/HeadingLinksRenderer.tsx

@@ -17,9 +17,15 @@ import {Button} from '../../Button/Button';
 import {Icon} from '../../Icon';
 import {useClipboard} from '../../hooks/useClipboard';
 import {useContainerReveal} from '../../hooks/useContainerReveal';
-import {useTranslator} from '../../i18n';
 import {colorVars, sizeVars, spacingVars} from '../../theme/tokens.stylex';
 import {mergeProps, rtlStyles} from '../../utils';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../../i18n/useComponentTranslator';
+import english from '../../i18n/generated-english/Markdown/plugins/HeadingLinksRenderer.generated';
+
+registerEnglishFallback(english);
 
 const COPY_FEEDBACK_MS = 1500;
 const COARSE_TARGET = '24px';
@@ -132,7 +138,7 @@ export function HeadingLinksRenderer({
   headingTextStyle,
   blockSpacingStyle,
 }: HeadingLinksRendererProps): ReactElement {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const copiedLabel = t('@astryx.markdownHeadingLinks.copied');
   const copyLabel = t('@astryx.markdownHeadingLinks.copy', {
     heading: headingLabel || headingId,

package/src/MetadataList/MetadataList.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file MetadataList.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, MetadataListContext, i18n (useTranslator)
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, MetadataListContext, i18n (useComponentTranslator)
  * @output Exports MetadataList component, MetadataListProps, MetadataListColumns types
  * @position Core implementation; consumed by index.ts, tested by MetadataList.test.tsx
  *
@@ -30,8 +30,15 @@ import {
 } from './MetadataListContext';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
+import {isRenderable} from '../utils/isRenderable';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/MetadataList/MetadataList.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -216,7 +223,7 @@ export function MetadataList({
   );
   const [isShowAll, setIsShowAll] = useState(false);
   const contentId = useId();
-  const t = useTranslator();
+  const t = useComponentTranslator();
 
   const contextValue = useMemo(
     () => ({
@@ -238,8 +245,9 @@ export function MetadataList({
       ? childrenArray.slice(0, effectiveMax)
       : childrenArray;
 
-  const titleContent =
-    title != null ? <div {...stylex.props(styles.title)}>{title}</div> : null;
+  const titleContent = isRenderable(title) ? (
+    <div {...stylex.props(styles.title)}>{title}</div>
+  ) : null;
 
   // Determine grid style based on columns and label position
   const getGridStyle = () => {

package/src/MetadataList/MetadataListItem.tsx

@@ -27,6 +27,7 @@ import {
 import {MetadataListContext} from './MetadataListContext';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
+import {isRenderable} from '../utils/isRenderable';
 import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
@@ -153,7 +154,7 @@ export function MetadataListItem({
 
   const labelContent = (
     <>
-      {icon != null && (
+      {isRenderable(icon) && (
         <span {...stylex.props(styles.iconWrapper)}>{icon}</span>
       )}
       {label}

package/src/MobileNav/MobileNav.tsx

@@ -70,15 +70,22 @@ import {mergeProps, composeEventHandlers} from '../utils';
 import {layerTextReset} from '../Layer/layerTextReset.stylex';
 import {layerStructureReset} from '../Layer/layerStructureReset.stylex';
 import {LayerContentBoundary} from '../Layer/layerScopedContext';
+import {layerClickBoundary} from '../Layer/layerClickBoundary';
 import {overlayPaddingReset} from '../Layout/padding.stylex';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 import {useLayerDismissal} from '../Layer/useLayerDismissal';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/MobileNav/MobileNav.generated';
+
+registerEnglishFallback(english);
 // =============================================================================
 // Styles
 // =============================================================================
@@ -477,7 +484,7 @@ export function MobileNav({
   ref,
   ...rest
 }: MobileNavProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   // Read from AppShell context as fallback
   const appShellMobile = useAppShellMobile();
   const isOpen = isOpenProp ?? appShellMobile.isMobileNavOpen;
@@ -706,7 +713,12 @@ export function MobileNav({
           ? header
           : t('@astryx.mobileNav.navigation'))
       }
-      onClick={composeEventHandlers(onClickProp, handleDialogClick)}
+      // Presses inside the navigation do not reach handlers around where it
+      // is written.
+      {...layerClickBoundary({
+        ...rest,
+        onClick: composeEventHandlers(onClickProp, handleDialogClick),
+      })}
       onCancel={handleCancel}>
       <ModalAnnounceProvider dialogRef={dialogRef} isOpen={isOpen}>
         <LayerDepthProvider>

package/src/MobileNav/MobileNavToggle.tsx

@@ -22,8 +22,14 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import type {BaseProps} from '../BaseProps';
-import {useTranslator} from '../i18n';
 import {composeEventHandlers} from '../utils';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/MobileNav/MobileNavToggle.generated';
+
+registerEnglishFallback(english);
 
 export interface MobileNavToggleProps extends Omit<
   BaseProps<HTMLButtonElement>,
@@ -74,7 +80,7 @@ export function MobileNavToggle({
   onClick,
   ...rest
 }: MobileNavToggleProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.mobileNav.toggle.open');
   const {
     isMobile,

package/src/MoreMenu/MoreMenu.tsx

@@ -30,7 +30,13 @@ import type {LayerAlignment, LayerPlacement} from '../Layer';
 import type {ButtonVariant, ButtonSize} from '../Button';
 import type {BaseProps} from '../BaseProps';
 import {stableClassName} from '../naming';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/MoreMenu/MoreMenu.generated';
+
+registerEnglishFallback(english);
 
 export interface MoreMenuProps extends Pick<
   BaseProps,
@@ -144,7 +150,7 @@ export function MoreMenu({
   'data-testid': testId,
   ref,
 }: MoreMenuProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.moreMenu.label');
   const size = useSize(sizeProp, 'md');
   const moreIcon = useIcon('moreHorizontal');

package/src/MultiSelector/MultiSelector.tsx

@@ -31,6 +31,7 @@ import React, {
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import {inputDisabledFocusStyles} from '../Field/inputDisabledFocus';
 import {useTooltip} from '../Tooltip';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import type {IconName} from '../Icon';
@@ -39,7 +40,6 @@ import {
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputWrapperStyles,
-  type FieldStatusVariant,
 } from '../Field';
 import {useKeepLayerOpenProps} from '../Layer/useLayer';
 import {InternalInputClearButton} from '../Field/InputClearButton';
@@ -77,10 +77,7 @@ import {useMultiCombobox} from './hooks';
 import {getInputARIA, isImeKeyEvent, mergeProps} from '../utils';
 import {joinAriaIDs} from '../utils/inputAria';
 import {devWarn, warnOnce} from '../utils/devWarning';
-import {
-  getInteractionModality,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {useAnnounce} from '../hooks/useAnnounce';
 import {FOCUSABLE_SELECTOR} from '../hooks/focusableSelector';
 import {useAnnounceRenderedText} from '../hooks/useAnnounceRenderedText';
@@ -105,11 +102,18 @@ import {groupStyles, inputGroupItemProps} from '../InputGroup/groupStyles';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
 import {InputGroupInternalContext} from '../InputGroup/InputGroupInternalContext';
 import {VisuallyHidden} from '../VisuallyHidden';
-import {useTranslator} from '../i18n';
 import type {AdaptivePresentation} from '../hooks/useAdaptivePresentation';
 import {SelectorBottomSheet} from '../Selector/SelectorBottomSheet';
 import {useSelectorPresentation} from '../Selector/useSelectorPresentation';
 import {selectorPresentationStyles} from '../Selector/selectorPresentation.stylex';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/MultiSelector/MultiSelector.generated';
+
+registerEnglishFallback(english);
 
 // Sentinel value for the select-all item in keyboard navigation
 const SELECT_ALL_VALUE = '__xds_select_all__';
@@ -275,21 +279,6 @@ const styles = stylex.create({
       '[data-astryx-press="on"]': 'scale(0.98)',
     },
   },
-  // A disabled input-variant trigger keeps its tab stop (`spec:AST-085` FR1),
-  // and the shared disabled wrapper style drops the field focus ring, so the
-  // trigger shows keyboard focus here instead (FR6). It keys on the trigger
-  // itself, a direct child, so a focused status button keeps its own outline.
-  triggerDisabledFocus: {
-    borderColor: {
-      default: colorVars['--color-border-emphasized'],
-      ':has(> [aria-disabled="true"]:focus-visible)':
-        colorVars['--color-accent'],
-    },
-    boxShadow: {
-      default: 'none',
-      ':has(> [aria-disabled="true"]:focus-visible)': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
-    },
-  },
   triggerGhostDisabled: {
     backgroundImage: 'none',
     transform: {
@@ -807,7 +796,7 @@ export interface MultiSelectorProps<
    * - 'tooltip': message is exposed from the on-field status icon
    * @default 'attached' for input selectors; 'detached' for secondary and ghost selectors
    */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusPlacement;
 
   /**
    * Width of the field. Numbers are treated as pixels, strings are used as-is
@@ -1159,7 +1148,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
         controlClassName != null ||
         controlStyle != null),
   );
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const pressable = usePressFeedback();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const placeholder =
@@ -1192,7 +1181,17 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
   // Read by the live region above so it speaks what this element renders.
   const emptyStateRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLElement>(null);
-  const triggerButtonRef = useMergedRefs<HTMLElement>(triggerRef, ref);
+  // A hover moves the highlight too, but the focus ring follows the shared
+  // interaction modality (architecture:interaction-modality INV1): it is read
+  // whenever a key or the pointer moves the highlight, so an action cell
+  // highlighted after pointer input keeps the hover treatment and no ring.
+  const triggerModality = useInteractionModalityTracking();
+  const readModality = triggerModality.readModality;
+  const triggerButtonRef = useMergedRefs<HTMLElement>(
+    triggerRef,
+    triggerModality.ref,
+    ref,
+  );
   const searchRef = useRef<HTMLInputElement>(null);
   const listboxRef = useRef<HTMLDivElement>(null);
 
@@ -1448,6 +1447,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     onHide: handleLayerHide,
     onShow: handleLayerShow,
     triggerRef,
+    triggerModality,
     isFocusReturnAlways: hasExternalTrigger,
     popoverOptions: {
       hasLightDismiss: true,
@@ -1850,27 +1850,22 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     ),
   });
 
-  // A hover moves the highlight too, but the focus ring follows the shared
-  // interaction modality (architecture:interaction-modality INV1): it is read
-  // whenever a key or the pointer moves the highlight, so an action cell
-  // highlighted after pointer input keeps the hover treatment and no ring.
-  useInteractionModalityTracking();
   const [isKeyboardHighlight, setIsKeyboardHighlight] = useState(
-    () => getInteractionModality() === 'keyboard',
+    () => readModality() === 'keyboard',
   );
   const onKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       onComboboxKeyDown(event);
-      setIsKeyboardHighlight(getInteractionModality() === 'keyboard');
+      setIsKeyboardHighlight(readModality() === 'keyboard');
     },
-    [onComboboxKeyDown],
+    [onComboboxKeyDown, readModality],
   );
   const onItemMouseEnter = useCallback(
     (...args: Parameters<typeof onComboboxItemMouseEnter>) => {
       onComboboxItemMouseEnter(...args);
-      setIsKeyboardHighlight(getInteractionModality() === 'keyboard');
+      setIsKeyboardHighlight(readModality() === 'keyboard');
     },
-    [onComboboxItemMouseEnter],
+    [onComboboxItemMouseEnter, readModality],
   );
 
   // The trigger button owns its click so a consumer `onClick`, which lands on
@@ -2528,20 +2523,24 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
       ...(ariaLabelledByProp != null
         ? {'aria-labelledby': ariaLabelledByProp}
         : null),
-      ref: mergeRefs<HTMLElement>(el => {
-        popover.triggerRef(el);
-        triggerRef.current = el;
-        // A control that takes no focus has nowhere for focus to return to
-        // when the panel closes, and focus would land on the body — the
-        // person loses their place in the page. Making it programmatically
-        // focusable repairs the return without putting it in the tab order,
-        // which is the caller's decision to make. It does not make the
-        // control openable from the keyboard: only a real control does
-        // that, which is what the warning below is for.
-        if (el != null && !el.matches(FOCUSABLE_SELECTOR)) {
-          el.tabIndex = -1;
-        }
-      }, ref),
+      ref: mergeRefs<HTMLElement>(
+        el => {
+          popover.triggerRef(el);
+          triggerRef.current = el;
+          // A control that takes no focus has nowhere for focus to return to
+          // when the panel closes, and focus would land on the body — the
+          // person loses their place in the page. Making it programmatically
+          // focusable repairs the return without putting it in the tab order,
+          // which is the caller's decision to make. It does not make the
+          // control openable from the keyboard: only a real control does
+          // that, which is what the warning below is for.
+          if (el != null && !el.matches(FOCUSABLE_SELECTOR)) {
+            el.tabIndex = -1;
+          }
+        },
+        triggerModality.ref,
+        ref,
+      ),
       id: triggerId,
       onClick: isEffectivelyReadOnly
         ? onClick
@@ -2623,7 +2622,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
             variant === 'input' &&
               isDisabled &&
               !surface.isTriggerFocusRingSuppressed &&
-              styles.triggerDisabledFocus,
+              inputDisabledFocusStyles.ring,
             isEffectivelyReadOnly && styles.triggerReadOnly,
             variant !== 'input' && isDisabled && styles.triggerGhostDisabled,
             variant !== 'input' &&

package/src/MultiSelector/hooks.ts

@@ -18,6 +18,7 @@ import {useCallback, useRef, useState} from 'react';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {useHighlightedOptionScroll} from '../hooks/useHighlightedOptionScroll';
 import type {MultiSelectorOptionData} from './types';
+import {findTypeaheadMatch} from '../utils/typeaheadMatch';
 
 interface UseMultiComboboxOptions {
   selectableItems: MultiSelectorOptionData[];
@@ -335,11 +336,12 @@ export function useMultiCombobox({
         default:
           // Typeahead only when search is not present
           if (!hasSearch && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
-            const newTypeahead = typeahead + e.key.toLowerCase();
-            const matchIndex = selectableItems.findIndex(
-              item =>
-                !item.disabled &&
-                item.label?.toLowerCase().startsWith(newTypeahead),
+            const newTypeahead = typeahead + e.key;
+            // INV17: the shared type-to-select fold, as Selector uses.
+            const matchIndex = findTypeaheadMatch(
+              selectableItems.flatMap((item, i) => (item.disabled ? [] : [i])),
+              i => selectableItems[i].label,
+              newTypeahead,
             );
             const didOpen = isOpen || matchIndex < 0 || onOpen() !== false;
             if (didOpen) {

package/src/NavMenu/NavHeadingMenuItem.tsx

@@ -29,6 +29,7 @@ import type {BaseProps} from '../BaseProps';
 import {useNavHeadingMenuContext} from './NavMenuContext';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import {themeProps} from '../utils/themeProps';
+import {isRenderable} from '../utils/isRenderable';
 
 const styles = stylex.create({
   root: {
@@ -196,7 +197,7 @@ export function NavHeadingMenuItem({
         ) : (
           label
         )}
-        {description && (
+        {isRenderable(description) && (
           <Text type="supporting" maxLines={1}>
             {description}
           </Text>

package/src/NumberInput/NumberInput.tsx

@@ -47,7 +47,6 @@ import {
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
-  type FieldStatusVariant,
 } from '../Field';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import {VisuallyHidden} from '../VisuallyHidden';
@@ -232,9 +231,17 @@ import {
 } from '../Field/fieldParts';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator, useLocale} from '../i18n';
+import {useLocale} from '../i18n';
 import {formatEditableNumber} from './numberParser';
 import {parseNumberInput, resolveNumberInputCommit} from './numberInputCommit';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/NumberInput/NumberInput.generated';
+
+registerEnglishFallback(english);
 
 interface NumberInputPropsBase extends Omit<
   FieldInputBaseProps,
@@ -324,7 +331,7 @@ interface NumberInputPropsBase 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;
   /**
    * The size of the input.
    * - 'sm': Compact size (28px height)
@@ -598,7 +605,7 @@ export function NumberInput({
     containerStyle,
   });
   const pressable = usePressFeedback();
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const size = useSize(sizeProp, 'md');

package/src/Outline/Outline.tsx

@@ -45,9 +45,15 @@ import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
-import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Outline/Outline.generated';
+
+registerEnglishFallback(english);
 export type {OutlineItem} from './types';
 
 export interface OutlineProps extends BaseProps<HTMLElement> {
@@ -347,7 +353,7 @@ export function Outline({
   ...props
 }: OutlineProps) {
   const pressable = usePressFeedback();
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.outline.label');
   const rootRef = useRef<HTMLElement | null>(null);
   const LinkComponent = useLinkComponent();

package/src/OverflowList/OverflowList.tsx

@@ -27,6 +27,7 @@ import {
   useState,
 } from 'react';
 import type {BaseProps} from '../BaseProps';
+import {isRenderable} from '../utils/isRenderable';
 import type {SpacingStep} from '../utils/types';
 import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
@@ -370,7 +371,7 @@ export function OverflowList({
         inert
         {...stylex.props(styles.measureContainer, gapStyles[gap])}>
         {childArray}
-        {measureIndicator != null && (
+        {isRenderable(measureIndicator) && (
           <div {...stylex.props(styles.measureIndicator)}>
             {measureIndicator}
           </div>

package/src/Pagination/Pagination.tsx

@@ -45,8 +45,14 @@ import {mergeProps, rtlStyles} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {useTranslator} from '../i18n/useTranslator';
 import type {PaginationVariantMap} from './index';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Pagination/Pagination.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -395,7 +401,7 @@ export function Pagination({
   const [, startTransition] = useTransition();
 
   // Resolve system strings once per render. Prop overrides win.
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.pagination.label');
   const firstLabel = t('@astryx.pagination.first');
   const lastLabel = t('@astryx.pagination.last');
@@ -768,6 +774,7 @@ export function Pagination({
               {inputLabelText}
             </span>
             {inputNode}
+            {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `computedTotalPages` is a page count, not a slot */}
             {computedTotalPages != null && (
               <span
                 {...mergeProps(

package/src/Popover/Popover.tsx

@@ -49,7 +49,7 @@ import {useThemeDefinition} from '../theme/useTheme';
 import * as stylex from '@stylexjs/stylex';
 import {devWarn} from '../utils/devWarning';
 import type {BaseProps} from '../BaseProps';
-import {usePopover} from './usePopover';
+import {FALLBACK_CLOSE_SELECTOR, usePopover} from './usePopover';
 import {FOCUSABLE_SELECTOR} from '../hooks/focusableSelector';
 import type {LayerAlignment, LayerPlacement} from '../Layer/useLayer';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
@@ -64,7 +64,13 @@ import {
   preloadPopoverBottomSheet,
 } from './lazyPopoverBottomSheet';
 import {Button} from '../Button';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Popover/Popover.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Helpers
@@ -519,7 +525,7 @@ export function Popover({
   style,
   'data-testid': testId,
 }: PopoverProps): ReactElement {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const wrapperRef = useRef<HTMLDivElement>(null);
   const measurementFrameRef = useRef<{id: number; view: Window} | null>(null);
   const [hasOverflow, setHasOverflow] = useState(false);
@@ -645,7 +651,7 @@ export function Popover({
             // BottomSheet's scroll area is the panel's own child; content
             // sits inside it.
             element.parentElement !== sheetPanel &&
-            element.closest('[data-astryx-popover-fallback-close]') == null,
+            element.closest(FALLBACK_CLOSE_SELECTOR) == null,
         );
       if (target != null) {
         target.focus({preventScroll: true});

package/src/Popover/usePopover.tsx

@@ -5,7 +5,8 @@
 /**
  * @file usePopover.tsx
  * @input Uses useLayer, useFocusTrap, React hooks
- * @output Exports the public usePopover hook with derived focus and guarded opening.
+ * @output Exports the public usePopover hook with derived focus and guarded opening,
+ *   and FALLBACK_CLOSE_SELECTOR for Popover.tsx (internal).
  * @position Higher-level layer utility; used by DatePicker, Combobox, etc.
  *
  * Combines popover layer behavior with focus trap for dialog-like popovers.
@@ -30,7 +31,6 @@ import {
 import {Button} from '../Button';
 import {FOCUSABLE_SELECTOR} from '../hooks/focusableSelector';
 import {rtlStyles} from '../utils';
-import {useTranslator} from '../i18n';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {mergeProps} from '../utils/mergeProps';
@@ -38,8 +38,19 @@ import {themeProps} from '../utils/themeProps';
 import {paddingStyles} from '../Layout/padding.stylex';
 import type {SpacingStep} from '../utils/types';
 import {stableClassName} from '../naming';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Popover/usePopover.generated';
+
+registerEnglishFallback(english);
 
-const FALLBACK_CLOSE_SELECTOR = '[data-astryx-popover-fallback-close]';
+/**
+ * The fallback close button's wrapper (anchored layer) or button (sheet,
+ * Popover.tsx); initial focus skips it.
+ */
+export const FALLBACK_CLOSE_SELECTOR = '[data-astryx-popover-fallback-close]';
 
 function attemptFocus(element: HTMLElement): boolean {
   try {
@@ -402,7 +413,7 @@ function usePopoverImplementation(
     isModal = true,
   } = options;
 
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const closeButtonLabel =
     closeButtonLabelFromProps ?? t('@astryx.popover.close');