From b204ec85a804f4e3cd6a747b50867fd30e13f649 Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Mon, 15 Jun 2026 22:40:26 +0700
Subject: [PATCH 1/2] Dropdown: standardize leading/trailing slot names

Rename DropdownItem icon -> leadingIcon and endIcon -> trailingIcon, and
drop the value text slot (callers compose value text into trailing) plus
its with-value variant. Rename DropdownSubTrigger icon -> leadingIcon and
DropdownLabel action -> trailing so every slot follows the same
leading*/trailing* vocabulary used by Button and Input.

Update the dropdown, toolbar, and breadcrumb consumers on main to match.
---
 .../components/dropdown/dropdown.stories.tsx  | 38 +++++-----
 .../propel/src/components/dropdown/index.tsx  | 69 +++++++++----------
 .../components/toolbar/toolbar.stories.tsx    | 20 ++++--
 3 files changed, 71 insertions(+), 56 deletions(-)

diff --git a/packages/propel/src/components/dropdown/dropdown.stories.tsx b/packages/propel/src/components/dropdown/dropdown.stories.tsx
index dce11668..9c69b5f8 100644
--- a/packages/propel/src/components/dropdown/dropdown.stories.tsx
+++ b/packages/propel/src/components/dropdown/dropdown.stories.tsx
@@ -210,7 +210,7 @@ export const Status: Story = {
             <DropdownItem
               key={s.key}
               variant="default"
-              icon={s.icon}
+              leadingIcon={s.icon}
               label={s.label}
               selected={selected === s.key}
               closeOnClick={false}
@@ -263,7 +263,7 @@ export const Labels: Story = {
             // rule, so the "Add label" row mounts directly beneath it with no extra line.
             <DropdownItem
               variant="default"
-              icon={<Plus className="text-icon-secondary" />}
+              leadingIcon={<Plus className="text-icon-secondary" />}
               label={`Add label "${trimmed}"`}
               closeOnClick={false}
             />
@@ -312,13 +312,18 @@ export const ActionMenu: Story = {
         Actions
       </DropdownTrigger>
       <DropdownContent width="sm">
-        <DropdownItem variant="default" icon={<Pencil />} label="Edit" />
-        <DropdownItem variant="default" icon={<Copy />} label="Make a copy" />
-        <DropdownItem variant="default" icon={<ExternalLink />} label="Open in new tab" />
-        <DropdownItem variant="with-value" icon={<Link2 />} label="Copy link" value="⌘L" />
+        <DropdownItem variant="default" leadingIcon={<Pencil />} label="Edit" />
+        <DropdownItem variant="default" leadingIcon={<Copy />} label="Make a copy" />
+        <DropdownItem variant="default" leadingIcon={<ExternalLink />} label="Open in new tab" />
+        <DropdownItem
+          variant="default"
+          leadingIcon={<Link2 />}
+          label="Copy link"
+          trailing={<span className="text-12 text-tertiary">⌘L</span>}
+        />
         <DropdownSeparator />
         <DropdownItem
-          icon={<Trash2 />}
+          leadingIcon={<Trash2 />}
           label="Archive"
           variant="with-description"
           description="Only completed or cancelled work items can be archived"
@@ -327,7 +332,7 @@ export const ActionMenu: Story = {
         <DropdownSeparator />
         <DropdownItem
           variant="default"
-          icon={<Trash2 className="text-danger-primary" />}
+          leadingIcon={<Trash2 className="text-danger-primary" />}
           label={<span className="text-danger-primary">Delete</span>}
         />
       </DropdownContent>
@@ -394,7 +399,7 @@ export const Description: Story = {
         </DropdownTrigger>
         <DropdownContent width="lg">
           <DropdownItem
-            icon={<Lock />}
+            leadingIcon={<Lock />}
             label="Private"
             variant="with-description"
             description="Accessible only by invite"
@@ -403,7 +408,7 @@ export const Description: Story = {
             onClick={() => setSelected("private")}
           />
           <DropdownItem
-            icon={<Globe />}
+            leadingIcon={<Globe />}
             label="Public"
             variant="with-description"
             description="Anyone in the workspace except Guests can join"
@@ -701,12 +706,13 @@ export const Filters: Story = {
                 <DropdownGroup>
                   {/* The category heading is itself a menuitem (valid `role="menu"`
                       child) so its collapse chevron stays interactive without breaking
-                      ARIA. The label is the section title; the chevron is the endIcon. */}
+                      ARIA. The label is the section title; the chevron is the
+                      trailingIcon. */}
                   <DropdownItem
                     variant="default"
                     label={section.title}
                     aria-expanded={!isCollapsed}
-                    endIcon={
+                    trailingIcon={
                       isCollapsed ? (
                         <ChevronRight aria-hidden="true" />
                       ) : (
@@ -810,7 +816,7 @@ export const EmptyState: Story = {
         >
           {visible.length > 0 ? (
             visible.map((s) => (
-              <DropdownItem key={s.key} variant="default" icon={s.icon} label={s.label} />
+              <DropdownItem key={s.key} variant="default" leadingIcon={s.icon} label={s.label} />
             ))
           ) : (
             <div className="px-2 py-2 text-13 text-tertiary">No matching results</div>
@@ -874,7 +880,7 @@ export const Submenu: Story = {
               <DropdownItem
                 key={p.key}
                 variant="default"
-                icon={p.icon}
+                leadingIcon={p.icon}
                 label={p.label}
                 closeOnClick={false}
               />
@@ -895,7 +901,7 @@ export const Submenu: Story = {
               <DropdownItem
                 key={s.key}
                 variant="default"
-                icon={s.icon}
+                leadingIcon={s.icon}
                 label={s.label}
                 closeOnClick={false}
               />
@@ -916,7 +922,7 @@ export const Submenu: Story = {
               <DropdownItem
                 key={a.key}
                 variant="default"
-                icon={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
+                leadingIcon={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
                 label={a.name}
                 closeOnClick={false}
               />
diff --git a/packages/propel/src/components/dropdown/index.tsx b/packages/propel/src/components/dropdown/index.tsx
index 8e3efc3a..f52ad33d 100644
--- a/packages/propel/src/components/dropdown/index.tsx
+++ b/packages/propel/src/components/dropdown/index.tsx
@@ -123,10 +123,10 @@ export function DropdownContent({
   );
 }
 
-// One row. `variant` is the Figma layout axis: `default` is a single line,
-// `with-description` stacks a muted second line, `with-value` reserves a trailing
-// value column. `selected`/`disabled` are primitive state, not variants. Hover &
-// keyboard-highlight share the subtle transparent overlay; disabled fades the row.
+// One row. `variant` is the Figma layout axis: `default` is a single line and
+// `with-description` stacks a muted second line. `selected`/`disabled` are primitive
+// state, not variants. Hover & keyboard-highlight share the subtle transparent
+// overlay; disabled fades the row.
 const dropdownItemVariants = cva(
   cx(
     // Items are 34px tall (Figma); `rounded-md` radius per design.
@@ -143,7 +143,6 @@ const dropdownItemVariants = cva(
         // (align-start) so it sits with the first line; the row grows for the
         // description and keeps a matching 6px bottom.
         "with-description": "min-h-[34px] items-start py-1.5",
-        "with-value": "h-[34px] items-center",
       },
       // `default` is a normal selectable row (highlight on hover/keyboard). `link`
       // is a "View all"-style affordance: a pointer cursor and no hover background.
@@ -164,12 +163,15 @@ export type DropdownItemProps = Omit<
 > & {
   /**
    * Row layout (required). `default` is a single line; `with-description` stacks a
-   * muted second line under the label; `with-value` reserves a trailing value slot.
-   * Selected/disabled are state props, not variants.
+   * muted second line under the label. Selected/disabled are state props, not
+   * variants.
    */
   variant: DropdownItemVariant;
-  /** Leading content, typically an icon. Rendered before the label. */
-  icon?: React.ReactNode;
+  /**
+   * Leading icon, rendered before the label in the 16px icon box. Pair it with
+   * `leading` for a full-size control such as a `Checkbox` or `Avatar`.
+   */
+  leadingIcon?: React.ReactNode;
   /**
    * Leading control rendered *before* the icon at full size (no icon box) — use
    * for a composed propel control such as a `Checkbox`, `Radio`, `Avatar`, or a
@@ -182,18 +184,16 @@ export type DropdownItemProps = Omit<
   description?: React.ReactNode;
   /**
    * Muted text shown inline after the label (e.g. a language's English name). Sits
-   * between the label and any trailing value, on the same line.
+   * between the label and the trailing slots, on the same line as the label.
    */
   secondaryText?: React.ReactNode;
-  /** Trailing value text (use with `variant="with-value"`). */
-  value?: React.ReactNode;
   /**
-   * Trailing content after the value slot (e.g. a `Badge` count, a chevron, or a
-   * keyboard shortcut). Use instead of (or alongside) `value` for rich content.
+   * Trailing rich content (e.g. a `Badge` count, a keyboard shortcut, or value text).
+   * Compose value text here yourself — there is no longer a dedicated value slot.
    */
   trailing?: React.ReactNode;
-  /** Trailing content after the value slot, typically an icon or shortcut. */
-  endIcon?: React.ReactNode;
+  /** Trailing icon, rendered after `trailing` in the 16px icon box. */
+  trailingIcon?: React.ReactNode;
   /**
    * Single-select selected state: keeps the row's own icon and marks the selection
    * with a trailing checkmark (the row's icon is never replaced). Distinct from the
@@ -211,20 +211,20 @@ export type DropdownItemProps = Omit<
 /**
  * A selectable menu row. Closes the menu when clicked (Base UI default). An item is
  * an optional leading control/icon + label (+ optional description / inline
- * secondary text / trailing value / badge / end icon) — all of it content, laid out
- * by `variant`. Pass `selected` for the single-select leading-checkmark pattern.
+ * secondary text / trailing rich content / trailing icon) — all of it content, laid
+ * out by `variant`. Pass `selected` for the single-select leading-checkmark pattern.
+ * Trailing value text is composed into `trailing` by the caller.
  */
 export function DropdownItem({
   variant,
   emphasis = "default",
-  icon,
+  leadingIcon,
   leading,
   label,
   description,
   secondaryText,
-  value,
   trailing,
-  endIcon,
+  trailingIcon,
   selected,
   children,
   ...props
@@ -232,11 +232,11 @@ export function DropdownItem({
   return (
     <Menu.Item className={dropdownItemVariants({ variant, emphasis })} {...props}>
       {leading != null ? <span className="flex shrink-0 items-center">{leading}</span> : null}
-      {icon ? (
+      {leadingIcon ? (
         // 16px icon centered in a 20px-tall box so it aligns with the first text line
         // even when the row is align-start (top-aligned) for a two-line layout.
         <span className="flex h-5 w-4 shrink-0 items-center justify-center text-icon-secondary group-data-disabled/item:text-icon-disabled">
-          {icon}
+          {leadingIcon}
         </span>
       ) : null}
       <span className="flex min-w-0 flex-1 flex-col">
@@ -254,11 +254,10 @@ export function DropdownItem({
           </span>
         ) : null}
       </span>
-      {value != null ? <span className="shrink-0 text-12 text-tertiary">{value}</span> : null}
       {trailing != null ? <span className="flex shrink-0 items-center">{trailing}</span> : null}
-      {endIcon ? (
+      {trailingIcon ? (
         <span className="flex h-5 w-4 shrink-0 items-center justify-center text-icon-secondary group-data-disabled/item:text-icon-disabled">
-          {endIcon}
+          {trailingIcon}
         </span>
       ) : null}
       {/* Selection is marked with a trailing check — the row's own icon is kept. */}
@@ -380,7 +379,7 @@ export type DropdownLabelProps = Omit<
    * Optional trailing slot on the heading row — e.g. a "View all" link or a count.
    * Sits at the end of the label line (the Figma "Dropdown header" trailing slot).
    */
-  action?: React.ReactNode;
+  trailing?: React.ReactNode;
   children?: React.ReactNode;
 };
 
@@ -388,16 +387,16 @@ export type DropdownLabelProps = Omit<
  * A non-interactive section heading for a group of items (the Figma "Dropdown
  * header": `text/12`, `text/tertiary`, title-case). Must be rendered inside a
  * `DropdownGroup`, as the first child, to label the items that follow it. Pass
- * `action` for a trailing "View all" link or count.
+ * `trailing` for a trailing "View all" link or count.
  */
-export function DropdownLabel({ action, children, ...props }: DropdownLabelProps) {
+export function DropdownLabel({ trailing, children, ...props }: DropdownLabelProps) {
   return (
     <Menu.GroupLabel
       className="flex items-center gap-1.5 px-2 py-1.5 text-12 text-tertiary"
       {...props}
     >
       <span className="min-w-0 flex-1 truncate">{children}</span>
-      {action != null ? <span className="shrink-0">{action}</span> : null}
+      {trailing != null ? <span className="shrink-0">{trailing}</span> : null}
     </Menu.GroupLabel>
   );
 }
@@ -491,8 +490,8 @@ export type DropdownSubTriggerProps = Omit<
   React.ComponentProps<typeof Menu.SubmenuTrigger>,
   "className" | "style" | "label"
 > & {
-  /** Leading content, typically an icon. */
-  icon?: React.ReactNode;
+  /** Leading icon, rendered before the label in the 16px icon box. */
+  leadingIcon?: React.ReactNode;
   /** The primary text of the row. */
   label?: React.ReactNode;
   /** Trailing content before the chevron — e.g. a `Badge` count. */
@@ -505,7 +504,7 @@ export type DropdownSubTriggerProps = Omit<
  * `DropdownSub`, paired with a `DropdownSubContent`.
  */
 export function DropdownSubTrigger({
-  icon,
+  leadingIcon,
   label,
   trailing,
   children,
@@ -521,9 +520,9 @@ export function DropdownSubTrigger({
       )}
       {...props}
     >
-      {icon ? (
+      {leadingIcon ? (
         <span className="flex size-4 shrink-0 items-center justify-center text-icon-secondary group-data-disabled/item:text-icon-disabled">
-          {icon}
+          {leadingIcon}
         </span>
       ) : null}
       <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
diff --git a/packages/propel/src/components/toolbar/toolbar.stories.tsx b/packages/propel/src/components/toolbar/toolbar.stories.tsx
index 12802d77..9f3d0a06 100644
--- a/packages/propel/src/components/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/components/toolbar/toolbar.stories.tsx
@@ -186,12 +186,22 @@ export const ComposableMenu: Story = {
       <ToolbarDropdown defaultOpen>
         <ToolbarDropdownTrigger aria-label="Text style">Text</ToolbarDropdownTrigger>
         <ToolbarDropdownContent>
-          <ToolbarDropdownItem variant="default" icon={<Pilcrow />} label="Paragraph" selected />
-          <ToolbarDropdownItem variant="default" icon={<Heading1 />} label="Heading 1" />
-          <ToolbarDropdownItem variant="default" icon={<Heading2 />} label="Heading 2" />
-          <ToolbarDropdownItem variant="default" icon={<Heading3 />} label="Heading 3" />
+          <ToolbarDropdownItem
+            variant="default"
+            leadingIcon={<Pilcrow />}
+            label="Paragraph"
+            selected
+          />
+          <ToolbarDropdownItem variant="default" leadingIcon={<Heading1 />} label="Heading 1" />
+          <ToolbarDropdownItem variant="default" leadingIcon={<Heading2 />} label="Heading 2" />
+          <ToolbarDropdownItem variant="default" leadingIcon={<Heading3 />} label="Heading 3" />
           <ToolbarDropdownSeparator />
-          <ToolbarDropdownItem variant="default" icon={<Code />} label="Code block" disabled />
+          <ToolbarDropdownItem
+            variant="default"
+            leadingIcon={<Code />}
+            label="Code block"
+            disabled
+          />
         </ToolbarDropdownContent>
       </ToolbarDropdown>
     </Toolbar>

From fe14e6770e8ec360ee763521b237f18406f3d9b3 Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Mon, 15 Jun 2026 23:17:37 +0700
Subject: [PATCH 2/2] Dropdown: use inlineStartNode/inlineEndNode node slots,
 not leadingIcon/trailing

Aligns the Dropdown slots with the library's node-slot convention (Button/IconButton
use inlineStartNode/inlineEndNode + nodeSlotClass + --node-size), instead of the
leadingIcon/leading/trailing/trailingIcon/icon/value/action names. Each menu part now
exposes a single logical inlineStartNode + inlineEndNode:

- DropdownItem: leadingIcon + leading -> inlineStartNode; trailing + trailingIcon ->
  inlineEndNode (value was already folded into trailing).
- DropdownCheckboxItem: icon -> inlineStartNode; value -> inlineEndNode.
- DropdownSubTrigger: leadingIcon -> inlineStartNode; trailing -> inlineEndNode.
- DropdownLabel: trailing -> inlineEndNode.

Icons in a slot size to --node-size (16px) and inherit the row color; full-size
controls (Checkbox/Avatar/swatch) size themselves. Stories updated to match.
---
 .../components/dropdown/dropdown.stories.tsx  |  61 +++++----
 .../propel/src/components/dropdown/index.tsx  | 128 +++++++-----------
 .../components/toolbar/toolbar.stories.tsx    |  10 +-
 3 files changed, 93 insertions(+), 106 deletions(-)

diff --git a/packages/propel/src/components/dropdown/dropdown.stories.tsx b/packages/propel/src/components/dropdown/dropdown.stories.tsx
index 9c69b5f8..9fb70620 100644
--- a/packages/propel/src/components/dropdown/dropdown.stories.tsx
+++ b/packages/propel/src/components/dropdown/dropdown.stories.tsx
@@ -210,7 +210,7 @@ export const Status: Story = {
             <DropdownItem
               key={s.key}
               variant="default"
-              leadingIcon={s.icon}
+              inlineStartNode={s.icon}
               label={s.label}
               selected={selected === s.key}
               closeOnClick={false}
@@ -263,7 +263,7 @@ export const Labels: Story = {
             // rule, so the "Add label" row mounts directly beneath it with no extra line.
             <DropdownItem
               variant="default"
-              leadingIcon={<Plus className="text-icon-secondary" />}
+              inlineStartNode={<Plus className="text-icon-secondary" />}
               label={`Add label "${trimmed}"`}
               closeOnClick={false}
             />
@@ -271,7 +271,7 @@ export const Labels: Story = {
           {visible.map((l) => (
             <DropdownCheckboxItem
               key={l.key}
-              icon={<ColorSwatch className={l.color} />}
+              inlineStartNode={<ColorSwatch className={l.color} />}
               label={l.label}
               checked={Boolean(checked[l.key])}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [l.key]: next }))}
@@ -312,18 +312,22 @@ export const ActionMenu: Story = {
         Actions
       </DropdownTrigger>
       <DropdownContent width="sm">
-        <DropdownItem variant="default" leadingIcon={<Pencil />} label="Edit" />
-        <DropdownItem variant="default" leadingIcon={<Copy />} label="Make a copy" />
-        <DropdownItem variant="default" leadingIcon={<ExternalLink />} label="Open in new tab" />
+        <DropdownItem variant="default" inlineStartNode={<Pencil />} label="Edit" />
+        <DropdownItem variant="default" inlineStartNode={<Copy />} label="Make a copy" />
         <DropdownItem
           variant="default"
-          leadingIcon={<Link2 />}
+          inlineStartNode={<ExternalLink />}
+          label="Open in new tab"
+        />
+        <DropdownItem
+          variant="default"
+          inlineStartNode={<Link2 />}
           label="Copy link"
-          trailing={<span className="text-12 text-tertiary">⌘L</span>}
+          inlineEndNode={<span className="text-12 text-tertiary">⌘L</span>}
         />
         <DropdownSeparator />
         <DropdownItem
-          leadingIcon={<Trash2 />}
+          inlineStartNode={<Trash2 />}
           label="Archive"
           variant="with-description"
           description="Only completed or cancelled work items can be archived"
@@ -332,7 +336,7 @@ export const ActionMenu: Story = {
         <DropdownSeparator />
         <DropdownItem
           variant="default"
-          leadingIcon={<Trash2 className="text-danger-primary" />}
+          inlineStartNode={<Trash2 className="text-danger-primary" />}
           label={<span className="text-danger-primary">Delete</span>}
         />
       </DropdownContent>
@@ -399,7 +403,7 @@ export const Description: Story = {
         </DropdownTrigger>
         <DropdownContent width="lg">
           <DropdownItem
-            leadingIcon={<Lock />}
+            inlineStartNode={<Lock />}
             label="Private"
             variant="with-description"
             description="Accessible only by invite"
@@ -408,7 +412,7 @@ export const Description: Story = {
             onClick={() => setSelected("private")}
           />
           <DropdownItem
-            leadingIcon={<Globe />}
+            inlineStartNode={<Globe />}
             label="Public"
             variant="with-description"
             description="Anyone in the workspace except Guests can join"
@@ -453,7 +457,7 @@ export const Assignees: Story = {
           {visible.map((a) => (
             <DropdownCheckboxItem
               key={a.key}
-              icon={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
+              inlineStartNode={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
               label={a.name}
               checked={Boolean(checked[a.key])}
               disabled={a.disabled}
@@ -552,7 +556,7 @@ export const Priority: Story = {
           {visible.map((p) => (
             <DropdownCheckboxItem
               key={p.key}
-              icon={p.icon}
+              inlineStartNode={p.icon}
               label={p.label}
               checked={Boolean(checked[p.key])}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [p.key]: next }))}
@@ -597,7 +601,7 @@ export const CheckedFillVisible: Story = {
           {PRIORITIES.map((p) => (
             <DropdownCheckboxItem
               key={p.key}
-              icon={p.icon}
+              inlineStartNode={p.icon}
               label={p.label}
               checked={Boolean(checked[p.key])}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [p.key]: next }))}
@@ -707,12 +711,12 @@ export const Filters: Story = {
                   {/* The category heading is itself a menuitem (valid `role="menu"`
                       child) so its collapse chevron stays interactive without breaking
                       ARIA. The label is the section title; the chevron is the
-                      trailingIcon. */}
+                      inlineEndNode. */}
                   <DropdownItem
                     variant="default"
                     label={section.title}
                     aria-expanded={!isCollapsed}
-                    trailingIcon={
+                    inlineEndNode={
                       isCollapsed ? (
                         <ChevronRight aria-hidden="true" />
                       ) : (
@@ -726,7 +730,7 @@ export const Filters: Story = {
                     ? visibleItems.map((i) => (
                         <DropdownCheckboxItem
                           key={i.key}
-                          icon={i.icon}
+                          inlineStartNode={i.icon}
                           label={i.label}
                           checked={Boolean(checked[i.key])}
                           onCheckedChange={toggle(i.key)}
@@ -816,7 +820,12 @@ export const EmptyState: Story = {
         >
           {visible.length > 0 ? (
             visible.map((s) => (
-              <DropdownItem key={s.key} variant="default" leadingIcon={s.icon} label={s.label} />
+              <DropdownItem
+                key={s.key}
+                variant="default"
+                inlineStartNode={s.icon}
+                label={s.label}
+              />
             ))
           ) : (
             <div className="px-2 py-2 text-13 text-tertiary">No matching results</div>
@@ -869,7 +878,7 @@ export const Submenu: Story = {
         <DropdownSub>
           <DropdownSubTrigger
             label="Priority"
-            trailing={
+            inlineEndNode={
               <Badge magnitude="sm" tone="neutral">
                 5
               </Badge>
@@ -880,7 +889,7 @@ export const Submenu: Story = {
               <DropdownItem
                 key={p.key}
                 variant="default"
-                leadingIcon={p.icon}
+                inlineStartNode={p.icon}
                 label={p.label}
                 closeOnClick={false}
               />
@@ -890,7 +899,7 @@ export const Submenu: Story = {
         <DropdownSub>
           <DropdownSubTrigger
             label="State"
-            trailing={
+            inlineEndNode={
               <Badge magnitude="sm" tone="neutral">
                 5
               </Badge>
@@ -901,7 +910,7 @@ export const Submenu: Story = {
               <DropdownItem
                 key={s.key}
                 variant="default"
-                leadingIcon={s.icon}
+                inlineStartNode={s.icon}
                 label={s.label}
                 closeOnClick={false}
               />
@@ -911,7 +920,7 @@ export const Submenu: Story = {
         <DropdownSub>
           <DropdownSubTrigger
             label="Assignee"
-            trailing={
+            inlineEndNode={
               <Badge magnitude="sm" tone="neutral">
                 5
               </Badge>
@@ -922,7 +931,9 @@ export const Submenu: Story = {
               <DropdownItem
                 key={a.key}
                 variant="default"
-                leadingIcon={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
+                inlineStartNode={
+                  <Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />
+                }
                 label={a.name}
                 closeOnClick={false}
               />
diff --git a/packages/propel/src/components/dropdown/index.tsx b/packages/propel/src/components/dropdown/index.tsx
index f52ad33d..f48473e5 100644
--- a/packages/propel/src/components/dropdown/index.tsx
+++ b/packages/propel/src/components/dropdown/index.tsx
@@ -2,6 +2,7 @@ import { Menu } from "@base-ui/react/menu";
 import { cva, cx, type VariantProps } from "class-variance-authority";
 import { Check, ChevronRight, Search } from "lucide-react";
 import * as React from "react";
+import { nodeSlotClass } from "../../internal/node-slot";
 import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-panel";
 import { CheckboxVisual } from "../checkbox/index";
 
@@ -129,8 +130,9 @@ export function DropdownContent({
 // overlay; disabled fades the row.
 const dropdownItemVariants = cva(
   cx(
-    // Items are 34px tall (Figma); `rounded-md` radius per design.
-    "group/item flex w-full select-none gap-2 rounded-md px-2 text-13 outline-none",
+    // Items are 34px tall (Figma); `rounded-md` radius per design. `--node-size` sizes
+    // the icons dropped into the inline-start/end node slots (16px), like Button.
+    "group/item flex w-full select-none gap-2 rounded-md px-2 text-13 outline-none [--node-size:1rem]",
     "text-secondary",
     "data-disabled:pointer-events-none data-disabled:text-disabled",
   ),
@@ -168,32 +170,25 @@ export type DropdownItemProps = Omit<
    */
   variant: DropdownItemVariant;
   /**
-   * Leading icon, rendered before the label in the 16px icon box. Pair it with
-   * `leading` for a full-size control such as a `Checkbox` or `Avatar`.
+   * Leading content before the label — an icon (sized to 16px), or a full-size control
+   * such as a `Checkbox`, `Radio`, `Avatar`, or a color swatch. Single-select rows
+   * should use `selected` instead. (Logical node slot, like Button's `inlineStartNode`.)
    */
-  leadingIcon?: React.ReactNode;
-  /**
-   * Leading control rendered *before* the icon at full size (no icon box) — use
-   * for a composed propel control such as a `Checkbox`, `Radio`, `Avatar`, or a
-   * color swatch. Single-select rows should use `selected` instead.
-   */
-  leading?: React.ReactNode;
+  inlineStartNode?: React.ReactNode;
   /** The primary text of the row. */
   label?: React.ReactNode;
   /** Muted secondary line under the label (use with `variant="with-description"`). */
   description?: React.ReactNode;
   /**
    * Muted text shown inline after the label (e.g. a language's English name). Sits
-   * between the label and the trailing slots, on the same line as the label.
+   * between the label and the trailing node, on the same line as the label.
    */
   secondaryText?: React.ReactNode;
   /**
-   * Trailing rich content (e.g. a `Badge` count, a keyboard shortcut, or value text).
-   * Compose value text here yourself — there is no longer a dedicated value slot.
+   * Trailing content after the label — a `Badge` count, a keyboard shortcut, value
+   * text, or an icon (sized to 16px). (Logical node slot, like Button's `inlineEndNode`.)
    */
-  trailing?: React.ReactNode;
-  /** Trailing icon, rendered after `trailing` in the 16px icon box. */
-  trailingIcon?: React.ReactNode;
+  inlineEndNode?: React.ReactNode;
   /**
    * Single-select selected state: keeps the row's own icon and marks the selection
    * with a trailing checkmark (the row's icon is never replaced). Distinct from the
@@ -209,36 +204,28 @@ export type DropdownItemProps = Omit<
 };
 
 /**
- * A selectable menu row. Closes the menu when clicked (Base UI default). An item is
- * an optional leading control/icon + label (+ optional description / inline
- * secondary text / trailing rich content / trailing icon) — all of it content, laid
- * out by `variant`. Pass `selected` for the single-select leading-checkmark pattern.
- * Trailing value text is composed into `trailing` by the caller.
+ * A selectable menu row: an optional `inlineStartNode` (icon or full-size control) +
+ * label (+ optional description / inline secondary text / `inlineEndNode`) — all of it
+ * content, laid out by `variant`. Closes the menu when clicked (Base UI default). Pass
+ * `selected` for the single-select trailing-checkmark pattern.
  */
 export function DropdownItem({
   variant,
   emphasis = "default",
-  leadingIcon,
-  leading,
+  inlineStartNode,
   label,
   description,
   secondaryText,
-  trailing,
-  trailingIcon,
+  inlineEndNode,
   selected,
   children,
   ...props
 }: DropdownItemProps) {
   return (
     <Menu.Item className={dropdownItemVariants({ variant, emphasis })} {...props}>
-      {leading != null ? <span className="flex shrink-0 items-center">{leading}</span> : null}
-      {leadingIcon ? (
-        // 16px icon centered in a 20px-tall box so it aligns with the first text line
-        // even when the row is align-start (top-aligned) for a two-line layout.
-        <span className="flex h-5 w-4 shrink-0 items-center justify-center text-icon-secondary group-data-disabled/item:text-icon-disabled">
-          {leadingIcon}
-        </span>
-      ) : null}
+      {/* The node slots size icons to `--node-size` (16px) and let full-size controls
+          (Checkbox/Avatar/swatch) size themselves; the row's text color cascades. */}
+      {inlineStartNode != null ? <span className={nodeSlotClass}>{inlineStartNode}</span> : null}
       <span className="flex min-w-0 flex-1 flex-col">
         <span className="flex min-w-0 items-baseline gap-1.5">
           <span className="truncate">{label ?? children}</span>
@@ -254,13 +241,8 @@ export function DropdownItem({
           </span>
         ) : null}
       </span>
-      {trailing != null ? <span className="flex shrink-0 items-center">{trailing}</span> : null}
-      {trailingIcon ? (
-        <span className="flex h-5 w-4 shrink-0 items-center justify-center text-icon-secondary group-data-disabled/item:text-icon-disabled">
-          {trailingIcon}
-        </span>
-      ) : null}
-      {/* Selection is marked with a trailing check — the row's own icon is kept. */}
+      {inlineEndNode != null ? <span className={nodeSlotClass}>{inlineEndNode}</span> : null}
+      {/* Selection is marked with a trailing check — the row's own node is kept. */}
       {selected ? (
         <span className="flex h-5 w-4 shrink-0 items-center justify-center">
           <Check className="size-4 text-icon-accent-primary" aria-hidden="true" />
@@ -275,15 +257,15 @@ export type DropdownCheckboxItemProps = Omit<
   "className" | "style" | "label"
 > & {
   /**
-   * Leading content shown after the checkbox — typically an icon, a color swatch,
-   * an `Avatar`, or a priority glyph. Use it to compose the propel components a
-   * multi-select demo calls for (Avatar for assignees, swatch for labels, etc.).
+   * Leading content shown after the checkbox — an icon (16px), a color swatch, an
+   * `Avatar`, or a priority glyph (Avatar for assignees, swatch for labels, etc.).
+   * (Logical node slot, like Button's `inlineStartNode`.)
    */
-  icon?: React.ReactNode;
+  inlineStartNode?: React.ReactNode;
   /** The primary text of the row. */
   label?: React.ReactNode;
-  /** Trailing value text. */
-  value?: React.ReactNode;
+  /** Trailing content — typically value text or a count. (Logical node slot.) */
+  inlineEndNode?: React.ReactNode;
 };
 
 /**
@@ -294,9 +276,9 @@ export type DropdownCheckboxItemProps = Omit<
  * with `checked` + `onCheckedChange`, or leave it uncontrolled with `defaultChecked`.
  */
 export function DropdownCheckboxItem({
-  icon,
+  inlineStartNode,
   label,
-  value,
+  inlineEndNode,
   checked,
   defaultChecked,
   onCheckedChange,
@@ -314,7 +296,7 @@ export function DropdownCheckboxItem({
   return (
     <Menu.CheckboxItem
       className={cx(
-        "group/item flex h-[34px] w-full cursor-default select-none items-center gap-2 rounded-md px-2 text-13 outline-none",
+        "group/item flex h-[34px] w-full cursor-default select-none items-center gap-2 rounded-md px-2 text-13 outline-none [--node-size:1rem]",
         "text-secondary",
         "data-highlighted:bg-layer-transparent-hover",
         "data-disabled:pointer-events-none data-disabled:text-disabled",
@@ -337,13 +319,11 @@ export function DropdownCheckboxItem({
       <span className="flex shrink-0 items-center">
         <CheckboxVisual tone="neutral" checked={isChecked} disabled={props.disabled} />
       </span>
-      {icon ? (
-        <span className="flex size-4 shrink-0 items-center justify-center text-icon-secondary group-data-disabled/item:text-icon-disabled">
-          {icon}
-        </span>
-      ) : null}
+      {inlineStartNode != null ? <span className={nodeSlotClass}>{inlineStartNode}</span> : null}
       <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
-      {value != null ? <span className="shrink-0 text-12 text-tertiary">{value}</span> : null}
+      {inlineEndNode != null ? (
+        <span className="shrink-0 text-12 text-tertiary">{inlineEndNode}</span>
+      ) : null}
     </Menu.CheckboxItem>
   );
 }
@@ -376,10 +356,10 @@ export type DropdownLabelProps = Omit<
   "className" | "style"
 > & {
   /**
-   * Optional trailing slot on the heading row — e.g. a "View all" link or a count.
+   * Optional trailing content on the heading row — e.g. a "View all" link or a count.
    * Sits at the end of the label line (the Figma "Dropdown header" trailing slot).
    */
-  trailing?: React.ReactNode;
+  inlineEndNode?: React.ReactNode;
   children?: React.ReactNode;
 };
 
@@ -387,16 +367,16 @@ export type DropdownLabelProps = Omit<
  * A non-interactive section heading for a group of items (the Figma "Dropdown
  * header": `text/12`, `text/tertiary`, title-case). Must be rendered inside a
  * `DropdownGroup`, as the first child, to label the items that follow it. Pass
- * `trailing` for a trailing "View all" link or count.
+ * `inlineEndNode` for a trailing "View all" link or count.
  */
-export function DropdownLabel({ trailing, children, ...props }: DropdownLabelProps) {
+export function DropdownLabel({ inlineEndNode, children, ...props }: DropdownLabelProps) {
   return (
     <Menu.GroupLabel
       className="flex items-center gap-1.5 px-2 py-1.5 text-12 text-tertiary"
       {...props}
     >
       <span className="min-w-0 flex-1 truncate">{children}</span>
-      {trailing != null ? <span className="shrink-0">{trailing}</span> : null}
+      {inlineEndNode != null ? <span className="shrink-0">{inlineEndNode}</span> : null}
     </Menu.GroupLabel>
   );
 }
@@ -490,43 +470,39 @@ export type DropdownSubTriggerProps = Omit<
   React.ComponentProps<typeof Menu.SubmenuTrigger>,
   "className" | "style" | "label"
 > & {
-  /** Leading icon, rendered before the label in the 16px icon box. */
-  leadingIcon?: React.ReactNode;
+  /** Leading content before the label — an icon (16px) or control. (Logical node slot.) */
+  inlineStartNode?: React.ReactNode;
   /** The primary text of the row. */
   label?: React.ReactNode;
-  /** Trailing content before the chevron — e.g. a `Badge` count. */
-  trailing?: React.ReactNode;
+  /** Trailing content before the chevron — e.g. a `Badge` count. (Logical node slot.) */
+  inlineEndNode?: React.ReactNode;
 };
 
 /**
  * The row that opens a submenu. Looks like a `DropdownItem` with a trailing chevron;
- * pass `trailing` for a count `Badge` before the chevron. Must be rendered inside a
- * `DropdownSub`, paired with a `DropdownSubContent`.
+ * pass `inlineEndNode` for a count `Badge` before the chevron. Must be rendered inside
+ * a `DropdownSub`, paired with a `DropdownSubContent`.
  */
 export function DropdownSubTrigger({
-  leadingIcon,
+  inlineStartNode,
   label,
-  trailing,
+  inlineEndNode,
   children,
   ...props
 }: DropdownSubTriggerProps) {
   return (
     <Menu.SubmenuTrigger
       className={cx(
-        "group/item flex h-[34px] w-full cursor-default select-none items-center gap-2 rounded-md px-2 text-13 outline-none",
+        "group/item flex h-[34px] w-full cursor-default select-none items-center gap-2 rounded-md px-2 text-13 outline-none [--node-size:1rem]",
         "text-secondary",
         "data-highlighted:bg-layer-transparent-hover data-popup-open:bg-layer-transparent-hover",
         "data-disabled:pointer-events-none data-disabled:text-disabled",
       )}
       {...props}
     >
-      {leadingIcon ? (
-        <span className="flex size-4 shrink-0 items-center justify-center text-icon-secondary group-data-disabled/item:text-icon-disabled">
-          {leadingIcon}
-        </span>
-      ) : null}
+      {inlineStartNode != null ? <span className={nodeSlotClass}>{inlineStartNode}</span> : null}
       <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
-      {trailing != null ? <span className="flex shrink-0 items-center">{trailing}</span> : null}
+      {inlineEndNode != null ? <span className={nodeSlotClass}>{inlineEndNode}</span> : null}
       <ChevronRight
         className="size-4 shrink-0 text-icon-tertiary group-data-disabled/item:text-icon-disabled rtl:-scale-x-100"
         aria-hidden="true"
diff --git a/packages/propel/src/components/toolbar/toolbar.stories.tsx b/packages/propel/src/components/toolbar/toolbar.stories.tsx
index 9f3d0a06..bc2b5031 100644
--- a/packages/propel/src/components/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/components/toolbar/toolbar.stories.tsx
@@ -188,17 +188,17 @@ export const ComposableMenu: Story = {
         <ToolbarDropdownContent>
           <ToolbarDropdownItem
             variant="default"
-            leadingIcon={<Pilcrow />}
+            inlineStartNode={<Pilcrow />}
             label="Paragraph"
             selected
           />
-          <ToolbarDropdownItem variant="default" leadingIcon={<Heading1 />} label="Heading 1" />
-          <ToolbarDropdownItem variant="default" leadingIcon={<Heading2 />} label="Heading 2" />
-          <ToolbarDropdownItem variant="default" leadingIcon={<Heading3 />} label="Heading 3" />
+          <ToolbarDropdownItem variant="default" inlineStartNode={<Heading1 />} label="Heading 1" />
+          <ToolbarDropdownItem variant="default" inlineStartNode={<Heading2 />} label="Heading 2" />
+          <ToolbarDropdownItem variant="default" inlineStartNode={<Heading3 />} label="Heading 3" />
           <ToolbarDropdownSeparator />
           <ToolbarDropdownItem
             variant="default"
-            leadingIcon={<Code />}
+            inlineStartNode={<Code />}
             label="Code block"
             disabled
           />