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

package/src/List/ListItem.tsx

@@ -4,9 +4,10 @@
 
 /**
  * @file ListItem.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, List edge compensation,
- *   CheckboxInput, and the marker or task checkbox a ListMarkerScope sets
- *   (Markdown's nested lists and the task items of mixed lists)
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, the List row edge
+ *   treatment, CheckboxInput, and the marker or task checkbox a
+ *   ListMarkerScope sets (Markdown's nested lists and the task items of mixed
+ *   lists)
  * @output Exports ListItem component, ListItemProps type
  * @position Core implementation; consumed by List, index.ts, tested by List.test.tsx
  *
@@ -23,6 +24,7 @@
 
 import {use, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
+import type {StyleXStyles} from '@stylexjs/stylex';
 import {
   colorVars,
   spacingVars,
@@ -34,7 +36,7 @@ import {ListContext, type ListMarker} from './ListContext';
 import {CheckboxInput} from '../CheckboxInput';
 import {mergeProps} from '../utils';
 import {Item} from '../Item';
-import type {ItemSwipeActions, ItemSwipeBehavior} from '../Item';
+import type {ItemAlign, ItemSwipeActions, ItemSwipeBehavior} from '../Item';
 import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
@@ -44,6 +46,13 @@ import {themeProps} from '../utils/themeProps';
 export interface ListItemProps extends BaseProps<HTMLLIElement> {
   /** Ref forwarded to the root element */
   ref?: React.Ref<HTMLLIElement>;
+  /**
+   * Vertical alignment of the start and end content against the label,
+   * forwarded to Item. Use `first-line` to keep the start and end content level with the
+   * first line of a wrapped label.
+   * @default 'center'
+   */
+  align?: ItemAlign;
   /**
    * Primary text label for the item.
    *
@@ -142,23 +151,37 @@ const styles = stylex.create({
   withCounter: {
     counterIncrement: 'astryx-list',
   },
-  // List's inline edge compensation cancels as much of the row's built-in
-  // inline inset as the container padding allows (e.g. under a heading).
-  // The margins read --_item-inset-inline — the same variable Item derives
-  // its paddingInline from — on the row element itself (custom properties
-  // only cascade downward, so the <ul> could not read it). Density changes
-  // and theme paddingInline overrides on `item` move both values together.
-  // Each edge clamps against ITS OWN container padding var: a single
-  // start-var clamp on both margins over-cancels the end edge under
-  // asymmetric container padding (16px start / 4px end) and the selected
-  // row paints past the outer border. Logical properties keep RTL correct,
-  // and a zero-padding/full-bleed surface (min(inset, 0px) = 0px) leaves
-  // the row in place instead of pulling it outside its content edge.
-  inlineEdgeCompensation: {
+  // List's edge treatments. Each reads --_item-inset-inline, the variable
+  // Item derives its paddingInline from, on the row itself (custom properties
+  // only cascade downward, so the <ul> cannot read it); density and theme
+  // paddingInline overrides on `item` move it. Each edge resolves against ITS
+  // OWN container padding var, so asymmetric padding never over-reaches an
+  // edge, and logical properties keep RTL correct.
+  //
+  // 'flush': no inset, so content meets the row's edges.
+  edgeFlush: {
+    '--_item-inset-inline': '0px',
+  },
+  // 'outset': the list reaches the container's padding edge (List.tsx); the
+  // row steps back in by whatever padding its inset does not fill, so the row
+  // reaches min(inset, container padding) past the content line and its text
+  // lands on that line when the padding is at least the inset.
+  edgeOutset: {
     marginInlineStart:
-      'calc(-1 * min(var(--_item-inset-inline), var(--container-padding-inline-start, 0px)))',
+      'max(var(--container-padding-inline-start, 0px) - var(--_item-inset-inline), 0px)',
     marginInlineEnd:
-      'calc(-1 * min(var(--_item-inset-inline), var(--container-padding-inline-end, 0px)))',
+      'max(var(--container-padding-inline-end, 0px) - var(--_item-inset-inline), 0px)',
+  },
+  // 'bleed': the row fills the list, which reaches the container's padding
+  // edge (List.tsx); its text sits on the container's padding line, never
+  // closer to the row's edge than its own inset. Square corners: the row
+  // meets the container's straight sides.
+  edgeBleed: {
+    paddingInlineStart:
+      'max(var(--container-padding-inline-start, 0px), var(--_item-inset-inline))',
+    paddingInlineEnd:
+      'max(var(--container-padding-inline-end, 0px), var(--_item-inset-inline))',
+    borderRadius: 0,
   },
   withDivider: {
     borderBlockEndWidth: borderVars['--border-width'],
@@ -296,6 +319,7 @@ export function ListItem({
   rel,
   isDisabled = false,
   isSelected = false,
+  align,
   xstyle,
   className,
   style,
@@ -305,8 +329,8 @@ export function ListItem({
   const ctx = use(ListContext);
   const density = ctx?.density ?? 'balanced';
   const hasDividers = ctx?.hasDividers ?? false;
+  const edge = ctx?.edge ?? 'padded';
   const listStyle = ctx?.listStyle ?? 'none';
-  const edgeCompensation = ctx?.edgeCompensation;
   const hasMarkers = listStyle !== 'none';
   // ListMarkerScope may name another marker for this item.
   const markerKind: ListMarker | null =
@@ -360,14 +384,19 @@ export function ListItem({
       rel={rel}
       isDisabled={isDisabled}
       isSelected={isSelected}
+      align={align}
       density={density}
-      xstyle={[
-        hasMarkers && styles.withCounter,
-        hasDividers && styles.withDivider,
-        hasDividers && embeddedStyles.noRadius,
-        edgeCompensation === 'inline' && styles.inlineEdgeCompensation,
-        xstyle,
-      ]}
+      xstyle={
+        [
+          hasMarkers && styles.withCounter,
+          hasDividers && styles.withDivider,
+          hasDividers && embeddedStyles.noRadius,
+          edge === 'flush' && styles.edgeFlush,
+          edge === 'outset' && styles.edgeOutset,
+          edge === 'bleed' && styles.edgeBleed,
+          xstyle,
+        ] as StyleXStyles
+      }
       {...mergeProps(themeProps('list-item'), {className, style})}
       {...restProps}
     />

package/src/List/index.ts

@@ -12,6 +12,6 @@
  */
 
 export {List} from './List';
