@astryxdesign/core 0.7.4 → 0.7.5-canary.04434e7

package/src/TextInput/TextInput.tsx

@@ -113,6 +113,7 @@ import {
   type FieldInputBaseProps,
   useFieldInputStyling,
 } from '../Field/fieldParts';
+import {inputDisabledFocusStyles} from '../Field/inputDisabledFocus';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
@@ -156,7 +157,9 @@ export interface TextInputProps extends Omit<
    */
   isRequired?: boolean;
   /**
-   * Whether the input is disabled.
+   * Whether the input is disabled. A disabled input is dimmed, cannot be
+   * edited, and is left out of form submission, but it stays in the tab order
+   * (`aria-disabled`, not the native attribute).
    * @default false
    */
   isDisabled?: boolean;
@@ -164,7 +167,7 @@ export interface TextInputProps extends Omit<
    * Whether the input is read-only.
    * The value is shown at full opacity and still submits with the form, but
    * cannot be edited. Unlike `isDisabled`, a read-only input is not dimmed and
-   * stays in the tab order — use it for a value the user should see and send
+   * keeps its form value — use it for a value the user should see and send
    * but not change. `isDisabled` takes precedence when both are set.
    * @default false
    */
@@ -176,8 +179,8 @@ export interface TextInputProps extends Omit<
    * keyboard and assistive technology. The field cannot be edited (it becomes
    * read-only) while disabled.
    *
