ContextMenuItemView

import {
  ButtonContextMenuItemView,
  ButtonItemIconSize,
  ContextMenu,
  ContextMenuItemView,
  EmojiContextMenuItemView,
  IconTintColor,
} from '@wearables-ui-toolkit/mrbd';

<ContextMenu aria-label="Message actions" onDismiss={closeMenu}>
  <ButtonContextMenuItemView
    title="Reply"
    icon={replyIcon}
    onClick={reply}
  />
  <ButtonContextMenuItemView
    title="Delete"
    icon={trashIcon}
    iconSize={ButtonItemIconSize.LARGE}
    iconTintColor={IconTintColor.NEGATIVE}
    onClick={confirmDelete}
  />
  <EmojiContextMenuItemView
    emoji="👍"
    ariaLabel="React with thumbs up"
    isEmojiSelected={reaction === 'thumbsUp'}
    onClick={() => react('thumbsUp')}
  />
  <ContextMenuItemView ariaLabel="Add reaction" onClick={openPicker}>
    <MyReactionGlyph />
  </ContextMenuItemView>
</ContextMenu>;

<ButtonContextMenuItemView
  icon={starIcon}
  ariaLabel="Add to favourites"
  onClick={addToFavourites}
/>

• Sizing. The item enforces a minimum square footprint and grows with its content. width and height are not part of the API; a larger box can only come from style, which is merged after the minimums.
• Shape. Corners are fully rounded by default, giving the pill silhouette the menu expects. Swap shapeProvider only if the whole menu is being restyled coherently.
• Material. The item has no idle surface fill, and its glow stroke is held at zero in the idle state so it fades up into focus and press rather than popping in. That is what lets a row of items look like one continuous menu surface.
• Convenience layout. With no children, icon and label are laid out as a single centred horizontal row: icon first, then text, separated by a spacing token. The label stays on one line and truncates with an ellipsis.
• Presets.ButtonContextMenuItemView uses the same horizontal layout with the label type ramp and a tinted icon, but its title stays on one line without truncating: a long title widens the item and pushes the rest of the row into the scroller. EmojiContextMenuItemView centres the emoji and, when isEmojiSelected is set, adds a small dot beneath it.
• Activation. Enter and Space activate the focused item; a pointer click works too. Left and Right are consumed by the parent menu for movement, so an item must not rely on horizontal keys of its own.
• Custom content. Passing children replaces the built-in layout but keeps the item’s role, material, shape, and minimum size. Anything focusable inside the item becomes the focus target the parent menu moves to.

• Every item exposes role="menuitem".
• Icons are decorative and carry no name of their own. The accessible name comes from ariaLabel, then title (or emoji, or label on the base component).
• An item with an icon and no text must set ariaLabel, otherwise it is announced as an unnamed menu item.
• An item built from children has no derived name at all — set ariaLabel.
• isEmojiSelected is a visual dot only. If selection state must be spoken, put it in ariaLabel.
• Do not rely on iconTintColor alone to convey that an action is destructive; the label has to say so too.

• Use ButtonContextMenuItemView for labelled actions and EmojiContextMenuItemView for reactions.
• Give destructive actions the NEGATIVE tint and a confirmation path because color alone is not a warning.
• Keep labels to one short, verb-led phrase that fits on a single line.
• An ariaLabel is required for every icon-only item so the action has an accessible name.

• Prefer the provided presets over building a custom row that imitates a menu item.
• Preserve the component-owned width, height, and internal padding.
• Keep the menu item as one interaction target; a nested control creates ambiguous focus and activation.
• Use these items inside ContextMenu, which provides their navigation and menu semantics.