-export type {ListProps, ListStyle, ListDensity} from './List';
+export type {ListProps, ListStyle, ListDensity, ListEdge} from './List';
 export {ListItem} from './ListItem';
 export type {ListItemProps} from './ListItem';

package/src/Markdown/Markdown.tsx

@@ -405,6 +405,16 @@ const markdownTableCellStyles = stylex.create({
   code: {
     wordBreak: 'normal',
   },
+  // The grid's outer edge. `dividers="grid"` draws the lines *between* cells
+  // and stops at the table's rim, so without this the top, bottom, and sides
+  // stay open and the grid reads as unfinished. On the table element, not the
+  // wrapper, so `border-collapse: collapse` merges it with the cell lines
+  // into one 1px rule rather than doubling up at the edge.
+  tableOuterEdge: {
+    borderWidth: borderVars['--border-width'],
+    borderStyle: 'solid',
+    borderColor: colorVars['--color-border'],
+  },
 });
 
 /**
@@ -1905,7 +1915,10 @@ function renderBlock(
             ),
           )}
           {...lineStamps}>
-          <Table dividers="rows" textOverflow="wrap">
+          <Table
+            dividers="grid"
+            textOverflow="wrap"
+            xstyle={markdownTableCellStyles.tableOuterEdge}>
             <TableHeader>
               <TableRow>
                 {header?.children.map((h, i) => (

package/src/Markdown/plugins/frontmatter.test.tsx

@@ -117,6 +117,31 @@ describe('createMarkdownFrontmatter', () => {
     ).not.toThrow();
   });
 
+  it('accepts the decoded fields record as metadata (identity parse)', () => {
+    const fields = createMarkdownFrontmatter({
+      name: 'fields',
+      parse: record => record,
+    });
+    const source = '---\ntitle: Release notes\n__proto__: kept\n---\n# Shipped';
+
+    const parsed = fields.parse(source);
+    expect(parsed).toEqual({
+      status: 'match',
+      contentStart: source.indexOf('# Shipped'),
+      metadata: {title: 'Release notes', ['__proto__']: 'kept'},
+    });
+    if (parsed.status !== 'match') {
+      throw new Error('expected a frontmatter match');
+    }
+    // A field named like a prototype key stays an ordinary own field.
+    expect(Object.hasOwn(parsed.metadata, '__proto__')).toBe(true);
+    expect(Object.getPrototypeOf(parsed.metadata)).toBe(Object.prototype);
+
+    const root = parseMarkdownAst(source, {plugins: [fields.plugin]});
+    expect(fields.getMetadata(root)).toEqual(parsed.metadata);
+    expect(JSON.stringify(root)).not.toContain('title: Release notes');
+  });
+
   it('returns a transform plugin that composes in the ordered pipeline', () => {
     expectTypeOf<MarkdownTransform>().toBeFunction();
     const root = parseMarkdownAst(SOURCE, {plugins: [documentMetadata.plugin]});

package/src/Markdown/plugins/frontmatter.ts

@@ -104,18 +104,22 @@ function readFrontmatter(source: string):
   if (close == null) {
     return {status: 'defer'};
   }
-  const fields: Record<string, string> = Object.create(null);
+  const entries = new Map<string, string>();
   for (const line of body.slice(0, close.index).split(/\r?\n/)) {
     if (line.trim() === '') {
       continue;
     }
     const separator = line.indexOf(':');
     const key = line.slice(0, separator).trim();
-    if (separator <= 0 || key === '' || Object.hasOwn(fields, key)) {
+    if (separator <= 0 || key === '' || entries.has(key)) {
       return {status: 'none'};
     }
-    fields[key] = line.slice(separator + 1).trim();
+    entries.set(key, line.slice(separator + 1).trim());
   }
+  // A plain object, so a parser that returns the record unchanged passes the
+  // JSON-like metadata check. `fromEntries` defines every key as an own data
+  // property, so a field named `__proto__` stays a field.
+  const fields: Record<string, string> = Object.fromEntries(entries);
   let end = openingLength + close.index + close[0].length;
   if (source.startsWith('\r\n', end)) {
     end += 2;

package/src/MetadataList/MetadataList.doc.mjs

@@ -43,8 +43,8 @@ export const docs = {
     {
       name: 'label',
       type: "{ position?: 'start' | 'top', width?: number | string }",
-      description: "Label display configuration. position controls label placement, width sets a custom label column width. Defaults to { position: 'top' } for multi-column layouts.",
-      default: "{ position: 'start' } (single-column) / { position: 'top' } (multi-column)",
+      description: "Label display configuration. position controls label placement, width sets a custom label column width. Defaults to { position: 'top' } for multi-column layouts. Position is ignored in horizontal mode, which always uses { position: 'top' }.",
+      default: "{ position: 'start' } (vertical single-column) / { position: 'top' } (multi-column or horizontal)",
     },
     {
       name: 'maxNumOfItems',

package/src/MetadataList/MetadataList.test.tsx

@@ -124,6 +124,30 @@ describe('MetadataList', () => {
     expect(screen.getByText('B')).toBeInTheDocument();
   });
 
+  it('uses top labels in horizontal orientation even when position is start', () => {
+    render(
+      <MetadataList orientation="horizontal" label={{position: 'start'}}>
+        <MetadataListItem label="A">1</MetadataListItem>
+      </MetadataList>,
+    );
+
+    const item = screen.getByRole('term').closest('.astryx-metadata-list-item');
+    expect(item).toContainElement(screen.getByRole('definition'));
+  });
+
+  it('defaults to side labels and preserves width when position is omitted', () => {
+    const {container} = render(
+      <MetadataList label={{width: 120}}>
+        <MetadataListItem label="A">1</MetadataListItem>
+      </MetadataList>,
+    );
+
+    const list = container.querySelector('dl');
+    expect(list?.getAttribute('style')).toContain('120px minmax(0, 1fr)');
+    expect(screen.getByRole('term').parentElement).toBe(list);
+    expect(screen.getByRole('definition').parentElement).toBe(list);
+  });
+
   describe('numeric columns', () => {
     // A fixed column count is a runtime value, so it arrives as a StyleX
     // dynamic style: the template lands in the element's inline style (as the
@@ -163,6 +187,20 @@ describe('MetadataList', () => {
       expect(gridTemplateOf(container)).not.toContain('repeat(');
     });
 
+    it('defaults to top labels for columns={2} with a width-only label config', () => {
+      const {container} = render(
+        <MetadataList columns={2} label={{width: 260}}>
+          <MetadataListItem label="A">1</MetadataListItem>
+        </MetadataList>,
+      );
+
+      expect(gridTemplateOf(container)).toContain('repeat(2, 1fr)');
+      const item = screen
+        .getByRole('term')
+        .closest('.astryx-metadata-list-item');
+      expect(item).toContainElement(screen.getByRole('definition'));
+    });
+
     it('ignores numeric columns in horizontal orientation', () => {
       const {container} = render(
         <MetadataList columns={3} orientation="horizontal">

package/src/MetadataList/MetadataList.tsx

@@ -206,7 +206,14 @@ export function MetadataList({
     columns === 'multi' || (typeof columns === 'number' && columns > 1);
   // Default to 'top' for multi-column and horizontal layouts since side labels
   // don't work well when items are in separate grid cells.
-  const labelConfig = label ?? (isMultiColumn ? LABEL_TOP : LABEL_START);
+  const defaultLabelConfig = isMultiColumn ? LABEL_TOP : LABEL_START;
+  const labelConfig = useMemo(
+    () => ({
+      ...label,
+      position: label?.position ?? defaultLabelConfig.position,
+    }),
+    [label, defaultLabelConfig],
+  );
   const [isShowAll, setIsShowAll] = useState(false);
   const contentId = useId();
   const t = useTranslator();

package/src/MetadataList/MetadataListContext.tsx

@@ -12,7 +12,7 @@
 import {createLayerScopedContext as createContext} from '../Layer/layerScopedContext';
 
 export interface MetadataListLabelConfig {
-  position: 'start' | 'top';
+  position?: 'start' | 'top';
   width?: number | string;
 }
 

package/src/MultiSelector/MultiSelector.test.tsx

@@ -35,6 +35,7 @@ import {generateThemeCSS} from '../theme/generateThemeRules';
 import {selectorPresentationStyles} from '../Selector/selectorPresentation.stylex';
 import {groupStyles} from '../InputGroup/groupStyles';
 import {InputGroup, InputGroupText} from '../InputGroup';
+import {focusVars} from '../theme/tokens.stylex';
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -4083,6 +4084,164 @@ describe('MultiSelector option actions (grid)', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
+  it('draws the standard focus ring on the active action cell, from the focus tokens', async () => {
+    // jsdom resolves no custom property, so the ring is read from StyleX
+    // classes: a class name hashes one property and its value, and the same
+    // declaration yields the same class wherever it is written.
+    const ring = stylex.create({
+      active: {
+        outlineWidth: focusVars['--focus-outline-width'],
+        outlineStyle: focusVars['--focus-outline-style'],
+        outlineColor: focusVars['--focus-outline-color'],
+        outlineOffset: focusVars['--focus-outline-offset'],
+      },
+    });
+    const ringClasses = stylex
+      .props(ring.active)
+      .className!.split(' ')
+      .filter(token => /^x[a-z0-9]+$/.test(token));
+    expect(ringClasses).toHaveLength(4);
+
+    const user = userEvent.setup();
+    render(
+      <MultiSelector
+        label="Labels"
+        options={OPTIONS}
+        value={[]}
+        onChange={() => {}}
+      />,
+    );
+    const trigger = screen.getByRole('combobox', {name: 'Labels'});
+    await user.click(trigger);
+    const bug = screen.getByRole('row', {name: 'Bug', ...h});
+    const actionCell = bug.children[1] as HTMLElement;
+    for (const token of ringClasses) {
+      expect(actionCell).not.toHaveClass(token);
+    }
+    fireEvent.keyDown(trigger, {key: 'ArrowRight'});
+    expect(trigger).toHaveAttribute('aria-activedescendant', actionCell.id);
+    for (const token of ringClasses) {
+      expect(actionCell).toHaveClass(token);
+    }
+  });
+
+  it('draws no focus ring on an action cell highlighted after pointer input, until a key moves the highlight', async () => {
+    const ring = stylex.create({
+      active: {
+        outlineWidth: focusVars['--focus-outline-width'],
+        outlineStyle: focusVars['--focus-outline-style'],
+        outlineColor: focusVars['--focus-outline-color'],
+        outlineOffset: focusVars['--focus-outline-offset'],
+      },
+    });
+    const ringClasses = stylex
+      .props(ring.active)
+      .className!.split(' ')
+      .filter(token => /^x[a-z0-9]+$/.test(token));
+    expect(ringClasses).toHaveLength(4);
+
+    const user = userEvent.setup();
+    render(
+      <MultiSelector
+        label="Labels"
+        options={OPTIONS}
+        value={[]}
+        onChange={() => {}}
+      />,
+    );
+    const trigger = screen.getByRole('combobox', {name: 'Labels'});
+    await user.click(trigger);
+    const bug = screen.getByRole('row', {name: 'Bug', ...h});
+    const actionCell = bug.children[1] as HTMLElement;
+    fireEvent.mouseEnter(actionCell);
+    // The hover moved the highlight onto the action cell, without the ring.
+    expect(trigger).toHaveAttribute('aria-activedescendant', actionCell.id);
+    for (const token of ringClasses) {
+      expect(actionCell).not.toHaveClass(token);
+    }
+    // Keyboard navigation back onto the cell draws it.
+    fireEvent.keyDown(trigger, {key: 'ArrowLeft'});
+    fireEvent.keyDown(trigger, {key: 'ArrowRight'});
+    expect(trigger).toHaveAttribute('aria-activedescendant', actionCell.id);
+    for (const token of ringClasses) {
+      expect(actionCell).toHaveClass(token);
+    }
+  });
+
+  describe('ring under mixed input', () => {
+    const ringClasses = () => {
+      const ring = stylex.create({
+        active: {
+          outlineWidth: focusVars['--focus-outline-width'],
+          outlineStyle: focusVars['--focus-outline-style'],
+          outlineColor: focusVars['--focus-outline-color'],
+          outlineOffset: focusVars['--focus-outline-offset'],
+        },
+      });
+      return stylex
+        .props(ring.active)
+        .className!.split(' ')
+        .filter(token => /^x[a-z0-9]+$/.test(token));
+    };
+    const hasRing = (cell: HTMLElement) =>
+      ringClasses().every(token => cell.classList.contains(token));
+
+    async function openWithKeyboardOnBugAction() {
+      const user = userEvent.setup();
+      render(
+        <MultiSelector
+          label="Labels"
+          options={OPTIONS}
+          value={[]}
+          onChange={() => {}}
+        />,
+      );
+      const trigger = screen.getByRole('combobox', {name: 'Labels'});
+      await user.click(trigger);
+      const row = (name: string) => screen.getByRole('row', {name, ...h});
+      fireEvent.keyDown(trigger, {key: 'ArrowRight'});
+      const bugAction = row('Bug').children[1] as HTMLElement;
+      expect(trigger).toHaveAttribute('aria-activedescendant', bugAction.id);
+      expect(hasRing(bugAction)).toBe(true);
+      return {trigger, row, bugAction};
+    }
+
+    it('keeps the ring when the pointer crosses a disabled option the highlight ignores', async () => {
+      const {trigger, row, bugAction} = await openWithKeyboardOnBugAction();
+      fireEvent.mouseEnter(row('Docs').children[0]);
+      expect(trigger).toHaveAttribute('aria-activedescendant', bugAction.id);
+      expect(hasRing(bugAction)).toBe(true);
+    });
+
+    it('follows the keyboard modality when a hover moves the highlight to another action', async () => {
+      const {trigger, row} = await openWithKeyboardOnBugAction();
+      const docsAction = row('Docs').children[1] as HTMLElement;
+      fireEvent.mouseEnter(docsAction);
+      expect(trigger).toHaveAttribute('aria-activedescendant', docsAction.id);
+      expect(hasRing(docsAction)).toBe(true);
+    });
+
+    it('draws no ring for a modifier chord after pointer input', async () => {
+      const user = userEvent.setup();
+      render(
+        <MultiSelector
+          label="Labels"
+          options={OPTIONS}
+          value={[]}
+          onChange={() => {}}
+        />,
+      );
+      const trigger = screen.getByRole('combobox', {name: 'Labels'});
+      await user.click(trigger);
+      const bugAction = screen.getByRole('row', {name: 'Bug', ...h})
+        .children[1] as HTMLElement;
+      fireEvent.mouseEnter(bugAction);
+      expect(hasRing(bugAction)).toBe(false);
+      fireEvent.keyDown(trigger, {key: 'ArrowRight', ctrlKey: true});
+      expect(hasRing(bugAction)).toBe(false);
+    });
+  });
+
   it('the inline-end arrow reaches the action cell, Enter fires it, inline-start returns', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();

package/src/MultiSelector/MultiSelector.tsx

@@ -50,6 +50,7 @@ import type {IndicatorPosition} from '../Indicator';
 import {Badge} from '../Badge';
 import {
   colorVars,
+  focusVars,
   sizeVars,
   spacingVars,
   radiusVars,
@@ -74,7 +75,10 @@ import {
 import {useMultiCombobox} from './hooks';
 import {getInputARIA, isImeKeyEvent, mergeProps} from '../utils';
 import {devWarn, warnOnce} from '../utils/devWarning';
-import {FOCUS_OUTLINE_PARTS} from '../utils/focusOutline.stylex';
+import {
+  getInteractionModality,
+  useInteractionModalityTracking,
+} from '../utils/interactionModality';
 import {useAnnounce} from '../hooks/useAnnounce';
 import {FOCUSABLE_SELECTOR} from '../hooks/focusableSelector';
 import {useAnnounceRenderedText} from '../hooks/useAnnounceRenderedText';
@@ -436,11 +440,15 @@ const styles = stylex.create({
     flexShrink: 0,
     borderRadius: radiusVars['--radius-element'],
   },
+  // The standard ring, from the focus tokens themselves: inside
+  // `stylex.create` StyleX resolves an imported `defineVars` group, and a
+  // plain object such as `FOCUS_OUTLINE_PARTS` compiles to variables nothing
+  // defines.
   actionCellActive: {
-    outlineWidth: FOCUS_OUTLINE_PARTS.outlineWidth,
-    outlineStyle: FOCUS_OUTLINE_PARTS.outlineStyle,
-    outlineColor: FOCUS_OUTLINE_PARTS.outlineColor,
-    outlineOffset: FOCUS_OUTLINE_PARTS.outlineOffset,
+    outlineWidth: focusVars['--focus-outline-width'],
+    outlineStyle: focusVars['--focus-outline-style'],
+    outlineColor: focusVars['--focus-outline-color'],
+    outlineOffset: focusVars['--focus-outline-offset'],
   },
 
   // Empty state
@@ -1752,8 +1760,8 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     getActionCellId,
     activeDescendantId,
     onTriggerClick,
-    onKeyDown,
-    onItemMouseEnter,
+    onKeyDown: onComboboxKeyDown,
+    onItemMouseEnter: onComboboxItemMouseEnter,
   } = useMultiCombobox({
     selectableItems: sortedItems,
     isDisabled: isDisabled || isEffectivelyReadOnly,
@@ -1784,6 +1792,29 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     ),
   });
 
+  // A hover moves the highlight too, but the focus ring follows the shared
+  // interaction modality (architecture:interaction-modality INV1): it is read
+  // whenever a key or the pointer moves the highlight, so an action cell
+  // highlighted after pointer input keeps the hover treatment and no ring.
+  useInteractionModalityTracking();
+  const [isKeyboardHighlight, setIsKeyboardHighlight] = useState(
+    () => getInteractionModality() === 'keyboard',
+  );
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      onComboboxKeyDown(event);
+      setIsKeyboardHighlight(getInteractionModality() === 'keyboard');
+    },
+    [onComboboxKeyDown],
+  );
+  const onItemMouseEnter = useCallback(
+    (...args: Parameters<typeof onComboboxItemMouseEnter>) => {
+      onComboboxItemMouseEnter(...args);
+      setIsKeyboardHighlight(getInteractionModality() === 'keyboard');
+    },
+    [onComboboxItemMouseEnter],
+  );
+
   // The trigger button owns its click so a consumer `onClick`, which lands on
   // the button, composes after the built-in toggle. A press elsewhere in the
   // control box (padding, start icon, chevron) still opens the panel.
@@ -2117,6 +2148,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
                   styles.actionCell,
                   isHighlighted &&
                     highlightedCell === 'action' &&
+                    isKeyboardHighlight &&
                     styles.actionCellActive,
                 )}>
                 {isSelectAll || isCreate ? null : item.action}
@@ -2131,6 +2163,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     [
       isGrid,
       highlightedCell,
+      isKeyboardHighlight,
       getActionCellId,
       renderOption,
       indicatorPosition,