@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/Chat/useTriggerMenu.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file useTriggerMenu.tsx
- * @input Uses React, usePopover, SearchSource
+ * @input Uses React, usePopover, SearchSource, useBusyAnnouncement
  * @output Exports useTriggerMenu hook for trigger-based menus in contentEditable
  * @position Internal hook; consumed by ChatComposerInput
  *
@@ -32,7 +32,8 @@ import {
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {usePopover} from '../Popover/usePopover';
-import {useAnnounce} from '../hooks/useAnnounce';
+import {isPressInsideOwnedLayer, useOutsidePress} from '../Layer/outsidePress';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {useHighlightedOptionScroll} from '../hooks/useHighlightedOptionScroll';
 import {
   colorVars,
@@ -44,8 +45,14 @@ import {
 import {mergeProps, groupItems, isImeKeyEvent} from '../utils';
 import type {SearchableItem} from '../Typeahead/types';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 import type {ChatComposerTrigger, ChatComposerToken} from './ChatComposerInput';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/useTriggerMenu.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -333,7 +340,7 @@ function deleteTriggerText(
 export function useTriggerMenu(
   options: UseTriggerMenuOptions,
 ): UseTriggerMenuReturn {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {
     triggers,
     editableRef,
@@ -355,36 +362,22 @@ export function useTriggerMenu(
   });
 
   // The loading row carries no live role: it mounts already holding its text
-  // and is removed when results arrive, so it would be skipped. The shared
-  // channel announces each loading episode once instead (spec:AST-086 FR2,
-  // FR6), once the row has been painted: the second animation frame runs
-  // after the first paint, and a search that settles before then never shows
-  // the row, so it announces nothing (FR7). The flag clears when the loading
-  // row goes away, so the next search is a new occasion.
-  const announce = useAnnounce();
-  const hasAnnouncedLoadingRef = useRef(false);
+  // and is removed when results arrive, so it would be skipped. "Searching…"
+  // is the menu's busy state, so the shared busy path announces each loading
+  // episode once (spec:AST-086 FR6, FR8): rerenders and further keystrokes
+  // while loading do not repeat it, results arriving re-arm it, and a search
+  // that settles before the announcement goes out announces nothing.
   // Mirrors renderMenu: no row exists without an active trigger or while hidden.
   const isLoadingRowShown =
     state.isLoading && !state.isHidden && state.activeTrigger !== null;
   // One catalog string serves the row and the announcement (FR7).
   const loadingText =
     state.activeTrigger?.loadingText ?? t('@astryx.chatTriggerMenu.searching');
-  useEffect(() => {
-    if (!isLoadingRowShown) {
-      hasAnnouncedLoadingRef.current = false;
-      return;
-    }
-    if (hasAnnouncedLoadingRef.current) {
-      return;
-    }
-    let frame = requestAnimationFrame(() => {
-      frame = requestAnimationFrame(() => {
-        hasAnnouncedLoadingRef.current = true;
-        announce(loadingText, 'polite');
-      });
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [announce, isLoadingRowShown, loadingText]);
+  const settleBusyAnnouncement = useBusyAnnouncement(
+    isLoadingRowShown,
+    loadingText,
+    editableRef,
+  );
 
   const triggerStartRef = useRef<number>(-1);
   const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -410,8 +403,24 @@ export function useTriggerMenu(
     }
   }, []);
 
+  const outsidePress = useOutsidePress();
   const popover = usePopover({
+    // A text input cannot be an invoker, so native light dismiss would count
+    // a press in the editor as outside and close the menu.
+    onShow: () => {
+      const editable = editableRef.current;
+      if (editable == null) {
+        return;
+      }
+      outsidePress.start(
+        editable,
+        path => isPressInsideOwnedLayer(path, editable, popover.id),
+        // Called after usePopover has returned, so `popover` is assigned.
+        () => popover.hide(),
+      );
+    },
     onHide: useCallback(() => {
+      outsidePress.stop();
       if (isMenuSuppressedRef.current) {
         return;
       }
@@ -433,8 +442,8 @@ export function useTriggerMenu(
         isLoading: false,
         isHidden: false,
       }));
-    }, [removeAnchorSpan]),
-    hasLightDismiss: true,
+    }, [outsidePress, removeAnchorSpan]),
+    hasLightDismiss: false,
     hasCloseButton: false,
     hasAutoFocus: false,
     // The popup's own role="listbox" is the exposed semantics; focus stays in
@@ -570,6 +579,9 @@ export function useTriggerMenu(
       };
 
       const applyResults = (items: SearchableItem[]) => {
+        // Results that arrive before the busy start is heard withdraw it, so a
+        // search that settles on its first frame announces nothing (FR8).
+        settleBusyAnnouncement();
         const isHidden = isUnmatchedMultiWordQuery(trigger, items, false);
         setState(prev => ({
           ...prev,
@@ -578,8 +590,8 @@ export function useTriggerMenu(
           isLoading: false,
           isHidden,
         }));
-        // A hidden menu closes its popover, which also releases the popover's
-        // Escape and light-dismiss handling; matches reopen it at the caret.
+        // A hidden menu closes its popover. That also stops its Escape and
+        // outside-press handling. Matches reopen it at the caret.
         if (isHidden && !isMenuSuppressedRef.current) {
           isMenuSuppressedRef.current = true;
           hidePopover();
@@ -596,7 +608,7 @@ export function useTriggerMenu(
           trigger.searchSource.cancel?.();
           const result = trigger.searchSource.search(query);
           // A synchronous source already has its results, so it never shows
-          // or announces the loading row (spec:AST-086 FR7).
+          // or announces the loading row.
           if (!Array.isArray(result)) {
             setState(prev => ({...prev, isLoading: true}));
           }
@@ -638,6 +650,7 @@ export function useTriggerMenu(
       setAnchor,
       hidePopover,
       showPopover,
+      settleBusyAnnouncement,
     ],
   );
 

package/src/CheckboxInput/CheckboxInput.tsx

@@ -47,7 +47,6 @@ import {mergeProps} from '../utils/mergeProps';
 import {rtlStyles} from '../utils/rtlStyles';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
-import {useTranslator} from '../i18n/useTranslator';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {usePressFeedback} from '../hooks/usePressFeedback';
@@ -56,6 +55,13 @@ import {useIndicator} from '../Indicator/useIndicator';
 import {themeProps} from '../utils/themeProps';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/CheckboxInput/CheckboxInput.generated';
+
+registerEnglishFallback(english);
 
 // The touch press's paint, declared by the shared overlay styles on the
 // element the controller writes to (`pressedAlpha`) at the press's strength,
@@ -374,7 +380,7 @@ export function CheckboxInput({
   // `opacity: 0`, and only the indicator's own element can shape the outline
   // to match it. See useIndicatorFocusRing.
   const indicatorRef = useRef<HTMLSpanElement>(null);
-  const t = useTranslator();
+  const t = useComponentTranslator();
   // The busy Spinner sits in the decorative, aria-hidden indicator, so this
   // control announces its busy start itself (spec:AST-086 FR8).
   useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), indicatorRef);

package/src/CheckboxList/CheckboxList.tsx

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

package/src/CheckboxList/CheckboxListContext.tsx

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

package/src/CheckboxList/CheckboxListItem.tsx

@@ -27,9 +27,16 @@ import type {CheckboxInputProps} from '../CheckboxInput/CheckboxInput';
 import {ListItem} from '../List/ListItem';
 import {ListContext} from '../List/ListContext';
 import {CheckboxListContext} from './CheckboxListContext';
-import {useTranslator} from '../i18n';
 import {ItemDescriptionContext} from '../Item/ItemDescriptionContext';
+import {joinAriaIDs} from '../utils/inputAria';
 import type {ItemAlign} from '../Item';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/CheckboxList/CheckboxListItem.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Styles
@@ -153,14 +160,19 @@ export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
  *
  * This component owns `aria-describedby`, so the prop is omitted rather than
  * accepted and overwritten: a caller passing one would otherwise lose the id
- * silently.
+ * silently. After the row's description comes the group's disabled reason
+ * (CheckboxList's disabledMessage), which describes each checkbox (FR9).
  */
 function DescribedCheckboxInput(
   props: Omit<CheckboxInputProps, 'aria-describedby'>,
 ) {
   const describedBy = use(ItemDescriptionContext);
+  const reasonID = use(CheckboxListContext)?.disabledMessageID;
   return (
-    <CheckboxInput {...props} aria-describedby={describedBy ?? undefined} />
+    <CheckboxInput
+      {...props}
+      aria-describedby={joinAriaIDs(describedBy ?? undefined, reasonID)}
+    />
   );
 }
 
@@ -203,7 +215,7 @@ export function CheckboxListItem({
   align,
   ...restProps
 }: CheckboxListItemProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const ctx = use(CheckboxListContext);
 
   if (ctx && ctx.value !== undefined && value === undefined) {

package/src/Citation/Citation.tsx

@@ -33,8 +33,14 @@ import {mergeProps} from '../utils';
 import {isSafeUrl} from '../utils/safeUrl';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 import {renderIconSlot} from '../Icon';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Citation/Citation.generated';
+
+registerEnglishFallback(english);
 
 export interface CitationSource {
   title?: string;
@@ -188,7 +194,7 @@ export function Citation({
   'data-testid': testId,
   ...rest
 }: CitationProps): React.ReactElement {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const title = source.title ?? String(number);
   const href =
     source.url != null && isSafeUrl(source.url) ? source.url : undefined;

package/src/Code/Code.tsx

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

package/src/CodeBlock/CodeBlock.tsx

@@ -32,7 +32,7 @@ import {
   durationVars,
   easeVars,
 } from '../theme/tokens.stylex';
-import {isRenderable, mergeProps} from '../utils';
+import {isRenderable, mergeProps, rtlStyles} from '../utils';
 import {useClipboard} from '../hooks/useClipboard';
 import {useScrollableArea} from '../hooks/useScrollableArea';
 import {Icon} from '../Icon';
@@ -57,8 +57,14 @@ import {ensureHighlightStyles} from './highlightStyles';
 import {applyHighlightRangesChunked} from './highlightRanges';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {useTranslator} from '../i18n';
 import {SyntaxTheme, type SyntaxThemeDefinition} from '../theme/syntax';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/CodeBlock/CodeBlock.generated';
+
+registerEnglishFallback(english);
 
 // ---------------------------------------------------------------------------
 // Styles
@@ -978,7 +984,7 @@ export function CodeBlock({
   ref,
   ...props
 }: CodeBlockProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   // Owns the clipboard write, the transient copied flag, its reset timer, and
   // the polite copy announcement (a swapped aria-label alone is not reliably
   // announced) — shared with Timestamp via the same hook.
@@ -1159,7 +1165,11 @@ export function CodeBlock({
             stylex.props(styles.headerTitle),
           )}>
           {canCollapse && (
-            <span {...stylex.props(styles.collapseChevron)}>
+            // The collapsed chevron points toward the inline end, so it mirrors
+            // in RTL (design:bidirectionality DR4). The mirror sits on this box
+            // so the glyph's own rotation still eases: rotated down when
+            // expanded, a mirrored glyph still points down.
+            <span {...stylex.props(styles.collapseChevron, rtlStyles.mirror)}>
               <Icon
                 icon="chevronRight"
                 size="xsm"

package/src/Collapsible/Collapsible.tsx

@@ -51,6 +51,14 @@ import {
 
 import {useCollapsible} from './useCollapsible';
 import {LayoutChangeSnapshot} from '../motion/LayoutChangeSnapshot';
+import {
+  moveFocusLeftBehind,
+  noteFocusWithin,
+  type FocusWithin,
+} from '../utils/focusReturn';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
+import {useFocusLeavingChange} from '../utils/useFocusLeavingChange';
+import {useMergedRefs} from '../hooks/useMergedRefs';
 import {
   applyLayoutChangeTransition,
   holdLayoutExit,
@@ -449,6 +457,29 @@ export function Collapsible({
     }
   }, [isOpen, isExiting]);
 
+  // Focus inside the content when it closes would be lost to the page once
+  // the content hides. It moves to the trigger that closes it (AR4); focus
+  // anywhere else is not moved. The shared sequence notes it in the commit
+  // before the DOM changes and moves it once the close has committed.
+  // The trigger's own document's last input decides the moved focus's ring.
+  const {ref: modalityRef} = useInteractionModalityTracking();
+  const mergedTriggerRef = useMergedRefs(triggerRef, modalityRef);
+  const noteClosingFocus = useFocusLeavingChange(
+    isOpen,
+    (wasOpen: boolean) =>
+      wasOpen ? noteFocusWithin(contentRef.current) : null,
+    (focus: FocusWithin) =>
+      moveFocusLeftBehind(focus, triggerRef.current, contentRef.current),
+  );
+  const beforeOpenChange = useCallback(
+    (wasOpen: boolean) => {
+      noteClosingFocus(wasOpen);
+      if (animatedLayout != null) {
+        measureChange();
+      }
+    },
+    [animatedLayout, measureChange, noteClosingFocus],
+  );
   // Activation is blocked by this guard rather than the native `disabled`
   // attribute, so the trigger keeps `aria-disabled` semantics and stays
   // discoverable. A native `disabled` button would silently swallow events
@@ -513,7 +544,7 @@ export function Collapsible({
       )}
       {...props}>
       <button
-        ref={triggerRef}
+        ref={mergedTriggerRef}
         type="button"
         onClick={handleToggle}
         aria-disabled={isDisabled || undefined}
@@ -547,9 +578,7 @@ export function Collapsible({
         <span {...stylex.props(styles.triggerLabel)}>{trigger}</span>
         {!isChevronAtStart && chevron}
       </button>
-      {animatedLayout != null && (
-        <LayoutChangeSnapshot value={isOpen} onBeforeChange={measureChange} />
-      )}
+      <LayoutChangeSnapshot value={isOpen} onBeforeChange={beforeOpenChange} />
       <div
         ref={contentRef}
         id={contentId}

package/src/CommandPalette/CommandPalette.tsx

@@ -40,7 +40,13 @@ import {CommandPaletteEmpty} from './CommandPaletteEmpty';
 import type {BaseProps} from '../BaseProps';
 import {useAnnounce} from '../hooks/useAnnounce';
 import {useAnnounceRenderedText} from '../hooks/useAnnounceRenderedText';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/CommandPalette/CommandPalette.generated';
+
+registerEnglishFallback(english);
 
 export interface CommandPaletteProps<
   T extends SearchableItem = SearchableItem,
@@ -297,7 +303,7 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
   maxHeight = 480,
   ...rest
 }: CommandPaletteProps<T>) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.commandPalette.label');
   const emptySearchText =
     emptySearchTextFromProps ?? t('@astryx.commandPalette.emptySearch');
@@ -624,12 +630,20 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
     ],
   );
 
-  // `search` is the committed query the on-screen results correspond to (it
-  // still holds the previous query while a transition is pending). Keeping both
-  // flags ungated by `isPending` makes them exhaustive over the empty case, so
-  // the empty state is never unmounted and re-added mid-search (which flashed).
-  const showEmptyBootstrap = search === '' && optimisticResults.length === 0;
-  const showEmptySearch = search !== '' && optimisticResults.length === 0;
+  // "No query" is the field's current value (`optimisticSearch`), so the
+  // bootstrap text never shows over a query the person has typed
+  // (component:CommandPaletteEmpty FR2). The search-empty text belongs to a
+  // committed query (`search`, which still holds the previous query while a
+  // transition is pending): it stays mounted across keystrokes after a query
+  // settled empty, so it never flashes. While the first query is pending and
+  // nothing is committed, neither text shows: the result surface keeps the
+  // Empty container's size with no message, so the dialog does not jump, and
+  // the Input's Loading spinner is the indicator (component:CommandPalette
+  // FR1 and its Pending search state row).
+  const hasQuery = optimisticSearch !== '';
+  const showEmptyBootstrap = !hasQuery && optimisticResults.length === 0;
+  const showEmptySearch =
+    hasQuery && search !== '' && optimisticResults.length === 0;
   // Announce only once the search settles: while it is pending, optimistic
   // narrowing can empty the list before the source answers, which would
   // speak "No results" early or wrongly.
@@ -648,6 +662,12 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
         {emptySearchText}
       </CommandPaletteEmpty>
     );
+  } else if (optimisticResults.length === 0) {
+    // A no-break space gives the empty container one line of height; it is
+    // hidden from assistive technology, which hears the busy start instead.
+    listContent = (
+      <CommandPaletteEmpty aria-hidden="true">{'\u00a0'}</CommandPaletteEmpty>
+    );
   } else {
     listContent = (
       <ItemRenderer

package/src/CommandPalette/CommandPaletteEmpty.tsx

@@ -40,6 +40,8 @@ const styles = stylex.create({
     // instead of setting the centered line's minimum width, which pushes text
     // past both inline edges where neither side can scroll to it.
     overflowWrap: 'anywhere',
+    // Text inside keeps `anywhere` too (Text FR3).
+    '--_astryx-text-overflow-wrap': 'anywhere',
   },
 });
 

package/src/CommandPalette/CommandPaletteFooter.tsx

@@ -24,7 +24,13 @@ import {
 } from '../theme/tokens.stylex';
 import {Kbd} from '../Kbd';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/CommandPalette/CommandPaletteFooter.generated';
+
+registerEnglishFallback(english);
 
 const styles = stylex.create({
   footer: {
@@ -90,7 +96,7 @@ export function CommandPaletteFooter({
   style,
   ...props
 }: CommandPaletteFooterProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
 
   return (
     <div

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -37,14 +37,17 @@ import {useDialogContext} from '../Dialog/DialogContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {
-  getInteractionModality,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
-import {useTranslator} from '../i18n';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/CommandPalette/CommandPaletteInput.generated';
+
+registerEnglishFallback(english);
 const styles = stylex.create({
   wrapper: {
     display: 'flex',
@@ -190,7 +193,7 @@ export function CommandPaletteInput({
   style,
   ...props
 }: CommandPaletteInputProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const placeholder =
     placeholderFromProps ?? t('@astryx.commandPalette.input.placeholder');
   const ctx = useCommandPaletteContext();
@@ -223,13 +226,13 @@ export function CommandPaletteInput({
   // Text-entry controls match :focus-visible after pointer focus in Chromium.
   // Keep the shared selector, but narrow its ring to focus acquired through
   // keyboard navigation so a click or pointer-opened palette stays unringed.
-  useInteractionModalityTracking();
+  const {ref: modalityRef, readModality} = useInteractionModalityTracking();
   const handleFocus = useCallback(
     (event: React.FocusEvent<HTMLInputElement>) => {
-      setIsKeyboardFocus(getInteractionModality() === 'keyboard');
+      setIsKeyboardFocus(readModality() === 'keyboard');
       onFocus?.(event);
     },
-    [onFocus],
+    [onFocus, readModality],
   );
   const handleBlur = useCallback(
     (event: React.FocusEvent<HTMLInputElement>) => {
@@ -312,7 +315,7 @@ export function CommandPaletteInput({
       </span>
       <input
         {...props}
-        ref={useMergedRefs(ref, inputRef)}
+        ref={useMergedRefs(ref, inputRef, modalityRef)}
         {...(isKeyboardFocus
           ? focusOutlineProps.focusVisible(styles.input)
           : focusOutlineProps.suppressed(styles.input))}

package/src/CommandPalette/CommandPaletteList.tsx

@@ -20,7 +20,13 @@ import {mergeProps} from '../utils';
 import {spacingVars} from '../theme/tokens.stylex';
 import {useCommandPaletteContext} from './CommandPaletteContext';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/CommandPalette/CommandPaletteList.generated';
+
+registerEnglishFallback(english);
 
 const styles = stylex.create({
   list: {
@@ -83,7 +89,7 @@ export function CommandPaletteList({
   style,
   ...props
 }: CommandPaletteListProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.commandPalette.list.label');
   const ctx = useCommandPaletteContext();
   // Inside CommandPalette the list is a listbox only while it holds selectable

package/src/ComplexSelector/ComplexSelector.tsx

@@ -37,10 +37,9 @@ import {useDevWarning} from '../hooks/useDevWarning';
 import {mergeRefs} from '../utils/mergeRefs';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
-import {Field, inputWrapperStyles, type FieldStatusVariant} from '../Field';
+import {Field, inputWrapperStyles} from '../Field';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import {Spinner} from '../Spinner';
-import {useTranslator} from '../i18n';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import type {LayerAlignment, LayerPlacement} from '../Layer/useLayer';
 import {usePopover} from '../Popover/usePopover';
@@ -65,6 +64,14 @@ import {usePressFeedback} from '../hooks/usePressFeedback';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {layerViewportInset} from '../Layer/layerViewportInset.stylex';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/ComplexSelector/ComplexSelector.generated';
+
+registerEnglishFallback(english);
 
 // The popup content's own block-size cap; the viewport cap is the layer
 // runtime's.
@@ -417,7 +424,7 @@ export interface ComplexSelectorProps<Value> extends Omit<
    * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
    * @default 'attached' for input selectors; 'detached' for secondary and ghost selectors
    */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusPlacement;
   /** Tooltip text displayed next to the label. */
   labelTooltip?: string;
   /** Trigger and field size. */
@@ -571,7 +578,7 @@ export function ComplexSelector<Value>({
         controlClassName != null ||
         controlStyle != null),
   );
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const pressable = usePressFeedback();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const placeholder = placeholderFromProps ?? t('@astryx.selector.placeholder');