Align context-menu to architecture goals (#198)

* Align context-menu to architecture goals (tone, cva-only styling)

Add a `tone` variant (neutral/danger) to all item-row parts so destructive
actions are expressed via a prop rather than ad-hoc colored children.
Move the submenu trigger's popup-open highlight out of an inline cx() call
into a dedicated `contextMenuSubmenuTriggerVariants` in variants.ts — component
files now contain no cx() calls.  Update both the ui- and components-tier
stories to pass explicit tone props.

Closes #125

* Fix color contrast on danger-tone context-menu items

text-danger-secondary (red-700, #e7000b) on bg-layer-1 yields 4.36:1 — just
below the 4.5:1 WCAG AA threshold and fails the axe a11y gate. Promote the
resting state to text-danger-primary (red-800) which passes, keeping the same
token used in badge, banner and field for danger text.

* Extend context-menu item anatomy into single-element ui parts

The menu rows still composed their layout in the components tier with raw
className spans (label, shortcut, trailing check) and baked a sized icon into
the submenu trigger, so the components tier carried styling and the checkbox/
radio indicators baked in a default Check child.

Add the missing item-region parts as ui parts, each rendering one element with
its cva in ui/context-menu/variants.ts:

- ContextMenuItemIcon — leading icon slot (node-slot, sized to the row --node-size)
- ContextMenuItemLabel — the growing label
- ContextMenuItemShortcut — trailing keyboard-shortcut text
- ContextMenuItemIndicator — trailing single-select check slot (node-slot)
- ContextMenuSubmenuTriggerIndicator — submenu caret slot (node-slot, RTL-mirrored)

The checkbox/radio item indicators no longer bake a Check child or a size
literal; they size whatever icon is passed via the shared node-slot class. The
components tier now only composes these parts, so it holds no className, cx or
cva. Stories compose the new parts and register them as subcomponents.

Author: lifeiscontent

packages/propel/src/components/context-menu/context-menu-item.tsx

@@ -1,26 +1,30 @@
 import { Check } from "lucide-react";
 import type * as React from "react";
 
-import { NodeSlot } from "../../internal/node-slot";
 import {
+  ContextMenuItemIcon,
+  ContextMenuItemIndicator,
+  ContextMenuItemLabel,
   ContextMenuItem as ContextMenuItemRoot,
   type ContextMenuItemProps as ContextMenuItemRootProps,
+  ContextMenuItemShortcut,
 } from "../../ui/context-menu";
 
 export type ContextMenuItemProps = Omit<ContextMenuItemRootProps, "label"> & {
-  /** Leading content before the label. */
+  /** Leading icon before the label. */
   inlineStartNode?: React.ReactNode;
   /** The primary text of the row. */
   label?: React.ReactNode;
-  /** Trailing content after the label. */
+  /** Trailing keyboard-shortcut hint after the label. */
   inlineEndNode?: React.ReactNode;
   /** Single-select selected state. */
   selected?: boolean;
 };
 
 /**
- * The ready-made menu row: composes the atomic `ContextMenuItem` and lays out optional leading and
- * trailing content slots, the label, and a trailing check for single-select selected state.
+ * The ready-made menu row: composes the atomic `ContextMenuItem` and its region parts — a leading
+ * icon, the label, an optional trailing shortcut hint, and a trailing check for single-select
+ * selected state. Pass `tone="danger"` for destructive actions.
  */
 export function ContextMenuItem({
   inlineStartNode,
@@ -32,13 +36,17 @@ export function ContextMenuItem({
 }: ContextMenuItemProps) {
   return (
     <ContextMenuItemRoot {...props}>
-      {inlineStartNode != null ? <NodeSlot>{inlineStartNode}</NodeSlot> : null}
-      <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
-      {inlineEndNode != null ? <NodeSlot>{inlineEndNode}</NodeSlot> : null}
+      {inlineStartNode != null ? (
+        <ContextMenuItemIcon>{inlineStartNode}</ContextMenuItemIcon>
+      ) : null}
+      <ContextMenuItemLabel>{label ?? children}</ContextMenuItemLabel>
+      {inlineEndNode != null ? (
+        <ContextMenuItemShortcut>{inlineEndNode}</ContextMenuItemShortcut>
+      ) : null}
       {selected ? (
-        <span className="flex size-4 shrink-0 items-center justify-center">
-          <Check className="size-4 text-icon-accent-primary" aria-hidden="true" />
-        </span>
+        <ContextMenuItemIndicator>
+          <Check />
+        </ContextMenuItemIndicator>
       ) : null}
     </ContextMenuItemRoot>
   );

packages/propel/src/components/context-menu/context-menu-link-item.tsx

@@ -1,23 +1,25 @@
 import type * as React from "react";
 
-import { NodeSlot } from "../../internal/node-slot";
 import {
+  ContextMenuItemIcon,
+  ContextMenuItemLabel,
   ContextMenuLinkItem as ContextMenuLinkItemRoot,
   type ContextMenuLinkItemProps as ContextMenuLinkItemRootProps,
+  ContextMenuItemShortcut,
 } from "../../ui/context-menu";
 
 export type ContextMenuLinkItemProps = Omit<ContextMenuLinkItemRootProps, "label"> & {
-  /** Leading content before the label. */
+  /** Leading icon before the label. */
   inlineStartNode?: React.ReactNode;
   /** The primary text of the row. */
   label?: React.ReactNode;
-  /** Trailing content after the label. */
+  /** Trailing hint after the label. */
   inlineEndNode?: React.ReactNode;
 };
 
 /**
- * The ready-made navigational menu row: composes the atomic `ContextMenuLinkItem` and lays out
- * optional leading and trailing content slots around the label.
+ * The ready-made navigational menu row: composes the atomic `ContextMenuLinkItem` and its region
+ * parts — a leading icon, the label, and an optional trailing hint.
  */
 export function ContextMenuLinkItem({
   inlineStartNode,
@@ -28,9 +30,13 @@ export function ContextMenuLinkItem({
 }: ContextMenuLinkItemProps) {
   return (
     <ContextMenuLinkItemRoot {...props}>
-      {inlineStartNode != null ? <NodeSlot>{inlineStartNode}</NodeSlot> : null}
-      <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
-      {inlineEndNode != null ? <NodeSlot>{inlineEndNode}</NodeSlot> : null}
+      {inlineStartNode != null ? (
+        <ContextMenuItemIcon>{inlineStartNode}</ContextMenuItemIcon>
+      ) : null}
+      <ContextMenuItemLabel>{label ?? children}</ContextMenuItemLabel>
+      {inlineEndNode != null ? (
+        <ContextMenuItemShortcut>{inlineEndNode}</ContextMenuItemShortcut>
+      ) : null}
     </ContextMenuLinkItemRoot>
   );
 }

packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx

@@ -1,24 +1,27 @@
 import { ChevronRight } from "lucide-react";
 import type * as React from "react";
 
-import { NodeSlot } from "../../internal/node-slot";
 import {
+  ContextMenuItemIcon,
+  ContextMenuItemLabel,
+  ContextMenuItemShortcut,
   ContextMenuSubmenuTrigger as ContextMenuSubmenuTriggerRoot,
   type ContextMenuSubmenuTriggerProps as ContextMenuSubmenuTriggerRootProps,
+  ContextMenuSubmenuTriggerIndicator,
 } from "../../ui/context-menu";
 
 export type ContextMenuSubmenuTriggerProps = Omit<ContextMenuSubmenuTriggerRootProps, "label"> & {
-  /** Leading content before the label. */
+  /** Leading icon before the label. */
   inlineStartNode?: React.ReactNode;
   /** The primary text of the row. */
   label?: React.ReactNode;
-  /** Trailing content before the chevron. */
+  /** Trailing hint before the submenu caret. */
   inlineEndNode?: React.ReactNode;
 };
 
 /**
- * The ready-made submenu trigger: composes the atomic `ContextMenuSubmenuTrigger` and lays out
- * optional leading and trailing content slots around the label, plus the chevron that points toward
+ * The ready-made submenu trigger: composes the atomic `ContextMenuSubmenuTrigger` and its region
+ * parts — a leading icon, the label, an optional trailing hint, and the caret that points toward
  * the submenu.
  */
 export function ContextMenuSubmenuTrigger({
@@ -30,13 +33,16 @@ export function ContextMenuSubmenuTrigger({
 }: ContextMenuSubmenuTriggerProps) {
   return (
     <ContextMenuSubmenuTriggerRoot {...props}>
-      {inlineStartNode != null ? <NodeSlot>{inlineStartNode}</NodeSlot> : null}
-      <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
-      {inlineEndNode != null ? <NodeSlot>{inlineEndNode}</NodeSlot> : null}
-      <ChevronRight
-        className="size-4 shrink-0 text-icon-tertiary group-data-disabled/item:text-icon-disabled rtl:-scale-x-100"
-        aria-hidden="true"
-      />
+      {inlineStartNode != null ? (
+        <ContextMenuItemIcon>{inlineStartNode}</ContextMenuItemIcon>
+      ) : null}
+      <ContextMenuItemLabel>{label ?? children}</ContextMenuItemLabel>
+      {inlineEndNode != null ? (
+        <ContextMenuItemShortcut>{inlineEndNode}</ContextMenuItemShortcut>
+      ) : null}
+      <ContextMenuSubmenuTriggerIndicator>
+        <ChevronRight />
+      </ContextMenuSubmenuTriggerIndicator>
     </ContextMenuSubmenuTriggerRoot>
   );
 }

packages/propel/src/components/context-menu/context-menu.stories.tsx

@@ -5,6 +5,10 @@ import { expect, fireEvent, waitFor } from "storybook/test";
 import {
   ContextMenu,
   ContextMenuItem,
+  ContextMenuItemIcon,
+  ContextMenuItemIndicator,
+  ContextMenuItemLabel,
+  ContextMenuItemShortcut,
   ContextMenuPopup,
   ContextMenuPortal,
   ContextMenuPositioner,
@@ -24,6 +28,10 @@ const meta = {
     ContextMenuPositioner,
     ContextMenuPopup,
     ContextMenuItem,
+    ContextMenuItemIcon,
+    ContextMenuItemLabel,
+    ContextMenuItemShortcut,
+    ContextMenuItemIndicator,
     ContextMenuSeparator,
   },
 } satisfies Meta<typeof ContextMenu>;
@@ -45,25 +53,25 @@ export const Default: Story = {
         <ContextMenuPositioner>
           <ContextMenuPopup>
             <ContextMenuItem
+              tone="neutral"
               inlineStartNode={<Scissors />}
               label="Cut"
-              inlineEndNode={<span className="text-12 text-tertiary">⌘X</span>}
+              inlineEndNode="⌘X"
             />
             <ContextMenuItem
+              tone="neutral"
               inlineStartNode={<Copy />}
               label="Copy"
-              inlineEndNode={<span className="text-12 text-tertiary">⌘C</span>}
+              inlineEndNode="⌘C"
             />
             <ContextMenuItem
+              tone="neutral"
               inlineStartNode={<ClipboardPaste />}
               label="Paste"
-              inlineEndNode={<span className="text-12 text-tertiary">⌘V</span>}
+              inlineEndNode="⌘V"
             />
             <ContextMenuSeparator />
-            <ContextMenuItem
-              inlineStartNode={<Trash2 className="text-danger-primary" />}
-              label={<span className="text-danger-primary">Delete</span>}
-            />
+            <ContextMenuItem tone="danger" inlineStartNode={<Trash2 />} label="Delete" />
           </ContextMenuPopup>
         </ContextMenuPositioner>
       </ContextMenuPortal>

packages/propel/src/components/context-menu/index.tsx

@@ -19,6 +19,14 @@ export {
   ContextMenuGroupLabel,
   type ContextMenuGroupLabelProps,
   type ContextMenuGroupProps,
+  ContextMenuItemIcon,
+  type ContextMenuItemIconProps,
+  ContextMenuItemIndicator,
+  type ContextMenuItemIndicatorProps,
+  ContextMenuItemLabel,
+  type ContextMenuItemLabelProps,
+  ContextMenuItemShortcut,
+  type ContextMenuItemShortcutProps,
   ContextMenuPopup,
   type ContextMenuPopupProps,
   ContextMenuPortal,
@@ -35,6 +43,8 @@ export {
   type ContextMenuSeparatorProps,
   ContextMenuSubmenuRoot,
   type ContextMenuSubmenuRootProps,
+  ContextMenuSubmenuTriggerIndicator,
+  type ContextMenuSubmenuTriggerIndicatorProps,
   ContextMenuTrigger,
   type ContextMenuTriggerProps,
 } from "../../ui/context-menu";

packages/propel/src/ui/context-menu/context-menu-checkbox-item-indicator.tsx

@@ -1,5 +1,4 @@
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-import { Check } from "lucide-react";
 
 import { contextMenuItemIndicatorVariants } from "./variants";
 
@@ -8,14 +7,15 @@ export type ContextMenuCheckboxItemIndicatorProps = Omit<
   "className" | "style"
 >;
 
-/** Shows whether the checkbox item is ticked. Wraps `ContextMenu.CheckboxItemIndicator` 1:1. */
+/**
+ * Shows whether the checkbox item is ticked. Sizes its single child (the tick icon) to the row's
+ * `--node-size`. Wraps `ContextMenu.CheckboxItemIndicator` 1:1.
+ */
 export function ContextMenuCheckboxItemIndicator(props: ContextMenuCheckboxItemIndicatorProps) {
   return (
     <BaseContextMenu.CheckboxItemIndicator
       className={contextMenuItemIndicatorVariants()}
       {...props}
-    >
-      {props.children ?? <Check className="size-4" aria-hidden="true" />}
-    </BaseContextMenu.CheckboxItemIndicator>
+    />
   );
 }

packages/propel/src/ui/context-menu/context-menu-checkbox-item.tsx

@@ -1,13 +1,21 @@
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { type VariantProps } from "class-variance-authority";
 
 import { contextMenuItemVariants } from "./variants";
 
+type ContextMenuCheckboxItemTone = NonNullable<
+  VariantProps<typeof contextMenuItemVariants>["tone"]
+>;
+
 export type ContextMenuCheckboxItemProps = Omit<
   BaseContextMenu.CheckboxItem.Props,
   "className" | "style"
->;
+> & {
+  /** Color palette for the row. `neutral` for standard toggles; `danger` for destructive ones. */
+  tone: ContextMenuCheckboxItemTone;
+};
 
 /** A menu row that toggles a setting on or off. Wraps `ContextMenu.CheckboxItem` 1:1. */
-export function ContextMenuCheckboxItem(props: ContextMenuCheckboxItemProps) {
-  return <BaseContextMenu.CheckboxItem className={contextMenuItemVariants()} {...props} />;
+export function ContextMenuCheckboxItem({ tone, ...props }: ContextMenuCheckboxItemProps) {
+  return <BaseContextMenu.CheckboxItem className={contextMenuItemVariants({ tone })} {...props} />;
 }

packages/propel/src/ui/context-menu/context-menu-item-icon.tsx

@@ -0,0 +1,17 @@
+import type * as React from "react";
+
+import { contextMenuItemIconVariants } from "./variants";
+
+export type ContextMenuItemIconProps = Omit<
+  React.ComponentPropsWithoutRef<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The leading icon region of a menu row. Sizes its single child to the row's `--node-size`, so
+ * callers pass a bare icon. Decorative (the row's label carries the accessible name), so it is
+ * `aria-hidden`.
+ */
+export function ContextMenuItemIcon(props: ContextMenuItemIconProps) {
+  return <span aria-hidden className={contextMenuItemIconVariants()} {...props} />;
+}

packages/propel/src/ui/context-menu/context-menu-item-indicator.tsx

@@ -0,0 +1,17 @@
+import type * as React from "react";
+
+import { contextMenuItemIndicatorVariants } from "./variants";
+
+export type ContextMenuItemIndicatorProps = Omit<
+  React.ComponentPropsWithoutRef<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The trailing selection-check region of a single-select `ContextMenuItem`. Sizes its single child
+ * to the row's `--node-size` and tints it accent. Decorative (the row carries the selected state),
+ * so it is `aria-hidden`.
+ */
+export function ContextMenuItemIndicator(props: ContextMenuItemIndicatorProps) {
+  return <span aria-hidden className={contextMenuItemIndicatorVariants()} {...props} />;
+}

packages/propel/src/ui/context-menu/context-menu-item-label.tsx

@@ -0,0 +1,16 @@
+import type * as React from "react";
+
+import { contextMenuItemLabelVariants } from "./variants";
+
+export type ContextMenuItemLabelProps = Omit<
+  React.ComponentPropsWithoutRef<"span">,
+  "className" | "style"
+>;
+
+/**
+ * The label region of a menu row. Grows to fill the row so trailing regions (shortcut, indicator,
+ * submenu caret) sit at the inline-end; truncates rather than overflowing.
+ */
+export function ContextMenuItemLabel(props: ContextMenuItemLabelProps) {
+  return <span className={contextMenuItemLabelVariants()} {...props} />;
+}