@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/Toast/Toast.tsx

@@ -121,14 +121,8 @@ export function Toast({
   // Will be initialized by startTimer when actually used
   const startTimeRef = useRef<number | null>(null);
 
-  // Read onDismiss through a ref: the viewport re-creates it on every render
-  // (another toast arriving/exiting), and a startTimer that depends on it
-  // would restart — and un-pause — this toast's timer on unrelated renders.
-  const onDismissRef = useRef(onDismiss);
-  onDismissRef.current = onDismiss;
-
   const startTimer = useCallback(() => {
-    if (!isAutoHide || isPausedRef.current) {
+    if (!isAutoHide) {
       return;
     }
     if (timerRef.current) {
@@ -136,9 +130,9 @@ export function Toast({
     }
     startTimeRef.current = Date.now();
     timerRef.current = setTimeout(() => {
-      onDismissRef.current('auto');
+      onDismiss('auto');
     }, remainingRef.current);
-  }, [isAutoHide]);
+  }, [isAutoHide, onDismiss]);
 
   const pauseTimer = useCallback(() => {
     if (!isAutoHide || isPausedRef.current) {
@@ -171,8 +165,6 @@ export function Toast({
         clearTimeout(timerRef.current);
       }
     };
-    // startTimer's identity is stable per isAutoHide, so this runs on mount
-    // and on a genuine duration change — not on unrelated viewport renders.
   }, [autoHideDuration, startTimer]);
 
   // Pause the auto-hide timer while the window is not focused, so a toast

package/src/Toast/ToastViewport.test.tsx

@@ -212,67 +212,3 @@ describe('ToastViewport region ARIA', () => {
     expect(region).not.toHaveAttribute('aria-modal');
   });
 });
-
-describe('toast timer lifecycle (#3589)', () => {
-  it('fires onHide exactly once when dismissed twice during the exit window', () => {
-    const onHide = vi.fn();
-    renderViewport(
-      <ShowToastButton options={{body: 'Once', onHide}} triggerLabel="Show" />,
-    );
-    act(() => {
-      fireEvent.click(screen.getByText('Show'));
-    });
-    const dismiss = screen.getByRole('button', {name: 'Dismiss notification'});
-    act(() => {
-      fireEvent.click(dismiss);
-    });
-    // The toast stays mounted during its exit transition; a second click
-    // lands on the same still-mounted button.
-    act(() => {
-      fireEvent.click(dismiss);
-    });
-    expect(onHide).toHaveBeenCalledTimes(1);
-  });
-
-  it('keeps a window-blur pause alive when another toast arrives', () => {
-    vi.useFakeTimers();
-    try {
-      const onHide = vi.fn();
-      renderViewport(
-        <>
-          <ShowToastButton
-            options={{body: 'Paused', autoHideDuration: 3000, onHide}}
-            triggerLabel="Show A"
-          />
-          <ShowToastButton options={INFO_B} triggerLabel="Show B" />
-        </>,
-      );
-      act(() => {
-        fireEvent.click(screen.getByText('Show A'));
-      });
-      act(() => {
-        fireEvent.blur(window);
-      });
-      // A second toast arriving re-renders the viewport; the paused timer
-      // must not silently restart.
-      act(() => {
-        fireEvent.click(screen.getByText('Show B'));
-      });
-      act(() => {
-        vi.advanceTimersByTime(60_000);
-      });
-      expect(onHide).not.toHaveBeenCalled();
-      // Focus returns: the remaining time resumes and completes normally.
-      act(() => {
-        fireEvent.focus(window);
-      });
-      act(() => {
-        vi.advanceTimersByTime(60_000);
-      });
-      expect(onHide).toHaveBeenCalledTimes(1);
-      expect(onHide).toHaveBeenCalledWith('auto');
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-});

package/src/Toast/ToastViewport.tsx

@@ -114,9 +114,6 @@ export function ToastViewport({
 
   // Show the popover on mount so it enters the top layer.
   const viewportRef = useRef<HTMLDivElement>(null);
-  // Toast ids whose exit has begun — guards onHide from double-firing (see
-  // removeToast). Mirrors exitingIds state, readable synchronously.
-  const exitingIdsRef = useRef<Set<string>>(new Set());
   // The element that was focused before the user jumped into the viewport
   // (via F6). Used to restore focus once all toasts are dismissed so focus
   // never falls to <body>.
@@ -174,14 +171,6 @@ export function ToastViewport({
   }, []);
 
   const removeToast = useCallback((id: string, reason: ToastDismissReason) => {
-    // An exiting toast stays in toastsRef until its exit transition ends, so
-    // a second dismissal inside that window (double-click, auto-timer plus
-    // manual dismiss()) would re-fire onHide. Track exiting ids in a ref —
-    // the exitingIds state dedupe below runs too late to protect onHide.
-    if (exitingIdsRef.current.has(id)) {
-      return;
-    }
-    exitingIdsRef.current.add(id);
     const entry = toastsRef.current.find(t => t.id === id);
     if (entry) {
       entry.options.onHide?.(reason);
@@ -221,7 +210,6 @@ export function ToastViewport({
   }, []);
 
   const handleExited = useCallback((id: string) => {
-    exitingIdsRef.current.delete(id);
     setExitingIds(prev => {
       if (!prev.has(id)) {
         return prev;

package/src/Toast/useToast.tsx

@@ -4,7 +4,6 @@
 
 import {useCallback, use, useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
-import {dataAttr} from '../naming';
 import {ToastContext, type ToastContextValue} from './ToastContext';
 import {ToastViewport} from './ToastViewport';
 import type {
@@ -19,45 +18,6 @@ let fallbackContext: ToastContextValue | null = null;
 let fallbackRoot: ReturnType<typeof createRoot> | null = null;
 let fallbackWarned = false;
 
-const ROOT_THEME_ATTRS = ['data-theme', dataAttr('theme')] as const;
-
-// The fallback container is a detached tree with no ThemeContext, so this
-// mirrors <html>'s theme attributes onto it directly (live via
-// MutationObserver) for the theme's @scope'd CSS to reach it. It's a
-// lifetime-of-app singleton that's never torn down, so there's nothing to
-// disconnect — this returns void.
-function syncRootThemeAttrs(container: HTMLElement): void {
-  const sync = () => {
-    let mirroredMode: string | null = null;
-    for (const attr of ROOT_THEME_ATTRS) {
-      const value = document.documentElement.getAttribute(attr);
-      if (value == null) {
-        container.removeAttribute(attr);
-      } else {
-        container.setAttribute(attr, value);
-        if (attr === 'data-theme') {
-          mirroredMode = value;
-        }
-      }
-    }
-    // Pages whose built theme CSS pins color-scheme unconditionally (#3658)
-    // would otherwise resolve light-dark() tokens by OS preference while the
-    // mirrored mode above follows the app theme; the inline style wins over
-    // that CSS.
-    if (mirroredMode === 'light' || mirroredMode === 'dark') {
-      container.style.colorScheme = mirroredMode;
-    } else {
-      container.style.removeProperty('color-scheme');
-    }
-  };
-  sync();
-  const observer = new MutationObserver(sync);
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: [...ROOT_THEME_ATTRS],
-  });
-}
-
 function getFallbackContext(): ToastContextValue {
   if (fallbackContext) {
     return fallbackContext;
@@ -81,7 +41,6 @@ function getFallbackContext(): ToastContextValue {
   const container = document.createElement('div');
   container.setAttribute('data-astryx-toast-fallback', '');
   document.body.appendChild(container);
-  syncRootThemeAttrs(container);
 
   let resolveCtx: ((ctx: ToastContextValue) => void) | undefined;
   const ctxReady = new Promise<ToastContextValue>(r => {

package/src/ToggleButton/ToggleButton.doc.mjs

@@ -17,7 +17,6 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-toggle-button-group'},
-      {className: 'astryx-toggle-button', states: ['isPressed']},
     ],
   },
   description: 'A button that toggles between pressed and unpressed states. Thin wrapper over Button with controlled toggle pattern, icon swap, and font weight emphasis.',

package/src/Tokenizer/Tokenizer.doc.mjs

@@ -189,7 +189,7 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-tokenizer', visualProps: ['size', 'status']},
+      {className: 'astryx-tokenizer', visualProps: ['size']},
     ],
   },
   usage: {
@@ -390,7 +390,7 @@ export const docsZh = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-tokenizer', visualProps: ['size', 'status']},
+      {className: 'astryx-tokenizer', visualProps: ['size']},
     ],
   },
   usage: {

package/src/Tokenizer/Tokenizer.test.tsx

@@ -479,60 +479,6 @@ describe('Tokenizer', () => {
       expect(screen.getByText('Charlie')).toBeInTheDocument();
     });
 
-    it('unfocusedLayer: RTL emits no justify-self into the inset-positioned popover', () => {
-      // The popover positions itself with explicit anchor() insets
-      // (positioning: 'custom'), so none of useLayer's placement-derived
-      // styles may reach it — an RTL justify-self with insets and no
-      // position-area would re-align the box inside the inset-modified
-      // containing block instead of hugging the anchor.
-      const original = window.getComputedStyle;
-      let root: HTMLElement | null = null;
-      const spy = vi
-        .spyOn(window, 'getComputedStyle')
-        .mockImplementation((el, pseudo) => {
-          const style = original(el, pseudo);
-          if (root && el instanceof Element && root.contains(el)) {
-            Object.defineProperty(style, 'direction', {
-              value: 'rtl',
-              configurable: true,
-            });
-          }
-          return style;
-        });
-
-      try {
-        const {container} = render(
-          <div style={{direction: 'rtl'}}>
-            <Tokenizer
-              label="Members"
-              searchSource={userSource}
-              value={[users[0], users[1], users[2]]}
-              onChange={() => {}}
-              tokenOverflowBehavior="unfocusedLayer"
-              data-testid="tokenizer"
-            />
-          </div>,
-        );
-        root = container.firstElementChild as HTMLElement;
-
-        fireEvent.focusIn(screen.getByTestId('tokenizer'));
-        expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
-
-        const popover = container.querySelector('[popover]');
-        const style = popover?.getAttribute('style') ?? '';
-        // jsdom drops anchor() values for known properties (top/left), so
-        // anchor the positive check on position-anchor instead. The negative
-        // checks are meaningful: jsdom serializes both justify-self and
-        // position-area when emitted (the DropdownMenu RTL test relies on it).
-        expect(style).toContain('position-anchor');
-        expect(style).not.toContain('justify-self');
-        expect(style).not.toContain('position-area');
-        expect(style).not.toContain('position-try-fallbacks');
-      } finally {
-        spy.mockRestore();
-      }
-    });
-
     it('unfocusedLayer: collapses on blur', () => {
       const {container} = render(
         <Tokenizer

package/src/Tokenizer/Tokenizer.tsx

@@ -684,11 +684,9 @@ export function Tokenizer<T extends SearchableItem>({
     );
   });
 
-  // Self-authored position styles (positioning: 'custom' below): explicit
-  // anchor() insets pin the expanded layer over the field itself.
-  // `left` is physical, so this popover does not yet mirror in RTL —
-  // known follow-up from #3389.
   const popoverOverrideStyle: React.CSSProperties = {
+    positionArea: undefined,
+    positionTryFallbacks: undefined,
     top: 'anchor(top)',
     left: 'anchor(start)',
   };
@@ -848,7 +846,8 @@ export function Tokenizer<T extends SearchableItem>({
             {wrapperContent}
           </div>,
           {
-            positioning: 'custom',
+            placement: 'below',
+            alignment: 'start',
             xstyle: styles.layerPopover,
             style: popoverOverrideStyle,
           },

package/src/Tooltip/Tooltip.doc.mjs

@@ -39,13 +39,13 @@ export const docs = {
         {
           name: 'placement',
           type: "'above' | 'below' | 'start' | 'end'",
-          description: "Position relative to the anchor element. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).",
+          description: 'Position relative to the anchor element.',
           default: "'above'",
         },
         {
           name: 'alignment',
           type: "'start' | 'center' | 'end'",
-          description: "Alignment along the placement axis. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).",
+          description: 'Alignment along the placement axis.',
           default: "'center'",
         },
         {
@@ -138,13 +138,13 @@ export const docsZh = {
         {
           name: 'placement',
           type: "'above' | 'below' | 'start' | 'end'",
-          description: '相对于锚点元素的位置。逻辑值：start/end 根据弹出层自身继承的方向解析（RTL 镜像）。',
+          description: '相对于锚点元素的位置。',
           default: "'above'",
         },
         {
           name: 'alignment',
           type: "'start' | 'center' | 'end'",
-          description: '沿放置轴的对齐方式。逻辑值：start/end 根据弹出层自身继承的方向解析（RTL 镜像）。',
+          description: '沿放置轴的对齐方式。',
           default: "'center'",
         },
         {
@@ -230,8 +230,8 @@ export const docsDense = {
         children: 'Trigger element(s) that activate tooltip.',
         anchorRef: 'External anchor ref for sibling mode.',
         content: 'Tooltip content, typically short text.',
-        placement: 'Position relative to anchor. Logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
-        alignment: 'Alignment along placement axis. Logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
+        placement: 'Position relative to anchor.',
+        alignment: 'Alignment along placement axis.',
         delay: 'Show delay in ms.',
         hideDelay: 'Hide delay in ms.',
         focusTrigger: 'Controls when focus events trigger tooltip.',

package/src/Tooltip/useTooltip.doc.mjs

@@ -7,8 +7,8 @@ export const docs = {
   group: 'Tooltip',
   keywords: ['tooltip', 'hint', 'label', 'hover', 'info', 'title', 'floating'],
   params: [
-    {name: 'placement', type: "'above' | 'below' | 'start' | 'end'", description: "Position relative to the trigger. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).", default: "'above'"},
-    {name: 'alignment', type: "'start' | 'center' | 'end'", description: "Alignment along the placement axis. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).", default: "'center'"},
+    {name: 'placement', type: "'above' | 'below' | 'start' | 'end'", description: 'Position relative to the trigger.', default: "'above'"},
+    {name: 'alignment', type: "'start' | 'center' | 'end'", description: 'Alignment along the placement axis.', default: "'center'"},
     {name: 'delay', type: 'number', description: 'Delay before showing on hover, in milliseconds.', default: '200'},
     {name: 'hideDelay', type: 'number', description: 'Delay before hiding after mouse or focus leaves, in milliseconds.', default: '0'},
     {name: 'focusTrigger', type: "'auto' | 'always' | 'never'", description: 'When focus should open the tooltip. auto only attaches focus listeners to naturally focusable elements.', default: "'auto'"},
@@ -24,7 +24,7 @@ export const docs = {
     {name: 'interactionRef', type: 'RefCallback<HTMLElement>', description: 'Ref for the hover/focus interaction element.'},
     {name: 'anchorId', type: 'string', description: 'CSS anchor name for advanced positioning cases.'},
     {name: 'describedBy', type: 'string', description: 'ID to compose into aria-describedby on the trigger.'},
-    {name: 'renderTooltip', type: "(children: ReactNode, props?: Omit<ContextRenderProps, 'positioning'>) => ReactNode", description: 'Render function for the anchor-positioned tooltip content. The positioning opt-out is excluded: the tooltip always derives its position from placement/alignment.'},
+    {name: 'renderTooltip', type: '(children: ReactNode, props?: ContextRenderProps) => ReactNode', description: 'Render function for the anchor-positioned tooltip content.'},
   ],
   usage: {
     description: 'Headless hook for hover/focus-triggered tooltips. Builds on useLayer with hover intent, keyboard focus handling, and accessible aria-describedby linking. Use for custom trigger elements that need tooltip behavior without the wrapper component.',
@@ -44,8 +44,8 @@ export const docs = {
 export const docsDense = {
   description: 'Headless hover/focus tooltip hook. Builds on useLayer w/ hover intent, keyboard focus handling, aria-describedby. Use for custom triggers without wrapper component.',
   paramDescriptions: {
-    placement: 'position relative to trigger. logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
-    alignment: 'alignment along placement axis. logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
+    placement: 'position relative to trigger.',
+    alignment: 'alignment along placement axis.',
     delay: 'show delay in ms.',
     hideDelay: 'hide delay after mouse/focus leave in ms.',
     focusTrigger: 'when focus opens tooltip; auto = naturally focusable elements only.',

package/src/Tooltip/useTooltip.tsx

@@ -190,15 +190,8 @@ export interface TooltipReturn {
   /**
    * Render function for tooltip content.
    * Returns anchor-positioned popover element.
-   *
-   * `positioning` is excluded: the tooltip always derives its position from
-   * placement/alignment, so accepting the custom opt-out here would be a
-   * silent no-op.
    */
-  renderTooltip: (
-    children: ReactNode,
-    props?: Omit<ContextRenderProps, 'positioning'>,
-  ) => ReactNode;
+  renderTooltip: (children: ReactNode, props?: ContextRenderProps) => ReactNode;
 }
 
 /**
@@ -470,10 +463,7 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
 
   // Render function that wraps layer.render with tooltip styling
   const renderTooltip = useCallback(
-    (
-      children: ReactNode,
-      props?: Omit<ContextRenderProps, 'positioning'>,
-    ): ReactNode => {
+    (children: ReactNode, props?: ContextRenderProps): ReactNode => {
       const renderPlacement = props?.placement ?? placement;
       const renderProps = {
         placement: renderPlacement,

package/src/TopNav/TopNav.doc.mjs

@@ -17,7 +17,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-top-nav', states: ['mode']},
-      {className: 'astryx-top-nav-item', states: ['mode', 'selected']},
+      {className: 'astryx-top-nav-item', states: ['mode']},
       {className: 'astryx-top-nav-heading'},
       {className: 'astryx-top-nav-mega-menu', states: ['mode']},
       {className: 'astryx-top-nav-mega-menu-item', states: ['mode']},

package/src/TopNav/TopNav.test.tsx

@@ -16,7 +16,6 @@ import {TopNav} from './TopNav';
 import {TopNavHeading} from './TopNavHeading';
 import {NavIcon} from '../NavIcon';
 import {TopNavItem} from './TopNavItem';
-import {TopNavMegaMenuFeaturedCard} from './TopNavMegaMenuFeaturedCard';
 import {LinkProvider} from '../Link/LinkProvider';
 
 function CustomLink({
@@ -46,7 +45,9 @@ describe('TopNav', () => {
   });
 
   it('renders heading slot content', () => {
-    render(<TopNav heading={<span data-testid="title-content">Logo</span>} />);
+    render(
+      <TopNav heading={<span data-testid="title-content">Logo</span>} />,
+    );
     expect(screen.getByTestId('title-content')).toBeInTheDocument();
   });
 
@@ -241,9 +242,7 @@ describe('TopNavHeading', () => {
     });
 
     it('names a logo-only link via logoLabel', () => {
-      render(
-        <TopNavHeading logo={logo} headingHref="/home" logoLabel="Home" />,
-      );
+      render(<TopNavHeading logo={logo} headingHref="/home" logoLabel="Home" />);
       expect(screen.getByRole('link', {name: 'Home'})).toHaveAttribute(
         'href',
         '/home',
@@ -295,7 +294,9 @@ describe('TopNavItem', () => {
   });
 
   it('renders children instead of label when provided', () => {
-    render(<TopNavItem label="Accessible name">Custom content</TopNavItem>);
+    render(
+      <TopNavItem label="Accessible name">Custom content</TopNavItem>,
+    );
     expect(screen.getByText('Custom content')).toBeInTheDocument();
   });
 
@@ -397,21 +398,4 @@ describe('TopNavItem', () => {
     expect(link).toHaveAttribute('data-custom-link');
     expect(link).not.toHaveAttribute('data-another-link');
   });
-
-  describe('TopNavMegaMenuFeaturedCard rest forwarding', () => {
-    it('forwards data-testid, id, and aria-* to the root element', () => {
-      render(
-        <TopNavMegaMenuFeaturedCard
-          title="What's new"
-          description="Details"
-          data-testid="featured-card"
-          id="card-1"
-          aria-label="Featured"
-        />,
-      );
-      const card = screen.getByTestId('featured-card');
-      expect(card).toHaveAttribute('id', 'card-1');
-      expect(card).toHaveAttribute('aria-label', 'Featured');
-    });
-  });
 });

package/src/TopNav/TopNavMegaMenuFeaturedCard.tsx

@@ -132,10 +132,6 @@ export function TopNavMegaMenuFeaturedCard({
   linkLabel,
   linkHref,
   children,
-  xstyle,
-  className,
-  style,
-  ...rest
 }: TopNavMegaMenuFeaturedCardProps) {
   const LinkComponent = useLinkComponent();
   return (
@@ -143,11 +139,8 @@ export function TopNavMegaMenuFeaturedCard({
       ref={ref}
       {...mergeProps(
         themeProps('top-nav-mega-menu-featured-card'),
-        stylex.props(styles.root, xstyle),
-        className,
-        style,
-      )}
-      {...rest}>
+        stylex.props(styles.root),
+      )}>
       {image && (
         <img src={image} alt={imageAlt ?? ''} {...stylex.props(styles.image)} />
       )}

package/src/TreeList/TreeList.doc.mjs

@@ -25,7 +25,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-tree-list', visualProps: ['density']},
-      {className: 'astryx-tree-list-item', visualProps: ['density'], states: ['selected', 'disabled']},
+      {className: 'astryx-tree-list-item', states: ['selected', 'disabled']},
     ],
   },
   components: [
@@ -89,7 +89,7 @@ export const docsZh = {
   theming: {
     targets: [
       {className: 'astryx-tree-list', visualProps: ['density']},
-      {className: 'astryx-tree-list-item', visualProps: ['density'], states: ['selected', 'disabled']},
+      {className: 'astryx-tree-list-item', states: ['selected', 'disabled']},
     ],
   },
   components: [

package/src/Typeahead/BaseTypeahead.doc.mjs

@@ -8,16 +8,6 @@ export const docs = {
   displayName: 'Base Typeahead',
   isHiddenFromOverview: true,
   description: 'Unstyled combobox engine providing input, search, keyboard navigation, and dropdown. No wrapper div, no border styling, no token rendering. Used by Typeahead and Tokenizer for custom compositions.',
-  usage: {
-    description: 'Unstyled combobox engine providing input, search, keyboard navigation, and dropdown. No wrapper div, no border styling, no token rendering. Used by Typeahead and Tokenizer for custom compositions.',
-    bestPractices: [
-      { guidance: true, description: 'Use Typeahead or Tokenizer for standard fields; they wrap BaseTypeahead with the wrapper div, border styling, and token rendering it intentionally omits.' },
-      { guidance: true, description: 'Provide your own wrapper div with border and layout when composing directly, since BaseTypeahead renders no visual chrome of its own.' },
-      { guidance: true, description: 'Pass anchorRef pointing to your wrapper so the dropdown positions against your custom input chrome, not just the bare input element.' },
-      { guidance: false, description: 'Expect a wrapper div, border, or token rendering. BaseTypeahead is an engine only; all visual chrome is the caller\'s responsibility.' },
-      { guidance: false, description: 'Use BaseTypeahead when Typeahead or Tokenizer would suffice; the extra wrapper and styling work is only justified for truly custom compositions.' },
-    ],
-  },
   props: [
     {
       name: 'searchSource',
@@ -236,15 +226,6 @@ export const docsDense = {
   isHiddenFromOverview: true,
   displayName: 'Base Typeahead',
   description: 'Unstyled combobox engine; input+search+keyboard nav+dropdown. No wrapper/border/token. Used by Typeahead+Tokenizer.',
-  usage: {
-    bestPractices: [
-      { guidance: true, description: 'Use Typeahead or Tokenizer for standard fields; they add the wrapper, border, and token rendering BaseTypeahead omits.' },
-      { guidance: true, description: 'Provide your own wrapper div with border and layout when composing directly; BaseTypeahead renders no chrome.' },
-      { guidance: true, description: 'Pass anchorRef to your wrapper so the dropdown positions against your input chrome, not the bare input.' },
-      { guidance: false, description: 'Expect wrapper, border, or token rendering. Engine only; chrome is the caller\'s job.' },
-      { guidance: false, description: 'Use BaseTypeahead when Typeahead or Tokenizer suffice; extra work only pays off for custom compositions.' },
-    ],
-  },
   propDescriptions: {
     searchSource: 'Data source w/ search+bootstrap methods.',
     value: 'Currently selected item.',

package/src/Typeahead/BaseTypeahead.tsx

@@ -410,10 +410,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   const performSearch = useCallback(
     async (searchQuery: string) => {
       searchSource.cancel?.();
-      // Claim a new generation so overlapping searches can't race: an
-      // in-flight response for an older query fails the gen check below
-      // instead of overwriting the newer results.
-      const gen = ++searchGenRef.current;
+      const gen = searchGenRef.current;
       setIsLoading(true);
       setHasSearched(true);
       try {
@@ -454,7 +451,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
 
   // Perform bootstrap
   const performBootstrap = useCallback(async () => {
-    const gen = ++searchGenRef.current;
+    const gen = searchGenRef.current;
     setIsLoading(true);
     try {
       const bootstrapResults = await searchSource.bootstrap();

package/src/Typeahead/Typeahead.doc.mjs

@@ -168,7 +168,7 @@ export const docs = {
   components: [{name: 'BaseTypeahead'}, {name: 'TypeaheadItem'}],
   theming: {
     targets: [
-      {className: 'astryx-typeahead', visualProps: ['status', 'size']},
+      {className: 'astryx-typeahead', visualProps: ['status']},
       {className: 'astryx-typeahead-dropdown'},
       {className: 'astryx-typeahead-item'},
     ],

package/src/Typeahead/Typeahead.test.tsx

@@ -18,7 +18,7 @@ import {
   afterAll,
   beforeEach,
 } from 'vitest';
-import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
+import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Typeahead} from './Typeahead';
 import {BaseTypeahead} from './BaseTypeahead';
@@ -314,50 +314,6 @@ describe('BaseTypeahead focus-out', () => {
 });
 
 describe('Typeahead', () => {
-  describe('out-of-order async results', () => {
-    it('discards a stale response that resolves after a newer query', async () => {
-      const resolvers = new Map<string, (items: SearchableItem[]) => void>();
-      const rawSource: SearchSource = {
-        search: async (query: string) =>
-          new Promise<SearchableItem[]>(resolve => {
-            resolvers.set(query, resolve);
-          }),
-        bootstrap: () => [],
-      };
-
-      render(
-        <Typeahead
-          label="Fruit"
-          searchSource={rawSource}
-          value={null}
-          onChange={() => {}}
-          debounceMs={0}
-        />,
-      );
-
-      const input = screen.getByRole('combobox');
-      fireEvent.change(input, {target: {value: 'a'}});
-      fireEvent.change(input, {target: {value: 'ap'}});
-
-      // The newer query resolves first…
-      await act(async () => {
-        resolvers.get('ap')!([{id: 'apple', label: 'Apple'}]);
-      });
-      expect(screen.getByText('Apple')).toBeInTheDocument();
-
-      // …then the abandoned query's slow response arrives and must be
-      // discarded rather than overwriting the current results.
-      await act(async () => {
-        resolvers.get('a')!([
-          {id: 'avocado', label: 'Avocado'},
-          {id: 'apricot', label: 'Apricot'},
-        ]);
-      });
-      expect(screen.getByText('Apple')).toBeInTheDocument();
-      expect(screen.queryByText('Avocado')).not.toBeInTheDocument();
-    });
-  });
-
   it('renders with label', () => {
     render(
       <Typeahead