@astryxdesign/core 0.7.1 → 0.7.2-canary.01eab6a

package/src/TreeList/TreeListItem.tsx

@@ -14,7 +14,7 @@
  * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 
-import {useId, useMemo, type ReactNode} from 'react';
+import {useId, useMemo, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -27,6 +27,10 @@ import {
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
+import {
+  hasInteractiveAncestor,
+  useClickableContainer,
+} from '../hooks/useClickableContainer';
 import {Icon} from '../Icon';
 import {mergeProps} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
@@ -46,6 +50,13 @@ const styles = stylex.create({
     padding: 0,
     position: 'relative',
     width: '100%',
+    // Publish whether THIS treeitem has keyboard focus, for its row's
+    // `zIndex` (see `contentWrapper`). Every nested <li> redeclares the
+    // default, so a focused ancestor never lifts its descendants' rows.
+    '--_tree-focus-z': {
+      default: 'auto',
+      ':focus-visible': '2',
+    },
     // The treeitem row is the roving-tabindex focus owner; suppress the
     // native focus ring in favor of the row's :focus-visible outline below.
     outline: 'none',
@@ -82,6 +93,9 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     gap: spacingVars['--spacing-2'],
+    // The row's own inline padding only. The per-level indent lives on
+    // `indentedContent` inside it, so a theme or caller padding here composes
+    // with the indent instead of replacing it.
     paddingInline: spacingVars['--spacing-2'],
     // No `outline: 'none'` here: this element receives the shared focus ring,
     // which already defaults to none, and the shorthand would erase it.
@@ -89,12 +103,38 @@ const styles = stylex.create({
     position: 'relative',
     boxSizing: 'border-box',
     textAlign: 'start',
-    // Per-level indent. Declared here (not inline) so it lives in
-    // `@layer astryx-base` and the theme layer can override it in normal
-    // cascade order — an inline longhand would outrank every layer. The row
-    // publishes only the computed distance as `--_tree-indent`; the per-level
-    // step is the public `--tree-list-indent` lever (see TreeList `root`).
-    marginInlineStart: 'var(--_tree-indent, 0px)',
+  },
+  // Guide lines draw above the rows (TreeListBranches) so a row's fill does
+  // not break them. Lift the row whose focus ring is showing above the guides
+  // too, so no guide cuts through the ring: when focus is inside the row, or
+  // when its own treeitem publishes focus (`--_tree-focus-z` on `wrapper`).
+  // The ring is the row's outline, so it cannot be lifted on its own: a
+  // focused row that is also filled (selected or hovered) covers the guides at
+  // that row. That is the accepted trade-off (DD3). Applied only with
+  // `focusWithinOrPublished`, the rows that draw the ring: a plain row shows
+  // no ring, so its fill stays under the guides.
+  focusLift: {
+    zIndex: {
+      default: 'var(--_tree-focus-z, auto)',
+      ':has(:focus-visible)': 2,
+    },
+  },
+  // Per-level indent, drawn INSIDE the row box: the row (`contentWrapper`)
+  // stays full width, so a nested row's hover and selected fill spans the
+  // list like a root row's, while its content sits exactly where a margin
+  // indent would put it. A child of the row rather than the row's own padding,
+  // so a theme or caller that sets the row's padding keeps the indent. It
+  // inherits the row's flex alignment and gap, so a theme that retunes those
+  // on `tree-list-item` still lays the content out. The row publishes only the
+  // computed distance as `--_tree-indent`; the per-level step is the public,
+  // themeable `--tree-list-indent` lever (see TreeList `root`).
+  indentedContent: {
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+    alignItems: 'inherit',
+    gap: 'inherit',
+    paddingInlineStart: 'var(--_tree-indent, 0px)',
   },
   interactive: {
     cursor: {
@@ -369,6 +409,7 @@ export function TreeListItem({
   const labelId = useId();
   const descriptionId = useId();
   const LinkComponent = useLinkComponent();
+  const linkRef = useRef<HTMLAnchorElement>(null);
   const isInteractive = onClick != null || href != null;
 
   const handleToggle = useMemo(
@@ -388,8 +429,10 @@ export function TreeListItem({
         if (isDisabled) {
           return;
         }
-        const el = e.target as HTMLElement;
-        if (el.closest('button, a, input, select, textarea')) {
+        // Controls inside the row, native or role-based, keep their own
+        // activation (FR7): the same rule link rows get from the shared
+        // enlarged-surface hook below.
+        if (hasInteractiveAncestor(e.target as Element, e.currentTarget)) {
           return;
         }
         if (onClick != null) {
@@ -402,6 +445,34 @@ export function TreeListItem({
     return undefined;
   }, [onClick, hasChildren, onToggle, id, isDisabled]);
 
+  // A link row (an `href` and no other row action) is an enlarged surface for
+  // its link: the indent is part of the row, so a click anywhere in it must
+  // follow the link, as Enter already does. Built on the shared
+  // enlarged-surface hook (family:navigation-destinations), which skips
+  // clicks on nested controls, native or role-based, and text selections.
+  // - Clicks are delegated: the hook re-dispatches the click on the anchor
+  //   with its modifier keys, so the link component and the browser handle
+  //   same-tab, new-tab and new-window activation, and stops the original, so
+  //   ancestors see one click per press.
+  // - Middle-click has no synthetic equivalent, so it takes the hook's href
+  //   path, which opens the destination in a new tab after the shared
+  //   navigation rule.
+  // The container ref is attached to link rows only, so every other row stays
+  // a plain element and both hook instances stay inert on it.
+  const forwardsToLink = href != null && handleClick == null;
+  const linkRowRef = useRef<HTMLDivElement>(null);
+  const {onClick: delegateToLink} = useClickableContainer({
+    containerRef: linkRowRef,
+    interactiveRef: linkRef,
+    disabled: isDisabled || !forwardsToLink,
+  });
+  const {onMouseUp: openLinkOnMiddleClick} = useClickableContainer({
+    containerRef: linkRowRef,
+    href,
+    target,
+    disabled: isDisabled || !forwardsToLink,
+  });
+
   // Per-level indent distance. The per-level step is the public, themeable
   // `--tree-list-indent` lever (default `--spacing-4`, set on the tree-list
   // root). A leaf adds a fixed chevron-column offset (chevron width + gap) so
@@ -411,8 +482,8 @@ export function TreeListItem({
   // every row sits flush, like a parent at that level. That offset is tied to
   // the chevron's own dimensions, not the indent step, so it does not scale
   // with the lever. Published as the private `--_tree-indent` and consumed by
-  // `contentWrapper`'s stylesheet `margin-inline-start` (kept out of the inline
-  // style so the theme layer can override it — see #4308).
+  // `indentedContent`'s stylesheet `padding-inline-start`; the step stays
+  // themeable through `--tree-list-indent` (see #4308).
   const reservesChevronColumn = !hasChildren && hasExpandableItems;
   const indentDistance = reservesChevronColumn
     ? `calc(${nestedLevel} * var(--tree-list-indent) + ${spacingVars['--spacing-4']} + ${spacingVars['--spacing-2']})`
@@ -521,6 +592,7 @@ export function TreeListItem({
       )}
       {href != null ? (
         <LinkComponent
+          ref={linkRef}
           href={href}
           target={target}
           aria-disabled={isDisabled || undefined}
@@ -599,6 +671,7 @@ export function TreeListItem({
             isInteractive || (hasChildren && onClick == null)
               ? focusOutlineProps.focusWithinOrPublished(
                   styles.contentWrapper,
+                  styles.focusLift,
                   densityStyles[density],
                   styles.interactive,
                   interactionOverlayStyles.backgroundImage,
@@ -620,8 +693,10 @@ export function TreeListItem({
             className,
             {...indentStyle, ...style},
           )}
-          onClick={handleClick}>
-          {innerContent}
+          ref={forwardsToLink ? linkRowRef : undefined}
+          onClick={forwardsToLink ? delegateToLink : handleClick}
+          onMouseUp={forwardsToLink ? openLinkOnMiddleClick : undefined}>
+          <div {...stylex.props(styles.indentedContent)}>{innerContent}</div>
         </div>
       </div>
       {isExpanded && renderedChildren != null && (

package/src/Typeahead/BaseTypeahead.tsx

@@ -624,6 +624,32 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
     sourceGenRef.current = ++searchGenRef.current;
   }
 
+  // The previous source is remembered in state, not a ref, so a render React
+  // discards cannot consume the comparison without its state updates.
+  const [sourceOfState, setSourceOfState] = useState(searchSource);
+  if (sourceOfState !== searchSource) {
+    setSourceOfState(searchSource);
+    if (isLoading) {
+      setIsLoading(false);
+      setHasSearched(false);
+    }
+    loadingRef.current = false;
+  }
+
+  // When the search source is replaced, any in-flight load from the previous
+  // source is abandoned (generation bumped above). Notify the wrapper's busy lane
+  // in an effect so external store listeners run safely after commit.
+  const isInitialMountRef = useRef(true);
+  useEffect(() => {
+    if (isInitialMountRef.current) {
+      isInitialMountRef.current = false;
+      return;
+    }
+    if (!loadingRef.current) {
+      onLoadingChangeRef.current?.(false);
+    }
+  }, [searchSource]);
+
   // Layer for dropdown
   const handleLayerShow = useCallback(() => {
     onOpenChange?.(true);

package/src/Typeahead/Typeahead.test.tsx

@@ -17,10 +17,20 @@ import {
   beforeAll,
   afterAll,
   beforeEach,
+  afterEach,
 } from 'vitest';
 import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {createRef, Profiler, type ProfilerOnRenderCallback} from 'react';
+import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {
+  createRef,
+  Profiler,
+  startTransition,
+  StrictMode,
+  Suspense,
+  useState,
+  type ProfilerOnRenderCallback,
+} from 'react';
 import {Typeahead} from './Typeahead';
 import {readFile} from 'node:fs/promises';
 import {resolve} from 'node:path';
@@ -70,6 +80,10 @@ afterAll(() => {
   (HTMLElement.prototype as any).matches = originalMatches;
 });
 
+afterEach(() => {
+  __resetLiveRegionsForTest();
+});
+
 // Test data
 const fruits: SearchableItem[] = [
   {id: '1', label: 'Apple'},
@@ -964,6 +978,193 @@ describe('BaseTypeahead hasEntriesOnFocus', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('clears the loading state when the search source is replaced during an in-flight load', async () => {
+    let settle: (items: SearchableItem[]) => void = () => {};
+    const bootstrap = vi.fn(
+      async () =>
+        new Promise<SearchableItem[]>(resolve => {
+          settle = resolve;
+        }),
+    );
+    const initialSource: SearchSource = {search: () => [], bootstrap};
+    const replacementSource: SearchSource = {
+      search: () => [],
+      bootstrap: () => [],
+    };
+
+    const {rerender} = render(
+      <BaseTypeahead
+        searchSource={initialSource}
+        value={null}
+        onChange={() => {}}
+        hasEntriesOnFocus
+      />,
+    );
+    const input = screen.getByRole('combobox');
+
+    fireEvent.focus(input);
+    await waitFor(() => {
+      expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
+    });
+
+    rerender(
+      <BaseTypeahead
+        searchSource={replacementSource}
+        value={null}
+        onChange={() => {}}
+        hasEntriesOnFocus
+      />,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('status', {name: 'Loading'}),
+      ).not.toBeInTheDocument();
+    });
+
+    await act(async () => {
+      settle([]);
+      await Promise.resolve();
+    });
+    expect(
+      screen.queryByRole('status', {name: 'Loading'}),
+    ).not.toBeInTheDocument();
+  });
+
+  it('keeps the loading state under StrictMode for a pending autofocus bootstrap', async () => {
+    let settle: (items: SearchableItem[]) => void = () => {};
+    const bootstrap = vi.fn(
+      async () =>
+        new Promise<SearchableItem[]>(resolve => {
+          settle = resolve;
+        }),
+    );
+    render(
+      <StrictMode>
+        <Typeahead
+          label="Test"
+          searchSource={{search: () => [], bootstrap}}
+          value={null}
+          onChange={() => {}}
+          hasAutoFocus
+          hasEntriesOnFocus
+        />
+      </StrictMode>,
+    );
+
+    expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
+
+    await act(async () => {
+      settle([]);
+      await Promise.resolve();
+    });
+    expect(
+      screen.queryByRole('status', {name: 'Loading'}),
+    ).not.toBeInTheDocument();
+  });
+
+  let settlePendingTransitionA: (items: SearchableItem[]) => void = () => {};
+  const stableTransitionSourceA: SearchSource = {
+    search: vi.fn(
+      async () =>
+        new Promise<SearchableItem[]>(resolve => {
+          settlePendingTransitionA = resolve;
+        }),
+    ),
+    bootstrap: () => [],
+  };
+  const stableTransitionSourceB: SearchSource = {
+    search: vi.fn(async () => []),
+    bootstrap: () => [],
+  };
+
+  it('clears loading and aria-busy when source is replaced in a transition that suspends and retries', async () => {
+    let isSuspended = false;
+    let resolveSuspension: () => void = () => {};
+    let pendingSuspension: Promise<void> | null = null;
+
+    function SuspendingSibling({shouldSuspend}: {shouldSuspend: boolean}) {
+      if (shouldSuspend && isSuspended && pendingSuspension) {
+        // eslint-disable-next-line @typescript-eslint/only-throw-error
+        throw pendingSuspension;
+      }
+      return null;
+    }
+
+    let updateState!: (source: SearchSource, shouldSuspend: boolean) => void;
+
+    function TransitionContainer() {
+      const [source, setSource] = useState<SearchSource>(
+        stableTransitionSourceA,
+      );
+      const [shouldSuspend, setShouldSuspend] = useState(false);
+      updateState = (newSource, suspend) => {
+        setSource(newSource);
+        setShouldSuspend(suspend);
+      };
+
+      return (
+        <Suspense fallback={<div>Suspended...</div>}>
+          <Typeahead
+            label="Test"
+            searchSource={source}
+            value={null}
+            onChange={() => {}}
+            debounceMs={0}
+          />
+          <SuspendingSibling shouldSuspend={shouldSuspend} />
+        </Suspense>
+      );
+    }
+
+    render(<TransitionContainer />);
+    const input = screen.getByRole('combobox');
+
+    // Trigger a load so aria-busy="true" is set on the combobox
+    fireEvent.change(input, {target: {value: 'query'}});
+    await waitFor(() => {
+      expect(input).toHaveAttribute('aria-busy', 'true');
+    });
+    expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
+
+    // Create the pending promise for suspension
+    isSuspended = true;
+    pendingSuspension = new Promise<void>(resolve => {
+      resolveSuspension = () => {
+        isSuspended = false;
+        resolve();
+      };
+    });
+
+    // Inside startTransition, switch from source A to source B while sibling suspends
+    act(() => {
+      startTransition(() => {
+        updateState(stableTransitionSourceB, true);
+      });
+    });
+
+    // The render suspended, so the previous committed state remains
+    expect(input).toHaveAttribute('aria-busy', 'true');
+
+    // Resolve the pending promise and let the transition commit
+    await act(async () => {
+      resolveSuspension();
+      await pendingSuspension;
+    });
+
+    // Settle the abandoned load
+    await act(async () => {
+      settlePendingTransitionA([]);
+      await Promise.resolve();
+    });
+
+    // The combobox must not keep aria-busy and the spinner must be gone
+    expect(input).not.toHaveAttribute('aria-busy');
+    expect(
+      screen.queryByRole('status', {name: 'Loading'}),
+    ).not.toBeInTheDocument();
+  });
+
   it('shows bootstrap results on mouse click', async () => {
     render(
       <BaseTypeahead
@@ -1323,6 +1524,63 @@ describe('BaseTypeahead hasSearched reset', () => {
     // "No results found" should disappear since hasSearched is reset
     expect(screen.queryByText('No results found')).not.toBeInTheDocument();
   });
+
+  it('resets hasSearched and does not announce "No results found" when search source is replaced during a pending search', async () => {
+    let settle: (items: SearchableItem[]) => void = () => {};
+    const initialSource: SearchSource = {
+      search: vi.fn(
+        async () =>
+          new Promise<SearchableItem[]>(resolve => {
+            settle = resolve;
+          }),
+      ),
+      bootstrap: () => [],
+    };
+    const replacementSource: SearchSource = {
+      search: vi.fn(async () => []),
+      bootstrap: () => [],
+    };
+
+    const {rerender} = render(
+      <BaseTypeahead
+        searchSource={initialSource}
+        value={null}
+        onChange={() => {}}
+        debounceMs={0}
+      />,
+    );
+    const input = screen.getByRole('combobox');
+
+    // Type a query that starts an asynchronous search
+    fireEvent.change(input, {target: {value: 'abc'}});
+    expect(initialSource.search).toHaveBeenCalledWith('abc');
+
+    // Replace the search source while the search is still pending
+    rerender(
+      <BaseTypeahead
+        searchSource={replacementSource}
+        value={null}
+        onChange={() => {}}
+        debounceMs={0}
+      />,
+    );
+
+    // Settle the abandoned search
+    await act(async () => {
+      settle([]);
+      await Promise.resolve();
+    });
+
+    await act(
+      async () =>
+        new Promise<void>(resolve => requestAnimationFrame(() => resolve())),
+    );
+    expect(
+      document.querySelector('[data-astryx-live-region="polite"]')
+        ?.textContent ?? '',
+    ).not.toContain('No results found');
+    expect(screen.queryByText('No results found')).not.toBeInTheDocument();
+  });
 });
 
 describe('BaseTypeahead popover after selection', () => {
@@ -2313,7 +2571,7 @@ describe('Typeahead consumer key handler order', () => {
       currentTarget = event.currentTarget;
       event.preventDefault();
     });
-    const {container} = render(
+    render(
       <Typeahead
         label="Fruit"
         searchSource={fruitSource}

package/src/docPropLiterals.test.ts

@@ -3,7 +3,8 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 /**
  * @file Guards doc prop types against opaque named unions (#1645).
- * @input Every {Name}.doc.mjs plus the TypeScript sources they describe.
+ * @input Every {Name}.doc.mjs plus the TypeScript sources they describe,
+ *   including same-file private aliases used by exported literal unions.
  * @output Fails when a documented prop type hides its legal literal values.
  * @position Repo-wide doc-shape guard, sibling of docPropReferences.test.ts.
  *
@@ -188,18 +189,34 @@ for (const file of findFiles(SRC_DIR, ['.ts', '.tsx'])) {
   // markers the comment-stripped `src` has already removed.
   const rawTypeRhs = new Map<string, string>();
   for (const m of raw.matchAll(
-    /export type ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
+    /\btype ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
   )) {
     rawTypeRhs.set(m[1], m[2]);
   }
-  for (const m of src.matchAll(
-    /export type ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
-  )) {
-    const [, name, rhsRaw] = m;
-    const rhs = rhsRaw.replace(/\s+/g, ' ').trim();
-    if (LITERAL_UNION.test(rhs)) {
+  const declarations = [
+    ...src.matchAll(
+      /\b(export )?type ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
+    ),
+  ];
+  // Resolve same-file literal aliases before registering exported types.
+  // Repeat until no new literal unions are found.
+  const fileLiterals = new Map<string, string>();
+  let previousSize: number;
+  do {
+    previousSize = fileLiterals.size;
+    for (const [, , name, rhsRaw] of declarations) {
+      const rhs = rhsRaw
+        .replace(/\s+/g, ' ')
+        .trim()
+        .split('|')
+        .map(part => fileLiterals.get(part.trim()) ?? part.trim())
+        .join(' | ');
+
+      if (!LITERAL_UNION.test(rhs)) {
+        continue;
+      }
       const deprecated = deprecatedLiteralMembers(rawTypeRhs.get(name) ?? '');
-      literalUnions.set(
+      fileLiterals.set(
         name,
         rhs
           .replace(/^\|\s*/, '')
@@ -209,8 +226,17 @@ for (const file of findFiles(SRC_DIR, ['.ts', '.tsx'])) {
           .filter(member => !deprecated.has(member))
           .join(' | '),
       );
+    }
+  } while (fileLiterals.size !== previousSize);
+  for (const [, exported, name, rhsRaw] of declarations) {
+    if (!exported) {
+      continue;
+    }
+    const literals = fileLiterals.get(name);
+    if (literals !== undefined) {
+      literalUnions.set(name, literals);
     } else {
-      namedBodies.set(name, rhs);
+      namedBodies.set(name, rhsRaw.replace(/\s+/g, ' ').trim());
     }
   }
   for (const m of src.matchAll(

package/src/hooks/useEntryAnimation.doc.mjs

@@ -18,12 +18,12 @@ export const docs = {
     {
       name: 'entryStyle',
       type: 'StyleXStyles | null',
-      description: 'A StyleX style object for the entry animation, or null if the element was rendered on initial page load (no animation needed).',
+      description: 'A StyleX style object for the entry animation, or null if the element was rendered on initial page load or hydrated from server HTML (no animation needed).',
     },
   ],
   usage: {
     description:
-      'Returns a StyleX style for animating an element on mount. Only animates when the element is dynamically inserted after the initial page paint; elements rendered on page load are not animated. Uses Astryx motion tokens (duration, easing) for consistent animation timing. Requires "use client"; does not support SSR.',
+      'Returns a StyleX style for animating an element on mount. Only animates when the element is dynamically inserted after the initial page paint; elements rendered on page load are not animated. Uses Astryx motion tokens (duration, easing) for consistent animation timing. Server-rendered elements hydrate without the entry style and never animate; elements mounted after hydration animate.',
     bestPractices: [
       { guidance: true, description: 'Use for conditionally rendered elements like validation messages, toasts, or expanding sections.' },
       { guidance: true, description: 'Spread the returned style into stylex.props() alongside other styles.' },
@@ -39,7 +39,7 @@ export const docs = {
 /** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
-    'Returns StyleX style for animating element on mount. Only animates when element dynamically inserted after initial page paint; elements rendered on page load not animated. Uses Astryx motion tokens (duration, easing) for consistent timing. Requires "use client"; does not support SSR.',
+    'Returns StyleX style for animating element on mount. Only animates when element dynamically inserted after initial page paint; elements rendered on page load not animated. Uses Astryx motion tokens (duration, easing) for consistent timing. Server-rendered elements hydrate without entry style, never animate; elements mounted after hydration animate.',
   paramDescriptions: {
     preset: 'animation preset applied on mount.',
   },
@@ -48,7 +48,7 @@ export const docsDense = {
   },
   usage: {
     description:
-      'Returns StyleX style for animating element on mount. Only animates when element dynamically inserted after initial page paint; elements rendered on page load not animated. Uses Astryx motion tokens (duration, easing) for consistent timing. Requires "use client"; does not support SSR.',
+      'Returns StyleX style for animating element on mount. Only animates when element dynamically inserted after initial page paint; elements rendered on page load not animated. Uses Astryx motion tokens (duration, easing) for consistent timing. Server-rendered elements hydrate without entry style, never animate; elements mounted after hydration animate.',
     bestPractices: [
       { guidance: true, description: 'Use for conditionally rendered elements like validation messages, toasts, expanding sections.' },
       { guidance: true, description: 'Spread returned style into stylex.props() alongside other styles.' },