-   * Use this instead of wrapping a disabled input in `Tooltip` — disabled
-   * controls don't emit the pointer events an external tooltip needs.
+   * Use this instead of wrapping a disabled input in `Tooltip`, so the reason
+   * is attached to the field itself.
    *
    * @example
    * ```
@@ -331,6 +334,15 @@ export function TextInput({
   });
   const t = useTranslator();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
+  // A disabled field keeps its tab stop but, like a natively disabled one,
+  // runs no caller event handler other than focus and blur (`spec:AST-085` FR2).
+  const fieldProps = isDisabled
+    ? Object.fromEntries(
+        Object.entries(rest).filter(
+          ([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key),
+        ),
+      )
+    : rest;
   const size = useSize(sizeProp, 'md');
 
   const generatedID = useId();
@@ -349,8 +361,7 @@ export function TextInput({
   // (spec:AST-086 FR8).
   useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), containerRef);
 
-  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
-  // tooltip listeners attach to the input container (which already exists) and
+  // Disabled-reason tooltip. The tooltip listeners attach to the input container (which already exists) and
   // the input stays perceivable via aria-disabled instead of the native
   // disabled attribute. The field is made read-only so it can't be typed into,
   // and value mutation is blocked by the isDisabled guard in handleChange.
@@ -411,11 +422,12 @@ export function TextInput({
       if (!e || e.detail === 0) {
         inputRef.current?.focus();
       } else {
-        // Defer focus restoration past the button's unmount task so iOS Safari
-        // and touch browsers don't jump the page scroll to 0 on tap.
-        requestAnimationFrame(() => {
-          inputRef.current?.focus({preventScroll: true});
-        });
+        // Focus inside the tap: iOS Safari brings up its keyboard only for a
+        // focus made while handling the touch, so a field the tap reaches
+        // unfocused gets its keyboard, as UIKit's clear button makes the
+        // field first responder. `preventScroll` keeps a scrolled page where
+        // it is.
+        inputRef.current?.focus({preventScroll: true});
       }
     },
     [onChange],
@@ -451,6 +463,7 @@ export function TextInput({
           inputWrapperStyles.base,
           sizeStyles[size],
           isDisabled && inputWrapperStyles.disabled,
+          isDisabled && inputDisabledFocusStyles.ring,
           status && inputStatusBorderStyles[status.type],
           status && !isDisabled && inputStatusHoverShadowStyles[status.type],
           status && inputStatusFocusWithinStyles[status.type],
@@ -463,7 +476,7 @@ export function TextInput({
       {startIcon && renderIconSlot(startIcon, {size: 'sm', color: 'secondary'})}
       {inputGroup && <VisuallyHidden id={inputLabelID}>{label}</VisuallyHidden>}
       <input
-        {...rest}
+        {...fieldProps}
         ref={useMergedRefs(ref, inputRef)}
         id={id}
         name={isDisabled ? undefined : htmlName}
@@ -471,8 +484,15 @@ export function TextInput({
         value={optimisticValue}
         onChange={handleChange}
         onKeyDown={
-          onEnter || onKeyDown
+          isDisabled || onEnter || onKeyDown
             ? e => {
+                if (isDisabled) {
+                  // A read-only field still submits its form on Enter.
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                  }
+                  return;
+                }
                 // The composing keydown fires before compositionend, so without
                 // this guard pressing Enter to commit a Japanese/Chinese/Korean
                 // IME conversion would trigger onEnter (submit/save actions)
@@ -486,12 +506,11 @@ export function TextInput({
             : undefined
         }
         placeholder={placeholder}
-        // With a disabledMessage the input keeps focusability via aria-disabled
-        // so the reason is focus-discoverable; readOnly + the handleChange guard
-        // keep the value from changing.
-        disabled={isDisabled && !showsDisabledMessage}
-        aria-disabled={showsDisabledMessage ? 'true' : undefined}
-        readOnly={isReadOnly || showsDisabledMessage || undefined}
+        // A disabled input keeps its place in the tab order (spec:AST-085):
+        // aria-disabled instead of the native attribute, with readOnly + the
+        // handleChange guard keeping the value from changing.
+        aria-disabled={isDisabled ? 'true' : undefined}
+        readOnly={isReadOnly || isDisabled || undefined}
         autoFocus={hasAutoFocus}
         data-autofocus={hasAutoFocus || undefined}
         aria-describedby={

package/src/Toast/ToastViewport.modalHost.test.tsx

@@ -2,14 +2,17 @@
 
 /**
  * @file ToastViewport.modalHost.test.tsx
- * @input Uses vitest, @testing-library/react, ToastViewport, useToast, Dialog
+ * @input Uses vitest, @testing-library/react, ToastViewport, useToast, Dialog,
+ *   BottomSheet
  * @output Tests that a top-layer ToastViewport moves into the latest open
- *   native modal and back without remounting its toasts
+ *   native modal (a Dialog or a scrim BottomSheet) and back without remounting
+ *   its toasts
  * @position Testing; validates ToastViewport.tsx with Layer/modalOutlet.ts
  *
  * SYNC: When ToastViewport hosting or Layer/modalOutlet.ts changes, update
  *   these tests. jsdom has no top layer: paint order and hit testing above the
- *   modal need a real browser (see the Core/Toast AppToastOverDialog story).
+ *   modal need a real browser (see the Core/Toast AppToastOverDialog story and
+ *   BottomSheet/__tests__/BottomSheetToastOutlet.a11y.chromium.spec.ts).
  */
 
 import {useState, type ReactNode} from 'react';
@@ -17,16 +20,20 @@ import {describe, it, expect, vi, afterEach, beforeEach} from 'vitest';
 import {act, fireEvent, render, screen} from '@testing-library/react';
 import {ToastViewport} from './ToastViewport';
 import {useToast} from './useToast';
+import {BottomSheet} from '../BottomSheet';
 import {Dialog} from '../Dialog';
 import type {ToastDismissReason} from './types';
 
-// jsdom does not implement the native modal methods.
+// jsdom does not implement the native dialog methods.
 beforeEach(() => {
   HTMLDialogElement.prototype.showModal = vi.fn(function (
     this: HTMLDialogElement,
   ) {
     this.setAttribute('open', '');
   });
+  HTMLDialogElement.prototype.show = vi.fn(function (this: HTMLDialogElement) {
+    this.setAttribute('open', '');
+  });
   HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
     this.removeAttribute('open');
   });
@@ -78,6 +85,19 @@ function getViewport(): HTMLElement {
   return document.querySelector<HTMLElement>('[popover="manual"]')!;
 }
 
+/** Call order of `fn`'s latest call on `context`, or -1 if it has none. */
+function lastCallOrder(
+  fn: {mock: {contexts: unknown[]; invocationCallOrder: number[]}},
+  context: unknown,
+): number {
+  return Math.max(
+    -1,
+    ...fn.mock.invocationCallOrder.filter(
+      (_, index) => fn.mock.contexts[index] === context,
+    ),
+  );
+}
+
 function TimedToastButton({
   onHide,
 }: {
@@ -109,6 +129,26 @@ function UnmountFixture() {
   );
 }
 
+function SheetFixture({label, hasScrim}: {label: string; hasScrim?: boolean}) {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <button type="button" onClick={() => setIsOpen(true)}>
+        {`Open ${label}`}
+      </button>
+      <BottomSheet
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        label={label}
+        hasScrim={hasScrim}>
+        <button type="button" onClick={() => setIsOpen(false)}>
+          {`Close ${label}`}
+        </button>
+      </BottomSheet>
+    </>
+  );
+}
+
 describe('ToastViewport modal hosting', () => {
   it('moves into an open Dialog and back when it closes, keeping the toast', () => {
     const {container} = render(
@@ -264,3 +304,98 @@ describe('ToastViewport modal hosting', () => {
     expect(container.contains(viewport)).toBe(true);
   });
 });
+
+describe('ToastViewport above a BottomSheet', () => {
+  beforeEach(() => {
+    // Closing the sheet releases its scroll lock, which restores the scroll
+    // position; jsdom does not implement scrolling.
+    vi.spyOn(window, 'scrollTo').mockImplementation(() => {});
+  });
+
+  it('moves into an open scrim sheet and back to its place when it closes', () => {
+    const {container} = render(
+      <ToastViewport>
+        <ToastButton />
+        <SheetFixture label="Filters" />
+      </ToastViewport>,
+    );
+    fireEvent.click(screen.getByRole('button', {name: 'Show toast'}));
+    const toast = screen.getByText('Saved');
+
+    fireEvent.click(screen.getByRole('button', {name: 'Open Filters'}));
+    expect(getViewport().closest('dialog')).toBe(getDialog('Filters'));
+    expect(screen.getByText('Saved')).toBe(toast);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Close Filters'}));
+    expect(getViewport().closest('dialog')).toBeNull();
+    expect(container.contains(getViewport())).toBe(true);
+    expect(screen.getByText('Saved')).toBe(toast);
+  });
+
+  it('follows a sheet opened over a Dialog, above it in the top layer', () => {
+    const showPopover = vi.spyOn(HTMLElement.prototype, 'showPopover');
+    render(
+      <ToastViewport>
+        <DialogFixture label="Edit">
+          <SheetFixture label="Filters" />
+        </DialogFixture>
+      </ToastViewport>,
+    );
+    const viewport = getViewport();
+    const showsOnViewport = () =>
+      showPopover.mock.contexts.filter(context => context === viewport).length;
+
+    fireEvent.click(screen.getByRole('button', {name: 'Toggle Edit'}));
+    expect(viewport.closest('dialog')).toBe(getDialog('Edit'));
+    const showsInDialog = showsOnViewport();
+
+    fireEvent.click(screen.getByRole('button', {name: 'Open Filters'}));
+    // The sheet's modal makes everything outside it inert, the Dialog
+    // included, so the viewport has to be inside the sheet.
+    expect(viewport.closest('dialog')).toBe(getDialog('Filters'));
+    expect(viewport.closest('[inert]')).toBeNull();
+    // Shown again once the sheet is in the top layer, so it paints above it.
+    expect(showsOnViewport()).toBe(showsInDialog + 1);
+    expect(lastCallOrder(showPopover, viewport)).toBeGreaterThan(
+      lastCallOrder(
+        vi.mocked(HTMLDialogElement.prototype.showModal),
+        getDialog('Filters'),
+      ),
+    );
+  });
+
+  it('returns to the Dialog as soon as the sheet starts closing', () => {
+    render(
+      <ToastViewport>
+        <DialogFixture label="Edit">
+          <SheetFixture label="Filters" />
+        </DialogFixture>
+      </ToastViewport>,
+    );
+    fireEvent.click(screen.getByRole('button', {name: 'Toggle Edit'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Open Filters'}));
+    const viewport = getViewport();
+    expect(viewport.closest('dialog')).toBe(getDialog('Filters'));
+
+    fireEvent.click(screen.getByRole('button', {name: 'Close Filters'}));
+    // The sheet stays an open modal through its exit animation, but inert and
+    // hidden; toasts must not go down with it.
+    expect(getDialog('Filters')).toHaveAttribute('open');
+    expect(getDialog('Filters')).toHaveAttribute('inert');
+    expect(viewport.closest('dialog')).toBe(getDialog('Edit'));
+    expect(viewport.closest('[inert], [aria-hidden="true"]')).toBeNull();
+  });
+
+  it('stays in place when a sheet without a scrim opens', () => {
+    const {container} = render(
+      <ToastViewport>
+        <SheetFixture label="Filters" hasScrim={false} />
+      </ToastViewport>,
+    );
+    fireEvent.click(screen.getByRole('button', {name: 'Open Filters'}));
+    // A non-modal sheet leaves the page operable, so the viewport stays put.
+    expect(getDialog('Filters')).toHaveAttribute('open');
+    expect(getViewport().closest('dialog')).toBeNull();
+    expect(container.contains(getViewport())).toBe(true);
+  });
+});

package/src/Tokenizer/Tokenizer.test.tsx

@@ -1692,6 +1692,27 @@ describe('Tokenizer end-lane reserve', () => {
     );
   });
 
+  it('keeps token rows, not only the input, short of the lane', () => {
+    // The lane is out of flow, so a token reaching the end of the first row
+    // ran under the clear button. The field's own inline-end padding spends
+    // the reserve, and every row of tokens wraps inside it. Real geometry is
+    // proved in TokenizerEndLane.a11y.chromium.spec.ts.
+    const {container} = render(
+      <Tokenizer
+        label="Users"
+        searchSource={userSource}
+        value={[users[0]]}
+        onChange={() => {}}
+        hasClear
+      />,
+    );
+    const field = laneHost(container);
+    expect(field).not.toBeNull();
+    expect(getComputedStyle(field!).paddingInlineEnd).toContain(
+      '--_tokenizer-end-lane-reserve',
+    );
+  });
+
   it('does not pad the input on the collapsed paths', () => {
     // Collapsed: with tokens truncated the input is given no width to pad —
     // `inputAtMax` zeroes its padding outright — so a reserve there would be
@@ -1707,16 +1728,13 @@ describe('Tokenizer end-lane reserve', () => {
         tokenOverflowBehavior="unfocusedInline"
       />,
     );
+    // The collapsed row keeps the Spinner's slot, so the lane is up and
+    // publishing; the input still must not spend the reserve.
+    expect(reserveOf(container)).toBeTruthy();
     const input = screen.getByRole('combobox');
-    expect(input.className).not.toBe('');
-    // The reserve is the only rule that reads the lane variable; the
-    // collapsed input must not carry it.
-    const reserveClasses = new Set(
-      (laneHost(container)?.className ?? '').split(' '),
+    expect(getComputedStyle(input).paddingInlineEnd).not.toContain(
+      '--_tokenizer-end-lane-reserve',
     );
-    expect(
-      [...input.classList].some(c => reserveClasses.has(c) && c !== ''),
-    ).toBe(false);
   });
 
   it('costs no commit of its own across a whole search', async () => {

package/src/Tokenizer/Tokenizer.tsx

@@ -272,11 +272,8 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<
 // because the input's reserve is derived from the same value.
 const END_LANE_INSET = spacingVars['--spacing-2'];
 const TOKEN_ROW_INSET = `calc(${spacingVars['--spacing-1']} - 1px)`;
-// InputClearButton grows 2px past its visible box under `(pointer: coarse)`.
-// Keep this maximum reserve in sync with Field/InputClearButton.tsx.
-const INPUT_CLEAR_COARSE_POINTER_OUTSET = '2px';
-// Kept in sync with useEndLaneReserve: inputCompact reads the custom property
-// directly so its empty-query pseudo-class can suppress the inner reserve.
+// Kept in sync with useEndLaneReserve: wrapperWithTokens reads the custom
+// property directly, to keep token rows and the input short of the lane.
 const END_LANE_RESERVE_VAR = '--_tokenizer-end-lane-reserve';
 
 const styles = stylex.create({
@@ -297,6 +294,10 @@ const styles = stylex.create({
     // = 8 - 4 - 1 = 3px.
     paddingBlock: TOKEN_ROW_INSET,
     paddingInline: TOKEN_ROW_INSET,
+    // The end lane is out of flow, so tokens would wrap under it. Every row
+    // stops short of the measured lane instead; with no lane up the variable
+    // is absent and this is the ordinary inset.
+    paddingInlineEnd: `calc(${TOKEN_ROW_INSET} + var(${END_LANE_RESERVE_VAR}, 0px))`,
     // Row gap must match paddingBlock so wrapped rows look evenly spaced.
     rowGap: TOKEN_ROW_INSET,
   },
@@ -310,6 +311,9 @@ const styles = stylex.create({
   token: {
     display: 'flex',
     flexShrink: 0,
+    // A renderToken wrapper sizes to its content; cap it at the row so the
+    // pill inside truncates instead of running past the field.
+    maxWidth: '100%',
     position: 'relative',
     zIndex: 1,
   },
@@ -325,6 +329,14 @@ const styles = stylex.create({
     flexShrink: 0,
     zIndex: 1,
   },
+  idleSpinner: {
+    // Hides the Spinner's own box too, which a theme may paint, and covers
+    // engines without content-visibility. Both keep the box's size.
+    visibility: 'hidden',
+    // Skips the ring's rendering, and with it the infinite arc animation,
+    // while the root keeps its own explicit, themed width and height.
+    contentVisibility: 'hidden',
+  },
   inputAtMax: {
     width: 0,
     minWidth: 0,
@@ -334,46 +346,36 @@ const styles = stylex.create({
     position: 'absolute',
   },
   inputCompact: {
-    position: {
-      default: 'relative',
-      ':placeholder-shown': 'absolute',
-    },
+    position: 'relative',
     boxSizing: 'border-box',
-    insetInlineStart: {
-      default: 'auto',
-      ':placeholder-shown': TOKEN_ROW_INSET,
-    },
     zIndex: 0,
+    // The input follows the last token in flow, so a focused empty input's
+    // caret sits where typed text will start. Empty, it asks only for that
+    // inset, and only while focused and editable: blurred or read-only (a
+    // disabled field with a disabledMessage stays focusable), it claims no
+    // room at all, not even the column gap, so it never grows the field a
+    // blank row. Typing restores the full editing width, which may wrap.
     minWidth: {
       default: '40px',
-      ':placeholder-shown': '1px',
+      ':placeholder-shown': 0,
     },
     flex: {
       default: '1 1 40px',
-      ':placeholder-shown': '0 0 auto',
+      ':placeholder-shown': '1 1 0px',
     },
-    width: {
+    width: 0,
+    marginInlineStart: {
       default: 0,
-      ':placeholder-shown': `calc(100% - ${TOKEN_ROW_INSET} - var(${END_LANE_RESERVE_VAR}, ${TOKEN_ROW_INSET}) - ${INPUT_CLEAR_COARSE_POINTER_OUTSET} - 1px)`,
+      ':placeholder-shown:is(:not(:focus), :read-only)': `calc(-1 * ${spacingVars['--spacing-1']})`,
     },
-    // The empty input is a first-row background hit surface. Taking it out of
-    // flex layout means it can neither become a blank final row nor compete
-    // with the pills for width. Logical insets stop it before the measured end
-    // lane plus InputClearButton's maximum invisible pointer outset; tokens and
-    // controls sit above it, leaving only genuine whitespace clickable as
-    // search. Typing restores the ordinary in-flow input.
+    // Restore normal text inset when input follows tokens, since the
+    // wrapper padding is reduced for border concentricity.
     paddingInlineStart: {
       default: `calc(${spacingVars['--spacing-2']} - ${spacingVars['--spacing-1']} + 1px)`,
-      ':placeholder-shown': 0,
-    },
-    paddingInlineEnd: {
-      default: `var(${END_LANE_RESERVE_VAR}, 0px)`,
-      ':placeholder-shown': spacingVars['--spacing-1'],
-    },
-    textAlign: {
-      default: 'start',
-      ':placeholder-shown': 'end',
+      ':placeholder-shown:is(:not(:focus), :read-only)': 0,
     },
+    // wrapperWithTokens already keeps the in-flow input short of the lane.
+    paddingInlineEnd: 0,
   },
   truncatedWrapper: {
     flexWrap: 'nowrap',
@@ -415,39 +417,6 @@ const endSectionSizeStyles = stylex.create({
   },
 });
 
-const compactInputSizeStyles = stylex.create({
-  sm: {
-    insetBlockStart: {
-      default: 'auto',
-      ':placeholder-shown': `calc(${sizeVars['--size-element-sm']} / 2 - 1px)`,
-    },
-    transform: {
-      default: 'none',
-      ':placeholder-shown': 'translateY(-50%)',
-    },
-  },
-  md: {
-    insetBlockStart: {
-      default: 'auto',
-      ':placeholder-shown': `calc(${sizeVars['--size-element-md']} / 2 - 1px)`,
-    },
-    transform: {
-      default: 'none',
-      ':placeholder-shown': 'translateY(-50%)',
-    },
-  },
-  lg: {
-    insetBlockStart: {
-      default: 'auto',
-      ':placeholder-shown': `calc(${sizeVars['--size-element-lg']} / 2 - 1px)`,
-    },
-    transform: {
-      default: 'none',
-      ':placeholder-shown': 'translateY(-50%)',
-    },
-  },
-});
-
 const truncatedSizeStyles = stylex.create({
   sm: {height: sizeVars['--size-element-sm']},
   md: {height: sizeVars['--size-element-md']},
@@ -517,6 +486,13 @@ const CREATABLE_ID_PREFIX = '__xds_create__';
  *
  * Renders nothing when the lane would be empty, so `useEndLaneReserve` sees no
  * element, publishes no width, and the input keeps its full content box.
+ *
+ * With `hasBusySlot` the Spinner stays mounted while idle, unrendered, not
+ * animating and out of the accessibility tree, so its box keeps the themed
+ * Spinner's own size.
+ * Token rows reserve the lane's measured width, so a Spinner that came and
+ * went with the search would re-wrap them, and widen a content-sized field,
+ * on every search.
  */
 function EndLane({
   lane,
@@ -525,6 +501,7 @@ function EndLane({
   loadingLabel,
   anchorRef,
   hasStaticContent,
+  hasBusySlot,
   children,
 }: {
   lane: BusyIndicatorLane;
@@ -533,6 +510,7 @@ function EndLane({
   loadingLabel: string;
   anchorRef: RefObject<Element | null>;
   hasStaticContent: boolean;
+  hasBusySlot: boolean;
   children: ReactNode;
 }) {
   const isBusy = useIsBusy(lane);
@@ -540,12 +518,23 @@ function EndLane({
   // live region; the field announces each search's busy start instead
   // (spec:AST-086 FR8).
   useBusyAnnouncement(isBusy, loadingLabel, anchorRef);
-  if (!isBusy && !hasStaticContent) {
+  if (!isBusy && !hasStaticContent && !hasBusySlot) {
     return null;
   }
   return (
     <div ref={laneRef} {...stylex.props(laneXStyle)}>
-      {isBusy && <Spinner size="sm" aria-label={loadingLabel} role="img" />}
+      {(isBusy || hasBusySlot) && (
+        <Spinner
+          // Remounts when a search starts, so the ring syncs its phase on
+          // mount exactly as a newly shown Spinner did before.
+          key={isBusy ? 'busy' : 'idle'}
+          size="sm"
+          aria-label={loadingLabel}
+          role="img"
+          aria-hidden={isBusy ? undefined : true}
+          xstyle={isBusy ? undefined : styles.idleSpinner}
+        />
+      )}
       {children}
     </div>
   );
@@ -1065,11 +1054,11 @@ export function Tokenizer<T extends SearchableItem>({
               isAtMax || isTruncated
                 ? styles.inputAtMax
                 : value.length > 0
-                  ? [styles.inputCompact, compactInputSizeStyles[size]]
+                  ? styles.inputCompact
                   : undefined,
-              // The compact-token style owns the same reserve with an empty-query
-              // exception. This standalone rule is only for an empty Tokenizer;
-              // it still resolves to zero until the lane publishes a width.
+              // 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,
             ]}
           />
@@ -1093,7 +1082,11 @@ export function Tokenizer<T extends SearchableItem>({
         laneXStyle={[styles.endSection, endSectionSizeStyles[size]]}
         loadingLabel={t('@astryx.typeahead.loading')}
         anchorRef={wrapperRef}
-        hasStaticContent={hasStaticEndLane}>
+        hasStaticContent={hasStaticEndLane}
+        // Wherever a search can run beside tokens: enabled and below
+        // maxEntries. A collapsed overflow row keeps it too, since a search
+        // started while focused can settle after focus leaves.
+        hasBusySlot={value.length > 0 && !isDisabled && !isAtMax}>
         {endContent}
         {hasClearButton && (
           <InputClearButton