@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

package/src/Collapsible/CollapsibleGroup.test.tsx

@@ -77,6 +77,22 @@ describe('Collapsible', () => {
     expect(screen.getByText('Hidden content')).not.toBeVisible();
   });
 
+  it('links the trigger to its content region via aria-controls', () => {
+    render(
+      <Collapsible trigger="Details">
+        <p>Region content</p>
+      </Collapsible>,
+    );
+
+    const trigger = screen.getByRole('button', {name: /Details/});
+    const controlsId = trigger.getAttribute('aria-controls');
+    // aria-controls must be present and point at the real content region.
+    expect(controlsId).toBeTruthy();
+    const region = document.getElementById(controlsId as string);
+    expect(region).not.toBeNull();
+    expect(region).toContainElement(screen.getByText('Region content'));
+  });
+
   it('respects controlled isOpen/onOpenChange', async () => {
     const onOpenChange = vi.fn();
     const user = userEvent.setup();
@@ -111,6 +127,36 @@ describe('Collapsible', () => {
     expect(screen.getByText('Controlled content')).not.toBeVisible();
   });
 
+  it('self-toggles in uncontrolled mode even when onOpenChange is supplied', async () => {
+    // Regression: passing onOpenChange without isOpen must NOT make the
+    // component behave as controlled. Internal state should still drive
+    // visibility, and the callback should fire in addition.
+    const onOpenChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Collapsible trigger="Uncontrolled" onOpenChange={onOpenChange}>
+        <p>Uncontrolled content</p>
+      </Collapsible>,
+    );
+
+    const trigger = screen.getByRole('button', {name: /Uncontrolled/});
+    // Starts open (defaultIsOpen defaults to true).
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Uncontrolled content')).toBeVisible();
+
+    // Click collapses via internal state AND notifies.
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText('Uncontrolled content')).not.toBeVisible();
+    expect(onOpenChange).toHaveBeenNthCalledWith(1, false);
+
+    // Click again re-expands — proving the component isn't stuck.
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Uncontrolled content')).toBeVisible();
+    expect(onOpenChange).toHaveBeenNthCalledWith(2, true);
+  });
+
   it('renders chevron indicator', () => {
     render(
       <Collapsible trigger="With Chevron">
@@ -397,4 +443,276 @@ describe('CollapsibleGroup', () => {
       expect(trigger).toHaveAttribute('aria-expanded', 'true');
     });
   });
+
+  describe('dividers', () => {
+    function getItem(name: RegExp): HTMLElement {
+      const root = screen
+        .getByRole('button', {name})
+        .closest('.astryx-collapsible');
+      expect(root).not.toBeNull();
+      return root as HTMLElement;
+    }
+
+    it('renders no wrapper DOM by default and with dividers="none"', () => {
+      const {container, rerender} = render(
+        <CollapsibleGroup>
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+      expect(container.querySelector('.astryx-collapsible-group')).toBeNull();
+
+      rerender(
+        <CollapsibleGroup dividers="none">
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+      expect(container.querySelector('.astryx-collapsible-group')).toBeNull();
+    });
+
+    it('renders a wrapper with data attributes when dividers are enabled', () => {
+      const {container} = render(
+        <CollapsibleGroup dividers="between">
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+          <Collapsible trigger="Item B" value="b">
+            <p>Content B</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      const wrapper = container.querySelector('.astryx-collapsible-group');
+      expect(wrapper).not.toBeNull();
+      expect(wrapper).toHaveAttribute('data-dividers', 'between');
+      // Divided groups default to balanced density
+      expect(wrapper).toHaveAttribute('data-density', 'balanced');
+      expect(wrapper).toContainElement(getItem(/Item A/));
+      expect(wrapper).toContainElement(getItem(/Item B/));
+    });
+
+    it('reflects dividers and density on each item', () => {
+      render(
+        <CollapsibleGroup dividers="all" density="compact">
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      const item = getItem(/Item A/);
+      expect(item).toHaveAttribute('data-dividers', 'all');
+      expect(item).toHaveAttribute('data-density', 'compact');
+    });
+
+    it('does not reflect divider chrome on items without dividers', () => {
+      render(
+        <CollapsibleGroup>
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      const item = getItem(/Item A/);
+      expect(item).not.toHaveAttribute('data-dividers');
+      expect(item).not.toHaveAttribute('data-density');
+    });
+
+    it('applies density without dividers (and without a wrapper)', () => {
+      const {container} = render(
+        <CollapsibleGroup density="spacious">
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      expect(container.querySelector('.astryx-collapsible-group')).toBeNull();
+      expect(getItem(/Item A/)).toHaveAttribute('data-density', 'spacious');
+    });
+
+    it('does not leak divider chrome into nested collapsibles', () => {
+      render(
+        <CollapsibleGroup dividers="between" defaultValue="outer">
+          <Collapsible trigger="Outer" value="outer">
+            <Collapsible trigger="Nested">
+              <p>Nested content</p>
+            </Collapsible>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      expect(getItem(/Outer/)).toHaveAttribute('data-dividers', 'between');
+      expect(getItem(/Nested/)).not.toHaveAttribute('data-dividers');
+      expect(getItem(/Nested/)).not.toHaveAttribute('data-density');
+    });
+
+    it('keeps group coordination working with dividers enabled', async () => {
+      const user = userEvent.setup();
+      render(
+        <CollapsibleGroup type="single" dividers="between" defaultValue="a">
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+          <Collapsible trigger="Item B" value="b">
+            <p>Content B</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      expect(screen.getByText('Content A')).toBeVisible();
+      await user.click(screen.getByRole('button', {name: /Item B/}));
+      expect(screen.getByText('Content A')).not.toBeVisible();
+      expect(screen.getByText('Content B')).toBeVisible();
+    });
+
+    it('applies xstyle/className/style to the wrapper in divider mode', () => {
+      const {container} = render(
+        <CollapsibleGroup
+          dividers="between"
+          className="custom-class"
+          data-testid="group">
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      const wrapper = container.querySelector('.astryx-collapsible-group');
+      expect(wrapper).toHaveClass('custom-class');
+      expect(wrapper).toHaveAttribute('data-testid', 'group');
+    });
+
+    it('forwards ref to the wrapper in divider mode', () => {
+      const ref = {current: null as HTMLElement | null};
+      const {container} = render(
+        <CollapsibleGroup dividers="between" ref={ref}>
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      expect(ref.current).toBe(
+        container.querySelector('.astryx-collapsible-group'),
+      );
+    });
+
+    it('explicit density overrides the divider default', () => {
+      const {container} = render(
+        <CollapsibleGroup dividers="between" density="spacious">
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      const wrapper = container.querySelector('.astryx-collapsible-group');
+      expect(wrapper).toHaveAttribute('data-density', 'spacious');
+      expect(getItem(/Item A/)).toHaveAttribute('data-density', 'spacious');
+    });
+
+    it('tolerates interleaved non-Collapsible children', async () => {
+      const user = userEvent.setup();
+      render(
+        <CollapsibleGroup type="single" dividers="between" defaultValue="a">
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+          <hr data-testid="separator" />
+          <Collapsible trigger="Item B" value="b">
+            <p>Content B</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      expect(screen.getByTestId('separator')).toBeInTheDocument();
+      expect(getItem(/Item A/)).toHaveAttribute('data-dividers', 'between');
+      expect(getItem(/Item B/)).toHaveAttribute('data-dividers', 'between');
+      await user.click(screen.getByRole('button', {name: /Item B/}));
+      expect(screen.getByText('Content A')).not.toBeVisible();
+      expect(screen.getByText('Content B')).toBeVisible();
+    });
+
+    it('lets a nested group define its own chrome instead of inheriting', () => {
+      render(
+        <CollapsibleGroup dividers="between" defaultValue="outer">
+          <Collapsible trigger="Outer" value="outer">
+            <CollapsibleGroup type="multiple" dividers="all">
+              <Collapsible trigger="Inner divided" value="in-a">
+                <p>Inner content</p>
+              </Collapsible>
+            </CollapsibleGroup>
+            <CollapsibleGroup type="multiple">
+              <Collapsible trigger="Inner plain" value="in-b">
+                <p>Inner content</p>
+              </Collapsible>
+            </CollapsibleGroup>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      expect(getItem(/Outer/)).toHaveAttribute('data-dividers', 'between');
+      expect(getItem(/Inner divided/)).toHaveAttribute('data-dividers', 'all');
+      expect(getItem(/Inner plain/)).not.toHaveAttribute('data-dividers');
+    });
+
+    it('keeps controlled coordination and onChange shape with dividers', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      const {rerender} = render(
+        <CollapsibleGroup
+          type="single"
+          dividers="all"
+          value="a"
+          onChange={onChange}>
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+          <Collapsible trigger="Item B" value="b">
+            <p>Content B</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+
+      await user.click(screen.getByRole('button', {name: /Item B/}));
+      expect(onChange).toHaveBeenCalledWith('b');
+      // Controlled: nothing opens until the parent passes the new value
+      expect(screen.getByText('Content B')).not.toBeVisible();
+
+      rerender(
+        <CollapsibleGroup
+          type="single"
+          dividers="all"
+          value="b"
+          onChange={onChange}>
+          <Collapsible trigger="Item A" value="a">
+            <p>Content A</p>
+          </Collapsible>
+          <Collapsible trigger="Item B" value="b">
+            <p>Content B</p>
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+      expect(screen.getByText('Content A')).not.toBeVisible();
+      expect(screen.getByText('Content B')).toBeVisible();
+    });
+
+    it('renders standalone Collapsible without any group chrome', () => {
+      render(
+        <Collapsible trigger="Alone">
+          <p>Standalone content</p>
+        </Collapsible>,
+      );
+
+      const item = getItem(/Alone/);
+      expect(item).not.toHaveAttribute('data-dividers');
+      expect(item).not.toHaveAttribute('data-density');
+      expect(item.querySelector('.astryx-collapsible-group')).toBeNull();
+    });
+  });
 });

package/src/Collapsible/CollapsibleGroup.tsx

@@ -4,13 +4,18 @@
 
 /**
  * @file CollapsibleGroup.tsx
- * @input Uses React useState, useCallback, CollapsibleGroupContext
+ * @input Uses React useState, useCallback, CollapsibleGroupContext, StyleX, theme tokens
  * @output Exports CollapsibleGroup component and CollapsibleGroupProps
- * @position Core collapsible group coordination provider — renders no wrapper DOM
+ * @position Core collapsible group coordination provider — renders no wrapper
+ *   DOM unless `dividers` is enabled
  *
  * CollapsibleGroup groups collapsible components (Card, etc.) with
- * coordinated open/close behavior. It renders only `{children}` — no wrapper
- * DOM element.
+ * coordinated open/close behavior. By default it renders only `{children}` —
+ * no wrapper DOM element. When `dividers` is 'between' or 'all' it renders a
+ * wrapper div that anchors the divider chrome (outer borders, reliable
+ * :first-child suppression) and provides dividers/density to items via
+ * CollapsibleGroupPresentationContext — each Collapsible draws its own
+ * borders since StyleX has no child selectors.
  *
  * In "single" mode (default), only one item can be open at a time.
  * In "multiple" mode, any number of items can be open simultaneously.
@@ -24,10 +29,35 @@
  */
 
 import React, {useCallback, useMemo, useState, type ReactNode} from 'react';
-import {CollapsibleGroupContext} from './CollapsibleGroupContext';
-import type {CollapsibleGroupContextValue} from './CollapsibleGroupContext';
+import * as stylex from '@stylexjs/stylex';
+import {borderVars, colorVars} from '../theme/tokens.stylex';
+import {
+  CollapsibleGroupContext,
+  CollapsibleGroupPresentationContext,
+} from './CollapsibleGroupContext';
+import type {
+  CollapsibleGroupContextValue,
+  CollapsibleGroupDensity,
+  CollapsibleGroupDividers,
+  CollapsibleGroupPresentationValue,
+} from './CollapsibleGroupContext';
+import {mergeProps} from '../utils';
+import {themeProps} from '../utils/themeProps';
 import type {BaseProps} from '../BaseProps';
 
+const styles = stylex.create({
+  // 'all' draws the group's outer top/bottom edges; between-item lines are
+  // drawn by each Collapsible (borderBlockStart, suppressed on :first-child)
+  wrapperAll: {
+    borderBlockStartWidth: borderVars['--border-width'],
+    borderBlockStartStyle: 'solid',
+    borderBlockStartColor: colorVars['--color-border'],
+    borderBlockEndWidth: borderVars['--border-width'],
+    borderBlockEndStyle: 'solid',
+    borderBlockEndColor: colorVars['--color-border'],
+  },
+});
+
 export interface CollapsibleGroupProps extends Omit<
   BaseProps<HTMLElement>,
   'onChange'
@@ -56,6 +86,24 @@ export interface CollapsibleGroupProps extends Omit<
    */
   onChange?: (value: string | string[]) => void;
 
+  /**
+   * Divider style rendered around the group's items — the accordion row
+   * chrome. 'between' draws hairlines between adjacent items; 'all' adds the
+   * group's top and bottom edges. When enabled, the group renders a wrapper
+   * div (it otherwise renders no DOM) and items get 'balanced' density unless
+   * `density` says otherwise. Pair with bare Collapsible children; Card-wrapped
+   * items provide their own separation.
+   * @default "none"
+   */
+  dividers?: CollapsibleGroupDividers;
+
+  /**
+   * Row density controlling trigger and content block padding on the group's
+   * items. Defaults to 'balanced' when dividers are shown; otherwise items
+   * keep their default unpadded look.
+   */
+  density?: CollapsibleGroupDensity;
+
   /**
    * Children — any components that support isCollapsible + value.
    *
@@ -92,16 +140,26 @@ function normalizeToArray(value: string | string[] | undefined): string[] {
 
 /**
  * Groups collapsible components with coordinated open/close behavior.
- * Renders no wrapper DOM.
+ * Renders no wrapper DOM unless `dividers` is enabled.
  *
  * In "single" mode (default), opening one item closes the others.
  * In "multiple" mode, items toggle independently.
  *
  * @compositionHint Wrap Collapsible instances to coordinate their open/close state.
- * Each Collapsible needs a `value` prop to participate.
+ * Each Collapsible needs a `value` prop to participate. For FAQ-style lists,
+ * use `dividers` with bare Collapsible children instead of wrapping each item
+ * in Card.
  *
  * @example
  * ```
+ * <CollapsibleGroup type="single" dividers="between" defaultValue="faq1">
+ *   <Collapsible trigger="What is Astryx?" value="faq1">
+ *     Astryx is a design system for building internal tools.
+ *   </Collapsible>
+ *   <Collapsible trigger="How do I start?" value="faq2">
+ *     Install the package and import components.
+ *   </Collapsible>
+ * </CollapsibleGroup>
  * <CollapsibleGroup type="single" defaultValue="faq1">
  *   <VStack gap={2}>
  *     <Card>
@@ -123,7 +181,14 @@ export function CollapsibleGroup({
   defaultValue,
   value: controlledValue,
   onChange,
+  dividers = 'none',
+  density,
   children,
+  ref,
+  xstyle,
+  className,
+  style,
+  ...props
 }: CollapsibleGroupProps) {
   const isControlled = controlledValue !== undefined;
   const [internalValue, setInternalValue] = useState<string[]>(() =>
@@ -174,9 +239,42 @@ export function CollapsibleGroup({
     [isOpen, toggle],
   );
 
+  const hasDividers = dividers !== 'none';
+  const resolvedDensity = density ?? (hasDividers ? 'balanced' : null);
+
+  const presentationValue = useMemo<CollapsibleGroupPresentationValue>(
+    () => ({dividers, density: resolvedDensity}),
+    [dividers, resolvedDensity],
+  );
+
+  // The wrapper anchors divider chrome: 'all' outer borders live here, and it
+  // makes the items' :first-child suppression independent of surrounding
+  // siblings. Without dividers the group stays DOM-less (documented contract),
+  // so ref/xstyle/className/style only take effect in wrapper mode.
+  const content = hasDividers ? (
+    <div
+      ref={ref as React.Ref<HTMLDivElement>}
+      {...mergeProps(
+        themeProps('collapsible-group', {
+          dividers,
+          density: resolvedDensity ?? undefined,
+        }),
+        stylex.props(dividers === 'all' && styles.wrapperAll, xstyle),
+        className,
+        style,
+      )}
+      {...props}>
+      {children}
+    </div>
+  ) : (
+    children
+  );
+
   return (
     <CollapsibleGroupContext value={contextValue}>
-      {children}
+      <CollapsibleGroupPresentationContext value={presentationValue}>
+        {content}
+      </CollapsibleGroupPresentationContext>
     </CollapsibleGroupContext>
   );
 }

package/src/Collapsible/CollapsibleGroupContext.tsx

@@ -5,8 +5,10 @@
 /**
  * @file CollapsibleGroupContext.tsx
  * @input Uses React createContext
- * @output Exports CollapsibleGroupContext and CollapsibleGroupContextValue type
- * @position Context definition for collapsible group coordination
+ * @output Exports CollapsibleGroupContext, CollapsibleGroupContextValue,
+ *   CollapsibleGroupPresentationContext, CollapsibleGroupPresentationValue,
+ *   CollapsibleGroupDividers, and CollapsibleGroupDensity types
+ * @position Context definitions for collapsible group coordination and presentation
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Collapsible/CollapsibleGroup.tsx (provider)
@@ -33,3 +35,41 @@ export interface CollapsibleGroupContextValue {
 export const CollapsibleGroupContext =
   createContext<CollapsibleGroupContextValue | null>(null);
 CollapsibleGroupContext.displayName = 'CollapsibleGroupContext';
+
+/**
+ * Divider style rendered around the items of a CollapsibleGroup.
+ * - 'between': hairlines between adjacent items only.
+ * - 'all': hairlines between items plus the group's top and bottom edges.
+ * - 'none': no dividers (default).
+ */
+export type CollapsibleGroupDividers = 'between' | 'all' | 'none';
+
+/**
+ * Row density for the items of a CollapsibleGroup, controlling trigger and
+ * content block padding. Shares the repo-wide density vocabulary
+ * (Table, List, Item).
+ */
+export type CollapsibleGroupDensity = 'compact' | 'balanced' | 'spacious';
+
+/**
+ * Presentation value provided by CollapsibleGroup so each Collapsible can
+ * draw its own group chrome (StyleX has no child selectors, so the group
+ * cannot style items from the outside).
+ */
+export interface CollapsibleGroupPresentationValue {
+  /** Resolved divider style for the group's items. */
+  dividers: CollapsibleGroupDividers;
+  /** Resolved row density, or null to keep the default (unpadded) look. */
+  density: CollapsibleGroupDensity | null;
+}
+
+/**
+ * Context for collapsible group presentation (dividers, density).
+ * Kept separate from CollapsibleGroupContext so the public useCollapsible
+ * state API is unaffected. Collapsible resets this context around its
+ * children so nested collapsibles never inherit row chrome.
+ */
+export const CollapsibleGroupPresentationContext =
+  createContext<CollapsibleGroupPresentationValue | null>(null);
+CollapsibleGroupPresentationContext.displayName =
+  'CollapsibleGroupPresentationContext';

package/src/Collapsible/index.ts

@@ -16,6 +16,10 @@ export type {CollapsibleProps} from './Collapsible';
 
 export {CollapsibleGroup} from './CollapsibleGroup';
 export type {CollapsibleGroupProps} from './CollapsibleGroup';
+export type {
+  CollapsibleGroupDividers,
+  CollapsibleGroupDensity,
+} from './CollapsibleGroupContext';
 
 export {useCollapsible} from './useCollapsible';
 export type {

package/src/Collapsible/useCollapsible.ts

@@ -65,8 +65,11 @@ export interface UseCollapsibleReturn {
  *
  * Supports three modes:
  * 1. **Group-controlled**: When inside a CollapsibleGroup with a `value`, defers to group.
- * 2. **Controlled**: When `isOpen` and `onOpenChange` are provided in config.
+ * 2. **Controlled**: When `isOpen` is provided in config, the parent owns state;
+ *    `toggle` only calls `onOpenChange` and never mutates internal state.
  * 3. **Uncontrolled**: Self-managed internal state with optional `defaultIsOpen`.
+ *    `onOpenChange`, if supplied, is invoked in addition to the internal update —
+ *    it is a notification callback, not a signal that the component is controlled.
  *
  * @example
  * ```
@@ -111,15 +114,26 @@ export function useCollapsible(
     isOpen = internalIsOpen;
   }
 
-  // Toggle handler dispatches to the appropriate controller
+  // Toggle handler dispatches to the appropriate controller.
+  //
+  // Controlled vs uncontrolled is decided by whether `isOpen` was provided —
+  // mirroring how `isOpen` is derived above. `onOpenChange` is a notification
+  // callback, not a signal of control: an uncontrolled component may still want
+  // to observe changes. So in uncontrolled mode we drive internal state AND
+  // fire the callback; only in controlled mode do we defer entirely to the
+  // parent via the callback.
   const toggle = () => {
     if (isControlledByGroup && value != null) {
       group.toggle(value);
-    } else if (config?.onOpenChange) {
-      config.onOpenChange(!isOpen);
-    } else {
-      setInternalIsOpen(prev => !prev);
+      return;
     }
+    const next = !isOpen;
+    // Uncontrolled: internal state is the source of truth, so update it.
+    if (config?.isOpen === undefined) {
+      setInternalIsOpen(next);
+    }
+    // Always notify — for both controlled and uncontrolled usage.
+    config?.onOpenChange?.(next);
   };
 
   return {isEnabled, isOpen, toggle};

package/src/CommandPalette/CommandPalette.tsx

@@ -438,11 +438,13 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
   const contextValue = useMemo(
     () => ({
       // Input uses optimisticSearch — reflects keystrokes immediately.
-      // setSearch calls setOptimisticSearch for instant feedback then
-      // triggers the async search directly (no effect indirection).
+      // setSearch calls setOptimisticSearch inside a transition for instant
+      // feedback then triggers the async search directly (no effect indirection).
       search: optimisticSearch,
       setSearch: (query: string) => {
-        setOptimisticSearch(query);
+        startTransition(() => {
+          setOptimisticSearch(query);
+        });
         runSearch(query);
       },
       value,

package/src/CommandPalette/CommandPaletteEmpty.doc.mjs

@@ -16,6 +16,11 @@ export const docs = {
       required: true,
     },
   ],
+  playground: {
+    defaults: {
+      children: 'No results found. Try a different search.',
+    },
+  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteEmpty.tsx

@@ -20,7 +20,9 @@ import {
   typeScaleVars,
   typographyVars,
 } from '../theme/tokens.stylex';
+import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   empty: {
@@ -64,9 +66,21 @@ export interface CommandPaletteEmptyProps extends BaseProps<HTMLDivElement> {
 export function CommandPaletteEmpty({
   ref,
   children,
+  xstyle,
+  className,
+  style,
+  ...props
 }: CommandPaletteEmptyProps) {
   return (
-    <div ref={ref} {...stylex.props(styles.empty)}>
+    <div
+      ref={ref}
+      {...mergeProps(
+        themeProps('command-palette-empty'),
+        stylex.props(styles.empty, xstyle),
+        className,
+        style,
+      )}
+      {...props}>
       {children}
     </div>
   );