@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/Toast/Toast.tsx

@@ -42,8 +42,14 @@ import type {
   ToastContentRenderFn,
 } from './types';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 import {useToastGesture, type ToastGestureDirection} from './useToastGesture';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Toast/Toast.generated';
+
+registerEnglishFallback(english);
 
 const SWIPE_INTERACTIVE_TARGET_SELECTOR = `${INTERACTIVE_SELECTORS},[tabindex],[contenteditable]:not([contenteditable="false"])`;
 
@@ -109,6 +115,8 @@ const styles = stylex.create({
     flex: 1,
     minWidth: 0,
     overflowWrap: 'anywhere',
+    // Text inside keeps `anywhere` too (Text FR3).
+    '--_astryx-text-overflow-wrap': 'anywhere',
   },
   exiting: {
     opacity: 0,
@@ -186,7 +194,7 @@ export function ToastSurface({
   renderContent,
   gestureDirection,
 }: ToastSurfaceProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   // Every condition that holds the auto-hide timer (pointer over the card,
   // focus inside it, a touch or pen gesture, the window blurred) is tracked on

package/src/Toast/ToastViewport.tsx

@@ -33,6 +33,7 @@ import {useAnnounce} from '../hooks/useAnnounce';
 import {layerTextReset} from '../Layer/layerTextReset.stylex';
 import {layerStructureReset} from '../Layer/layerStructureReset.stylex';
 import {LayerContentBoundary} from '../Layer/layerScopedContext';
+import {layerClickBoundary} from '../Layer/layerClickBoundary';
 import {
   getActiveModalOutlet,
   subscribeModalOutlets,
@@ -41,9 +42,15 @@ import {
 import {ToastSurface} from './Toast';
 import {ToastContext, type ToastContextValue} from './ToastContext';
 import type {ToastEntry, ToastPosition, ToastDismissReason} from './types';
-import {useTranslator} from '../i18n';
 import {layerInsetProperties} from '../Layer/layerInset';
 import type {LayerInset} from '../Layer/LayerContext';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Toast/ToastViewport.generated';
+
+registerEnglishFallback(english);
 
 const SAFE_AREA_INLINE_START = `max(${spacingVars['--spacing-4']}, env(safe-area-inset-left, 0px))`;
 const SAFE_AREA_INLINE_END = `max(${spacingVars['--spacing-4']}, env(safe-area-inset-right, 0px))`;
@@ -316,7 +323,7 @@ export function ToastViewport({
   isTopLayer = true,
   children,
 }: ToastViewportProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const [toasts, setToasts] = useState<ToastEntry[]>([]);
   const [exitingIds, setExitingIds] = useState<Set<string>>(new Set());
   const toastsRef = useRef(toasts);
@@ -817,7 +824,9 @@ export function ToastViewport({
         {
           style: Object.keys(insetStyle).length > 0 ? insetStyle : undefined,
         },
-      )}>
+      )}
+      // Presses on toasts do not reach handlers around the viewport.
+      {...layerClickBoundary()}>
       <LayerContentBoundary>
         {visibleToasts.map(entry => (
           <ToastRow

package/src/Toast/useToast.tsx

@@ -7,6 +7,7 @@ import {createRoot} from 'react-dom/client';
 import {dataAttr} from '../naming';
 import {ToastContext, type ToastContextValue} from './ToastContext';
 import {ToastViewport} from './ToastViewport';
+import {ThemeNestingContext} from '../theme/Theme';
 import {warnOnce} from '../utils/devWarning';
 import type {
   ToastOptions,
@@ -101,10 +102,14 @@ function getFallbackContext(): ToastContextValue {
   };
 
   fallbackRoot = createRoot(container);
+  // This root sits inside the app, so a <Theme> in toast content is nested:
+  // it themes its own subtree and leaves the app's <html> sync alone.
   fallbackRoot.render(
-    <ToastViewport>
-      <FallbackCapture />
-    </ToastViewport>,
+    <ThemeNestingContext value={true}>
+      <ToastViewport>
+        <FallbackCapture />
+      </ToastViewport>
+    </ThemeNestingContext>,
   );
 
   // Proxy that queues calls until real context is captured

package/src/ToggleButton/ToggleButton.tsx

@@ -29,7 +29,7 @@ import {Button, type ButtonSize} from '../Button';
 import type {Elevation} from '../utils/types';
 import {useToggleButtonGroup} from './ToggleButtonGroup';
 import type {BaseProps} from '../BaseProps';
-import {themeProps} from '../utils/themeProps';
+import {themeDataAttributes, themeProps} from '../utils/themeProps';
 import {mergeProps} from '../utils/mergeProps';
 
 // =============================================================================
@@ -319,6 +319,7 @@ export function ToggleButton({
 
   // isIconOnly prop is the source of truth for icon-only rendering.
   const labelContent =
+    // eslint-disable-next-line @astryx/no-nullish-jsx-guard -- switching to isRenderable would show `label` for children of '', false or true, a visible change that needs a decision
     children != null ? (
       <span {...stylex.props(labelStyles.wrapper)}>
         <span {...stylex.props(isPressed && labelStyles.pressed)}>
@@ -352,7 +353,6 @@ export function ToggleButton({
       isLoading={isLoading}
       isInterruptible
       isIconOnly={isIconOnly}
-      aria-pressed={isPressed}
       icon={resolvedIcon}
       tooltip={tooltip}
       {...mergeProps(
@@ -366,7 +366,14 @@ export function ToggleButton({
       style={style}
       onClick={handleClick}
       clickAction={clickAction}
-      {...props}>
+      {...props}
+      // The pressed state this component owns wins over a caller's
+      // same-named attributes (public-component-api INV5).
+      aria-pressed={isPressed}
+      {...themeDataAttributes({
+        isPressed: isPressed ? 'true' : 'false',
+        elevation,
+      })}>
       {labelContent}
     </Button>
   );

package/src/Token/Token.tsx

@@ -39,9 +39,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 type {TokenColorMap} from './index';
 import {disabledInteractionProps} from '../utils/disabledInteraction';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Token/Token.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -308,7 +314,7 @@ export function Token({
   // document controller once, so the token's output stays a pure function
   // of its props.
   const pressable = usePressFeedback();
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const LinkComponent = useLinkComponent();
   const role = useInteractiveRole({href, onClick, isDisabled});
 
@@ -404,6 +410,7 @@ export function Token({
         <LinkComponent
           ref={ref as React.Ref<HTMLAnchorElement>}
           href={href as string}
+          onClick={onClick}
           {...pressable}
           {...mergeProps(
             themeProps('token', {
@@ -444,6 +451,7 @@ export function Token({
         ref={ref}
         href={href as string}
         isDisabled={isDisabled}
+        onLinkClick={onClick}
         LinkComponent={LinkComponent}
         icon={icon}
         endContent={endContent}

package/src/Token/TokenLink.tsx

@@ -25,7 +25,13 @@
  * - /packages/core/src/Token/Token.test.tsx (tests for delegated behavior)
  */
 
-import type {ReactNode, CSSProperties, Ref, HTMLAttributes} from 'react';
+import type {
+  ReactNode,
+  CSSProperties,
+  Ref,
+  HTMLAttributes,
+  MouseEventHandler,
+} from 'react';
 import {useRef} from 'react';
 import {useClickableContainer} from '../hooks/useClickableContainer';
 import type {LinkComponentType} from '../Link/types';
@@ -40,6 +46,13 @@ export interface TokenLinkProps extends HTMLAttributes<HTMLElement> {
   href: string;
   /** Whether the token is disabled. */
   isDisabled: boolean;
+  /**
+   * Caller `onClick`, attached to the inner link. A plain click on the
+   * container surface is delegated to the link, so this runs once per
+   * plain-click activation of the link or the surface. A Cmd/Ctrl-click or
+   * middle click on the surface opens the link in a new tab and skips it.
+   */
+  onLinkClick?: MouseEventHandler<HTMLElement>;
   /** Resolved link component (native `<a>` or a router link). */
   LinkComponent: LinkComponentType;
   /** `stylex.props()` output applied to the invisible inner link. */
@@ -68,6 +81,7 @@ export function TokenLink({
   ref,
   href,
   isDisabled,
+  onLinkClick,
   LinkComponent,
   linkStyleProps,
   labelContent,
@@ -117,6 +131,7 @@ export function TokenLink({
         <LinkComponent
           ref={linkRef as Ref<HTMLAnchorElement>}
           href={href}
+          onClick={onLinkClick}
           {...linkStyleProps}>
           {labelContent}
         </LinkComponent>

package/src/Tokenizer/Tokenizer.doc.mjs

@@ -42,7 +42,7 @@ export const docs = {
       name: 'searchSource',
       type: 'SearchSource<T>',
       description:
-        'Data source providing search and bootstrap methods for populating the dropdown.',
+        'Data source providing search and bootstrap methods. `search(query, context)` may call `context.update(items)` to show matches it already has before it returns; the value it returns is the final list, and every list after the first for a query keeps the shown rows first and adds new rows after them.',
       required: true,
     },
     {
@@ -91,7 +91,8 @@ export const docs = {
     {
       name: 'isDisabled',
       type: 'boolean',
-      description: 'Disables the input and all token interactions.',
+      description:
+        'Disables the input and all token interactions. The input keeps its tab stop: it is announced as disabled (aria-disabled), is read-only, and opens and picks nothing. With tokenOverflowBehavior="unfocusedLayer" and no disabledMessage, the input is natively disabled and out of the tab order.',
       default: 'false',
     },
     {
@@ -104,7 +105,7 @@ export const docs = {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the tokenizer is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the input focusable via aria-disabled (input stays blocked). Use this instead of wrapping a disabled Tokenizer in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the tokenizer is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the input focusable via aria-disabled (input stays blocked). Use this instead of wrapping a disabled Tokenizer in Tooltip, so the reason is attached to the field itself.',
     },
     {
       name: 'status',
@@ -196,7 +197,7 @@ export const docs = {
       name: 'debounceMs',
       type: 'number',
       description:
-        'Debounce delay in ms before triggering search. Set to 0 for synchronous sources.',
+        'Debounce delay in ms before triggering search. Set to 0 for synchronous sources, and for a source that shows local matches through `context.update` and delays its own server request.',
       default: '150',
     },
     {
@@ -266,12 +267,14 @@ export const docs = {
     {
       name: 'containerClassName',
       type: 'string',
-      description: 'Class name for the field container. Same targeting as `containerXstyle`.',
+      description:
+        'Class name for the field container. Same targeting as `containerXstyle`.',
     },
     {
       name: 'containerStyle',
       type: 'CSSProperties',
-      description: 'Inline styles for the field container. Same targeting as `containerXstyle`.',
+      description:
+        'Inline styles for the field container. Same targeting as `containerXstyle`.',
     },
     {
       name: 'controlXstyle',
@@ -407,7 +410,7 @@ export const docsZh = {
       name: 'searchSource',
       type: 'SearchSource<T>',
       description:
-        '\u63d0\u4f9b\u641c\u7d22\u548c\u5f15\u5bfc\u65b9\u6cd5\u7684\u6570\u636e\u6e90\uff0c\u7528\u4e8e\u586b\u5145\u4e0b\u62c9\u5217\u8868\u3002',
+        '提供搜索和引导方法的数据源。`search(query, context)` 可调用 `context.update(items)` 先显示已有的匹配项；返回值是最终列表，同一查询在第一个列表之后的每个列表都保留已显示的行，并只在其后追加新行。',
       required: true,
     },
     {
@@ -472,7 +475,7 @@ export const docsZh = {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the tokenizer is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the input focusable via aria-disabled (input stays blocked). Use this instead of wrapping a disabled Tokenizer in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the tokenizer is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the input focusable via aria-disabled (input stays blocked). Use this instead of wrapping a disabled Tokenizer in Tooltip, so the reason is attached to the field itself.',
     },
     {
       name: 'status',
@@ -570,7 +573,7 @@ export const docsZh = {
       name: 'debounceMs',
       type: 'number',
       description:
-        '\u89e6\u53d1\u641c\u7d22\u524d\u7684\u9632\u6296\u5ef6\u8fdf\uff08\u6beb\u79d2\uff09\u3002\u540c\u6b65\u6570\u636e\u6e90\u8bbe\u7f6e\u4e3a 0\u3002',
+        '触发搜索前的防抖延迟（毫秒）。同步数据源，以及通过 `context.update` 显示本地匹配项并自行延迟服务器请求的数据源，设置为 0。',
       default: '150',
     },
     {
@@ -780,10 +783,12 @@ export const docsDense = {
     ],
   },
   propDescriptions: {
-    containerXstyle: 'StyleX styles for the field container; no effect in InputGroup or horizontal-labels FormLayout. No root xstyle/className/style.',
+    containerXstyle:
+      'StyleX styles for the field container; no effect in InputGroup or horizontal-labels FormLayout. No root xstyle/className/style.',
     containerClassName: 'Class name for the field container.',
     containerStyle: 'Inline styles for the field container.',
-    controlXstyle: 'StyleX styles for the visual control box (border, background, icons); not the native input.',
+    controlXstyle:
+      'StyleX styles for the visual control box (border, background, icons); not the native input.',
     controlClassName: 'Class name for the visual control box.',
     controlStyle: 'Inline styles for the visual control box.',
     label: 'Accessible label for input.',

package/src/Tokenizer/Tokenizer.tsx

@@ -47,10 +47,12 @@ import {
   type BusyIndicatorLane,
 } from '../Typeahead/busyIndicatorLane';
 import {TrailingKeyDownContext} from '../Typeahead/trailingKeyDown';
+import {CommittedChoicesKeyContext} from '../Typeahead/committedChoicesKey';
 import {
   type FieldInputBaseProps,
   useFieldInputStyling,
 } from '../Field/fieldParts';
+import {inputDisabledFocusStyles} from '../Field/inputDisabledFocus';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {TokenizerClearAllMessageContext} from './TokenizerClearAllMessageContext';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
@@ -69,7 +71,6 @@ import {
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
-  type FieldStatusVariant,
 } from '../Field';
 import {Token} from '../Token';
 import {Spinner} from '../Spinner';
@@ -85,14 +86,25 @@ import {
   sizeVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
-import type {SearchableItem, SearchSource} from '../Typeahead/types';
+import type {
+  SearchContext,
+  SearchableItem,
+  SearchSource,
+} from '../Typeahead/types';
 import {composeEventHandlers, mergeProps} from '../utils';
 import {joinAriaIDs} from '../utils/inputAria';
 import {isFocusDetached} from '../utils/focusReturn';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 import type {TokenizerBottomSheetProps} from './TokenizerBottomSheet';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Tokenizer/Tokenizer.generated';
+
+registerEnglishFallback(english);
 
 // Re-export status types for convenience
 export type {
@@ -194,7 +206,7 @@ export interface TokenizerProps<T extends SearchableItem> 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;
   /**
    * Icon to display at the start of the input.
    * Accepts a ReactNode (e.g. `<Icon icon={SearchIcon} />`) or an SVG icon component directly.
@@ -260,7 +272,13 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<
    * @default 'No results found'
    */
   emptySearchText?: ReactNode;
-  /** Whether the input is disabled. @default false */
+  /**
+   * Whether the input is disabled. The disabled input keeps its tab stop: it
+   * is announced as disabled (`aria-disabled`), is read-only, and opens and
+   * picks nothing. With `tokenOverflowBehavior="unfocusedLayer"` and no
+   * `disabledMessage`, the input is natively disabled and out of the tab order.
+   * @default false
+   */
   isDisabled?: boolean;
   /**
    * Explains why the tokenizer is disabled. When set together with
@@ -269,8 +287,8 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<
    * reason is discoverable by keyboard and assistive technology. Input stays
    * blocked.
    *
-   * Use this instead of wrapping a disabled tokenizer in `Tooltip` — disabled
-   * controls don't emit the pointer events an external tooltip needs.
+   * Use this instead of wrapping a disabled tokenizer in `Tooltip`, so the
+   * reason is attached to the field itself.
    */
   disabledMessage?: string;
   /** Show clear button (clears all tokens). @default false */
@@ -771,7 +789,7 @@ export function Tokenizer<T extends SearchableItem>({
   // A caller's onClick arrives through the base props; the sheet trigger
   // composes it with its own open handler rather than letting either win.
   const {onClick: callerOnClick, ...restWithoutClick} = rest;
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const size = useSize(sizeProp, 'md');
   const generatedInputId = useId();
   const inputId = idProp ?? generatedInputId;
@@ -1078,11 +1096,24 @@ export function Tokenizer<T extends SearchableItem>({
 
   const isAtMax = maxEntries != null && value.length >= maxEntries;
 
-  // Filter out already-selected items from search results
-  const selectedIds = useMemo(
-    () => new Set(value.map(item => item.id)),
+  // Filter out already-selected items from search results. Keyed by the ids,
+  // not the array: an equal new `value` array on every render keeps the
+  // filtered source, and the key tells an open list to reload only when the
+  // committed values really change (FR13).
+  const selectedIdKey = useMemo(
+    () => JSON.stringify(value.map(item => item.id)),
     [value],
   );
+  const selectedIds = useMemo(
+    () => new Set<string>(JSON.parse(selectedIdKey) as string[]),
+    [selectedIdKey],
+  );
+  // Tells an open list to reload when the committed values change, or to
+  // close once they reach the limit (FR13, FR15).
+  const committedChoices = useMemo(
+    () => ({key: selectedIdKey, ids: selectedIds, isAtLimit: isAtMax}),
+    [selectedIdKey, selectedIds, isAtMax],
+  );
 
   // Selected labels, lowercased, for the Create entry's duplicate check. The
   // typed text is a label, not an id: real selections usually carry an opaque
@@ -1098,8 +1129,16 @@ export function Tokenizer<T extends SearchableItem>({
 
   const filteredSource: SearchSource<T> = useMemo(
     () => ({
-      search: async (query: string) => {
-        const results = await searchSource.search(query);
+      // Committed values leave every list, partial or final
+      // (component:Tokenizer FR13, spec:AST-092 FR1).
+      search: async (query: string, context?: SearchContext<T>) => {
+        const results = await searchSource.search(
+          query,
+          context && {
+            update: items =>
+              context.update(items.filter(item => !selectedIds.has(item.id))),
+          },
+        );
         return results.filter(item => !selectedIds.has(item.id));
       },
       bootstrap: async () => {
@@ -1366,6 +1405,7 @@ export function Tokenizer<T extends SearchableItem>({
           isTruncated ? truncatedSizeStyles[size] : sizeStyle,
           isTruncated && styles.truncatedWrapper,
           isDisabled && inputWrapperStyles.disabled,
+          isDisabled && inputDisabledFocusStyles.nestedRing,
           status && inputStatusBorderStyles[status.type],
           status && !isDisabled && inputStatusHoverShadowStyles[status.type],
           status && inputStatusFocusWithinStyles[status.type],
@@ -1398,63 +1438,70 @@ export function Tokenizer<T extends SearchableItem>({
           button rather than as a second one inside the base. */}
       <BusyIndicatorLaneProvider value={busyLane}>
         <TrailingKeyDownContext value={onKeyDown}>
-          <BaseTypeahead
-            {...rest}
-            ref={useMergedRefs(
-              inputRef,
-              // With `experimental`, the ref type admits the trigger too; in
-              // this presentation it receives the input.
-              ref as React.Ref<HTMLInputElement> | undefined,
-              handOffFocusRef,
-            )}
-            searchSource={isAtMax ? emptySource : filteredSource}
-            value={null}
-            onChange={handleAdd}
-            renderItem={renderItem}
-            // A space keeps :placeholder-shown available as the CSS-only empty
-            // query signal without painting placeholder text beside tokens.
-            placeholder={value.length === 0 ? placeholder : ' '}
-            hasEntriesOnFocus={isAtMax ? false : hasEntriesOnFocus}
-            maxMenuItems={maxMenuItems}
-            menuWidth={menuWidth}
-            minQueryLength={minQueryLength}
-            emptySearchText={emptySearchText}
-            isDisabled={isDisabled}
-            isFocusableDisabled={showsDisabledMessage}
-            hasAutoFocus={hasAutoFocus}
-            inputId={inputId}
-            ariaLabelledBy={fieldLabelledBy}
-            ariaDescribedBy={
-              [ariaDescribedByProp, ariaDescribedBy]
-                .filter(Boolean)
-                .join(' ') || undefined
-            }
-            onChangeQuery={onChangeQuery}
-            // The resolved required state reaches the combobox, also when a
-            // FormLayout default hides the visible marker (component:FormLayout
-            // FR5, AR2).
-            aria-required={isEffectivelyRequired || rest['aria-required']}
-            // An error status is exposed on the combobox as on every other field
-            // (WCAG 4.1.2; spec:AST-020 FR9). Without one, a caller's own
-            // aria-required / aria-invalid still applies.
-            aria-invalid={status?.type === 'error' || rest['aria-invalid']}
-            __queryEntries={createEntries}
-            debounceMs={debounceMs}
-            onKeyDown={handleKeyDown}
-            anchorRef={wrapperRef}
-            size={size}
-            inputXStyle={[
-              isAtMax || isTruncated
-                ? styles.inputAtMax
-                : value.length > 0
-                  ? styles.inputCompact
-                  : undefined,
-              // With tokens, wrapperWithTokens reserves the lane for every row.
-              // This rule is only for an empty Tokenizer; it still resolves to
-              // zero until the lane publishes a width.
-              !(isAtMax || isTruncated || value.length > 0) && laneReserve,
-            ]}
-          />
+          <CommittedChoicesKeyContext value={committedChoices}>
+            <BaseTypeahead
+              {...rest}
+              ref={useMergedRefs(
+                inputRef,
+                // With `experimental`, the ref type admits the trigger too; in
+                // this presentation it receives the input.
+                ref as React.Ref<HTMLInputElement> | undefined,
+                handOffFocusRef,
+              )}
+              searchSource={isAtMax ? emptySource : filteredSource}
+              value={null}
+              onChange={handleAdd}
+              renderItem={renderItem}
+              // A space keeps :placeholder-shown available as the CSS-only empty
+              // query signal without painting placeholder text beside tokens.
+              placeholder={value.length === 0 ? placeholder : ' '}
+              hasEntriesOnFocus={isAtMax ? false : hasEntriesOnFocus}
+              maxMenuItems={maxMenuItems}
+              menuWidth={menuWidth}
+              minQueryLength={minQueryLength}
+              emptySearchText={emptySearchText}
+              isDisabled={isDisabled}
+              // A disabled field keeps its tab stop (spec:AST-085 FR1), except in
+              // unfocusedLayer mode, where the input lives in a layer a disabled
+              // field never opens; how that field takes focus is undecided.
+              isFocusableDisabled={
+                showsDisabledMessage || (isDisabled && !isLayerMode)
+              }
+              hasAutoFocus={hasAutoFocus}
+              inputId={inputId}
+              ariaLabelledBy={fieldLabelledBy}
+              ariaDescribedBy={
+                [ariaDescribedByProp, ariaDescribedBy]
+                  .filter(Boolean)
+                  .join(' ') || undefined
+              }
+              onChangeQuery={onChangeQuery}
+              // The resolved required state reaches the combobox, also when a
+              // FormLayout default hides the visible marker (component:FormLayout
+              // FR5, AR2).
+              aria-required={isEffectivelyRequired || rest['aria-required']}
+              // An error status is exposed on the combobox as on every other field
+              // (WCAG 4.1.2; spec:AST-020 FR9). Without one, a caller's own
+              // aria-required / aria-invalid still applies.
+              aria-invalid={status?.type === 'error' || rest['aria-invalid']}
+              __queryEntries={createEntries}
+              debounceMs={debounceMs}
+              onKeyDown={handleKeyDown}
+              anchorRef={wrapperRef}
+              size={size}
+              inputXStyle={[
+                isAtMax || isTruncated
+                  ? styles.inputAtMax
+                  : value.length > 0
+                    ? styles.inputCompact
+                    : undefined,
+                // With tokens, wrapperWithTokens reserves the lane for every row.
+                // This rule is only for an empty Tokenizer; it still resolves to
+                // zero until the lane publishes a width.
+                !(isAtMax || isTruncated || value.length > 0) && laneReserve,
+              ]}
+            />
+          </CommittedChoicesKeyContext>
         </TrailingKeyDownContext>
       </BusyIndicatorLaneProvider>
       {htmlName != null &&

package/src/Tokenizer/TokenizerBottomSheet.tsx

@@ -23,7 +23,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Tokenizer/Tokenizer.tsx (the trigger and the lazy host)
- * - /packages/core/src/Tokenizer/Tokenizer.spec.md (FR16–FR24, AR6, PR6)
+ * - /docs/specs/components/Tokenizer/Tokenizer.spec.md (FR16–FR24, AR6, PR6)
  */
 
 import {
@@ -50,10 +50,16 @@ import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {useAnnounce} from '../hooks/useAnnounce';
 import {useAnnounceRenderedText} from '../hooks/useAnnounceRenderedText';
 import {Text} from '../Text/Text';
-import {useTranslator} from '../i18n/useTranslator';
 import {warnOnce} from '../utils/devWarning';
 import type {SearchableItem, SearchSource} from '../Typeahead/types';
 import {colorVars, radiusVars, spacingVars} from '../theme/tokens.stylex';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Tokenizer/TokenizerBottomSheet.generated';
+
+registerEnglishFallback(english);
 
 /**
  * Sentinel prefix for the create row's synthetic item. Kept identical to the
@@ -317,7 +323,7 @@ function TokenizerSheetContent<T extends SearchableItem>({
   onClearAll,
   onChangeQuery,
 }: TokenizerSheetContentProps<T>) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const searchRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
   // Whether a checkbox row holds focus, kept by the list's own focus events,