@astryxdesign/core 0.1.4-canary.39ffd21 → 0.1.4-canary.3d64ef2

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();
@@ -397,4 +413,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/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/CommandPaletteGroup.doc.mjs

@@ -27,6 +27,16 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
+  playground: {
+    defaults: {
+      heading: 'Navigation',
+      children: [
+        {__element: 'CommandPaletteItem', props: {value: 'home', onSelect: undefined}, children: 'Go Home'},
+        {__element: 'CommandPaletteItem', props: {value: 'settings', onSelect: undefined}, children: 'Open Settings'},
+        {__element: 'CommandPaletteItem', props: {value: 'profile', onSelect: undefined}, children: 'View Profile'},
+      ],
+    },
+  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteInput.doc.mjs

@@ -57,6 +57,12 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
+  playground: {
+    defaults: {
+      placeholder: 'Search commands, files, or actions...',
+      hasAutoFocus: false,
+    },
+  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteItem.doc.mjs

@@ -50,6 +50,12 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
+  playground: {
+    defaults: {
+      value: 'go-home',
+      children: 'Go to Dashboard',
+    },
+  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteList.doc.mjs

@@ -27,6 +27,15 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
+  playground: {
+    defaults: {
+      children: [
+        {__element: 'CommandPaletteItem', props: {value: 'home', onSelect: undefined}, children: 'Go Home'},
+        {__element: 'CommandPaletteItem', props: {value: 'settings', onSelect: undefined}, children: 'Open Settings'},
+        {__element: 'CommandPaletteItem', props: {value: 'profile', onSelect: undefined}, children: 'View Profile'},
+      ],
+    },
+  },
 };
 
 export const docsZh = {

package/src/ContextMenu/ContextMenu.doc.mjs

@@ -78,6 +78,21 @@ export const docs = {
       { guidance: false, description: 'Place more than 10–12 items in a single menu without grouping them into sections.' },
     ],
   },
+  playground: {
+    defaults: {
+      children: {
+        __element: 'Card',
+        props: {padding: 6},
+        children: {__element: 'Text', props: {color: 'secondary'}, children: 'Right-click this area'},
+      },
+      items: [
+        {label: 'Edit'},
+        {label: 'Duplicate'},
+        {type: 'divider'},
+        {label: 'Delete'},
+      ],
+    },
+  },
 };
 
 /** @type {import('../docs-types').TranslationDoc} */

package/src/ContextMenu/ContextMenu.test.tsx

@@ -172,6 +172,21 @@ describe('ContextMenu', () => {
     expect(preventDefault).toHaveBeenCalled();
   });
 
+  it('prevents default context menu on the opened menu container', () => {
+    render(
+      <ContextMenu items={[{label: 'Item 1'}]}>
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+
+    fireEvent.contextMenu(screen.getByText('Right-click me'));
+    const menu = screen.getByRole('menu', {hidden: true});
+    const event = new MouseEvent('contextmenu', {bubbles: true});
+    const preventDefault = vi.spyOn(event, 'preventDefault');
+    menu.dispatchEvent(event);
+    expect(preventDefault).toHaveBeenCalled();
+  });
+
   it('does not open when isDisabled is true', () => {
     render(
       <ContextMenu items={[{label: 'Item 1'}]} isDisabled>

package/src/ContextMenu/ContextMenu.tsx

@@ -87,6 +87,7 @@ const styles = stylex.create({
     transitionProperty: 'opacity',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
+    userSelect: 'none',
   },
   popover: {
     minWidth: '160px',
@@ -409,6 +410,7 @@ export function ContextMenu({
           role="menu"
           aria-label={label}
           onKeyDown={listKeyDown}
+          onContextMenu={e => e.preventDefault()}
           {...mergeProps(
             themeProps('context-menu'),
             stylex.props(styles.menu, xstyle),