From 036dbd84b835069f47597bffc38ebd31db416e0a Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Mon, 6 Jul 2026 22:10:45 +0700
Subject: [PATCH 1/4] Refine Propel slot component APIs

---
 .../accordion/accordion-trigger.tsx           |  18 +-
 .../accordion/accordion.stories.tsx           |  16 +-
 .../alert-dialog/alert-dialog-close.tsx       |  10 +-
 .../alert-dialog/alert-dialog-trigger.tsx     |  10 +-
 .../alert-dialog/alert-dialog.stories.tsx     |  73 +++----
 .../anchor-button/anchor-button.stories.tsx   |  49 +++--
 .../anchor-button/anchor-button.tsx           |  27 +--
 .../autocomplete-field.stories.tsx            |  11 +-
 .../autocomplete/autocomplete-input-group.tsx |   7 +-
 .../autocomplete/autocomplete.stories.tsx     |  43 ++--
 .../src/components/badge/badge.stories.tsx    |  47 +++--
 .../propel/src/components/badge/badge.tsx     |  23 +-
 .../src/components/banner/banner.stories.tsx  |  57 +++--
 .../propel/src/components/banner/banner.tsx   |  24 ++-
 .../breadcrumb-ellipsis-trigger.tsx           |  12 +-
 .../breadcrumb/breadcrumb-menu-trigger.tsx    |  20 +-
 .../breadcrumb/breadcrumb.stories.tsx         |  37 ++--
 .../src/components/button/button.stories.tsx  |  88 +++-----
 .../propel/src/components/button/button.tsx   |  29 ++-
 .../components/checkbox/checkbox.stories.tsx  |  14 +-
 .../src/components/checkbox/checkbox.tsx      |  12 +-
 .../combobox-field/combobox-field.stories.tsx |  21 +-
 .../combobox/combobox-input-group.tsx         |   7 +-
 .../src/components/combobox/combobox-item.tsx |  12 +-
 .../components/combobox/combobox.stories.tsx  |  61 +++---
 .../context-menu-checkbox-item.tsx            |  21 +-
 .../context-menu/context-menu-item.tsx        |  25 +--
 .../context-menu/context-menu-link-item.tsx   |  25 +--
 .../context-menu/context-menu-radio-item.tsx  |  21 +-
 .../context-menu-submenu-trigger.tsx          |  23 +-
 .../context-menu/context-menu.stories.tsx     | 122 +++++------
 .../src/components/dialog/dialog-close.tsx    |  13 +-
 .../src/components/dialog/dialog-trigger.tsx  |  10 +-
 .../src/components/dialog/dialog.stories.tsx  | 155 ++++++--------
 .../src/components/drawer/drawer-close.tsx    |  10 +-
 .../src/components/drawer/drawer-trigger.tsx  |  10 +-
 .../src/components/drawer/drawer.stories.tsx  | 137 ++++++++----
 .../src/components/form/form.stories.tsx      |  43 ++--
 .../icon-button/icon-button.stories.tsx       |  15 +-
 .../components/icon-button/icon-button.tsx    |  20 +-
 packages/propel/src/components/icon/index.tsx |  39 ++++
 .../input-field/input-field.stories.tsx       |  13 +-
 .../components/input-field/input-field.tsx    |   9 +-
 .../src/components/list/list.stories.tsx      |  26 +--
 .../components/menu/menu-checkbox-item.tsx    |  24 ++-
 .../propel/src/components/menu/menu-item.tsx  |  28 +--
 .../src/components/menu/menu-link-item.tsx    |  24 ++-
 .../src/components/menu/menu-radio-item.tsx   |  24 ++-
 .../components/menu/menu-submenu-trigger.tsx  |  29 ++-
 .../src/components/menu/menu.stories.tsx      | 199 +++++++-----------
 .../components/menubar/menubar.stories.tsx    |  60 +++---
 .../navigation-menu-trigger.tsx               |   8 +-
 .../navigation-menu.stories.tsx               |   6 +-
 .../number-field/number-field.stories.tsx     |  31 +--
 .../src/components/pagination/pagination.tsx  |   5 +-
 .../propel/src/components/pill/icon-pill.tsx  |  17 +-
 .../src/components/pill/pill-switch.tsx       |  17 +-
 .../src/components/pill/pill.stories.tsx      |  73 +++----
 packages/propel/src/components/pill/pill.tsx  |  21 +-
 .../components/popover/popover.stories.tsx    |  57 ++---
 .../preview-card/preview-card.stories.tsx     |   7 +-
 .../src/components/radio/radio.stories.tsx    |  11 +-
 .../components/select-field/select-field.tsx  |  14 +-
 .../propel/src/components/select/index.tsx    |   2 +-
 .../src/components/select/select-item.tsx     |  16 +-
 .../src/components/select/select-trigger.tsx  |  15 +-
 .../src/components/select/select.stories.tsx  |  24 +--
 .../src/components/slider/slider.stories.tsx  |  11 +-
 .../src/components/switch/switch.stories.tsx  |  11 +-
 .../src/components/table/table-cell.tsx       |  13 +-
 .../src/components/table/table-head.tsx       |  10 +-
 .../src/components/table/table.stories.tsx    |  75 +++----
 packages/propel/src/components/tabs/tab.tsx   |  21 +-
 .../src/components/tabs/tabs.stories.tsx      |  46 ++--
 .../src/components/toast/toast.stories.tsx    |  11 +-
 .../toggle-group/toggle-group.stories.tsx     |  41 ++--
 .../src/components/toggle/toggle.stories.tsx  |  41 ++--
 .../propel/src/components/toggle/toggle.tsx   |   9 +-
 .../src/components/toolbar/toolbar-button.tsx |   9 +-
 .../src/components/toolbar/toolbar-link.tsx   |  12 +-
 .../toolbar/toolbar-menu-trigger.tsx          |  13 +-
 .../src/components/toolbar/toolbar-toggle.tsx |   9 +-
 .../components/toolbar/toolbar.stories.tsx    | 147 ++++---------
 .../components/tooltip/tooltip.stories.tsx    |  20 +-
 .../propel/src/components/tooltip/tooltip.tsx |  14 +-
 packages/propel/src/internal/icon.tsx         |   3 +
 .../propel/src/patterns/comment.stories.tsx   |  90 +++-----
 .../propel/src/patterns/sidebar.stories.tsx   |  97 +++------
 .../workspace-settings-sidebar.stories.tsx    |  10 +-
 .../propel/src/storybook/icon-control.tsx     |  38 ++--
 90 files changed, 1430 insertions(+), 1498 deletions(-)
 create mode 100644 packages/propel/src/components/icon/index.tsx

diff --git a/packages/propel/src/components/accordion/accordion-trigger.tsx b/packages/propel/src/components/accordion/accordion-trigger.tsx
index b4964ddb..b27b9c86 100644
--- a/packages/propel/src/components/accordion/accordion-trigger.tsx
+++ b/packages/propel/src/components/accordion/accordion-trigger.tsx
@@ -7,14 +7,18 @@ import {
   AccordionTriggerTitle,
 } from "../../elements/accordion";
 import { DisclosureIndicator } from "../../internal/disclosure-indicator";
-import { Icon } from "../../internal/icon";
 
-export type AccordionTriggerProps = Omit<BaseAccordion.Trigger.Props, "className" | "style"> & {
+export type AccordionTriggerProps = Omit<
+  BaseAccordion.Trigger.Props,
+  "children" | "className" | "style"
+> & {
   /**
-   * Node rendered before the label (inline-start), matching the Figma header icon. Sized to the
-   * trigger's `--node-size`. Decorative, kept out of the name.
+   * Element rendered before the label (inline-start), e.g. `<Icon icon={Folder} tint="secondary"
+   * />`.
    */
   icon?: React.ReactNode;
+  /** Visible trigger label. */
+  label: React.ReactNode;
 };
 
 /**
@@ -22,11 +26,11 @@ export type AccordionTriggerProps = Omit<BaseAccordion.Trigger.Props, "className
  * `AccordionTrigger`, composing an optional `icon`, the `AccordionTriggerTitle`, and the
  * `AccordionTriggerIndicator` chevron that rotates when the panel opens.
  */
-export function AccordionTrigger({ icon, children, ...props }: AccordionTriggerProps) {
+export function AccordionTrigger({ icon, label, ...props }: AccordionTriggerProps) {
   return (
     <BaseAccordion.Trigger {...props} render={<AccordionTriggerElement />}>
-      {icon ? <Icon tint="secondary">{icon}</Icon> : null}
-      <AccordionTriggerTitle>{children}</AccordionTriggerTitle>
+      {icon}
+      <AccordionTriggerTitle>{label}</AccordionTriggerTitle>
       <DisclosureIndicator motion="disclose" tint="secondary" magnitude="sm">
         <ChevronDown />
       </DisclosureIndicator>
diff --git a/packages/propel/src/components/accordion/accordion.stories.tsx b/packages/propel/src/components/accordion/accordion.stories.tsx
index cf002fb8..fa686893 100644
--- a/packages/propel/src/components/accordion/accordion.stories.tsx
+++ b/packages/propel/src/components/accordion/accordion.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CircleHelp } from "lucide-react";
 import { expect } from "storybook/test";
 
+import { Icon } from "../icon";
 import {
   Accordion,
   AccordionHeader,
@@ -75,7 +76,7 @@ export const Default: Story = {
       {ITEMS.map((item) => (
         <AccordionItem key={item.value} value={item.value}>
           <AccordionHeader>
-            <AccordionTrigger>{item.label}</AccordionTrigger>
+            <AccordionTrigger label={item.label} />
           </AccordionHeader>
           <AccordionPanel>{item.body}</AccordionPanel>
         </AccordionItem>
@@ -91,7 +92,10 @@ export const WithIcon: Story = {
       {ITEMS.map((item) => (
         <AccordionItem key={item.value} value={item.value}>
           <AccordionHeader>
-            <AccordionTrigger icon={<CircleHelp />}>{item.label}</AccordionTrigger>
+            <AccordionTrigger
+              icon={<Icon icon={CircleHelp} tint="secondary" />}
+              label={item.label}
+            />
           </AccordionHeader>
           <AccordionPanel>{item.body}</AccordionPanel>
         </AccordionItem>
@@ -131,7 +135,7 @@ export const States: Story = {
       ).map(([label, id]) => (
         <AccordionItem key={label} value={id}>
           <AccordionHeader>
-            <AccordionTrigger id={id}>{label} — What is Plane?</AccordionTrigger>
+            <AccordionTrigger id={id} label={`${label} — What is Plane?`} />
           </AccordionHeader>
           <AccordionPanel>Plane is an open-source project management tool.</AccordionPanel>
         </AccordionItem>
@@ -149,7 +153,7 @@ export const MultipleItems: Story = {
       {ITEMS.map((item) => (
         <AccordionItem key={item.value} value={item.value}>
           <AccordionHeader>
-            <AccordionTrigger>{item.label}</AccordionTrigger>
+            <AccordionTrigger label={item.label} />
           </AccordionHeader>
           <AccordionPanel>{item.body}</AccordionPanel>
         </AccordionItem>
@@ -168,7 +172,7 @@ export const Interaction: Story = {
     <Accordion>
       <AccordionItem value="a">
         <AccordionHeader>
-          <AccordionTrigger>Section A</AccordionTrigger>
+          <AccordionTrigger label="Section A" />
         </AccordionHeader>
         <AccordionPanel>Panel A content</AccordionPanel>
       </AccordionItem>
@@ -239,7 +243,7 @@ export const KeyboardToggle: Story = {
     <Accordion>
       <AccordionItem value="a">
         <AccordionHeader>
-          <AccordionTrigger>Section A</AccordionTrigger>
+          <AccordionTrigger label="Section A" />
         </AccordionHeader>
         <AccordionPanel>Panel A content</AccordionPanel>
       </AccordionItem>
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog-close.tsx b/packages/propel/src/components/alert-dialog/alert-dialog-close.tsx
index 712b9e0e..ced28284 100644
--- a/packages/propel/src/components/alert-dialog/alert-dialog-close.tsx
+++ b/packages/propel/src/components/alert-dialog/alert-dialog-close.tsx
@@ -7,9 +7,13 @@ export type AlertDialogCloseProps = Omit<BaseAlertDialog.Close.Props, "className
  * `Button` so the styled primitive's look wins via render-composition:
  *
  * ```tsx
- * <Button prominence="secondary" tone="neutral" magnitude="xl" render={<AlertDialogClose />}>
- *   Cancel
- * </Button>;
+ * <Button
+ *   prominence="secondary"
+ *   tone="neutral"
+ *   magnitude="xl"
+ *   label="Cancel"
+ *   render={<AlertDialogClose />}
+ * />;
  * ```
  *
  * Maps 1:1 to `AlertDialog.Close`.
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog-trigger.tsx b/packages/propel/src/components/alert-dialog/alert-dialog-trigger.tsx
index e5a1a3ae..1448b39f 100644
--- a/packages/propel/src/components/alert-dialog/alert-dialog-trigger.tsx
+++ b/packages/propel/src/components/alert-dialog/alert-dialog-trigger.tsx
@@ -7,9 +7,13 @@ export type AlertDialogTriggerProps = Omit<BaseAlertDialog.Trigger.Props, "class
  * primitive's look wins via render-composition:
  *
  * ```tsx
- * <Button prominence="primary" tone="danger" magnitude="xl" render={<AlertDialogTrigger />}>
- *   Delete project
- * </Button>;
+ * <Button
+ *   prominence="primary"
+ *   tone="danger"
+ *   magnitude="xl"
+ *   label="Delete project"
+ *   render={<AlertDialogTrigger />}
+ * />;
  * ```
  *
  * Base UI manages `aria-haspopup`/`aria-expanded` and focus restoration when the alert dialog
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx b/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
index f8a773d0..cf70cfa1 100644
--- a/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
+++ b/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
@@ -3,7 +3,7 @@ import { TriangleAlert } from "lucide-react";
 import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Button } from "../../elements/button";
+import { Button } from "../button";
 import {
   Dialog,
   DialogActions,
@@ -66,9 +66,8 @@ export const Default: Story = {
         tone="danger"
         magnitude="xl"
         render={<AlertDialogTrigger />}
-      >
-        Delete project
-      </Button>
+        label="Delete project"
+      />
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogIcon tone="danger">
@@ -89,18 +88,16 @@ export const Default: Story = {
             tone="neutral"
             magnitude="xl"
             render={<AlertDialogClose />}
-          >
-            Cancel
-          </Button>
+            label="Cancel"
+          />
           <Button
             sizing="hug"
             prominence="primary"
             tone="danger"
             magnitude="xl"
             render={<AlertDialogClose />}
-          >
-            Delete
-          </Button>
+            label="Delete"
+          />
         </AlertDialogActions>
       </AlertDialogContent>
     </AlertDialog>
@@ -152,13 +149,12 @@ export const OpenFromMenu: Story = {
             tone="neutral"
             magnitude="xl"
             render={<MenuTrigger />}
-          >
-            Project options
-          </Button>
+            label="Project options"
+          />
           <MenuContent sizing="sm">
-            <MenuItem>Rename</MenuItem>
-            <MenuItem>Duplicate</MenuItem>
-            <MenuItem onClick={() => setConfirmOpen(true)}>Delete project…</MenuItem>
+            <MenuItem label="Rename" />
+            <MenuItem label="Duplicate" />
+            <MenuItem onClick={() => setConfirmOpen(true)} label="Delete project…" />
           </MenuContent>
         </Menu>
         <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
@@ -182,18 +178,16 @@ export const OpenFromMenu: Story = {
                 tone="neutral"
                 magnitude="xl"
                 render={<AlertDialogClose />}
-              >
-                Cancel
-              </Button>
+                label="Cancel"
+              />
               <Button
                 sizing="hug"
                 prominence="primary"
                 tone="danger"
                 magnitude="xl"
                 render={<AlertDialogClose />}
-              >
-                Delete
-              </Button>
+                label="Delete"
+              />
             </AlertDialogActions>
           </AlertDialogContent>
         </AlertDialog>
@@ -259,9 +253,8 @@ export const CloseConfirmation: Story = {
           tone="neutral"
           magnitude="xl"
           render={<DialogTrigger />}
-        >
-          Write a comment
-        </Button>
+          label="Write a comment"
+        />
         <DialogContent magnitude="md">
           <DialogHeader>
             <DialogHeading>
@@ -289,9 +282,8 @@ export const CloseConfirmation: Story = {
               tone="neutral"
               magnitude="xl"
               render={<DialogClose />}
-            >
-              Close
-            </Button>
+              label="Close"
+            />
           </DialogActions>
           <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
             <AlertDialogContent>
@@ -313,9 +305,8 @@ export const CloseConfirmation: Story = {
                   tone="neutral"
                   magnitude="xl"
                   render={<AlertDialogClose />}
-                >
-                  Keep writing
-                </Button>
+                  label="Keep writing"
+                />
                 <Button
                   sizing="hug"
                   prominence="primary"
@@ -326,9 +317,8 @@ export const CloseConfirmation: Story = {
                     setComposerOpen(false);
                     setDraft("");
                   }}
-                >
-                  Discard
-                </Button>
+                  label="Discard"
+                />
               </AlertDialogActions>
             </AlertDialogContent>
           </AlertDialog>
@@ -411,9 +401,8 @@ export const MultipleTriggers: Story = {
             tone="neutral"
             magnitude="xl"
             render={<AlertDialogTrigger handle={deleteProjectHandle} payload={project} />}
-          >
-            Delete {project}
-          </Button>
+            label={`Delete ${project}`}
+          />
         ))}
       </div>
       <AlertDialog handle={deleteProjectHandle}>
@@ -440,18 +429,16 @@ export const MultipleTriggers: Story = {
                 tone="neutral"
                 magnitude="xl"
                 render={<AlertDialogClose />}
-              >
-                Cancel
-              </Button>
+                label="Cancel"
+              />
               <Button
                 sizing="hug"
                 prominence="primary"
                 tone="danger"
                 magnitude="xl"
                 render={<AlertDialogClose />}
-              >
-                Delete
-              </Button>
+                label="Delete"
+              />
             </AlertDialogActions>
           </AlertDialogContent>
         )}
diff --git a/packages/propel/src/components/anchor-button/anchor-button.stories.tsx b/packages/propel/src/components/anchor-button/anchor-button.stories.tsx
index 0008282d..7dfa459d 100644
--- a/packages/propel/src/components/anchor-button/anchor-button.stories.tsx
+++ b/packages/propel/src/components/anchor-button/anchor-button.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ArrowUpRight, Plus } from "lucide-react";
 import { expect, fn } from "storybook/test";
 
+import { Icon } from "../icon";
 import { AnchorButton, type AnchorButtonMagnitude, type AnchorButtonProminence } from "./index";
 
 const PROMINENCES: AnchorButtonProminence[] = ["primary", "secondary"];
@@ -12,7 +13,7 @@ const MAGNITUDES: AnchorButtonMagnitude[] = ["sm", "md", "lg", "xl"];
 const meta = {
   title: "Components/AnchorButton",
   component: AnchorButton,
-  args: { children: "Show more", prominence: "primary", magnitude: "md" },
+  args: { label: "Show more", prominence: "primary", magnitude: "md" },
 } satisfies Meta<typeof AnchorButton>;
 
 export default meta;
@@ -22,13 +23,16 @@ export const Default: Story = {};
 
 /** `prominence`: `primary` is the blue link; `secondary` the muted gray inline link. */
 export const Prominences: Story = {
-  argTypes: { prominence: { control: false }, children: { control: false } },
+  argTypes: { prominence: { control: false }, label: { control: false } },
   render: (args) => (
     <div className="flex items-center gap-4">
       {PROMINENCES.map((prominence) => (
-        <AnchorButton key={prominence} {...args} prominence={prominence}>
-          {prominence} action
-        </AnchorButton>
+        <AnchorButton
+          key={prominence}
+          {...args}
+          prominence={prominence}
+          label={`${prominence} action`}
+        />
       ))}
     </div>
   ),
@@ -36,13 +40,11 @@ export const Prominences: Story = {
 
 /** Text sizes (Figma S/Base/L/XL map to sm/md/lg/xl). */
 export const Magnitudes: Story = {
-  argTypes: { magnitude: { control: false }, children: { control: false } },
+  argTypes: { magnitude: { control: false }, label: { control: false } },
   render: (args) => (
     <div className="flex items-center gap-4">
       {MAGNITUDES.map((magnitude) => (
-        <AnchorButton key={magnitude} {...args} magnitude={magnitude}>
-          {magnitude}
-        </AnchorButton>
+        <AnchorButton key={magnitude} {...args} magnitude={magnitude} label={magnitude} />
       ))}
     </div>
   ),
@@ -67,9 +69,12 @@ export const ActsNotNavigates: Story = {
 export const AsLink: Story = {
   args: { prominence: "primary", magnitude: "md" },
   render: (args) => (
-    <AnchorButton {...args} nativeButton={false} render={<a href="#work-items" />}>
-      View all work items
-    </AnchorButton>
+    <AnchorButton
+      {...args}
+      nativeButton={false}
+      render={<a href="#work-items" />}
+      label="View all work items"
+    />
   ),
 };
 
@@ -94,12 +99,18 @@ export const WithIcons: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex items-center gap-6">
-      <AnchorButton prominence="primary" magnitude="md" startIcon={<Plus />}>
-        Add condition
-      </AnchorButton>
-      <AnchorButton prominence="secondary" magnitude="md" endIcon={<ArrowUpRight />}>
-        View docs
-      </AnchorButton>
+      <AnchorButton
+        prominence="primary"
+        magnitude="md"
+        startIcon={<Icon icon={Plus} />}
+        label="Add condition"
+      />
+      <AnchorButton
+        prominence="secondary"
+        magnitude="md"
+        endIcon={<Icon icon={ArrowUpRight} />}
+        label="View docs"
+      />
     </div>
   ),
 };
@@ -107,5 +118,5 @@ export const WithIcons: Story = {
 /** The `loading` spinner replaces the leading icon and dims the label. */
 export const Loading: Story = {
   args: { prominence: "primary", magnitude: "md", loading: true },
-  render: (args) => <AnchorButton {...args}>Saving…</AnchorButton>,
+  render: (args) => <AnchorButton {...args} label="Saving…" />,
 };
diff --git a/packages/propel/src/components/anchor-button/anchor-button.tsx b/packages/propel/src/components/anchor-button/anchor-button.tsx
index 28f5bfb2..c3576888 100644
--- a/packages/propel/src/components/anchor-button/anchor-button.tsx
+++ b/packages/propel/src/components/anchor-button/anchor-button.tsx
@@ -7,28 +7,23 @@ import {
   AnchorButtonLabel,
   type AnchorButtonProps as AnchorButtonElementProps,
 } from "../../elements/anchor-button";
-import { Icon } from "../../internal/icon";
 import { Spinner } from "../../internal/spinner";
 
 export type { AnchorButtonMagnitude, AnchorButtonProminence } from "../../elements/anchor-button";
 
-export type AnchorButtonProps = AnchorButtonElementProps & {
+export type AnchorButtonProps = Omit<AnchorButtonElementProps, "children"> & {
   /**
    * Set `false` when `render` swaps the underlying tag away from `<button>` (e.g. `render={<a
    * href=… />}` for a real navigation link): Base UI then keeps role, tab focus, and activation
    * semantics right on the rendered tag.
    */
   nativeButton?: boolean;
-  /**
-   * Node rendered before the label (inline-start). An icon or any node; it is sized to the link's
-   * `--node-size`. Decorative, kept out of the name.
-   */
+  /** Element rendered before the label (inline-start), e.g. `<Icon icon={Plus} />`. */
   startIcon?: React.ReactNode;
-  /**
-   * Node rendered after the label (inline-end). An icon or any node; it is sized to the link's
-   * `--node-size`. Decorative, kept out of the name.
-   */
+  /** Element rendered after the label (inline-end), e.g. `<Icon icon={ArrowUpRight} />`. */
   endIcon?: React.ReactNode;
+  /** Visible action/link label. */
+  label: React.ReactNode;
   /** Shows a spinner, sets `aria-busy`, and makes the control non-interactive. */
   loading?: boolean;
 };
@@ -48,7 +43,7 @@ export function AnchorButton({
   endIcon,
   loading = false,
   disabled,
-  children,
+  label,
   render,
   nativeButton,
   ...props
@@ -77,11 +72,11 @@ export function AnchorButton({
         <Spinner>
           <LoaderCircle />
         </Spinner>
-      ) : startIcon ? (
-        <Icon>{startIcon}</Icon>
-      ) : null}
-      <AnchorButtonLabel>{children}</AnchorButtonLabel>
-      {!loading && endIcon ? <Icon>{endIcon}</Icon> : null}
+      ) : (
+        startIcon
+      )}
+      <AnchorButtonLabel>{label}</AnchorButtonLabel>
+      {!loading ? endIcon : null}
     </BaseButton>
   );
 }
diff --git a/packages/propel/src/components/autocomplete-field/autocomplete-field.stories.tsx b/packages/propel/src/components/autocomplete-field/autocomplete-field.stories.tsx
index c449b69a..23f0ddf6 100644
--- a/packages/propel/src/components/autocomplete-field/autocomplete-field.stories.tsx
+++ b/packages/propel/src/components/autocomplete-field/autocomplete-field.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ChevronsUpDown, X } from "lucide-react";
 import { expect } from "storybook/test";
 
+import { Icon } from "../icon";
 import { IconButton } from "../icon-button";
 import { AutocompleteField, type FieldMagnitude } from "./index";
 
@@ -24,9 +25,8 @@ const meta = {
         tone="neutral"
         magnitude="md"
         aria-label="Clear container image"
-      >
-        <X />
-      </IconButton>
+        icon={<Icon icon={X} />}
+      />
     ),
     trigger: (
       <IconButton
@@ -34,9 +34,8 @@ const meta = {
         tone="neutral"
         magnitude="md"
         aria-label="Open container image"
-      >
-        <ChevronsUpDown />
-      </IconButton>
+        icon={<Icon icon={ChevronsUpDown} />}
+      />
     ),
     empty: "No images found",
     magnitude: "md",
diff --git a/packages/propel/src/components/autocomplete/autocomplete-input-group.tsx b/packages/propel/src/components/autocomplete/autocomplete-input-group.tsx
index 7bfccd4b..caf58a60 100644
--- a/packages/propel/src/components/autocomplete/autocomplete-input-group.tsx
+++ b/packages/propel/src/components/autocomplete/autocomplete-input-group.tsx
@@ -6,7 +6,6 @@ import {
   AutocompleteInputGroup as AutocompleteInputGroupElement,
   type AutocompleteMagnitude,
 } from "../../elements/autocomplete";
-import { ControlIcon } from "../../internal/control-icon";
 
 export type AutocompleteInputGroupProps = Omit<
   BaseAutocomplete.Input.Props,
@@ -17,8 +16,8 @@ export type AutocompleteInputGroupProps = Omit<
   /** Input placeholder. */
   placeholder?: string;
   /**
-   * Decorative leading glyph (e.g. a search magnifier), rendered in the group's `AutocompleteIcon`
-   * slot at the inline-start.
+   * Decorative leading element at the inline-start, e.g. `<Icon icon={Search} tint="placeholder"
+   * />`.
    */
   icon?: React.ReactNode;
   /**
@@ -48,7 +47,7 @@ export function AutocompleteInputGroup({
 }: AutocompleteInputGroupProps) {
   return (
     <BaseAutocomplete.InputGroup render={<AutocompleteInputGroupElement magnitude={magnitude} />}>
-      {icon != null ? <ControlIcon>{icon}</ControlIcon> : null}
+      {icon}
       <BaseAutocomplete.Input {...props} render={<AutocompleteInput magnitude={magnitude} />} />
       {clear != null ? <BaseAutocomplete.Clear render={clear} /> : null}
       {trigger != null ? <BaseAutocomplete.Trigger render={trigger} /> : null}
diff --git a/packages/propel/src/components/autocomplete/autocomplete.stories.tsx b/packages/propel/src/components/autocomplete/autocomplete.stories.tsx
index 5b09dd24..9379b869 100644
--- a/packages/propel/src/components/autocomplete/autocomplete.stories.tsx
+++ b/packages/propel/src/components/autocomplete/autocomplete.stories.tsx
@@ -3,9 +3,10 @@ import { ChevronsUpDown, Search as SearchGlyph, X } from "lucide-react";
 import * as React from "react";
 import { expect, waitFor, within } from "storybook/test";
 
-import { Button } from "../../elements/button";
+import { Button } from "../button";
 import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTrigger } from "../dialog/index";
 import { Field, FieldDescription, FieldError, FieldLabel } from "../field/index";
+import { Icon } from "../icon";
 import { IconButton } from "../icon-button";
 import {
   Autocomplete,
@@ -62,9 +63,8 @@ export const Default: Story = {
               tone="neutral"
               magnitude="md"
               aria-label="Clear container image"
-            >
-              <X />
-            </IconButton>
+              icon={<Icon icon={X} />}
+            />
           }
           trigger={
             <IconButton
@@ -72,9 +72,8 @@ export const Default: Story = {
               tone="neutral"
               magnitude="md"
               aria-label="Open container image"
-            >
-              <ChevronsUpDown />
-            </IconButton>
+              icon={<Icon icon={ChevronsUpDown} />}
+            />
           }
         />
         <FieldDescription magnitude="md">Enter a registry URL with optional tags.</FieldDescription>
@@ -162,13 +161,17 @@ export const Search: Story = {
     <Autocomplete {...args}>
       <AutocompleteInputGroup
         magnitude="md"
-        icon={<SearchGlyph />}
+        icon={<Icon icon={SearchGlyph} tint="placeholder" />}
         placeholder="Search images"
         aria-label="Search images"
         clear={
-          <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Clear search">
-            <X />
-          </IconButton>
+          <IconButton
+            prominence="ghost"
+            tone="neutral"
+            magnitude="md"
+            aria-label="Clear search"
+            icon={<Icon icon={X} />}
+          />
         }
       />
       <AutocompleteContent>
@@ -234,7 +237,7 @@ export const AsyncSearch: Story = {
       >
         <AutocompleteInputGroup
           magnitude="md"
-          icon={<SearchGlyph />}
+          icon={<Icon icon={SearchGlyph} tint="placeholder" />}
           placeholder="Search projects"
           aria-label="Search projects"
         />
@@ -357,7 +360,7 @@ export const FuzzyMatching: Story = {
     <Autocomplete items={IMAGES} filter={fuzzyMatch}>
       <AutocompleteInputGroup
         magnitude="md"
-        icon={<SearchGlyph />}
+        icon={<Icon icon={SearchGlyph} tint="placeholder" />}
         placeholder="Search images"
         aria-label="Search images"
       />
@@ -438,9 +441,8 @@ export const LimitResults: Story = {
               tone="neutral"
               magnitude="md"
               aria-label="Show all labels"
-            >
-              <ChevronsUpDown />
-            </IconButton>
+              icon={<Icon icon={ChevronsUpDown} />}
+            />
           }
         />
         <AutocompleteContent>
@@ -491,7 +493,7 @@ export const AutoHighlight: Story = {
     <Autocomplete {...args}>
       <AutocompleteInputGroup
         magnitude="md"
-        icon={<SearchGlyph />}
+        icon={<Icon icon={SearchGlyph} tint="placeholder" />}
         placeholder="Search images"
         aria-label="Search images"
       />
@@ -547,15 +549,14 @@ export const CommandPalette: Story = {
           tone="neutral"
           magnitude="xl"
           render={<DialogTrigger />}
-        >
-          Open command palette
-        </Button>
+          label="Open command palette"
+        />
         <DialogContent magnitude="md" aria-label="Command palette">
           <Autocomplete open inline items={COMMAND_GROUPS} autoHighlight="always" keepHighlight>
             <DialogHeader>
               <AutocompleteInputGroup
                 magnitude="md"
-                icon={<SearchGlyph />}
+                icon={<Icon icon={SearchGlyph} tint="placeholder" />}
                 placeholder="Search commands"
                 aria-label="Search commands"
               />
diff --git a/packages/propel/src/components/badge/badge.stories.tsx b/packages/propel/src/components/badge/badge.stories.tsx
index 026015fa..aaf470aa 100644
--- a/packages/propel/src/components/badge/badge.stories.tsx
+++ b/packages/propel/src/components/badge/badge.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Check, Sparkles } from "lucide-react";
 
 import { iconControl } from "../../storybook/icon-control";
+import { Icon } from "../icon";
 import { Badge, BadgeLabel, type BadgeMagnitude, type BadgeTone } from "./index";
 
 const TONES: BadgeTone[] = [
@@ -31,7 +32,7 @@ const meta = {
   subcomponents: { BadgeLabel },
   argTypes: { startIcon: iconControl, endIcon: iconControl },
   args: {
-    children: "Badge",
+    label: "Badge",
     tone: "neutral",
     magnitude: "md",
   },
@@ -50,13 +51,11 @@ export const Default: Story = {};
 
 /** Every color/intent the badge supports, side by side. */
 export const Tones: Story = {
-  argTypes: { tone: { control: false }, children: { control: false } },
+  argTypes: { tone: { control: false }, label: { control: false } },
   render: (args) => (
     <div className="flex flex-wrap items-center gap-3">
       {TONES.map((tone) => (
-        <Badge key={tone} {...args} tone={tone}>
-          {tone}
-        </Badge>
+        <Badge key={tone} {...args} tone={tone} label={tone} />
       ))}
     </div>
   ),
@@ -64,13 +63,11 @@ export const Tones: Story = {
 
 /** The three sizes (Figma S / Base / Large). */
 export const Magnitudes: Story = {
-  argTypes: { magnitude: { control: false }, children: { control: false } },
+  argTypes: { magnitude: { control: false }, label: { control: false } },
   render: (args) => (
     <div className="flex items-center gap-3">
       {MAGNITUDES.map((magnitude) => (
-        <Badge key={magnitude} {...args} magnitude={magnitude}>
-          {magnitude}
-        </Badge>
+        <Badge key={magnitude} {...args} magnitude={magnitude} label={magnitude} />
       ))}
     </div>
   ),
@@ -82,9 +79,14 @@ export const WithLeadingIcon: Story = {
   render: (args) => (
     <div className="flex items-center gap-3">
       {MAGNITUDES.map((magnitude) => (
-        <Badge key={magnitude} {...args} tone="success" magnitude={magnitude} startIcon={<Check />}>
-          Done
-        </Badge>
+        <Badge
+          key={magnitude}
+          {...args}
+          tone="success"
+          magnitude={magnitude}
+          startIcon={<Icon icon={Check} />}
+          label="Done"
+        />
       ))}
     </div>
   ),
@@ -96,9 +98,14 @@ export const WithTrailingIcon: Story = {
   render: (args) => (
     <div className="flex items-center gap-3">
       {MAGNITUDES.map((magnitude) => (
-        <Badge key={magnitude} {...args} tone="brand" magnitude={magnitude} endIcon={<Sparkles />}>
-          Pro
-        </Badge>
+        <Badge
+          key={magnitude}
+          {...args}
+          tone="brand"
+          magnitude={magnitude}
+          endIcon={<Icon icon={Sparkles} />}
+          label="Pro"
+        />
       ))}
     </div>
   ),
@@ -129,9 +136,13 @@ export const PlanBadges: Story = {
       {(["paid", "free"] as const).map((plan) => (
         <div key={plan} className="flex items-center gap-3">
           {MAGNITUDES.map((magnitude) => (
-            <Badge key={magnitude} {...args} tone={PLAN_TONES[plan]} magnitude={magnitude}>
-              {plan === "paid" ? "Paid" : "Free"}
-            </Badge>
+            <Badge
+              key={magnitude}
+              {...args}
+              tone={PLAN_TONES[plan]}
+              magnitude={magnitude}
+              label={plan === "paid" ? "Paid" : "Free"}
+            />
           ))}
         </div>
       ))}
diff --git a/packages/propel/src/components/badge/badge.tsx b/packages/propel/src/components/badge/badge.tsx
index 319b052e..c82a77c2 100644
--- a/packages/propel/src/components/badge/badge.tsx
+++ b/packages/propel/src/components/badge/badge.tsx
@@ -5,20 +5,13 @@ import {
   type BadgeProps as BadgeElementProps,
   BadgeLabel,
 } from "../../elements/badge";
-import { Icon } from "../../internal/icon";
 
-export type BadgeProps = BadgeElementProps & {
+export type BadgeProps = Omit<BadgeElementProps, "children"> & {
   /** The badge label — text, a count, or any inline content. */
-  children?: React.ReactNode;
-  /**
-   * Node rendered before the label (inline-start). A bare icon or any node; sized to the badge's
-   * `--node-size` and tinted to the tone. Decorative, kept out of the name.
-   */
+  label?: React.ReactNode;
+  /** Element rendered before the label (inline-start), e.g. `<Icon icon={Check} />`. */
   startIcon?: React.ReactNode;
-  /**
-   * Node rendered after the label (inline-end). A bare icon or any node; sized to the badge's
-   * `--node-size` and tinted to the tone. Decorative, kept out of the name.
-   */
+  /** Element rendered after the label (inline-end), e.g. `<Icon icon={Sparkles} />`. */
   endIcon?: React.ReactNode;
 };
 
@@ -26,12 +19,12 @@ export type BadgeProps = BadgeElementProps & {
  * The ready-made badge: composes the atomic `Badge` pill with the `BadgeLabel` and optional leading
  * (`startIcon`) and trailing (`endIcon`) icon slots.
  */
-export function Badge({ children, startIcon, endIcon, ...props }: BadgeProps) {
+export function Badge({ label, startIcon, endIcon, ...props }: BadgeProps) {
   return (
     <BadgeElement {...props}>
-      {startIcon ? <Icon>{startIcon}</Icon> : null}
-      <BadgeLabel>{children}</BadgeLabel>
-      {endIcon ? <Icon>{endIcon}</Icon> : null}
+      {startIcon}
+      <BadgeLabel>{label}</BadgeLabel>
+      {endIcon}
     </BadgeElement>
   );
 }
diff --git a/packages/propel/src/components/banner/banner.stories.tsx b/packages/propel/src/components/banner/banner.stories.tsx
index d95324ba..9345b01c 100644
--- a/packages/propel/src/components/banner/banner.stories.tsx
+++ b/packages/propel/src/components/banner/banner.stories.tsx
@@ -4,6 +4,7 @@ import { expect, fn } from "storybook/test";
 
 import { iconControl } from "../../storybook/icon-control";
 import { Button } from "../button/index";
+import { Icon } from "../icon";
 import { IconButton } from "../icon-button/index";
 import { Banner, type BannerTone } from "./index";
 
@@ -67,24 +68,35 @@ export const WithActions: Story = {
     tone: "neutral",
     actions: (
       <>
-        <Button sizing="hug" prominence="ghost" tone="neutral" magnitude="sm">
-          Remind me later
-        </Button>
-        <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="sm">
-          Learn more
-        </Button>
-        <Button sizing="hug" prominence="primary" tone="neutral" magnitude="sm">
-          Update now
-        </Button>
+        <Button
+          sizing="hug"
+          prominence="ghost"
+          tone="neutral"
+          magnitude="sm"
+          label="Remind me later"
+        />
+        <Button
+          sizing="hug"
+          prominence="secondary"
+          tone="neutral"
+          magnitude="sm"
+          label="Learn more"
+        />
+        <Button
+          sizing="hug"
+          prominence="primary"
+          tone="neutral"
+          magnitude="sm"
+          label="Update now"
+        />
         <IconButton
           prominence="ghost"
           tone="neutral"
           magnitude="md"
           aria-label="Dismiss"
           onClick={fn()}
-        >
-          <X />
-        </IconButton>
+          icon={<Icon icon={X} />}
+        />
       </>
     ),
   },
@@ -102,9 +114,8 @@ export const Dismissible: Story = {
         magnitude="md"
         aria-label="Dismiss"
         onClick={fn()}
-      >
-        <X />
-      </IconButton>
+        icon={<Icon icon={X} />}
+      />
     ),
   },
 };
@@ -126,9 +137,8 @@ export const DismissibleInteraction: Story = {
         magnitude="md"
         aria-label="Dismiss"
         onClick={dismissSpy}
-      >
-        <X />
-      </IconButton>
+        icon={<Icon icon={X} />}
+      />
     ),
   },
   play: async ({ canvas, userEvent }) => {
@@ -146,14 +156,17 @@ export const OptionalContentSemantics: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   render: () => (
     <div className="flex w-160 flex-col gap-3">
-      <Banner placement="inline" tone="warning" icon={null}>
-        Maintenance starts at 6 PM.
-      </Banner>
+      <Banner
+        placement="inline"
+        tone="warning"
+        icon={null}
+        description="Maintenance starts at 6 PM."
+      />
       <Banner
         placement="inline"
         tone="info"
         title="Custom icon"
-        icon={<Info data-testid="custom-banner-icon" />}
+        icon={<Icon icon={<Info data-testid="custom-banner-icon" />} />}
       />
     </div>
   ),
diff --git a/packages/propel/src/components/banner/banner.tsx b/packages/propel/src/components/banner/banner.tsx
index e2b48949..f2ec2646 100644
--- a/packages/propel/src/components/banner/banner.tsx
+++ b/packages/propel/src/components/banner/banner.tsx
@@ -24,28 +24,38 @@ const toneIcon: Record<BannerTone, LucideIcon> = {
   danger: CircleAlert,
 };
 
-export type BannerProps = BannerElementProps & {
+export type BannerProps = Omit<BannerElementProps, "children"> & {
   /**
    * Node rendered before the message (inline-start). Defaults to a tone-appropriate lucide icon;
    * pass `null` to hide it. Sized to the banner's node size. Decorative, kept out of the name.
    */
   icon?: React.ReactNode;
-  /** The banner's headline. Rendered as its own block above any `children` body. */
+  /** The banner's headline. Rendered as its own block above any description body. */
   title?: React.ReactNode;
+  /** Body text rendered under the title. */
+  description?: React.ReactNode;
   /**
    * Trailing actions, placed after the message — e.g. buttons, or a dismiss `IconButton`
-   * (`<IconButton aria-label="Dismiss" onClick={…}><X /></IconButton>`).
+   * (`<IconButton aria-label="Dismiss" icon={<Icon icon={X} />} onClick={…} />`).
    */
   actions?: React.ReactNode;
 };
 
 /**
  * The ready-made banner: composes the atomic banner parts — the tone icon, the message body
- * (`title` + `children`), and trailing `actions` — so consumers pass content, not layout. A dismiss
- * is just an action: render an `IconButton` in `actions`. Drop down to
+ * (`title` + `description`), and trailing `actions` — so consumers pass content, not layout. A
+ * dismiss is just an action: render an `IconButton` in `actions`. Drop down to
  * `@makeplane/propel/elements/banner` to assemble the parts directly.
  */
-export function Banner({ placement, tone, icon, title, actions, children, ...props }: BannerProps) {
+export function Banner({
+  placement,
+  tone,
+  icon,
+  title,
+  description,
+  actions,
+  ...props
+}: BannerProps) {
   const DefaultIcon = toneIcon[tone];
   return (
     <BannerElement placement={placement} tone={tone} {...props}>
@@ -60,7 +70,7 @@ export function Banner({ placement, tone, icon, title, actions, children, ...pro
       ) : null}
       <BannerBody placement={placement} tone={tone}>
         {title ? <BannerTitle>{title}</BannerTitle> : null}
-        {children ? <BannerDescription>{children}</BannerDescription> : null}
+        {description ? <BannerDescription>{description}</BannerDescription> : null}
       </BannerBody>
       {actions ? <BannerActions>{actions}</BannerActions> : null}
     </BannerElement>
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-ellipsis-trigger.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-ellipsis-trigger.tsx
index f3a911b8..3e412acd 100644
--- a/packages/propel/src/components/breadcrumb/breadcrumb-ellipsis-trigger.tsx
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-ellipsis-trigger.tsx
@@ -3,7 +3,7 @@ import { Ellipsis } from "lucide-react";
 import type * as React from "react";
 
 import { BreadcrumbTrigger } from "../../elements/breadcrumb";
-import { Icon } from "../../internal/icon";
+import { Icon as IconSlot } from "../../internal/icon";
 
 export type BreadcrumbEllipsisTriggerProps = Omit<
   BaseMenu.Trigger.Props,
@@ -11,7 +11,7 @@ export type BreadcrumbEllipsisTriggerProps = Omit<
 > & {
   /** Accessible name for the trigger (e.g. "Show more breadcrumbs"). Required (icon-only). */
   "aria-label": string;
-  /** The trigger glyph. @default an ellipsis */
+  /** The trigger element. @default an ellipsis */
   icon?: React.ReactNode;
 };
 
@@ -25,9 +25,11 @@ export type BreadcrumbEllipsisTriggerProps = Omit<
 export function BreadcrumbEllipsisTrigger({ icon, ...props }: BreadcrumbEllipsisTriggerProps) {
   return (
     <BaseMenu.Trigger render={<BreadcrumbTrigger />} {...props}>
-      <Icon tint="tertiary" magnitude="md">
-        {icon ?? <Ellipsis />}
-      </Icon>
+      {icon ?? (
+        <IconSlot tint="tertiary" magnitude="md">
+          <Ellipsis />
+        </IconSlot>
+      )}
     </BaseMenu.Trigger>
   );
 }
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx
index fee22f6d..92eec5b4 100644
--- a/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx
@@ -4,25 +4,23 @@ import type * as React from "react";
 
 import { BreadcrumbTrigger } from "../../elements/breadcrumb";
 import { DisclosureIndicator } from "../../internal/disclosure-indicator";
-import { Icon } from "../../internal/icon";
 
-export type BreadcrumbMenuTriggerProps = Omit<BaseMenu.Trigger.Props, "className" | "style"> & {
-  /** Leading content, typically a work-item/page icon. */
+export type BreadcrumbMenuTriggerProps = Omit<
+  BaseMenu.Trigger.Props,
+  "children" | "className" | "style"
+> & {
+  /** Leading element, typically `<Icon icon={...} tint="tertiary" magnitude="md" />`. */
   icon?: React.ReactNode;
   /** The crumb label. */
-  children?: React.ReactNode;
+  label?: React.ReactNode;
 };
 
 /** The crumb that opens a `BreadcrumbMenu`. */
-export function BreadcrumbMenuTrigger({ icon, children, ...props }: BreadcrumbMenuTriggerProps) {
+export function BreadcrumbMenuTrigger({ icon, label, ...props }: BreadcrumbMenuTriggerProps) {
   return (
     <BaseMenu.Trigger render={<BreadcrumbTrigger group />} {...props}>
-      {icon != null ? (
-        <Icon tint="tertiary" magnitude="md">
-          {icon}
-        </Icon>
-      ) : null}
-      {children}
+      {icon}
+      {label}
       <DisclosureIndicator motion="disclose" tint="tertiary" magnitude="sm">
         <ChevronDown />
       </DisclosureIndicator>
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
index bcced502..e6c072bd 100644
--- a/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Layers } from "lucide-react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
+import { Icon } from "../icon";
 import { Menu, MenuContent, MenuItem } from "../menu";
 import {
   Breadcrumb,
@@ -114,8 +115,8 @@ export const WithCollapsedCrumbs: Story = {
           <Menu>
             <BreadcrumbEllipsisTrigger aria-label="Show more breadcrumbs" />
             <MenuContent sizing="auto">
-              <MenuItem render={inertAnchor()}>Projects</MenuItem>
-              <MenuItem render={inertAnchor()}>Design</MenuItem>
+              <MenuItem render={inertAnchor()} label="Projects" />
+              <MenuItem render={inertAnchor()} label="Design" />
             </MenuContent>
           </Menu>
         </BreadcrumbItem>
@@ -175,11 +176,14 @@ export const WithMenuCrumb: Story = {
         <BreadcrumbSeparator />
         <BreadcrumbItem>
           <Menu>
-            <BreadcrumbMenuTrigger icon={<Layers />}>Plane Design</BreadcrumbMenuTrigger>
+            <BreadcrumbMenuTrigger
+              icon={<Icon icon={Layers} tint="tertiary" magnitude="md" />}
+              label="Plane Design"
+            />
             <MenuContent>
-              <MenuItem render={inertAnchor()}>Plane Web</MenuItem>
-              <MenuItem render={inertAnchor()}>Plane Mobile</MenuItem>
-              <MenuItem render={inertAnchor()}>Plane Server</MenuItem>
+              <MenuItem render={inertAnchor()} label="Plane Web" />
+              <MenuItem render={inertAnchor()} label="Plane Mobile" />
+              <MenuItem render={inertAnchor()} label="Plane Server" />
             </MenuContent>
           </Menu>
         </BreadcrumbItem>
@@ -215,14 +219,12 @@ export const MenuCrumbSelected: Story = {
         <BreadcrumbSeparator />
         <BreadcrumbItem>
           <Menu>
-            <BreadcrumbMenuTrigger>List</BreadcrumbMenuTrigger>
+            <BreadcrumbMenuTrigger label="List" />
             <MenuContent>
-              <MenuItem selected render={inertAnchor()}>
-                List
-              </MenuItem>
-              <MenuItem render={inertAnchor()}>Board</MenuItem>
-              <MenuItem render={inertAnchor()}>Calendar</MenuItem>
-              <MenuItem render={inertAnchor()}>Spreadsheet</MenuItem>
+              <MenuItem selected render={inertAnchor()} label="List" />
+              <MenuItem render={inertAnchor()} label="Board" />
+              <MenuItem render={inertAnchor()} label="Calendar" />
+              <MenuItem render={inertAnchor()} label="Spreadsheet" />
             </MenuContent>
           </Menu>
         </BreadcrumbItem>
@@ -251,10 +253,13 @@ export const KeyboardNavigation: Story = {
         <BreadcrumbSeparator />
         <BreadcrumbItem>
           <Menu>
-            <BreadcrumbMenuTrigger icon={<Layers />}>Plane Design</BreadcrumbMenuTrigger>
+            <BreadcrumbMenuTrigger
+              icon={<Icon icon={Layers} tint="tertiary" magnitude="md" />}
+              label="Plane Design"
+            />
             <MenuContent>
-              <MenuItem render={inertAnchor()}>Plane Web</MenuItem>
-              <MenuItem render={inertAnchor()}>Plane Mobile</MenuItem>
+              <MenuItem render={inertAnchor()} label="Plane Web" />
+              <MenuItem render={inertAnchor()} label="Plane Mobile" />
             </MenuContent>
           </Menu>
         </BreadcrumbItem>
diff --git a/packages/propel/src/components/button/button.stories.tsx b/packages/propel/src/components/button/button.stories.tsx
index dd9f6d1d..e2bc1b9d 100644
--- a/packages/propel/src/components/button/button.stories.tsx
+++ b/packages/propel/src/components/button/button.stories.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { expect, fn, userEvent as baseUserEvent, waitFor } from "storybook/test";
 
 import { iconControl } from "../../storybook/icon-control";
+import { Icon } from "../icon";
 import { Button, ButtonLabel, type ButtonMagnitude, type ButtonProminence } from "./index";
 
 const PROMINENCES: ButtonProminence[] = ["primary", "secondary", "tertiary", "ghost"];
@@ -23,7 +24,7 @@ const meta = {
     },
   },
   args: {
-    children: "Button",
+    label: "Button",
     prominence: "primary",
     tone: "neutral",
     magnitude: "md",
@@ -40,13 +41,11 @@ export const Default: Story = {};
 export const Prominences: Story = {
   // Iterates `prominence` and labels each button, so disable just those two controls;
   // the rest stay live and update every button at once.
-  argTypes: { prominence: { control: false }, children: { control: false } },
+  argTypes: { prominence: { control: false }, label: { control: false } },
   render: (args) => (
     <div className="flex items-center gap-3">
       {PROMINENCES.map((prominence) => (
-        <Button key={prominence} {...args} prominence={prominence}>
-          {prominence}
-        </Button>
+        <Button key={prominence} {...args} prominence={prominence} label={prominence} />
       ))}
     </div>
   ),
@@ -60,15 +59,9 @@ export const Tones: Story = {
   parameters: { controls: { disable: true } },
   render: (args) => (
     <div className="flex items-center gap-3">
-      <Button {...args} tone="neutral" prominence="primary">
-        Neutral
-      </Button>
-      <Button {...args} tone="danger" prominence="primary">
-        Danger fill
-      </Button>
-      <Button {...args} tone="danger" prominence="secondary">
-        Danger outline
-      </Button>
+      <Button {...args} tone="neutral" prominence="primary" label="Neutral" />
+      <Button {...args} tone="danger" prominence="primary" label="Danger fill" />
+      <Button {...args} tone="danger" prominence="secondary" label="Danger outline" />
     </div>
   ),
 };
@@ -77,13 +70,11 @@ export const Tones: Story = {
 export const Magnitudes: Story = {
   // Iterates `magnitude` and labels each button with the magnitude name, so disable
   // just those two controls; the rest stay live and update every button at once.
-  argTypes: { magnitude: { control: false }, children: { control: false } },
+  argTypes: { magnitude: { control: false }, label: { control: false } },
   render: (args) => (
     <div className="flex items-center gap-3">
       {MAGNITUDES.map((magnitude) => (
-        <Button key={magnitude} {...args} magnitude={magnitude}>
-          {magnitude}
-        </Button>
+        <Button key={magnitude} {...args} magnitude={magnitude} label={magnitude} />
       ))}
     </div>
   ),
@@ -94,15 +85,20 @@ export const WithIcons: Story = {
   parameters: { controls: { disable: true } },
   render: (args) => (
     <div className="flex items-center gap-3">
-      <Button {...args} startIcon={<Plus />}>
-        New
-      </Button>
-      <Button {...args} prominence="secondary" endIcon={<Settings />}>
-        Settings
-      </Button>
-      <Button {...args} prominence="tertiary" startIcon={<Search />} endIcon={<Plus />}>
-        Search
-      </Button>
+      <Button {...args} startIcon={<Icon icon={Plus} />} label="New" />
+      <Button
+        {...args}
+        prominence="secondary"
+        endIcon={<Icon icon={Settings} />}
+        label="Settings"
+      />
+      <Button
+        {...args}
+        prominence="tertiary"
+        startIcon={<Icon icon={Search} />}
+        endIcon={<Icon icon={Plus} />}
+        label="Search"
+      />
     </div>
   ),
 };
@@ -112,15 +108,9 @@ export const Loading: Story = {
   parameters: { controls: { disable: true } },
   render: (args) => (
     <div className="flex items-center gap-3">
-      <Button {...args} loading>
-        Saving
-      </Button>
-      <Button {...args} prominence="secondary" loading>
-        Loading
-      </Button>
-      <Button {...args} prominence="tertiary" loading>
-        Please wait
-      </Button>
+      <Button {...args} loading label="Saving" />
+      <Button {...args} prominence="secondary" loading label="Loading" />
+      <Button {...args} prominence="tertiary" loading label="Please wait" />
     </div>
   ),
 };
@@ -139,13 +129,12 @@ export const AsyncSubmit: Story = {
       <Button
         {...args}
         loading={submitting}
+        label={submitting ? "Submitting" : "Submit"}
         onClick={() => {
           setSubmitting(true);
           window.setTimeout(() => setSubmitting(false), 300);
         }}
-      >
-        {submitting ? "Submitting" : "Submit"}
-      </Button>
+      />
     );
   },
 };
@@ -155,12 +144,8 @@ export const Stretch: Story = {
   parameters: { controls: { disable: true } },
   render: (args) => (
     <div className="flex w-64 flex-col gap-2">
-      <Button {...args} sizing="fill">
-        Full-width
-      </Button>
-      <Button {...args} prominence="secondary" sizing="fill">
-        Full-width outline
-      </Button>
+      <Button {...args} sizing="fill" label="Full-width" />
+      <Button {...args} prominence="secondary" sizing="fill" label="Full-width outline" />
     </div>
   ),
 };
@@ -318,9 +303,7 @@ export const CustomTag: Story = {
     sizing: "hug",
   },
   render: (args) => (
-    <Button {...args} nativeButton={false} render={<div />}>
-      Add to favorites
-    </Button>
+    <Button {...args} nativeButton={false} render={<div />} label="Add to favorites" />
   ),
 };
 
@@ -339,10 +322,9 @@ export const CustomTagInteraction: Story = {
         {...args}
         nativeButton={false}
         render={<div data-testid="custom-tag-button" />}
+        label={`Activated ${count}`}
         onClick={() => setCount((current) => current + 1)}
-      >
-        Activated {count}
-      </Button>
+      />
     );
   },
   play: async ({ canvas, userEvent }) => {
@@ -372,9 +354,7 @@ export const AsLink: Story = {
     sizing: "hug",
   },
   render: (args) => (
-    <Button {...args} nativeButton={false} render={<a href="#reports" />}>
-      Open reports
-    </Button>
+    <Button {...args} nativeButton={false} render={<a href="#reports" />} label="Open reports" />
   ),
 };
 
diff --git a/packages/propel/src/components/button/button.tsx b/packages/propel/src/components/button/button.tsx
index 5167523f..ab6e27ee 100644
--- a/packages/propel/src/components/button/button.tsx
+++ b/packages/propel/src/components/button/button.tsx
@@ -7,25 +7,20 @@ import {
   ButtonLabel,
   type ButtonProps as ButtonElementProps,
 } from "../../elements/button";
-import { Icon } from "../../internal/icon";
 import { Spinner } from "../../internal/spinner";
 
-export type ButtonProps = ButtonElementProps & {
+export type ButtonProps = Omit<ButtonElementProps, "children"> & {
   /**
    * Set `false` when `render` swaps the underlying tag away from `<button>` (e.g. a `<div>` or an
    * `<a>`): Base UI then adds `role="button"`, tab focus, and Enter/Space activation.
    */
   nativeButton?: boolean;
-  /**
-   * Node rendered before the label (inline-start). An icon, avatar, or any node; it is sized to the
-   * button's `--node-size`. Decorative, kept out of the name.
-   */
+  /** Element rendered before the label (inline-start), e.g. `<Icon icon={Plus} />`. */
   startIcon?: React.ReactNode;
-  /**
-   * Node rendered after the label (inline-end). An icon, avatar, or any node; it is sized to the
-   * button's `--node-size`. Decorative, kept out of the name.
-   */
+  /** Element rendered after the label (inline-end), e.g. `<Icon icon={ArrowRight} />`. */
   endIcon?: React.ReactNode;
+  /** Visible button label. */
+  label: React.ReactNode;
   /** Shows a spinner, sets `aria-busy`, and makes the button non-interactive. */
   loading?: boolean;
 };
@@ -33,7 +28,7 @@ export type ButtonProps = ButtonElementProps & {
 /**
  * The ready-made `Button`: grafts Base UI's `Button` behavior onto the styled `Button` element and
  * lays out an optional `startIcon`/`endIcon` beside the label plus a `loading` spinner. Content —
- * `children`, the inline nodes, `loading` — is not a variant.
+ * the label, inline nodes, and `loading` state — is not a variant.
  */
 export function Button({
   prominence,
@@ -44,7 +39,7 @@ export function Button({
   endIcon,
   loading = false,
   disabled,
-  children,
+  label,
   render,
   nativeButton,
   ...props
@@ -75,11 +70,11 @@ export function Button({
         <Spinner>
           <LoaderCircle />
         </Spinner>
-      ) : startIcon ? (
-        <Icon>{startIcon}</Icon>
-      ) : null}
-      <ButtonLabel>{children}</ButtonLabel>
-      {!loading && endIcon ? <Icon>{endIcon}</Icon> : null}
+      ) : (
+        startIcon
+      )}
+      <ButtonLabel>{label}</ButtonLabel>
+      {!loading ? endIcon : null}
     </BaseButton>
   );
 }
diff --git a/packages/propel/src/components/checkbox/checkbox.stories.tsx b/packages/propel/src/components/checkbox/checkbox.stories.tsx
index 6f093011..ca5d01a6 100644
--- a/packages/propel/src/components/checkbox/checkbox.stories.tsx
+++ b/packages/propel/src/components/checkbox/checkbox.stories.tsx
@@ -6,6 +6,7 @@ import { expect, userEvent } from "storybook/test";
 import { Button } from "../button";
 import { Field } from "../field";
 import { Form, FormActions, FormBody } from "../form";
+import { Icon } from "../icon";
 import {
   Checkbox,
   CheckboxIndeterminateIndicator,
@@ -116,7 +117,7 @@ export const WithIcon: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <Checkbox
-      icon={<Repeat aria-hidden className="size-3.5" />}
+      icon={<Icon icon={Repeat} tint="secondary" magnitude="sm" />}
       label="Sync automatically"
       defaultChecked
     />
@@ -206,9 +207,14 @@ export const FormIntegration: Story = {
             </Field>
           </FormBody>
           <FormActions layout="inline">
-            <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
-              Save
-            </Button>
+            <Button
+              sizing="hug"
+              type="submit"
+              prominence="primary"
+              tone="neutral"
+              magnitude="md"
+              label="Save"
+            />
           </FormActions>
         </Form>
         <output className="text-13 text-secondary">
diff --git a/packages/propel/src/components/checkbox/checkbox.tsx b/packages/propel/src/components/checkbox/checkbox.tsx
index 7c267eda..002bae93 100644
--- a/packages/propel/src/components/checkbox/checkbox.tsx
+++ b/packages/propel/src/components/checkbox/checkbox.tsx
@@ -8,7 +8,6 @@ import {
   CheckboxIndicator,
   CheckboxLabel,
 } from "../../elements/checkbox";
-import { Icon } from "../../internal/icon";
 
 export type CheckboxProps = Omit<BaseCheckbox.Root.Props, "className" | "style" | "render"> & {
   /**
@@ -18,9 +17,8 @@ export type CheckboxProps = Omit<BaseCheckbox.Root.Props, "className" | "style"
    */
   label?: React.ReactNode;
   /**
-   * Node shown between the box and the label (inline-start), matching the Figma "checkbox with
-   * label" icon slot. Only rendered when `label` is present. Sized to `--node-size` (14px).
-   * Decorative, kept out of the name.
+   * Element shown between the box and the label (inline-start), e.g. `<Icon icon={User}
+   * tint="secondary" magnitude="sm" />`. Only rendered when `label` is present.
    */
   icon?: React.ReactNode;
 };
@@ -53,11 +51,7 @@ export function Checkbox({ label, icon, id, ...props }: CheckboxProps) {
   return (
     <CheckboxLabel htmlFor={checkboxId}>
       {box}
-      {icon ? (
-        <Icon tint="secondary" magnitude="sm">
-          {icon}
-        </Icon>
-      ) : null}
+      {icon}
       {label}
     </CheckboxLabel>
   );
diff --git a/packages/propel/src/components/combobox-field/combobox-field.stories.tsx b/packages/propel/src/components/combobox-field/combobox-field.stories.tsx
index 4520be03..f4ff27f8 100644
--- a/packages/propel/src/components/combobox-field/combobox-field.stories.tsx
+++ b/packages/propel/src/components/combobox-field/combobox-field.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ChevronsUpDown, X } from "lucide-react";
 import { expect } from "storybook/test";
 
+import { Icon } from "../icon";
 import { IconButton } from "../icon-button";
 import { ComboboxField, type ComboboxFieldProps } from "./index";
 
@@ -18,14 +19,22 @@ const meta = {
     label: "Region",
     description: "Filter the deployment region.",
     clear: (
-      <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Clear region">
-        <X />
-      </IconButton>
+      <IconButton
+        prominence="ghost"
+        tone="neutral"
+        magnitude="md"
+        aria-label="Clear region"
+        icon={<Icon icon={X} />}
+      />
     ),
     trigger: (
-      <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Open region">
-        <ChevronsUpDown />
-      </IconButton>
+      <IconButton
+        prominence="ghost"
+        tone="neutral"
+        magnitude="md"
+        aria-label="Open region"
+        icon={<Icon icon={ChevronsUpDown} />}
+      />
     ),
     empty: "No regions found",
     magnitude: "md",
diff --git a/packages/propel/src/components/combobox/combobox-input-group.tsx b/packages/propel/src/components/combobox/combobox-input-group.tsx
index 2491d76c..395eb93b 100644
--- a/packages/propel/src/components/combobox/combobox-input-group.tsx
+++ b/packages/propel/src/components/combobox/combobox-input-group.tsx
@@ -6,7 +6,6 @@ import {
   ComboboxInput as ComboboxInputElement,
   ComboboxInputGroup as ComboboxInputGroupElement,
 } from "../../elements/combobox";
-import { ControlIcon } from "../../internal/control-icon";
 
 export type ComboboxInputGroupProps = Omit<
   BaseCombobox.Input.Props,
@@ -17,8 +16,8 @@ export type ComboboxInputGroupProps = Omit<
   /** Input placeholder. */
   placeholder?: string;
   /**
-   * Decorative leading glyph (e.g. a search magnifier), rendered in the group's `ComboboxIcon` slot
-   * at the inline-start.
+   * Decorative leading element at the inline-start, e.g. `<Icon icon={Search} tint="placeholder"
+   * />`.
    */
   icon?: React.ReactNode;
   /**
@@ -48,7 +47,7 @@ export function ComboboxInputGroup({
 }: ComboboxInputGroupProps) {
   return (
     <BaseCombobox.InputGroup render={<ComboboxInputGroupElement magnitude={magnitude} />}>
-      {icon != null ? <ControlIcon>{icon}</ControlIcon> : null}
+      {icon}
       <BaseCombobox.Input {...props} render={<ComboboxInputElement />} />
       {clear != null ? <BaseCombobox.Clear render={clear} /> : null}
       {trigger != null ? <BaseCombobox.Trigger render={trigger} /> : null}
diff --git a/packages/propel/src/components/combobox/combobox-item.tsx b/packages/propel/src/components/combobox/combobox-item.tsx
index 7bae6bf3..54818997 100644
--- a/packages/propel/src/components/combobox/combobox-item.tsx
+++ b/packages/propel/src/components/combobox/combobox-item.tsx
@@ -1,12 +1,18 @@
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import type * as React from "react";
 
 import { ListboxItem, type ListboxItemMagnitude } from "../../internal/listbox-item";
 // Ready-made marker that supplies the default check glyph (defaults are a `components` concern).
 import { ComboboxItemIndicator } from "./combobox-item-indicator";
 
-export type ComboboxItemProps = Omit<BaseCombobox.Item.Props, "className" | "style"> & {
+export type ComboboxItemProps = Omit<
+  BaseCombobox.Item.Props,
+  "children" | "className" | "label" | "style"
+> & {
   /** Row height and text size. Required. */
   magnitude: ListboxItemMagnitude;
+  /** Option label. */
+  label: React.ReactNode;
 };
 
 /**
@@ -15,11 +21,11 @@ export type ComboboxItemProps = Omit<BaseCombobox.Item.Props, "className" | "sty
  * `ComboboxItemIndicator` selection marker occupies (kept mounted while unselected so the label —
  * wrapped in a `<span>` for the positional grid — stays in its own column).
  */
-export function ComboboxItem({ magnitude, children, ...props }: ComboboxItemProps) {
+export function ComboboxItem({ magnitude, label, ...props }: ComboboxItemProps) {
   return (
     <BaseCombobox.Item {...props} render={<ListboxItem layout="indicator" magnitude={magnitude} />}>
       <ComboboxItemIndicator />
-      <span>{children}</span>
+      <span>{label}</span>
     </BaseCombobox.Item>
   );
 }
diff --git a/packages/propel/src/components/combobox/combobox.stories.tsx b/packages/propel/src/components/combobox/combobox.stories.tsx
index 7f62713e..349be0e2 100644
--- a/packages/propel/src/components/combobox/combobox.stories.tsx
+++ b/packages/propel/src/components/combobox/combobox.stories.tsx
@@ -16,6 +16,7 @@ import {
   DialogTitle,
 } from "../dialog/index";
 import { Field, FieldError, FieldLabel } from "../field/index";
+import { Icon } from "../icon";
 import { IconButton } from "../icon-button";
 import { InputField } from "../input-field/index";
 import {
@@ -78,23 +79,29 @@ export const Default: Story = {
           magnitude="md"
           placeholder="e.g. eu-central-1"
           clear={
-            <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Clear region">
-              <X />
-            </IconButton>
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude="md"
+              aria-label="Clear region"
+              icon={<Icon icon={X} />}
+            />
           }
           trigger={
-            <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Open region">
-              <ChevronsUpDown />
-            </IconButton>
+            <IconButton
+              prominence="ghost"
+              tone="neutral"
+              magnitude="md"
+              aria-label="Open region"
+              icon={<Icon icon={ChevronsUpDown} />}
+            />
           }
         />
         <ComboboxContent>
           <ComboboxEmpty>No matches</ComboboxEmpty>
           <ComboboxList>
             {(region: string) => (
-              <ComboboxItem key={region} value={region} magnitude="md">
-                {region}
-              </ComboboxItem>
+              <ComboboxItem key={region} value={region} magnitude="md" label={region} />
             )}
           </ComboboxList>
         </ComboboxContent>
@@ -189,9 +196,7 @@ export const Multiple: Story = {
           <ComboboxEmpty>No matches</ComboboxEmpty>
           <ComboboxList>
             {(region: string) => (
-              <ComboboxItem key={region} value={region} magnitude="md">
-                {region}
-              </ComboboxItem>
+              <ComboboxItem key={region} value={region} magnitude="md" label={region} />
             )}
           </ComboboxList>
         </ComboboxContent>
@@ -249,9 +254,7 @@ export const Grouped: Story = {
                 <ComboboxGroupLabel>{group.label}</ComboboxGroupLabel>
                 <ComboboxCollection>
                   {(region: string) => (
-                    <ComboboxItem key={region} value={region} magnitude="md">
-                      {region}
-                    </ComboboxItem>
+                    <ComboboxItem key={region} value={region} magnitude="md" label={region} />
                   )}
                 </ComboboxCollection>
               </ComboboxGroup>
@@ -344,9 +347,8 @@ export const AsyncSearch: Story = {
                 tone="neutral"
                 magnitude="md"
                 aria-label="Clear reviewer"
-              >
-                <X />
-              </IconButton>
+                icon={<Icon icon={X} />}
+              />
             }
             trigger={
               <IconButton
@@ -354,9 +356,8 @@ export const AsyncSearch: Story = {
                 tone="neutral"
                 magnitude="md"
                 aria-label="Open reviewer"
-              >
-                <ChevronsUpDown />
-              </IconButton>
+                icon={<Icon icon={ChevronsUpDown} />}
+              />
             }
           />
           <ComboboxContent>
@@ -364,9 +365,7 @@ export const AsyncSearch: Story = {
             <ComboboxEmpty>{!pending && trimmed !== "" ? "No members match" : null}</ComboboxEmpty>
             <ComboboxList>
               {(member: string) => (
-                <ComboboxItem key={member} value={member} magnitude="md">
-                  {member}
-                </ComboboxItem>
+                <ComboboxItem key={member} value={member} magnitude="md" label={member} />
               )}
             </ComboboxList>
           </ComboboxContent>
@@ -487,9 +486,7 @@ export const Creatable: Story = {
               <ComboboxEmpty>No labels found</ComboboxEmpty>
               <ComboboxList>
                 {(label: ProjectLabel) => (
-                  <ComboboxItem key={label.id} value={label} magnitude="md">
-                    {label.value}
-                  </ComboboxItem>
+                  <ComboboxItem key={label.id} value={label} magnitude="md" label={label.value} />
                 )}
               </ComboboxList>
             </ComboboxContent>
@@ -527,18 +524,16 @@ export const Creatable: Story = {
                 tone="neutral"
                 magnitude="xl"
                 render={<DialogClose />}
-              >
-                Cancel
-              </Button>
+                label="Cancel"
+              />
               <Button
                 sizing="hug"
                 prominence="primary"
                 tone="neutral"
                 magnitude="xl"
                 onClick={createLabel}
-              >
-                Create
-              </Button>
+                label="Create"
+              />
             </DialogActions>
           </DialogContent>
         </Dialog>
diff --git a/packages/propel/src/components/context-menu/context-menu-checkbox-item.tsx b/packages/propel/src/components/context-menu/context-menu-checkbox-item.tsx
index 2b00364a..737287a5 100644
--- a/packages/propel/src/components/context-menu/context-menu-checkbox-item.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-checkbox-item.tsx
@@ -9,18 +9,19 @@ import {
   ContextMenuItemShortcut,
   type ContextMenuItemTone,
 } from "../../elements/context-menu";
-import { Icon } from "../../internal/icon";
 
 export type ContextMenuCheckboxItemProps = Omit<
   BaseContextMenu.CheckboxItem.Props,
-  "className" | "style"
+  "children" | "className" | "label" | "style"
 > & {
   /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
   tone: ContextMenuItemTone;
-  /** Leading icon after the tick. */
+  /** Leading element after the tick, e.g. `<Icon icon={Columns} />`. */
   icon?: React.ReactNode;
-  /** Trailing keyboard-shortcut hint after the label. */
-  trailing?: React.ReactNode;
+  /** Primary row label. */
+  label: React.ReactNode;
+  /** Element rendered at the inline end of the row, often a keyboard shortcut. */
+  endContent?: React.ReactNode;
 };
 
 /**
@@ -31,8 +32,8 @@ export type ContextMenuCheckboxItemProps = Omit<
 export function ContextMenuCheckboxItem({
   tone,
   icon,
-  trailing,
-  children,
+  endContent,
+  label,
   ...props
 }: ContextMenuCheckboxItemProps) {
   return (
@@ -46,9 +47,9 @@ export function ContextMenuCheckboxItem({
       >
         <Check aria-hidden />
       </BaseContextMenu.CheckboxItemIndicator>
-      {icon != null ? <Icon>{icon}</Icon> : null}
-      <ContextMenuItemLabel>{children}</ContextMenuItemLabel>
-      {trailing != null ? <ContextMenuItemShortcut>{trailing}</ContextMenuItemShortcut> : null}
+      {icon}
+      <ContextMenuItemLabel>{label}</ContextMenuItemLabel>
+      {endContent != null ? <ContextMenuItemShortcut>{endContent}</ContextMenuItemShortcut> : null}
     </BaseContextMenu.CheckboxItem>
   );
 }
diff --git a/packages/propel/src/components/context-menu/context-menu-item.tsx b/packages/propel/src/components/context-menu/context-menu-item.tsx
index 9cc3fae9..96ba46e0 100644
--- a/packages/propel/src/components/context-menu/context-menu-item.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-item.tsx
@@ -9,40 +9,41 @@ import {
   type ContextMenuItemTone,
   ContextMenuItemShortcut,
 } from "../../elements/context-menu";
-import { Icon } from "../../internal/icon";
 
 export type ContextMenuItemProps = Omit<
   BaseContextMenu.Item.Props,
-  "className" | "style" | "render"
+  "children" | "className" | "label" | "style" | "render"
 > & {
   /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
   tone: ContextMenuItemTone;
-  /** Leading icon before the label. */
+  /** Leading element before the label, e.g. `<Icon icon={Copy} />`. */
   icon?: React.ReactNode;
-  /** Trailing keyboard-shortcut hint after the label. */
-  trailing?: React.ReactNode;
+  /** Primary row label. */
+  label: React.ReactNode;
+  /** Element rendered at the inline end of the row, often a keyboard shortcut. */
+  endContent?: React.ReactNode;
   /** Single-select selected state. */
   selected?: boolean;
 };
 
 /**
  * The ready-made menu row: grafts Base UI's `Item` behavior onto the styled `ContextMenuItem` and
- * composes 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.
+ * composes its region parts — a leading icon, the label, optional end content, and a trailing check
+ * for single-select selected state. Pass `tone="danger"` for destructive actions.
  */
 export function ContextMenuItem({
   tone,
   icon,
-  trailing,
+  endContent,
   selected,
-  children,
+  label,
   ...props
 }: ContextMenuItemProps) {
   return (
     <BaseContextMenu.Item {...props} render={<ContextMenuItemElement tone={tone} />}>
-      {icon != null ? <Icon>{icon}</Icon> : null}
-      <ContextMenuItemLabel>{children}</ContextMenuItemLabel>
-      {trailing != null ? <ContextMenuItemShortcut>{trailing}</ContextMenuItemShortcut> : null}
+      {icon}
+      <ContextMenuItemLabel>{label}</ContextMenuItemLabel>
+      {endContent != null ? <ContextMenuItemShortcut>{endContent}</ContextMenuItemShortcut> : null}
       {selected ? (
         <ContextMenuItemIndicator data-selected="">
           <Check />
diff --git a/packages/propel/src/components/context-menu/context-menu-link-item.tsx b/packages/propel/src/components/context-menu/context-menu-link-item.tsx
index 5cc6c56a..cd6aa2b5 100644
--- a/packages/propel/src/components/context-menu/context-menu-link-item.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-link-item.tsx
@@ -7,37 +7,38 @@ import {
   type ContextMenuItemTone,
   ContextMenuItemShortcut,
 } from "../../elements/context-menu";
-import { Icon } from "../../internal/icon";
 
 export type ContextMenuLinkItemProps = Omit<
   BaseContextMenu.LinkItem.Props,
-  "className" | "style" | "render"
+  "children" | "className" | "label" | "style" | "render"
 > & {
   /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
   tone: ContextMenuItemTone;
-  /** Leading icon before the label. */
+  /** Leading element before the label, e.g. `<Icon icon={ExternalLink} />`. */
   icon?: React.ReactNode;
-  /** Trailing hint after the label. */
-  trailing?: React.ReactNode;
+  /** Primary row label. */
+  label: React.ReactNode;
+  /** Element rendered at the inline end of the row. */
+  endContent?: React.ReactNode;
 };
 
 /**
  * The ready-made navigational menu row: grafts Base UI's `LinkItem` behavior onto the styled
- * `ContextMenuLinkItem` and composes its region parts — a leading icon, the label, and an optional
- * trailing hint.
+ * `ContextMenuLinkItem` and composes its region parts — a leading icon, the label, and optional end
+ * content.
  */
 export function ContextMenuLinkItem({
   tone,
   icon,
-  trailing,
-  children,
+  endContent,
+  label,
   ...props
 }: ContextMenuLinkItemProps) {
   return (
     <BaseContextMenu.LinkItem {...props} render={<ContextMenuLinkItemElement tone={tone} />}>
-      {icon != null ? <Icon>{icon}</Icon> : null}
-      <ContextMenuItemLabel>{children}</ContextMenuItemLabel>
-      {trailing != null ? <ContextMenuItemShortcut>{trailing}</ContextMenuItemShortcut> : null}
+      {icon}
+      <ContextMenuItemLabel>{label}</ContextMenuItemLabel>
+      {endContent != null ? <ContextMenuItemShortcut>{endContent}</ContextMenuItemShortcut> : null}
     </BaseContextMenu.LinkItem>
   );
 }
diff --git a/packages/propel/src/components/context-menu/context-menu-radio-item.tsx b/packages/propel/src/components/context-menu/context-menu-radio-item.tsx
index 91eda3bb..e6692504 100644
--- a/packages/propel/src/components/context-menu/context-menu-radio-item.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-radio-item.tsx
@@ -9,18 +9,19 @@ import {
   ContextMenuRadioItem as ContextMenuRadioItemElement,
   ContextMenuRadioItemIndicator,
 } from "../../elements/context-menu";
-import { Icon } from "../../internal/icon";
 
 export type ContextMenuRadioItemProps = Omit<
   BaseContextMenu.RadioItem.Props,
-  "className" | "style"
+  "children" | "className" | "label" | "style"
 > & {
   /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
   tone: ContextMenuItemTone;
-  /** Leading icon after the radio dot. */
+  /** Leading element after the radio dot, e.g. `<Icon icon={AlignLeft} />`. */
   icon?: React.ReactNode;
-  /** Trailing keyboard-shortcut hint after the label. */
-  trailing?: React.ReactNode;
+  /** Primary row label. */
+  label: React.ReactNode;
+  /** Element rendered at the inline end of the row, often a keyboard shortcut. */
+  endContent?: React.ReactNode;
 };
 
 /**
@@ -31,8 +32,8 @@ export type ContextMenuRadioItemProps = Omit<
 export function ContextMenuRadioItem({
   tone,
   icon,
-  trailing,
-  children,
+  endContent,
+  label,
   ...props
 }: ContextMenuRadioItemProps) {
   return (
@@ -40,9 +41,9 @@ export function ContextMenuRadioItem({
       <BaseContextMenu.RadioItemIndicator keepMounted render={<ContextMenuRadioItemIndicator />}>
         <Circle aria-hidden />
       </BaseContextMenu.RadioItemIndicator>
-      {icon != null ? <Icon>{icon}</Icon> : null}
-      <ContextMenuItemLabel>{children}</ContextMenuItemLabel>
-      {trailing != null ? <ContextMenuItemShortcut>{trailing}</ContextMenuItemShortcut> : null}
+      {icon}
+      <ContextMenuItemLabel>{label}</ContextMenuItemLabel>
+      {endContent != null ? <ContextMenuItemShortcut>{endContent}</ContextMenuItemShortcut> : null}
     </BaseContextMenu.RadioItem>
   );
 }
diff --git a/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx b/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx
index 4b6a1bac..1941b212 100644
--- a/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx
@@ -9,30 +9,31 @@ import {
   type ContextMenuSubmenuTriggerTone,
 } from "../../elements/context-menu";
 import { DisclosureIndicator } from "../../internal/disclosure-indicator";
-import { Icon } from "../../internal/icon";
 
 export type ContextMenuSubmenuTriggerProps = Omit<
   BaseContextMenu.SubmenuTrigger.Props,
-  "className" | "style" | "render"
+  "children" | "className" | "label" | "style" | "render"
 > & {
   /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
   tone: ContextMenuSubmenuTriggerTone;
-  /** Leading icon before the label. */
+  /** Leading element before the label, e.g. `<Icon icon={Folder} />`. */
   icon?: React.ReactNode;
-  /** Trailing hint before the submenu caret. */
-  trailing?: React.ReactNode;
+  /** Primary row label. */
+  label: React.ReactNode;
+  /** Element rendered before the submenu caret at the inline end of the row. */
+  endContent?: React.ReactNode;
 };
 
 /**
  * The ready-made submenu trigger: grafts Base UI's `SubmenuTrigger` behavior onto the styled
  * `ContextMenuSubmenuTrigger` and composes its region parts — a leading icon, the label, an
- * optional trailing hint, and the caret that points toward the submenu.
+ * optional end content, and the caret that points toward the submenu.
  */
 export function ContextMenuSubmenuTrigger({
   tone,
   icon,
-  trailing,
-  children,
+  endContent,
+  label,
   ...props
 }: ContextMenuSubmenuTriggerProps) {
   return (
@@ -40,9 +41,9 @@ export function ContextMenuSubmenuTrigger({
       {...props}
       render={<ContextMenuSubmenuTriggerElement tone={tone} />}
     >
-      {icon != null ? <Icon>{icon}</Icon> : null}
-      <ContextMenuItemLabel>{children}</ContextMenuItemLabel>
-      {trailing != null ? <ContextMenuItemShortcut>{trailing}</ContextMenuItemShortcut> : null}
+      {icon}
+      <ContextMenuItemLabel>{label}</ContextMenuItemLabel>
+      {endContent != null ? <ContextMenuItemShortcut>{endContent}</ContextMenuItemShortcut> : null}
       <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
         <ChevronDown />
       </DisclosureIndicator>
diff --git a/packages/propel/src/components/context-menu/context-menu.stories.tsx b/packages/propel/src/components/context-menu/context-menu.stories.tsx
index 31d4ebe8..281fd18a 100644
--- a/packages/propel/src/components/context-menu/context-menu.stories.tsx
+++ b/packages/propel/src/components/context-menu/context-menu.stories.tsx
@@ -12,6 +12,7 @@ import {
 import * as React from "react";
 import { expect, fireEvent, userEvent, waitFor, within } from "storybook/test";
 
+import { Icon } from "../icon";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -27,8 +28,8 @@ import {
 } from "./index";
 
 // Components-tier story: the ready-made `ContextMenu` root and `ContextMenuContent` surface graft
-// Base UI's portal/positioner/popup, and the rich `ContextMenuItem` lays out an icon + label + a
-// trailing shortcut. `ContextMenuTrigger` is the behavior surface that opens the menu, and
+// Base UI's portal/positioner/popup, and the rich `ContextMenuItem` lays out an icon + label +
+// `endContent`. `ContextMenuTrigger` is the behavior surface that opens the menu, and
 // `ContextMenuSeparator` is the ready-made divider. The elements-tier story composes the raw
 // `ContextMenuItem` rows by hand.
 const meta = {
@@ -59,19 +60,21 @@ export const Default: Story = {
         Right-click here
       </ContextMenuTrigger>
       <ContextMenuContent>
-        <ContextMenuItem tone="neutral" icon={<Scissors />} trailing="⌘X">
-          Cut
-        </ContextMenuItem>
-        <ContextMenuItem tone="neutral" icon={<Copy />} trailing="⌘C">
-          Copy
-        </ContextMenuItem>
-        <ContextMenuItem tone="neutral" icon={<ClipboardPaste />} trailing="⌘V">
-          Paste
-        </ContextMenuItem>
+        <ContextMenuItem
+          tone="neutral"
+          icon={<Icon icon={Scissors} />}
+          endContent="⌘X"
+          label="Cut"
+        />
+        <ContextMenuItem tone="neutral" icon={<Icon icon={Copy} />} endContent="⌘C" label="Copy" />
+        <ContextMenuItem
+          tone="neutral"
+          icon={<Icon icon={ClipboardPaste} />}
+          endContent="⌘V"
+          label="Paste"
+        />
         <ContextMenuSeparator />
-        <ContextMenuItem tone="danger" icon={<Trash2 />}>
-          Delete
-        </ContextMenuItem>
+        <ContextMenuItem tone="danger" icon={<Icon icon={Trash2} />} label="Delete" />
       </ContextMenuContent>
     </ContextMenu>
   ),
@@ -101,16 +104,10 @@ export const Tones: Story = {
         Right-click here
       </ContextMenuTrigger>
       <ContextMenuContent>
-        <ContextMenuItem tone="neutral" icon={<PencilLine />}>
-          Rename
-        </ContextMenuItem>
-        <ContextMenuItem tone="neutral" icon={<Copy />}>
-          Duplicate
-        </ContextMenuItem>
+        <ContextMenuItem tone="neutral" icon={<Icon icon={PencilLine} />} label="Rename" />
+        <ContextMenuItem tone="neutral" icon={<Icon icon={Copy} />} label="Duplicate" />
         <ContextMenuSeparator />
-        <ContextMenuItem tone="danger" icon={<Trash2 />}>
-          Delete
-        </ContextMenuItem>
+        <ContextMenuItem tone="danger" icon={<Icon icon={Trash2} />} label="Delete" />
       </ContextMenuContent>
     </ContextMenu>
   ),
@@ -156,26 +153,22 @@ export const Submenu: Story = {
         Right-click here
       </ContextMenuTrigger>
       <ContextMenuContent>
-        <ContextMenuItem tone="neutral" icon={<PencilLine />}>
-          Rename
-        </ContextMenuItem>
-        <ContextMenuItem tone="neutral" icon={<Copy />}>
-          Duplicate
-        </ContextMenuItem>
+        <ContextMenuItem tone="neutral" icon={<Icon icon={PencilLine} />} label="Rename" />
+        <ContextMenuItem tone="neutral" icon={<Icon icon={Copy} />} label="Duplicate" />
         <ContextMenuSubmenu>
-          <ContextMenuSubmenuTrigger tone="neutral" icon={<FolderInput />}>
-            Move to
-          </ContextMenuSubmenuTrigger>
+          <ContextMenuSubmenuTrigger
+            tone="neutral"
+            icon={<Icon icon={FolderInput} />}
+            label="Move to"
+          />
           <ContextMenuContent>
-            <ContextMenuItem tone="neutral">Mobile app</ContextMenuItem>
-            <ContextMenuItem tone="neutral">Web app</ContextMenuItem>
-            <ContextMenuItem tone="neutral">Design system</ContextMenuItem>
+            <ContextMenuItem tone="neutral" label="Mobile app" />
+            <ContextMenuItem tone="neutral" label="Web app" />
+            <ContextMenuItem tone="neutral" label="Design system" />
           </ContextMenuContent>
         </ContextMenuSubmenu>
         <ContextMenuSeparator />
-        <ContextMenuItem tone="danger" icon={<Trash2 />}>
-          Delete
-        </ContextMenuItem>
+        <ContextMenuItem tone="danger" icon={<Icon icon={Trash2} />} label="Delete" />
       </ContextMenuContent>
     </ContextMenu>
   ),
@@ -219,20 +212,25 @@ export const LinkItems: Story = {
       <ContextMenuContent>
         <ContextMenuLinkItem
           tone="neutral"
-          icon={<ExternalLink />}
+          icon={<Icon icon={ExternalLink} />}
           href="#work-item"
           target="_blank"
           rel="noopener noreferrer"
-        >
-          Open in new tab
-        </ContextMenuLinkItem>
-        <ContextMenuLinkItem tone="neutral" icon={<Link2 />} href="#activity">
-          Go to activity
-        </ContextMenuLinkItem>
+          label="Open in new tab"
+        />
+        <ContextMenuLinkItem
+          tone="neutral"
+          icon={<Icon icon={Link2} />}
+          href="#activity"
+          label="Go to activity"
+        />
         <ContextMenuSeparator />
-        <ContextMenuItem tone="neutral" icon={<Copy />} trailing="⌘C">
-          Copy link
-        </ContextMenuItem>
+        <ContextMenuItem
+          tone="neutral"
+          icon={<Icon icon={Copy} />}
+          endContent="⌘C"
+          label="Copy link"
+        />
       </ContextMenuContent>
     </ContextMenu>
   ),
@@ -288,9 +286,8 @@ export const SingleSelect: Story = {
               selected={sortBy === option.key}
               closeOnClick={false}
               onClick={() => setSortBy(option.key)}
-            >
-              {option.label}
-            </ContextMenuItem>
+              label={option.label}
+            />
           ))}
         </ContextMenuContent>
       </ContextMenu>
@@ -343,17 +340,22 @@ export const SelectionRows: Story = {
             checked={wrap}
             onCheckedChange={setWrap}
             closeOnClick={false}
-          >
-            Wrap titles
-          </ContextMenuCheckboxItem>
+            label="Wrap titles"
+          />
           <ContextMenuSeparator />
           <ContextMenuRadioGroup value={sort} onValueChange={setSort}>
-            <ContextMenuRadioItem tone="neutral" value="manual" closeOnClick={false}>
-              Manual order
-            </ContextMenuRadioItem>
-            <ContextMenuRadioItem tone="neutral" value="updated" closeOnClick={false}>
-              Last updated
-            </ContextMenuRadioItem>
+            <ContextMenuRadioItem
+              tone="neutral"
+              value="manual"
+              closeOnClick={false}
+              label="Manual order"
+            />
+            <ContextMenuRadioItem
+              tone="neutral"
+              value="updated"
+              closeOnClick={false}
+              label="Last updated"
+            />
           </ContextMenuRadioGroup>
         </ContextMenuContent>
       </ContextMenu>
diff --git a/packages/propel/src/components/dialog/dialog-close.tsx b/packages/propel/src/components/dialog/dialog-close.tsx
index 8b916ea7..25da6a9b 100644
--- a/packages/propel/src/components/dialog/dialog-close.tsx
+++ b/packages/propel/src/components/dialog/dialog-close.tsx
@@ -7,11 +7,14 @@ export type DialogCloseProps = Omit<BaseDialog.Close.Props, "className" | "style
  * `IconButton` so the styled primitive's look wins via render-composition:
  *
  * ```tsx
- * <IconButton prominence="ghost" tone="neutral" magnitude="lg" render={<DialogClose />}>
- *   <IconButtonIcon>
- *     <X />
- *   </IconButtonIcon>
- * </IconButton>;
+ * <IconButton
+ *   prominence="ghost"
+ *   tone="neutral"
+ *   magnitude="lg"
+ *   aria-label={closeLabel}
+ *   icon={<Icon icon={X} />}
+ *   render={<DialogClose />}
+ * />;
  * ```
  *
  * Maps 1:1 to `Dialog.Close`.
diff --git a/packages/propel/src/components/dialog/dialog-trigger.tsx b/packages/propel/src/components/dialog/dialog-trigger.tsx
index 356d0b62..eb4d1397 100644
--- a/packages/propel/src/components/dialog/dialog-trigger.tsx
+++ b/packages/propel/src/components/dialog/dialog-trigger.tsx
@@ -7,9 +7,13 @@ export type DialogTriggerProps = Omit<BaseDialog.Trigger.Props, "className" | "s
  * primitive's look wins via render-composition:
  *
  * ```tsx
- * <Button prominence="secondary" tone="neutral" magnitude="xl" render={<DialogTrigger />}>
- *   Open dialog
- * </Button>;
+ * <Button
+ *   prominence="secondary"
+ *   tone="neutral"
+ *   magnitude="xl"
+ *   label="Open dialog"
+ *   render={<DialogTrigger />}
+ * />;
  * ```
  *
  * Base UI manages `aria-haspopup`/`aria-expanded` and focus restoration when the dialog closes.
diff --git a/packages/propel/src/components/dialog/dialog.stories.tsx b/packages/propel/src/components/dialog/dialog.stories.tsx
index 70cdbd9f..60b5f081 100644
--- a/packages/propel/src/components/dialog/dialog.stories.tsx
+++ b/packages/propel/src/components/dialog/dialog.stories.tsx
@@ -3,7 +3,6 @@ import { Link2, Pencil, Trash2, TriangleAlert, X } from "lucide-react";
 import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Button } from "../../elements/button";
 import {
   AlertDialog,
   AlertDialogActions,
@@ -15,6 +14,8 @@ import {
   AlertDialogIntro,
   AlertDialogTitle,
 } from "../alert-dialog";
+import { Button } from "../button";
+import { Icon } from "../icon";
 import { IconButton } from "../icon-button";
 import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "../menu";
 import { TextAreaField } from "../text-area-field";
@@ -67,9 +68,8 @@ export const Default: Story = {
         tone="neutral"
         magnitude="xl"
         render={<DialogTrigger />}
-      >
-        Delete project
-      </Button>
+        label="Delete project"
+      />
       <DialogContent magnitude="sm">
         <DialogHeader>
           <DialogHeading>
@@ -81,9 +81,8 @@ export const Default: Story = {
             magnitude="lg"
             aria-label="Close"
             render={<DialogClose />}
-          >
-            <X />
-          </IconButton>
+            icon={<Icon icon={X} />}
+          />
         </DialogHeader>
         <DialogBody>
           <DialogDescription>
@@ -98,18 +97,16 @@ export const Default: Story = {
             tone="neutral"
             magnitude="xl"
             render={<DialogClose />}
-          >
-            Cancel
-          </Button>
+            label="Cancel"
+          />
           <Button
             sizing="hug"
             prominence="primary"
             tone="danger"
             magnitude="xl"
             render={<DialogClose />}
-          >
-            Delete
-          </Button>
+            label="Delete"
+          />
         </DialogActions>
       </DialogContent>
     </Dialog>
@@ -154,9 +151,8 @@ export const EscapeCloses: Story = {
         tone="neutral"
         magnitude="xl"
         render={<DialogTrigger />}
-      >
-        Open settings
-      </Button>
+        label="Open settings"
+      />
       <DialogContent magnitude="sm">
         <DialogHeader>
           <DialogHeading>
@@ -194,9 +190,8 @@ export const NonDismissable: Story = {
         tone="neutral"
         magnitude="xl"
         render={<DialogTrigger />}
-      >
-        Open locked dialog
-      </Button>
+        label="Open locked dialog"
+      />
       <DialogContent magnitude="sm">
         <DialogHeader>
           <DialogHeading>
@@ -215,9 +210,8 @@ export const NonDismissable: Story = {
             tone="neutral"
             magnitude="xl"
             render={<DialogClose />}
-          >
-            Discard
-          </Button>
+            label="Discard"
+          />
         </DialogActions>
       </DialogContent>
     </Dialog>
@@ -274,9 +268,8 @@ export const ScrollableBody: Story = {
         tone="neutral"
         magnitude="xl"
         render={<DialogTrigger />}
-      >
-        What&apos;s new
-      </Button>
+        label="What's new"
+      />
       <DialogContent magnitude="md">
         <DialogHeader>
           <DialogHeading>
@@ -288,9 +281,8 @@ export const ScrollableBody: Story = {
             magnitude="lg"
             aria-label="Close"
             render={<DialogClose />}
-          >
-            <X />
-          </IconButton>
+            icon={<Icon icon={X} />}
+          />
         </DialogHeader>
         {/* A scrollable region must be keyboard-reachable (axe scrollable-region-focusable). */}
         <DialogBody tabIndex={0}>
@@ -313,9 +305,8 @@ export const ScrollableBody: Story = {
             tone="neutral"
             magnitude="xl"
             render={<DialogClose />}
-          >
-            Got it
-          </Button>
+            label="Got it"
+          />
         </DialogActions>
       </DialogContent>
     </Dialog>
@@ -368,16 +359,17 @@ export const OpenFromMenu: Story = {
             tone="neutral"
             magnitude="xl"
             render={<MenuTrigger />}
-          >
-            Project options
-          </Button>
+            label="Project options"
+          />
           <MenuContent sizing="sm">
-            <MenuItem icon={<Pencil />}>Edit</MenuItem>
-            <MenuItem icon={<Link2 />}>Copy link</MenuItem>
+            <MenuItem icon={<Icon icon={Pencil} tint="secondary" />} label="Edit" />
+            <MenuItem icon={<Icon icon={Link2} tint="secondary" />} label="Copy link" />
             <MenuSeparator />
-            <MenuItem icon={<Trash2 />} onClick={() => setOpen(true)}>
-              Delete project…
-            </MenuItem>
+            <MenuItem
+              icon={<Icon icon={Trash2} tint="danger" />}
+              onClick={() => setOpen(true)}
+              label="Delete project…"
+            />
           </MenuContent>
         </Menu>
         <Dialog open={open} onOpenChange={setOpen}>
@@ -392,9 +384,8 @@ export const OpenFromMenu: Story = {
                 magnitude="lg"
                 aria-label="Close"
                 render={<DialogClose />}
-              >
-                <X />
-              </IconButton>
+                icon={<Icon icon={X} />}
+              />
             </DialogHeader>
             <DialogBody>
               <DialogDescription>
@@ -409,18 +400,16 @@ export const OpenFromMenu: Story = {
                 tone="neutral"
                 magnitude="xl"
                 render={<DialogClose />}
-              >
-                Cancel
-              </Button>
+                label="Cancel"
+              />
               <Button
                 sizing="hug"
                 prominence="primary"
                 tone="danger"
                 magnitude="xl"
                 render={<DialogClose />}
-              >
-                Delete
-              </Button>
+                label="Delete"
+              />
             </DialogActions>
           </DialogContent>
         </Dialog>
@@ -472,9 +461,8 @@ export const NestedDialogs: Story = {
         tone="neutral"
         magnitude="xl"
         render={<DialogTrigger />}
-      >
-        Invite teammates
-      </Button>
+        label="Invite teammates"
+      />
       <DialogContent magnitude="md">
         <DialogHeader>
           <DialogHeading>
@@ -486,9 +474,8 @@ export const NestedDialogs: Story = {
             magnitude="lg"
             aria-label="Close"
             render={<DialogClose />}
-          >
-            <X />
-          </IconButton>
+            icon={<Icon icon={X} />}
+          />
         </DialogHeader>
         <DialogBody>
           <DialogDescription>
@@ -504,9 +491,8 @@ export const NestedDialogs: Story = {
               tone="neutral"
               magnitude="xl"
               render={<DialogTrigger />}
-            >
-              Create custom role
-            </Button>
+              label="Create custom role"
+            />
             <DialogContent magnitude="sm">
               <DialogHeader>
                 <DialogHeading>
@@ -525,9 +511,8 @@ export const NestedDialogs: Story = {
                   tone="neutral"
                   magnitude="xl"
                   render={<DialogClose />}
-                >
-                  Back
-                </Button>
+                  label="Back"
+                />
               </DialogActions>
             </DialogContent>
           </Dialog>
@@ -537,9 +522,8 @@ export const NestedDialogs: Story = {
             tone="neutral"
             magnitude="xl"
             render={<DialogClose />}
-          >
-            Send invites
-          </Button>
+            label="Send invites"
+          />
         </DialogActions>
       </DialogContent>
     </Dialog>
@@ -610,9 +594,8 @@ export const CloseConfirmation: Story = {
             tone="neutral"
             magnitude="xl"
             render={<DialogTrigger />}
-          >
-            Add comment
-          </Button>
+            label="Add comment"
+          />
           <DialogContent magnitude="md">
             <DialogHeader>
               <DialogHeading>
@@ -624,9 +607,8 @@ export const CloseConfirmation: Story = {
                 magnitude="lg"
                 aria-label="Close"
                 render={<DialogClose />}
-              >
-                <X />
-              </IconButton>
+                icon={<Icon icon={X} />}
+              />
             </DialogHeader>
             <DialogBody>
               <TextAreaField
@@ -648,9 +630,8 @@ export const CloseConfirmation: Story = {
                   setDialogOpen(false);
                   setComment("");
                 }}
-              >
-                Post comment
-              </Button>
+                label="Post comment"
+              />
             </DialogActions>
           </DialogContent>
         </Dialog>
@@ -674,9 +655,8 @@ export const CloseConfirmation: Story = {
                 tone="neutral"
                 magnitude="xl"
                 render={<AlertDialogClose />}
-              >
-                Go back
-              </Button>
+                label="Go back"
+              />
               <Button
                 sizing="hug"
                 prominence="primary"
@@ -687,9 +667,8 @@ export const CloseConfirmation: Story = {
                   setDialogOpen(false);
                   setComment("");
                 }}
-              >
-                Discard
-              </Button>
+                label="Discard"
+              />
             </AlertDialogActions>
           </AlertDialogContent>
         </AlertDialog>
@@ -766,18 +745,16 @@ export const DetachedTriggers: Story = {
         tone="neutral"
         magnitude="xl"
         render={<DialogTrigger handle={shortcutsDialog} />}
-      >
-        Keyboard shortcuts
-      </Button>
+        label="Keyboard shortcuts"
+      />
       <Button
         sizing="hug"
         prominence="ghost"
         tone="neutral"
         magnitude="xl"
         render={<DialogTrigger handle={shortcutsDialog} />}
-      >
-        Help
-      </Button>
+        label="Help"
+      />
       <Dialog handle={shortcutsDialog}>
         <DialogContent magnitude="sm">
           <DialogHeader>
@@ -790,9 +767,8 @@ export const DetachedTriggers: Story = {
               magnitude="lg"
               aria-label="Close"
               render={<DialogClose />}
-            >
-              <X />
-            </IconButton>
+              icon={<Icon icon={X} />}
+            />
           </DialogHeader>
           <DialogBody>
             <DialogDescription>
@@ -807,9 +783,8 @@ export const DetachedTriggers: Story = {
               tone="neutral"
               magnitude="xl"
               render={<DialogClose />}
-            >
-              Done
-            </Button>
+              label="Done"
+            />
           </DialogActions>
         </DialogContent>
       </Dialog>
diff --git a/packages/propel/src/components/drawer/drawer-close.tsx b/packages/propel/src/components/drawer/drawer-close.tsx
index f463417e..f27b2e7d 100644
--- a/packages/propel/src/components/drawer/drawer-close.tsx
+++ b/packages/propel/src/components/drawer/drawer-close.tsx
@@ -10,9 +10,13 @@ export type DrawerCloseProps = Omit<BaseDrawer.Close.Props, "className" | "style
  * ```tsx
  * <DrawerClose
  *   render={
- *     <IconButton prominence="ghost" tone="neutral" magnitude="lg" aria-label={closeLabel}>
- *       <X />
- *     </IconButton>
+ *     <IconButton
+ *       prominence="ghost"
+ *       tone="neutral"
+ *       magnitude="lg"
+ *       aria-label={closeLabel}
+ *       icon={<Icon icon={X} />}
+ *     />
  *   }
  * />;
  * ```
diff --git a/packages/propel/src/components/drawer/drawer-trigger.tsx b/packages/propel/src/components/drawer/drawer-trigger.tsx
index 66ee3748..e6c5e3a8 100644
--- a/packages/propel/src/components/drawer/drawer-trigger.tsx
+++ b/packages/propel/src/components/drawer/drawer-trigger.tsx
@@ -10,9 +10,13 @@ export type DrawerTriggerProps = Omit<BaseDrawer.Trigger.Props, "className" | "s
  * ```tsx
  * <DrawerTrigger
  *   render={
- *     <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
- *       Open details
- *     </Button>
+ *     <Button
+ *       sizing="hug"
+ *       prominence="secondary"
+ *       tone="neutral"
+ *       magnitude="xl"
+ *       label="Open details"
+ *     />
  *   }
  * />;
  * ```
diff --git a/packages/propel/src/components/drawer/drawer.stories.tsx b/packages/propel/src/components/drawer/drawer.stories.tsx
index 5db57a51..0b58f529 100644
--- a/packages/propel/src/components/drawer/drawer.stories.tsx
+++ b/packages/propel/src/components/drawer/drawer.stories.tsx
@@ -3,7 +3,6 @@ import { X } from "lucide-react";
 import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Button } from "../../elements/button";
 import {
   AlertDialog,
   AlertDialogActions,
@@ -13,6 +12,8 @@ import {
   AlertDialogIntro,
   AlertDialogTitle,
 } from "../alert-dialog";
+import { Button } from "../button";
+import { Icon } from "../icon";
 import { IconButton } from "../icon-button";
 import { TextArea } from "../text-area";
 import {
@@ -64,9 +65,13 @@ export const Default: Story = {
     <Drawer>
       <DrawerTrigger
         render={
-          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
-            Open details
-          </Button>
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            label="Open details"
+          />
         }
       />
       <DrawerPanel side="end">
@@ -77,9 +82,13 @@ export const Default: Story = {
           </DrawerHeaderContent>
           <DrawerClose
             render={
-              <IconButton prominence="ghost" tone="neutral" magnitude="lg" aria-label="Close">
-                <X />
-              </IconButton>
+              <IconButton
+                prominence="ghost"
+                tone="neutral"
+                magnitude="lg"
+                aria-label="Close"
+                icon={<Icon icon={X} />}
+              />
             }
           />
         </DrawerHeader>
@@ -87,14 +96,16 @@ export const Default: Story = {
         <DrawerFooter>
           <DrawerClose
             render={
-              <Button sizing="hug" prominence="ghost" tone="neutral" magnitude="lg">
-                Cancel
-              </Button>
+              <Button
+                sizing="hug"
+                prominence="ghost"
+                tone="neutral"
+                magnitude="lg"
+                label="Cancel"
+              />
             }
           />
-          <Button sizing="hug" prominence="primary" tone="neutral" magnitude="lg">
-            Save
-          </Button>
+          <Button sizing="hug" prominence="primary" tone="neutral" magnitude="lg" label="Save" />
         </DrawerFooter>
       </DrawerPanel>
     </Drawer>
@@ -131,9 +142,13 @@ export const StartSide: Story = {
     <Drawer>
       <DrawerTrigger
         render={
-          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
-            Open navigation
-          </Button>
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            label="Open navigation"
+          />
         }
       />
       <DrawerPanel side="start">
@@ -143,9 +158,13 @@ export const StartSide: Story = {
           </DrawerHeaderContent>
           <DrawerClose
             render={
-              <IconButton prominence="ghost" tone="neutral" magnitude="lg" aria-label="Close">
-                <X />
-              </IconButton>
+              <IconButton
+                prominence="ghost"
+                tone="neutral"
+                magnitude="lg"
+                aria-label="Close"
+                icon={<Icon icon={X} />}
+              />
             }
           />
         </DrawerHeader>
@@ -189,9 +208,13 @@ export const EscapeCloses: Story = {
     <Drawer>
       <DrawerTrigger
         render={
-          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
-            Open filters
-          </Button>
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            label="Open filters"
+          />
         }
       />
       <DrawerPanel side="end">
@@ -222,9 +245,13 @@ export const Nested: Story = {
     <Drawer>
       <DrawerTrigger
         render={
-          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
-            Open settings
-          </Button>
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            label="Open settings"
+          />
         }
       />
       <DrawerPanel side="end">
@@ -238,9 +265,13 @@ export const Nested: Story = {
           <Drawer>
             <DrawerTrigger
               render={
-                <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="lg">
-                  Advanced options
-                </Button>
+                <Button
+                  sizing="hug"
+                  prominence="secondary"
+                  tone="neutral"
+                  magnitude="lg"
+                  label="Advanced options"
+                />
               }
             />
             <DrawerPanel side="end">
@@ -302,18 +333,26 @@ export const DetachedTriggers: Story = {
         handle={detailsDrawer}
         payload="WEB-101"
         render={
-          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
-            WEB-101
-          </Button>
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            label="WEB-101"
+          />
         }
       />
       <DrawerTrigger
         handle={detailsDrawer}
         payload="WEB-202"
         render={
-          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
-            WEB-202
-          </Button>
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="xl"
+            label="WEB-202"
+          />
         }
       />
       <Drawer handle={detailsDrawer}>
@@ -380,9 +419,13 @@ export const CloseConfirmation: Story = {
         >
           <DrawerTrigger
             render={
-              <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
-                Add comment
-              </Button>
+              <Button
+                sizing="hug"
+                prominence="secondary"
+                tone="neutral"
+                magnitude="xl"
+                label="Add comment"
+              />
             }
           />
           <DrawerPanel side="end">
@@ -393,9 +436,13 @@ export const CloseConfirmation: Story = {
               </DrawerHeaderContent>
               <DrawerClose
                 render={
-                  <IconButton prominence="ghost" tone="neutral" magnitude="lg" aria-label="Close">
-                    <X />
-                  </IconButton>
+                  <IconButton
+                    prominence="ghost"
+                    tone="neutral"
+                    magnitude="lg"
+                    aria-label="Close"
+                    icon={<Icon icon={X} />}
+                  />
                 }
               />
             </DrawerHeader>
@@ -429,9 +476,8 @@ export const CloseConfirmation: Story = {
                 tone="neutral"
                 magnitude="lg"
                 onClick={() => setConfirmOpen(false)}
-              >
-                Keep editing
-              </Button>
+                label="Keep editing"
+              />
               <Button
                 sizing="hug"
                 prominence="primary"
@@ -442,9 +488,8 @@ export const CloseConfirmation: Story = {
                   setOpen(false);
                   setDraft("");
                 }}
-              >
-                Discard
-              </Button>
+                label="Discard"
+              />
             </AlertDialogActions>
           </AlertDialogContent>
         </AlertDialog>
diff --git a/packages/propel/src/components/form/form.stories.tsx b/packages/propel/src/components/form/form.stories.tsx
index e930d49a..e3b66cc4 100644
--- a/packages/propel/src/components/form/form.stories.tsx
+++ b/packages/propel/src/components/form/form.stories.tsx
@@ -168,9 +168,14 @@ export const Default: Story = {
           />
         </FormBody>
         <FormActions layout="inline">
-          <Button sizing="hug" type="submit" prominence="secondary" tone="neutral" magnitude="md">
-            Submit
-          </Button>
+          <Button
+            sizing="hug"
+            type="submit"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="md"
+            label="Submit"
+          />
         </FormActions>
       </Form>
     );
@@ -226,9 +231,14 @@ export const ConstraintValidationInteraction: Story = {
         />
       </FormBody>
       <FormActions layout="inline">
-        <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
-          Submit
-        </Button>
+        <Button
+          sizing="hug"
+          type="submit"
+          prominence="primary"
+          tone="neutral"
+          magnitude="md"
+          label="Submit"
+        />
       </FormActions>
     </Form>
   ),
@@ -279,9 +289,8 @@ export const AsyncValidation: Story = {
             tone="neutral"
             magnitude="md"
             loading={pending}
-          >
-            Create account
-          </Button>
+            label="Create account"
+          />
         </FormActions>
       </Form>
     );
@@ -338,9 +347,8 @@ export const ServerFunction: Story = {
             tone="neutral"
             magnitude="md"
             loading={pending}
-          >
-            Reserve username
-          </Button>
+            label="Reserve username"
+          />
         </FormActions>
       </Form>
     );
@@ -406,9 +414,14 @@ export const SchemaValidation: Story = {
           />
         </FormBody>
         <FormActions layout="inline">
-          <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
-            Submit
-          </Button>
+          <Button
+            sizing="hug"
+            type="submit"
+            prominence="primary"
+            tone="neutral"
+            magnitude="md"
+            label="Submit"
+          />
         </FormActions>
       </Form>
     );
diff --git a/packages/propel/src/components/icon-button/icon-button.stories.tsx b/packages/propel/src/components/icon-button/icon-button.stories.tsx
index 9b68ef5d..977febb5 100644
--- a/packages/propel/src/components/icon-button/icon-button.stories.tsx
+++ b/packages/propel/src/components/icon-button/icon-button.stories.tsx
@@ -4,6 +4,7 @@ import { expect, fn } from "storybook/test";
 
 import { IconButton as IconButtonElement } from "../../elements/icon-button";
 import { iconControl } from "../../storybook/icon-control";
+import { Icon } from "../icon";
 import { IconButton, type IconButtonMagnitude, type IconButtonProminence } from "./index";
 
 const PROMINENCES: IconButtonProminence[] = ["primary", "secondary", "tertiary", "ghost"];
@@ -13,7 +14,7 @@ const meta = {
   title: "Components/IconButton",
   component: IconButton,
   subcomponents: { IconButtonElement },
-  argTypes: { children: iconControl },
+  argTypes: { icon: iconControl },
   parameters: {
     design: {
       type: "figma",
@@ -24,7 +25,7 @@ const meta = {
     prominence: "primary",
     tone: "neutral",
     magnitude: "md",
-    children: <Plus />,
+    icon: <Icon icon={Plus} />,
     "aria-label": "Add item",
   },
 } satisfies Meta<typeof IconButton>;
@@ -124,9 +125,13 @@ export const Disabled: Story = {
 export const HasAccessibleName: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   render: () => (
-    <IconButton prominence="primary" tone="neutral" magnitude="md" aria-label="Add item">
-      <Plus />
-    </IconButton>
+    <IconButton
+      prominence="primary"
+      tone="neutral"
+      magnitude="md"
+      aria-label="Add item"
+      icon={<Icon icon={Plus} />}
+    />
   ),
   play: async ({ canvas }) => {
     await expect(canvas.getByRole("button", { name: "Add item" })).toBeInTheDocument();
diff --git a/packages/propel/src/components/icon-button/icon-button.tsx b/packages/propel/src/components/icon-button/icon-button.tsx
index b9f12f2f..c30573b6 100644
--- a/packages/propel/src/components/icon-button/icon-button.tsx
+++ b/packages/propel/src/components/icon-button/icon-button.tsx
@@ -6,20 +6,19 @@ import {
   IconButton as IconButtonElement,
   type IconButtonProps as IconButtonElementProps,
 } from "../../elements/icon-button";
-import { Icon } from "../../internal/icon";
 import { Spinner } from "../../internal/spinner";
 
-export type IconButtonProps = IconButtonElementProps & {
+export type IconButtonProps = Omit<IconButtonElementProps, "children"> & {
   /**
    * Set `false` when `render` swaps the underlying tag away from `<button>` (e.g. an `<a>`): Base
    * UI then adds `role`, tab focus, and Enter/Space activation as appropriate.
    */
   nativeButton?: boolean;
   /**
-   * The single node to render (an icon, an avatar, ...), sized to the button's `--node-size`. It is
-   * the button's only content; decorative, the accessible name comes from `aria-label`.
+   * The single icon element to render, usually `<Icon icon={...} />`. The accessible name comes
+   * from `aria-label`.
    */
-  children: React.ReactNode;
+  icon: React.ReactNode;
   /** Required: icon-only buttons have no visible text, so they must be labeled. */
   "aria-label": string;
   /** Shows a spinner, sets `aria-busy`, and makes the button non-interactive. */
@@ -28,15 +27,14 @@ export type IconButtonProps = IconButtonElementProps & {
 
 /**
  * The ready-made icon-only button: grafts Base UI's `Button` behavior onto the square `IconButton`
- * box, filling it with an `IconButtonIcon` glyph slot and swapping in an `IconButtonSpinner` while
- * `loading`. It shares Button's design tokens (`prominence`/`tone`/`magnitude`) but is its own
- * component/export. There is no `link` icon button. An `aria-label` is REQUIRED for the accessible
- * name.
+ * box, filling it with the provided icon element and swapping in a spinner while `loading`. It
+ * shares Button's design tokens (`prominence`/`tone`/`magnitude`) but is its own component/export.
+ * There is no `link` icon button. An `aria-label` is REQUIRED for the accessible name.
  */
 export function IconButton({
   render,
   nativeButton,
-  children,
+  icon,
   loading = false,
   disabled,
   prominence,
@@ -69,7 +67,7 @@ export function IconButton({
           <LoaderCircle />
         </Spinner>
       ) : (
-        <Icon>{children}</Icon>
+        icon
       )}
     </BaseButton>
   );
diff --git a/packages/propel/src/components/icon/index.tsx b/packages/propel/src/components/icon/index.tsx
new file mode 100644
index 00000000..9e142e1d
--- /dev/null
+++ b/packages/propel/src/components/icon/index.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import {
+  Icon as IconSlot,
+  type IconMagnitude,
+  type IconProps as IconSlotProps,
+  type IconTint,
+} from "../../internal/icon";
+
+export type { IconMagnitude, IconTint };
+
+export type IconGlyph =
+  | React.ComponentType<React.SVGProps<SVGSVGElement>>
+  | React.ExoticComponent<React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export type IconSource = IconGlyph | React.ReactNode;
+
+export type IconProps = Omit<IconSlotProps, "children" | "render"> & {
+  /** SVG component or node rendered inside the shared icon slot, e.g. `icon={Plus}`. */
+  icon: IconSource;
+};
+
+/**
+ * Public decorative icon slot. Pass the element this creates into components with icon slots
+ * (`startIcon`, `endIcon`, or `icon`) so those components render it directly.
+ */
+export function Icon({ icon: Glyph, ...props }: IconProps) {
+  const icon = isIconGlyph(Glyph)
+    ? React.createElement(Glyph, { "aria-hidden": true, focusable: false })
+    : Glyph;
+  return <IconSlot {...props}>{icon}</IconSlot>;
+}
+
+function isIconGlyph(icon: IconSource): icon is IconGlyph {
+  if (typeof icon === "function") return true;
+  if (typeof icon !== "object" || icon == null || React.isValidElement(icon)) return false;
+
+  const reactType = (icon as { $$typeof?: symbol }).$$typeof;
+  return reactType === Symbol.for("react.forward_ref") || reactType === Symbol.for("react.memo");
+}
diff --git a/packages/propel/src/components/input-field/input-field.stories.tsx b/packages/propel/src/components/input-field/input-field.stories.tsx
index 9342c2c9..ddf91449 100644
--- a/packages/propel/src/components/input-field/input-field.stories.tsx
+++ b/packages/propel/src/components/input-field/input-field.stories.tsx
@@ -3,6 +3,7 @@ import { Mail, Search } from "lucide-react";
 import { expect, fn, userEvent } from "storybook/test";
 
 import { iconControl } from "../../storybook/icon-control";
+import { Icon } from "../icon";
 import { InputField, type InputMagnitude } from "./index";
 
 const MAGNITUDES: InputMagnitude[] = ["md", "lg", "xl"];
@@ -92,8 +93,8 @@ export const WithIcons: Story = {
     orientation: "vertical",
     label: "Search",
     placeholder: "Search…",
-    startIcon: <Search />,
-    endIcon: <Mail />,
+    startIcon: <Icon icon={Search} tint="placeholder" />,
+    endIcon: <Icon icon={Mail} tint="placeholder" />,
   },
 };
 
@@ -196,8 +197,8 @@ export const RtlVerify: Story = {
         orientation="vertical"
         label="بحث"
         placeholder="Search…"
-        startIcon={<Search />}
-        endIcon={<Mail />}
+        startIcon={<Icon icon={Search} tint="placeholder" />}
+        endIcon={<Icon icon={Mail} tint="placeholder" />}
       />
       <InputField
         magnitude="md"
@@ -238,8 +239,8 @@ export const LtrVerify: Story = {
         orientation="vertical"
         label="Search"
         placeholder="Search…"
-        startIcon={<Search />}
-        endIcon={<Mail />}
+        startIcon={<Icon icon={Search} tint="placeholder" />}
+        endIcon={<Icon icon={Mail} tint="placeholder" />}
       />
       <InputField
         magnitude="md"
diff --git a/packages/propel/src/components/input-field/input-field.tsx b/packages/propel/src/components/input-field/input-field.tsx
index 7203612e..9b0fe5ae 100644
--- a/packages/propel/src/components/input-field/input-field.tsx
+++ b/packages/propel/src/components/input-field/input-field.tsx
@@ -7,7 +7,6 @@ import type { InputMagnitude } from "../../elements/field/variants";
 import { InputField as InputFieldElement } from "../../elements/input-field/input-field";
 import { Input as InputElement } from "../../elements/input/input";
 import { InputGroup } from "../../elements/input/input-group";
-import { ControlIcon } from "../../internal/control-icon";
 import { FieldHelperText } from "../field/field-helper-text";
 import { FieldLabelGroup } from "../field/field-label-group";
 
@@ -34,9 +33,9 @@ export type InputFieldProps = Omit<
   error?: React.ReactNode;
   /** Label placement: `vertical` (label above) | `horizontal` (label beside). */
   orientation: "vertical" | "horizontal";
-  /** A 16px node rendered at the inline start of the control. */
+  /** Element rendered at the inline start of the control, e.g. `<Icon icon={Search} />`. */
   startIcon?: React.ReactNode;
-  /** A 16px node rendered at the inline end of the control. */
+  /** Element rendered at the inline end of the control, e.g. `<Icon icon={Mail} />`. */
   endIcon?: React.ReactNode;
 };
 
@@ -74,13 +73,13 @@ export function InputField({
       />
       <FieldControlContent orientation={orientation}>
         <InputGroup magnitude={magnitude}>
-          {startIcon ? <ControlIcon>{startIcon}</ControlIcon> : null}
+          {startIcon}
           <BaseInput
             required={required}
             {...controlProps}
             render={<InputElement magnitude={magnitude} />}
           />
-          {endIcon ? <ControlIcon>{endIcon}</ControlIcon> : null}
+          {endIcon}
         </InputGroup>
         <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
       </FieldControlContent>
diff --git a/packages/propel/src/components/list/list.stories.tsx b/packages/propel/src/components/list/list.stories.tsx
index 2e133c98..8b9bd66b 100644
--- a/packages/propel/src/components/list/list.stories.tsx
+++ b/packages/propel/src/components/list/list.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Ellipsis, Inbox, LayoutGrid, Settings } from "lucide-react";
 import { expect } from "storybook/test";
 
-import { Icon } from "../../internal/icon";
+import { Icon } from "../icon";
 import {
   List,
   ListItem,
@@ -51,34 +51,26 @@ export const Default: Story = {
     <List role="toolbar" aria-label="Workspace">
       <ListItem>
         <ListItemLink href="#inbox">
-          <Icon magnitude="md">
-            <Inbox aria-hidden />
-          </Icon>
+          <Icon icon={Inbox} magnitude="md" />
           <ListItemLabel>Inbox</ListItemLabel>
         </ListItemLink>
       </ListItem>
       <ListItem>
         <ListItemLink href="#projects" aria-current="page">
-          <Icon magnitude="md">
-            <LayoutGrid aria-hidden />
-          </Icon>
+          <Icon icon={LayoutGrid} magnitude="md" />
           <ListItemLabel>Projects</ListItemLabel>
         </ListItemLink>
       </ListItem>
       <ListItem>
         <ListItemLink href="#settings">
-          <Icon magnitude="md">
-            <Settings aria-hidden />
-          </Icon>
+          <Icon icon={Settings} magnitude="md" />
           <ListItemLabel>Settings</ListItemLabel>
         </ListItemLink>
       </ListItem>
       <ListItem>
         {/* An action row (not navigation) — a button that shares the row chrome. */}
         <ListItemButton>
-          <Icon magnitude="md">
-            <Ellipsis aria-hidden />
-          </Icon>
+          <Icon icon={Ellipsis} magnitude="md" />
           <ListItemLabel>More</ListItemLabel>
         </ListItemButton>
       </ListItem>
@@ -130,17 +122,13 @@ export const Section: Story = {
       <List role="toolbar" aria-label="Workspace">
         <ListItem>
           <ListItemLink href="#projects" aria-current="page">
-            <Icon magnitude="md">
-              <LayoutGrid aria-hidden />
-            </Icon>
+            <Icon icon={LayoutGrid} magnitude="md" />
             <ListItemLabel>Projects</ListItemLabel>
           </ListItemLink>
         </ListItem>
         <ListItem>
           <ListItemLink href="#settings">
-            <Icon magnitude="md">
-              <Settings aria-hidden />
-            </Icon>
+            <Icon icon={Settings} magnitude="md" />
             <ListItemLabel>Settings</ListItemLabel>
           </ListItemLink>
         </ListItem>
diff --git a/packages/propel/src/components/menu/menu-checkbox-item.tsx b/packages/propel/src/components/menu/menu-checkbox-item.tsx
index 8327d8dc..117e83f8 100644
--- a/packages/propel/src/components/menu/menu-checkbox-item.tsx
+++ b/packages/propel/src/components/menu/menu-checkbox-item.tsx
@@ -11,24 +11,28 @@ import {
   MenuItemTitle,
   MenuItemTitleRow,
 } from "../../elements/menu";
-import { Icon } from "../../internal/icon";
 
-export type MenuCheckboxItemProps = Omit<BaseMenu.CheckboxItem.Props, "className" | "style"> & {
-  /** Leading content shown after the checkbox. */
+export type MenuCheckboxItemProps = Omit<
+  BaseMenu.CheckboxItem.Props,
+  "children" | "className" | "label" | "style"
+> & {
+  /** Leading element shown after the checkbox, e.g. `<Icon icon={Settings} tint="secondary" />`. */
   icon?: React.ReactNode;
-  /** Trailing content. */
-  trailing?: React.ReactNode;
+  /** Primary row label. */
+  label: React.ReactNode;
+  /** Element rendered at the inline end of the row. */
+  endContent?: React.ReactNode;
 };
 
 /**
  * The ready-made toggleable multi-select menu row: grafts Base UI's `Menu.CheckboxItem` behavior
  * onto the styled `MenuCheckboxItem` and lays out the checkbox box (a kept-mounted
  * `Menu.CheckboxItemIndicator` grafted onto `MenuCheckboxItemIndicator` + a lucide `Check`),
- * optional leading/trailing nodes, and the label. Base UI's `Menu.CheckboxItem` tracks the checked
+ * optional leading icon, label, and end content. Base UI's `Menu.CheckboxItem` tracks the checked
  * state, so `checked` / `defaultChecked` / `onCheckedChange` forward straight to it and the
  * indicator reads it from context.
  */
-export function MenuCheckboxItem({ icon, trailing, children, ...props }: MenuCheckboxItemProps) {
+export function MenuCheckboxItem({ icon, label, endContent, ...props }: MenuCheckboxItemProps) {
   return (
     <BaseMenu.CheckboxItem {...props} render={<MenuCheckboxItemElement />}>
       <MenuItemControl>
@@ -36,13 +40,13 @@ export function MenuCheckboxItem({ icon, trailing, children, ...props }: MenuChe
           <Check aria-hidden />
         </BaseMenu.CheckboxItemIndicator>
       </MenuItemControl>
-      {icon != null ? <Icon tint="secondary">{icon}</Icon> : null}
+      {icon}
       <MenuItemContent>
         <MenuItemTitleRow>
-          <MenuItemTitle>{children}</MenuItemTitle>
+          <MenuItemTitle>{label}</MenuItemTitle>
         </MenuItemTitleRow>
       </MenuItemContent>
-      {trailing != null ? <MenuItemMeta>{trailing}</MenuItemMeta> : null}
+      {endContent != null ? <MenuItemMeta>{endContent}</MenuItemMeta> : null}
     </BaseMenu.CheckboxItem>
   );
 }
diff --git a/packages/propel/src/components/menu/menu-item.tsx b/packages/propel/src/components/menu/menu-item.tsx
index 989a928b..694e526f 100644
--- a/packages/propel/src/components/menu/menu-item.tsx
+++ b/packages/propel/src/components/menu/menu-item.tsx
@@ -12,50 +12,54 @@ import {
   MenuItemTitleRow,
   MenuItemTrailing,
 } from "../../elements/menu";
-import { Icon } from "../../internal/icon";
 
-export type MenuItemProps = Omit<BaseMenu.Item.Props, "className" | "style"> & {
-  /** Leading content before the label. */
+export type MenuItemProps = Omit<
+  BaseMenu.Item.Props,
+  "children" | "className" | "label" | "style"
+> & {
+  /** Leading element before the label, e.g. `<Icon icon={Settings} tint="secondary" />`. */
   icon?: React.ReactNode;
+  /** Primary row label. */
+  label: React.ReactNode;
   /** Muted secondary line under the label. */
   description?: React.ReactNode;
   /** Muted text shown inline after the label. */
   secondaryText?: React.ReactNode;
-  /** Trailing content after the label. */
-  trailing?: React.ReactNode;
+  /** Element rendered at the inline end of the row. */
+  endContent?: React.ReactNode;
   /** Single-select selected state. */
   selected?: boolean;
 };
 
 /**
  * The ready-made selectable menu row: grafts Base UI's `Menu.Item` behavior onto the styled
- * `MenuItem` and lays out optional leading/trailing nodes, the label, a secondary line, and the
- * single-select check indicator.
+ * `MenuItem` and lays out an optional leading icon, label, secondary line, and end content, plus
+ * the single-select check indicator.
  */
 export function MenuItem({
   icon,
   description,
   secondaryText,
-  trailing,
+  endContent,
   selected,
-  children,
+  label,
   ...props
 }: MenuItemProps) {
   // The taller, top-aligned row layout is implied by having a description — derived, not a prop.
   const layout = description != null ? "with-description" : "default";
   return (
     <BaseMenu.Item {...props} render={<MenuItemElement layout={layout} />}>
-      {icon != null ? <Icon tint="secondary">{icon}</Icon> : null}
+      {icon}
       <MenuItemContent>
         <MenuItemTitleRow>
-          <MenuItemTitle>{children}</MenuItemTitle>
+          <MenuItemTitle>{label}</MenuItemTitle>
           {secondaryText != null ? (
             <MenuItemSecondaryText>{secondaryText}</MenuItemSecondaryText>
           ) : null}
         </MenuItemTitleRow>
         {description != null ? <MenuItemDescription>{description}</MenuItemDescription> : null}
       </MenuItemContent>
-      {trailing != null ? <MenuItemTrailing>{trailing}</MenuItemTrailing> : null}
+      {endContent != null ? <MenuItemTrailing>{endContent}</MenuItemTrailing> : null}
       {selected ? (
         <MenuItemIndicator>
           <Check />
diff --git a/packages/propel/src/components/menu/menu-link-item.tsx b/packages/propel/src/components/menu/menu-link-item.tsx
index 1ac298c5..676a5c4c 100644
--- a/packages/propel/src/components/menu/menu-link-item.tsx
+++ b/packages/propel/src/components/menu/menu-link-item.tsx
@@ -8,29 +8,33 @@ import {
   MenuItemTrailing,
   MenuLinkItem as MenuLinkItemElement,
 } from "../../elements/menu";
-import { Icon } from "../../internal/icon";
 
-export type MenuLinkItemProps = Omit<BaseMenu.LinkItem.Props, "className" | "style"> & {
-  /** Leading content before the label. */
+export type MenuLinkItemProps = Omit<
+  BaseMenu.LinkItem.Props,
+  "children" | "className" | "label" | "style"
+> & {
+  /** Leading element before the label, e.g. `<Icon icon={ExternalLink} tint="secondary" />`. */
   icon?: React.ReactNode;
-  /** Trailing content after the label. */
-  trailing?: React.ReactNode;
+  /** Primary row label. */
+  label: React.ReactNode;
+  /** Element rendered at the inline end of the row. */
+  endContent?: React.ReactNode;
 };
 
 /**
  * The ready-made navigational `<a>` menu row: grafts Base UI's `Menu.LinkItem` behavior onto the
- * styled `MenuLinkItem` and lays out optional leading/trailing nodes and the label.
+ * styled `MenuLinkItem` and lays out an optional leading icon, label, and end content.
  */
-export function MenuLinkItem({ icon, trailing, children, ...props }: MenuLinkItemProps) {
+export function MenuLinkItem({ icon, label, endContent, ...props }: MenuLinkItemProps) {
   return (
     <BaseMenu.LinkItem {...props} render={<MenuLinkItemElement />}>
-      {icon != null ? <Icon tint="secondary">{icon}</Icon> : null}
+      {icon}
       <MenuItemContent>
         <MenuItemTitleRow>
-          <MenuItemTitle>{children}</MenuItemTitle>
+          <MenuItemTitle>{label}</MenuItemTitle>
         </MenuItemTitleRow>
       </MenuItemContent>
-      {trailing != null ? <MenuItemTrailing>{trailing}</MenuItemTrailing> : null}
+      {endContent != null ? <MenuItemTrailing>{endContent}</MenuItemTrailing> : null}
     </BaseMenu.LinkItem>
   );
 }
diff --git a/packages/propel/src/components/menu/menu-radio-item.tsx b/packages/propel/src/components/menu/menu-radio-item.tsx
index 57ee723d..a207016a 100644
--- a/packages/propel/src/components/menu/menu-radio-item.tsx
+++ b/packages/propel/src/components/menu/menu-radio-item.tsx
@@ -11,23 +11,27 @@ import {
   MenuRadioItem as MenuRadioItemElement,
   MenuRadioItemIndicator,
 } from "../../elements/menu";
-import { Icon } from "../../internal/icon";
 
-export type MenuRadioItemProps = Omit<BaseMenu.RadioItem.Props, "className" | "style"> & {
-  /** Leading content shown after the radio dot. */
+export type MenuRadioItemProps = Omit<
+  BaseMenu.RadioItem.Props,
+  "children" | "className" | "label" | "style"
+> & {
+  /** Leading element shown after the radio dot, e.g. `<Icon icon={Settings} tint="secondary" />`. */
   icon?: React.ReactNode;
-  /** Trailing content. */
-  trailing?: React.ReactNode;
+  /** Primary row label. */
+  label: React.ReactNode;
+  /** Element rendered at the inline end of the row. */
+  endContent?: React.ReactNode;
 };
 
 /**
  * The ready-made single-select menu row: grafts Base UI's `Menu.RadioItem` behavior onto the styled
  * `MenuRadioItem` and lays out the radio dot (a kept-mounted `Menu.RadioItemIndicator` grafted onto
- * `MenuRadioItemIndicator`), optional leading/trailing nodes, and the label. Wrap rows in a
+ * `MenuRadioItemIndicator`), optional leading icon, label, and end content. Wrap rows in a
  * `MenuRadioGroup` carrying `value`/`onValueChange`; the dot reads the selected state from
  * context.
  */
-export function MenuRadioItem({ icon, trailing, children, ...props }: MenuRadioItemProps) {
+export function MenuRadioItem({ icon, label, endContent, ...props }: MenuRadioItemProps) {
   return (
     <BaseMenu.RadioItem {...props} render={<MenuRadioItemElement />}>
       <MenuItemControl>
@@ -35,13 +39,13 @@ export function MenuRadioItem({ icon, trailing, children, ...props }: MenuRadioI
           <Circle aria-hidden />
         </BaseMenu.RadioItemIndicator>
       </MenuItemControl>
-      {icon != null ? <Icon tint="secondary">{icon}</Icon> : null}
+      {icon}
       <MenuItemContent>
         <MenuItemTitleRow>
-          <MenuItemTitle>{children}</MenuItemTitle>
+          <MenuItemTitle>{label}</MenuItemTitle>
         </MenuItemTitleRow>
       </MenuItemContent>
-      {trailing != null ? <MenuItemMeta>{trailing}</MenuItemMeta> : null}
+      {endContent != null ? <MenuItemMeta>{endContent}</MenuItemMeta> : null}
     </BaseMenu.RadioItem>
   );
 }
diff --git a/packages/propel/src/components/menu/menu-submenu-trigger.tsx b/packages/propel/src/components/menu/menu-submenu-trigger.tsx
index 985e1126..06229033 100644
--- a/packages/propel/src/components/menu/menu-submenu-trigger.tsx
+++ b/packages/propel/src/components/menu/menu-submenu-trigger.tsx
@@ -10,35 +10,34 @@ import {
   MenuSubmenuTrigger as MenuSubmenuTriggerElement,
 } from "../../elements/menu";
 import { DisclosureIndicator } from "../../internal/disclosure-indicator";
-import { Icon } from "../../internal/icon";
 
-export type MenuSubmenuTriggerProps = Omit<BaseMenu.SubmenuTrigger.Props, "className" | "style"> & {
-  /** Leading content before the label. */
+export type MenuSubmenuTriggerProps = Omit<
+  BaseMenu.SubmenuTrigger.Props,
+  "children" | "className" | "label" | "style"
+> & {
+  /** Leading element before the label, e.g. `<Icon icon={Folder} tint="secondary" />`. */
   icon?: React.ReactNode;
-  /** Trailing content before the chevron. */
-  trailing?: React.ReactNode;
+  /** Primary row label. */
+  label: React.ReactNode;
+  /** Element rendered before the submenu chevron at the inline end of the row. */
+  endContent?: React.ReactNode;
 };
 
 /**
  * The ready-made submenu trigger row: grafts Base UI's `Menu.SubmenuTrigger` behavior onto the
- * styled `MenuSubmenuTrigger` and lays out optional leading/trailing nodes, the label, and the
+ * styled `MenuSubmenuTrigger` and lays out an optional leading icon, label, end content, and the
  * submenu chevron indicator.
  */
-export function MenuSubmenuTrigger({
-  icon,
-  trailing,
-  children,
-  ...props
-}: MenuSubmenuTriggerProps) {
+export function MenuSubmenuTrigger({ icon, endContent, label, ...props }: MenuSubmenuTriggerProps) {
   return (
     <BaseMenu.SubmenuTrigger {...props} render={<MenuSubmenuTriggerElement />}>
-      {icon != null ? <Icon tint="secondary">{icon}</Icon> : null}
+      {icon}
       <MenuItemContent>
         <MenuItemTitleRow>
-          <MenuItemTitle>{children}</MenuItemTitle>
+          <MenuItemTitle>{label}</MenuItemTitle>
         </MenuItemTitleRow>
       </MenuItemContent>
-      {trailing != null ? <MenuItemTrailing>{trailing}</MenuItemTrailing> : null}
+      {endContent != null ? <MenuItemTrailing>{endContent}</MenuItemTrailing> : null}
       <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
         <ChevronDown />
       </DisclosureIndicator>
diff --git a/packages/propel/src/components/menu/menu.stories.tsx b/packages/propel/src/components/menu/menu.stories.tsx
index add803bc..73e2138c 100644
--- a/packages/propel/src/components/menu/menu.stories.tsx
+++ b/packages/propel/src/components/menu/menu.stories.tsx
@@ -24,6 +24,7 @@ import { expect, userEvent, waitFor, within } from "storybook/test";
 
 import { Avatar } from "../avatar/index";
 import { Badge } from "../badge/index";
+import { Icon } from "../icon";
 import {
   createMenuHandle,
   Menu,
@@ -224,9 +225,8 @@ export const Status: Story = {
               selected={selected === s.key}
               closeOnClick={false}
               onClick={() => setSelected(s.key)}
-            >
-              {s.label}
-            </MenuItem>
+              label={s.label}
+            />
           ))}
         </MenuContent>
       </Menu>
@@ -276,9 +276,10 @@ export const Labels: Story = {
             // (Figma 64-626): the sticky MenuSearch already draws its own bottom
             // rule, so the "Add label" row mounts directly beneath it with no extra line.
             <MenuItem
-              icon={<Plus className="text-icon-secondary" />}
+              icon={<Icon icon={Plus} tint="secondary" />}
               closeOnClick={false}
-            >{`Add label "${trimmed}"`}</MenuItem>
+              label={`Add label "${trimmed}"`}
+            />
           ) : null}
           {visible.map((l) => (
             <MenuCheckboxItem
@@ -286,9 +287,8 @@ export const Labels: Story = {
               icon={<ColorSwatch className={l.color} />}
               checked={Boolean(checked[l.key])}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [l.key]: next }))}
-            >
-              {l.label}
-            </MenuCheckboxItem>
+              label={l.label}
+            />
           ))}
         </MenuContent>
       </Menu>
@@ -320,7 +320,7 @@ export const LabelsInteraction: Story = {
 };
 
 /**
- * Demo 3 — **ActionMenu**. Icon items, a trailing keyboard shortcut (⌘L), a disabled item with a
+ * Demo 3 — **ActionMenu**. Icon items, `endContent` keyboard shortcuts, a disabled item with a
  * description, a destructive Delete, and separators between groups.
  */
 export const ActionMenu: Story = {
@@ -328,24 +328,26 @@ export const ActionMenu: Story = {
     <Menu>
       <MenuTrigger render={<button type="button" className={triggerClass} />}>Actions</MenuTrigger>
       <MenuContent sizing="sm">
-        <MenuItem icon={<Pencil />}>Edit</MenuItem>
-        <MenuItem icon={<Copy />}>Make a copy</MenuItem>
-        <MenuItem icon={<ExternalLink />}>Open in new tab</MenuItem>
-        <MenuItem icon={<Link2 />} trailing={<span className="text-12 text-tertiary">⌘L</span>}>
-          Copy link
-        </MenuItem>
+        <MenuItem icon={<Icon icon={Pencil} tint="secondary" />} label="Edit" />
+        <MenuItem icon={<Icon icon={Copy} tint="secondary" />} label="Make a copy" />
+        <MenuItem icon={<Icon icon={ExternalLink} tint="secondary" />} label="Open in new tab" />
+        <MenuItem
+          icon={<Icon icon={Link2} tint="secondary" />}
+          endContent={<span className="text-12 text-tertiary">⌘L</span>}
+          label="Copy link"
+        />
         <MenuSeparator />
         <MenuItem
-          icon={<Trash2 />}
+          icon={<Icon icon={Trash2} tint="secondary" />}
           description="Only completed or cancelled work items can be archived"
           disabled
-        >
-          Archive
-        </MenuItem>
+          label="Archive"
+        />
         <MenuSeparator />
-        <MenuItem icon={<Trash2 className="text-danger-primary" />}>
-          {<span className="text-danger-primary">Delete</span>}
-        </MenuItem>
+        <MenuItem
+          icon={<Icon icon={Trash2} tint="danger" />}
+          label={<span className="text-danger-primary">Delete</span>}
+        />
       </MenuContent>
     </Menu>
   ),
@@ -415,23 +417,21 @@ export const Description: Story = {
         </MenuTrigger>
         <MenuContent sizing="lg">
           <MenuItem
-            icon={<Lock />}
+            icon={<Icon icon={Lock} tint="secondary" />}
             description="Accessible only by invite"
             selected={selected === "private"}
             closeOnClick={false}
             onClick={() => setSelected("private")}
-          >
-            Private
-          </MenuItem>
+            label="Private"
+          />
           <MenuItem
-            icon={<Globe />}
+            icon={<Icon icon={Globe} tint="secondary" />}
             description="Anyone in the workspace except Guests can join"
             selected={selected === "public"}
             closeOnClick={false}
             onClick={() => setSelected("public")}
-          >
-            Public
-          </MenuItem>
+            label="Public"
+          />
         </MenuContent>
       </Menu>
     );
@@ -467,7 +467,7 @@ export const LabelAndFooterSemantics: Story = {
       <MenuContent sizing="sm" footer={<MenuFooter>Type to add another item.</MenuFooter>}>
         <MenuGroup>
           <MenuLabel meta={<span>3</span>}>Section</MenuLabel>
-          <MenuItem>First item</MenuItem>
+          <MenuItem label="First item" />
         </MenuGroup>
       </MenuContent>
     </Menu>
@@ -506,9 +506,8 @@ export const Assignees: Story = {
               checked={Boolean(checked[a.key])}
               disabled={a.disabled}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [a.key]: next }))}
-            >
-              {a.name}
-            </MenuCheckboxItem>
+              label={a.name}
+            />
           ))}
         </MenuContent>
       </Menu>
@@ -562,9 +561,8 @@ export const LanguagePicker: Story = {
               selected={selected === l.key}
               closeOnClick={false}
               onClick={() => setSelected(l.key)}
-            >
-              {l.label}
-            </MenuItem>
+              label={l.label}
+            />
           ))}
         </MenuContent>
       </Menu>
@@ -615,9 +613,8 @@ export const Priority: Story = {
               icon={p.icon}
               checked={Boolean(checked[p.key])}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [p.key]: next }))}
-            >
-              {p.label}
-            </MenuCheckboxItem>
+              label={p.label}
+            />
           ))}
         </MenuContent>
       </Menu>
@@ -666,9 +663,8 @@ export const CheckedFillVisible: Story = {
               icon={p.icon}
               checked={Boolean(checked[p.key])}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [p.key]: next }))}
-            >
-              {p.label}
-            </MenuCheckboxItem>
+              label={p.label}
+            />
           ))}
         </MenuContent>
       </Menu>
@@ -773,11 +769,10 @@ export const Filters: Story = {
                 <MenuGroup>
                   {/* 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
-                      trailing. */}
+                      ARIA. The label is the section title; the chevron is `endContent`. */}
                   <MenuItem
                     aria-expanded={!isCollapsed}
-                    trailing={
+                    endContent={
                       isCollapsed ? (
                         <ChevronRight aria-hidden="true" />
                       ) : (
@@ -786,9 +781,8 @@ export const Filters: Story = {
                     }
                     closeOnClick={false}
                     onClick={() => setCollapsed((c) => ({ ...c, [section.title]: !isCollapsed }))}
-                  >
-                    {section.title}
-                  </MenuItem>
+                    label={section.title}
+                  />
                   {!isCollapsed
                     ? visibleItems.map((i) => (
                         <MenuCheckboxItem
@@ -796,9 +790,8 @@ export const Filters: Story = {
                           icon={i.icon}
                           checked={Boolean(checked[i.key])}
                           onCheckedChange={toggle(i.key)}
-                        >
-                          {i.label}
-                        </MenuCheckboxItem>
+                          label={i.label}
+                        />
                       ))
                     : null}
                   {/* "View all" is its own menuitem (keyboard-focusable like any row)
@@ -812,13 +805,12 @@ export const Filters: Story = {
                       onClick={() =>
                         setExpandedAll((s) => ({ ...s, [section.title]: !isExpandedAll }))
                       }
-                    >
-                      {
+                      label={
                         <span className="text-accent-primary">
                           {isExpandedAll ? "Show less" : `View all (${items.length})`}
                         </span>
                       }
-                    </MenuItem>
+                    />
                   ) : null}
                 </MenuGroup>
               </React.Fragment>
@@ -901,11 +893,7 @@ export const EmptyState: Story = {
           search={<MenuSearch value={query} onValueChange={setQuery} placeholder="Search" />}
         >
           {visible.length > 0 ? (
-            visible.map((s) => (
-              <MenuItem key={s.key} icon={s.icon}>
-                {s.label}
-              </MenuItem>
-            ))
+            visible.map((s) => <MenuItem key={s.key} icon={s.icon} label={s.label} />)
           ) : (
             <div className="px-2 py-2 text-13 text-tertiary">No matching results</div>
           )}
@@ -934,8 +922,8 @@ export const EmptyStateInteraction: Story = {
 };
 
 /**
- * Demo 10 — **Submenu**. Rows carry a trailing count `Badge` and a chevron; hovering one opens a
- * nested submenu of options (built on `MenuSubmenu`).
+ * Demo 10 — **Submenu**. Rows carry an `endContent` count `Badge` and a chevron; hovering one opens
+ * a nested submenu of options (built on `MenuSubmenu`).
  */
 export const Submenu: Story = {
   parameters: {
@@ -961,59 +949,39 @@ export const Submenu: Story = {
       <MenuContent sizing="sm">
         <MenuSubmenu>
           <MenuSubmenuTrigger
-            trailing={
-              <Badge magnitude="sm" tone="neutral">
-                5
-              </Badge>
-            }
-          >
-            Priority
-          </MenuSubmenuTrigger>
+            endContent={<Badge magnitude="sm" tone="neutral" label="5" />}
+            label="Priority"
+          />
           <MenuSubmenuContent sizing="sm">
             {PRIORITIES.map((p) => (
-              <MenuItem key={p.key} icon={p.icon} closeOnClick={false}>
-                {p.label}
-              </MenuItem>
+              <MenuItem key={p.key} icon={p.icon} closeOnClick={false} label={p.label} />
             ))}
           </MenuSubmenuContent>
         </MenuSubmenu>
         <MenuSubmenu>
           <MenuSubmenuTrigger
-            trailing={
-              <Badge magnitude="sm" tone="neutral">
-                5
-              </Badge>
-            }
-          >
-            State
-          </MenuSubmenuTrigger>
+            endContent={<Badge magnitude="sm" tone="neutral" label="5" />}
+            label="State"
+          />
           <MenuSubmenuContent sizing="sm">
             {STATUSES.map((s) => (
-              <MenuItem key={s.key} icon={s.icon} closeOnClick={false}>
-                {s.label}
-              </MenuItem>
+              <MenuItem key={s.key} icon={s.icon} closeOnClick={false} label={s.label} />
             ))}
           </MenuSubmenuContent>
         </MenuSubmenu>
         <MenuSubmenu>
           <MenuSubmenuTrigger
-            trailing={
-              <Badge magnitude="sm" tone="neutral">
-                5
-              </Badge>
-            }
-          >
-            Assignee
-          </MenuSubmenuTrigger>
+            endContent={<Badge magnitude="sm" tone="neutral" label="5" />}
+            label="Assignee"
+          />
           <MenuSubmenuContent sizing="sm">
             {ASSIGNEES.map((a) => (
               <MenuItem
                 key={a.key}
                 icon={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
                 closeOnClick={false}
-              >
-                {a.name}
-              </MenuItem>
+                label={a.name}
+              />
             ))}
           </MenuSubmenuContent>
         </MenuSubmenu>
@@ -1063,10 +1031,10 @@ export const OpenOnHover: Story = {
         Quick add
       </MenuTrigger>
       <MenuContent sizing="sm">
-        <MenuItem>Work item</MenuItem>
-        <MenuItem>Page</MenuItem>
-        <MenuItem>Cycle</MenuItem>
-        <MenuItem>Module</MenuItem>
+        <MenuItem label="Work item" />
+        <MenuItem label="Page" />
+        <MenuItem label="Cycle" />
+        <MenuItem label="Module" />
       </MenuContent>
     </Menu>
   ),
@@ -1115,9 +1083,8 @@ export const GroupLabels: Story = {
                 selected={sort === s.key}
                 closeOnClick={false}
                 onClick={() => setSort(s.key)}
-              >
-                {s.label}
-              </MenuItem>
+                label={s.label}
+              />
             ))}
           </MenuGroup>
           <MenuSeparator />
@@ -1128,9 +1095,8 @@ export const GroupLabels: Story = {
                 key={p.key}
                 checked={Boolean(workspace[p.key])}
                 onCheckedChange={(next) => setWorkspace((w) => ({ ...w, [p.key]: next }))}
-              >
-                {p.label}
-              </MenuCheckboxItem>
+                label={p.label}
+              />
             ))}
           </MenuGroup>
         </MenuContent>
@@ -1180,12 +1146,13 @@ export const DetachedTrigger: Story = {
       </MenuTrigger>
       <Menu handle={workItemActionsHandle}>
         <MenuContent sizing="sm">
-          <MenuItem icon={<Pencil />}>Edit</MenuItem>
-          <MenuItem icon={<Copy />}>Make a copy</MenuItem>
+          <MenuItem icon={<Icon icon={Pencil} tint="secondary" />} label="Edit" />
+          <MenuItem icon={<Icon icon={Copy} tint="secondary" />} label="Make a copy" />
           <MenuSeparator />
-          <MenuItem icon={<Trash2 className="text-danger-primary" />}>
-            {<span className="text-danger-primary">Delete</span>}
-          </MenuItem>
+          <MenuItem
+            icon={<Icon icon={Trash2} tint="danger" />}
+            label={<span className="text-danger-primary">Delete</span>}
+          />
         </MenuContent>
       </Menu>
     </>
@@ -1245,7 +1212,7 @@ export const MultipleTriggers: Story = {
           <MenuContent sizing="sm">
             <MenuViewport>
               {(payload ?? []).map((command) => (
-                <MenuItem key={command}>{command}</MenuItem>
+                <MenuItem key={command} label={command} />
               ))}
             </MenuViewport>
           </MenuContent>
@@ -1320,7 +1287,7 @@ export const ControlledMultipleTriggers: Story = {
         >
           {({ payload }) => (
             <MenuContent sizing="sm">
-              <MenuItem>{`${payload ?? ""} action`}</MenuItem>
+              <MenuItem label={`${payload ?? ""} action`} />
             </MenuContent>
           )}
         </Menu>
@@ -1359,12 +1326,8 @@ export const RadioRows: Story = {
         </MenuTrigger>
         <MenuContent sizing="sm">
           <MenuRadioGroup value={density} onValueChange={setDensity}>
-            <MenuRadioItem value="comfortable" closeOnClick={false}>
-              Comfortable
-            </MenuRadioItem>
-            <MenuRadioItem value="compact" closeOnClick={false}>
-              Compact
-            </MenuRadioItem>
+            <MenuRadioItem value="comfortable" closeOnClick={false} label="Comfortable" />
+            <MenuRadioItem value="compact" closeOnClick={false} label="Compact" />
           </MenuRadioGroup>
         </MenuContent>
       </Menu>
diff --git a/packages/propel/src/components/menubar/menubar.stories.tsx b/packages/propel/src/components/menubar/menubar.stories.tsx
index a6a8ade1..c2600cb7 100644
--- a/packages/propel/src/components/menubar/menubar.stories.tsx
+++ b/packages/propel/src/components/menubar/menubar.stories.tsx
@@ -17,7 +17,7 @@ import {
 } from "lucide-react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Icon } from "../../internal/icon";
+import { Icon } from "../icon";
 import {
   Menu,
   MenuContent,
@@ -71,31 +71,27 @@ export const Default: Story = {
     <Menubar>
       <Menu>
         <MenubarTrigger>
-          <Icon tint="secondary">
-            <FilePen />
-          </Icon>
+          <Icon icon={FilePen} tint="secondary" />
           <MenubarTriggerLabel>File</MenubarTriggerLabel>
         </MenubarTrigger>
         <MenuContent sizing="sm">
-          <MenuItem icon={<FilePlus />}>New file</MenuItem>
-          <MenuItem icon={<FolderOpen />}>Open…</MenuItem>
+          <MenuItem icon={<Icon icon={FilePlus} tint="secondary" />} label="New file" />
+          <MenuItem icon={<Icon icon={FolderOpen} tint="secondary" />} label="Open…" />
           <MenuSeparator />
-          <MenuItem icon={<Save />}>Save</MenuItem>
+          <MenuItem icon={<Icon icon={Save} tint="secondary" />} label="Save" />
         </MenuContent>
       </Menu>
       <Menu>
         <MenubarTrigger>
-          <Icon tint="secondary">
-            <Pencil />
-          </Icon>
+          <Icon icon={Pencil} tint="secondary" />
           <MenubarTriggerLabel>Edit</MenubarTriggerLabel>
         </MenubarTrigger>
         <MenuContent sizing="sm">
-          <MenuItem icon={<Undo2 />}>Undo</MenuItem>
-          <MenuItem icon={<Redo2 />}>Redo</MenuItem>
+          <MenuItem icon={<Icon icon={Undo2} tint="secondary" />} label="Undo" />
+          <MenuItem icon={<Icon icon={Redo2} tint="secondary" />} label="Redo" />
           <MenuSeparator />
-          <MenuItem icon={<Scissors />}>Cut</MenuItem>
-          <MenuItem icon={<Copy />}>Copy</MenuItem>
+          <MenuItem icon={<Icon icon={Scissors} tint="secondary" />} label="Cut" />
+          <MenuItem icon={<Icon icon={Copy} tint="secondary" />} label="Copy" />
         </MenuContent>
       </Menu>
     </Menubar>
@@ -138,19 +134,19 @@ export const Submenu: Story = {
           <MenubarTriggerLabel>File</MenubarTriggerLabel>
         </MenubarTrigger>
         <MenuContent sizing="sm">
-          <MenuItem icon={<FilePlus />}>New file</MenuItem>
-          <MenuItem icon={<FolderOpen />}>Open…</MenuItem>
+          <MenuItem icon={<Icon icon={FilePlus} tint="secondary" />} label="New file" />
+          <MenuItem icon={<Icon icon={FolderOpen} tint="secondary" />} label="Open…" />
           <MenuSeparator />
           <MenuSubmenu>
-            <MenuSubmenuTrigger icon={<FileOutput />}>Export</MenuSubmenuTrigger>
+            <MenuSubmenuTrigger icon={<Icon icon={FileOutput} tint="secondary" />} label="Export" />
             <MenuSubmenuContent sizing="sm">
-              <MenuItem>PDF</MenuItem>
-              <MenuItem>PNG</MenuItem>
-              <MenuItem>SVG</MenuItem>
+              <MenuItem label="PDF" />
+              <MenuItem label="PNG" />
+              <MenuItem label="SVG" />
             </MenuSubmenuContent>
           </MenuSubmenu>
           <MenuSeparator />
-          <MenuItem icon={<Printer />}>Print…</MenuItem>
+          <MenuItem icon={<Icon icon={Printer} tint="secondary" />} label="Print…" />
         </MenuContent>
       </Menu>
       <Menu>
@@ -158,15 +154,15 @@ export const Submenu: Story = {
           <MenubarTriggerLabel>View</MenubarTriggerLabel>
         </MenubarTrigger>
         <MenuContent sizing="sm">
-          <MenuItem icon={<ZoomIn />}>Zoom in</MenuItem>
-          <MenuItem icon={<ZoomOut />}>Zoom out</MenuItem>
+          <MenuItem icon={<Icon icon={ZoomIn} tint="secondary" />} label="Zoom in" />
+          <MenuItem icon={<Icon icon={ZoomOut} tint="secondary" />} label="Zoom out" />
           <MenuSeparator />
           <MenuSubmenu>
-            <MenuSubmenuTrigger icon={<LayoutGrid />}>Layout</MenuSubmenuTrigger>
+            <MenuSubmenuTrigger icon={<Icon icon={LayoutGrid} tint="secondary" />} label="Layout" />
             <MenuSubmenuContent sizing="sm">
-              <MenuItem>Single page</MenuItem>
-              <MenuItem>Two pages</MenuItem>
-              <MenuItem>Continuous</MenuItem>
+              <MenuItem label="Single page" />
+              <MenuItem label="Two pages" />
+              <MenuItem label="Continuous" />
             </MenuSubmenuContent>
           </MenuSubmenu>
         </MenuContent>
@@ -217,10 +213,10 @@ export const DisabledMenu: Story = {
           <MenubarTriggerLabel>File</MenubarTriggerLabel>
         </MenubarTrigger>
         <MenuContent sizing="sm">
-          <MenuItem icon={<FilePlus />}>New file</MenuItem>
-          <MenuItem icon={<FolderOpen />}>Open…</MenuItem>
+          <MenuItem icon={<Icon icon={FilePlus} tint="secondary" />} label="New file" />
+          <MenuItem icon={<Icon icon={FolderOpen} tint="secondary" />} label="Open…" />
           <MenuSeparator />
-          <MenuItem icon={<Save />}>Save</MenuItem>
+          <MenuItem icon={<Icon icon={Save} tint="secondary" />} label="Save" />
         </MenuContent>
       </Menu>
       <Menu disabled>
@@ -228,8 +224,8 @@ export const DisabledMenu: Story = {
           <MenubarTriggerLabel>Help</MenubarTriggerLabel>
         </MenubarTrigger>
         <MenuContent sizing="sm">
-          <MenuItem>Documentation</MenuItem>
-          <MenuItem>Keyboard shortcuts</MenuItem>
+          <MenuItem label="Documentation" />
+          <MenuItem label="Keyboard shortcuts" />
         </MenuContent>
       </Menu>
     </Menubar>
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu-trigger.tsx b/packages/propel/src/components/navigation-menu/navigation-menu-trigger.tsx
index 46d7fb73..a74f2944 100644
--- a/packages/propel/src/components/navigation-menu/navigation-menu-trigger.tsx
+++ b/packages/propel/src/components/navigation-menu/navigation-menu-trigger.tsx
@@ -10,10 +10,12 @@ import {
 
 export type NavigationMenuTriggerProps = Omit<
   BaseNavigationMenu.Trigger.Props,
-  "className" | "style"
+  "children" | "className" | "style"
 > & {
   /** Replaces the default disclosure caret (a down chevron) in the trigger's `Icon` slot. */
   icon?: React.ReactNode;
+  /** Visible trigger label. */
+  label: React.ReactNode;
 };
 
 /**
@@ -21,10 +23,10 @@ export type NavigationMenuTriggerProps = Omit<
  * trigger, wraps the label, and bakes the rotating disclosure caret (`NavigationMenuIcon` with a
  * default chevron — defaults are a `components` concern, rule 2a). Override the glyph via `icon`.
  */
-export function NavigationMenuTrigger({ icon, children, ...props }: NavigationMenuTriggerProps) {
+export function NavigationMenuTrigger({ icon, label, ...props }: NavigationMenuTriggerProps) {
   return (
     <BaseNavigationMenu.Trigger {...props} render={<NavigationMenuTriggerElement />}>
-      <NavigationMenuTriggerLabel>{children}</NavigationMenuTriggerLabel>
+      <NavigationMenuTriggerLabel>{label}</NavigationMenuTriggerLabel>
       <BaseNavigationMenu.Icon render={<NavigationMenuIcon />}>
         {icon ?? <ChevronDown aria-hidden />}
       </BaseNavigationMenu.Icon>
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx b/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx
index 6b39cbfb..baec38b3 100644
--- a/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx
+++ b/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx
@@ -105,7 +105,7 @@ export const Default: Story = {
     <NavigationMenu>
       <NavigationMenuList>
         <NavigationMenuItem>
-          <NavigationMenuTrigger>Product</NavigationMenuTrigger>
+          <NavigationMenuTrigger label="Product" />
           <NavigationMenuContent>
             <NavigationMenuContentList>
               {PRODUCT_LINKS.map((item) => (
@@ -127,7 +127,7 @@ export const Default: Story = {
         </NavigationMenuItem>
 
         <NavigationMenuItem>
-          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
+          <NavigationMenuTrigger label="Resources" />
           <NavigationMenuContent>
             <NavigationMenuContentList>
               {RESOURCE_LINKS.map((item) => (
@@ -250,7 +250,7 @@ export const LargeContent: Story = {
     <NavigationMenu>
       <NavigationMenuList>
         <NavigationMenuItem>
-          <NavigationMenuTrigger>Projects</NavigationMenuTrigger>
+          <NavigationMenuTrigger label="Projects" />
           <NavigationMenuContent>
             <div className="flex h-72 flex-col">
               <ScrollArea orientation="vertical" visibility="auto" magnitude="thin">
diff --git a/packages/propel/src/components/number-field/number-field.stories.tsx b/packages/propel/src/components/number-field/number-field.stories.tsx
index d8a33c3a..f8233a1d 100644
--- a/packages/propel/src/components/number-field/number-field.stories.tsx
+++ b/packages/propel/src/components/number-field/number-field.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Minus, Plus } from "lucide-react";
 import { expect } from "storybook/test";
 
+import { Icon } from "../icon";
 import { IconButton } from "../icon-button";
 import { NumberField, type NumberFieldMagnitude } from "./index";
 
@@ -16,14 +17,22 @@ const meta = {
   args: {
     "aria-label": "Number of instances",
     decrement: (
-      <IconButton prominence="ghost" tone="neutral" magnitude="xl" aria-label="Decrease">
-        <Minus />
-      </IconButton>
+      <IconButton
+        prominence="ghost"
+        tone="neutral"
+        magnitude="xl"
+        aria-label="Decrease"
+        icon={<Icon icon={Minus} />}
+      />
     ),
     increment: (
-      <IconButton prominence="ghost" tone="neutral" magnitude="xl" aria-label="Increase">
-        <Plus />
-      </IconButton>
+      <IconButton
+        prominence="ghost"
+        tone="neutral"
+        magnitude="xl"
+        aria-label="Increase"
+        icon={<Icon icon={Plus} />}
+      />
     ),
   },
 } satisfies Meta<typeof NumberField>;
@@ -65,9 +74,8 @@ export const Magnitudes: Story = {
               tone="neutral"
               magnitude={magnitude}
               aria-label={`Decrease (${magnitude})`}
-            >
-              <Minus />
-            </IconButton>
+              icon={<Icon icon={Minus} />}
+            />
           }
           increment={
             <IconButton
@@ -75,9 +83,8 @@ export const Magnitudes: Story = {
               tone="neutral"
               magnitude={magnitude}
               aria-label={`Increase (${magnitude})`}
-            >
-              <Plus />
-            </IconButton>
+              icon={<Icon icon={Plus} />}
+            />
           }
         />
       ))}
diff --git a/packages/propel/src/components/pagination/pagination.tsx b/packages/propel/src/components/pagination/pagination.tsx
index cf2c4664..cbc87ee3 100644
--- a/packages/propel/src/components/pagination/pagination.tsx
+++ b/packages/propel/src/components/pagination/pagination.tsx
@@ -189,11 +189,10 @@ export function Pagination({
               {pageSize.options.map((option) => (
                 <MenuItem
                   key={option}
+                  label={l.perPageValue(option)}
                   selected={option === pageSize.value}
                   onClick={() => pageSize.onValueChange(option)}
-                >
-                  {l.perPageValue(option)}
-                </MenuItem>
+                />
               ))}
             </MenuContent>
           </Menu>
diff --git a/packages/propel/src/components/pill/icon-pill.tsx b/packages/propel/src/components/pill/icon-pill.tsx
index 863cf79a..95546ce6 100644
--- a/packages/propel/src/components/pill/icon-pill.tsx
+++ b/packages/propel/src/components/pill/icon-pill.tsx
@@ -6,12 +6,11 @@ import {
   IconPill as IconPillElement,
   type IconPillProps as IconPillElementProps,
 } from "../../elements/pill";
-import { Icon } from "../../internal/icon";
 import { Spinner } from "../../internal/spinner";
 
-export type IconPillProps = IconPillElementProps & {
-  /** The icon, sized and tinted by the pill. */
-  children: React.ReactNode;
+export type IconPillProps = Omit<IconPillElementProps, "children"> & {
+  /** The icon element, usually `<Icon icon={...} />`. */
+  icon: React.ReactNode;
   /** Required: icon-only pills have no visible text, so they must be labeled. */
   "aria-label": string;
   /** Busy state: swaps the icon for a spinner and blocks clicks. */
@@ -24,13 +23,7 @@ export type IconPillProps = IconPillElementProps & {
  * a spinner while `loading`). `loading` disables the button while keeping it focusable
  * (`aria-busy`). An `aria-label` is required for the accessible name.
  */
-export function IconPill({
-  magnitude,
-  loading = false,
-  disabled,
-  children,
-  ...props
-}: IconPillProps) {
+export function IconPill({ magnitude, loading = false, disabled, icon, ...props }: IconPillProps) {
   return (
     <BaseButton
       {...props}
@@ -44,7 +37,7 @@ export function IconPill({
           <LoaderCircle />
         </Spinner>
       ) : (
-        <Icon>{children}</Icon>
+        icon
       )}
     </BaseButton>
   );
diff --git a/packages/propel/src/components/pill/pill-switch.tsx b/packages/propel/src/components/pill/pill-switch.tsx
index 64d17289..fe61443a 100644
--- a/packages/propel/src/components/pill/pill-switch.tsx
+++ b/packages/propel/src/components/pill/pill-switch.tsx
@@ -7,18 +7,19 @@ import {
   type PillMagnitude,
   PillSwitch as PillSwitchElement,
 } from "../../elements/pill";
-import { Icon } from "../../internal/icon";
 
 export type PillSwitchProps<Value extends string = string> = Omit<
   BaseToggleTypes.Props<Value>,
-  "className" | "style"
+  "children" | "className" | "style"
 > & {
   /** Size of the pill. */
   magnitude: PillMagnitude;
-  /** A node before the label (inline-start), sized to the pill's `--node-size`. */
+  /** Element rendered before the label (inline-start), e.g. `<Icon icon={Tag} />`. */
   startIcon?: React.ReactNode;
-  /** A node after the label (inline-end), sized to the pill's `--node-size`. */
+  /** Element rendered after the label (inline-end), e.g. `<Icon icon={X} />`. */
   endIcon?: React.ReactNode;
+  /** Visible pill label. */
+  label: React.ReactNode;
 };
 
 /**
@@ -31,14 +32,14 @@ export function PillSwitch<Value extends string = string>({
   magnitude,
   startIcon,
   endIcon,
-  children,
+  label,
   ...toggleProps
 }: PillSwitchProps<Value>) {
   return (
     <Toggle {...toggleProps} render={<PillSwitchElement magnitude={magnitude} />}>
-      {startIcon ? <Icon>{startIcon}</Icon> : null}
-      <PillLabel>{children}</PillLabel>
-      {endIcon ? <Icon>{endIcon}</Icon> : null}
+      {startIcon}
+      <PillLabel>{label}</PillLabel>
+      {endIcon}
     </Toggle>
   );
 }
diff --git a/packages/propel/src/components/pill/pill.stories.tsx b/packages/propel/src/components/pill/pill.stories.tsx
index 45db385d..ae2d780a 100644
--- a/packages/propel/src/components/pill/pill.stories.tsx
+++ b/packages/propel/src/components/pill/pill.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Check, Plus, Tag, X } from "lucide-react";
 import { expect, fn, userEvent } from "storybook/test";
 
+import { Icon } from "../icon";
 import { IconPill, PillButton, PillLabel, PillSwitch } from "./index";
 
 const MAGNITUDES = ["sm", "md", "lg"] as const;
@@ -14,7 +15,7 @@ const meta = {
   title: "Components/Pill",
   component: PillButton,
   subcomponents: { PillSwitch, IconPill, PillLabel },
-  args: { magnitude: "md", children: "Label" },
+  args: { magnitude: "md", label: "Label" },
   parameters: {
     design: {
       type: "figma",
@@ -28,7 +29,7 @@ type Story = StoryObj<typeof meta>;
 
 /** A pill-shaped button. Holds a label with optional inline-start/end nodes. */
 export const Button: Story = {
-  args: { magnitude: "md", startIcon: <Plus />, children: "Add label" },
+  args: { magnitude: "md", startIcon: <Icon icon={Plus} />, label: "Add label" },
 };
 
 /** Every magnitude (`sm` / `md` / `lg`) of `PillButton`. */
@@ -37,9 +38,12 @@ export const Magnitudes: Story = {
   render: () => (
     <div className="flex items-center gap-3">
       {MAGNITUDES.map((magnitude) => (
-        <PillButton key={magnitude} magnitude={magnitude} startIcon={<Tag />}>
-          {magnitude}
-        </PillButton>
+        <PillButton
+          key={magnitude}
+          magnitude={magnitude}
+          startIcon={<Icon icon={Tag} />}
+          label={magnitude}
+        />
       ))}
     </div>
   ),
@@ -57,21 +61,11 @@ export const States: Story = {
   },
   render: () => (
     <div className="flex items-center gap-3">
-      <PillButton magnitude="md" startIcon={<Tag />}>
-        Default
-      </PillButton>
-      <PillButton id="pill-hover" magnitude="md" startIcon={<Tag />}>
-        Hover
-      </PillButton>
-      <PillButton id="pill-active" magnitude="md" startIcon={<Tag />}>
-        Active
-      </PillButton>
-      <PillButton magnitude="md" startIcon={<Tag />} disabled>
-        Disabled
-      </PillButton>
-      <PillButton magnitude="md" loading>
-        Loading
-      </PillButton>
+      <PillButton magnitude="md" startIcon={<Icon icon={Tag} />} label="Default" />
+      <PillButton id="pill-hover" magnitude="md" startIcon={<Icon icon={Tag} />} label="Hover" />
+      <PillButton id="pill-active" magnitude="md" startIcon={<Icon icon={Tag} />} label="Active" />
+      <PillButton magnitude="md" startIcon={<Icon icon={Tag} />} disabled label="Disabled" />
+      <PillButton magnitude="md" loading label="Loading" />
     </div>
   ),
 };
@@ -84,12 +78,8 @@ export const Switch: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex items-center gap-3">
-      <PillSwitch magnitude="md" startIcon={<Tag />}>
-        Off
-      </PillSwitch>
-      <PillSwitch magnitude="md" startIcon={<Check />} defaultPressed>
-        On
-      </PillSwitch>
+      <PillSwitch magnitude="md" startIcon={<Icon icon={Tag} />} label="Off" />
+      <PillSwitch magnitude="md" startIcon={<Icon icon={Check} />} defaultPressed label="On" />
     </div>
   ),
 };
@@ -103,16 +93,15 @@ export const Icons: Story = {
   render: () => (
     <div className="flex items-center gap-3">
       {MAGNITUDES.map((magnitude) => (
-        <IconPill key={magnitude} magnitude={magnitude} aria-label={`Close ${magnitude}`}>
-          <X />
-        </IconPill>
+        <IconPill
+          key={magnitude}
+          magnitude={magnitude}
+          aria-label={`Close ${magnitude}`}
+          icon={<Icon icon={X} />}
+        />
       ))}
-      <IconPill magnitude="md" aria-label="Add (disabled)" disabled>
-        <Plus />
-      </IconPill>
-      <IconPill magnitude="md" aria-label="Add (loading)" loading>
-        <Plus />
-      </IconPill>
+      <IconPill magnitude="md" aria-label="Add (disabled)" disabled icon={<Icon icon={Plus} />} />
+      <IconPill magnitude="md" aria-label="Add (loading)" loading icon={<Icon icon={Plus} />} />
     </div>
   ),
 };
@@ -125,12 +114,8 @@ export const ButtonClicks: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   render: () => (
     <div className="flex gap-3">
-      <PillButton magnitude="md" onClick={clickSpies.onClick}>
-        Click me
-      </PillButton>
-      <PillButton magnitude="md" loading onClick={clickSpies.onLoadingClick}>
-        Busy
-      </PillButton>
+      <PillButton magnitude="md" onClick={clickSpies.onClick} label="Click me" />
+      <PillButton magnitude="md" loading onClick={clickSpies.onLoadingClick} label="Busy" />
     </div>
   ),
   play: async ({ canvas }) => {
@@ -155,11 +140,7 @@ export const ButtonClicks: Story = {
  */
 export const SwitchToggles: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
-  render: () => (
-    <PillSwitch magnitude="md" startIcon={<Tag />}>
-      Toggle me
-    </PillSwitch>
-  ),
+  render: () => <PillSwitch magnitude="md" startIcon={<Icon icon={Tag} />} label="Toggle me" />,
   play: async ({ canvas }) => {
     const toggle = canvas.getByRole("button", { name: "Toggle me" });
     await expect(toggle).toHaveAttribute("aria-pressed", "false");
diff --git a/packages/propel/src/components/pill/pill.tsx b/packages/propel/src/components/pill/pill.tsx
index 70a06c5b..75ceccd3 100644
--- a/packages/propel/src/components/pill/pill.tsx
+++ b/packages/propel/src/components/pill/pill.tsx
@@ -7,14 +7,15 @@ import {
   type PillButtonProps as PillButtonElementProps,
   PillLabel,
 } from "../../elements/pill";
-import { Icon } from "../../internal/icon";
 import { Spinner } from "../../internal/spinner";
 
-export type PillButtonProps = PillButtonElementProps & {
-  /** A node before the label (inline-start), sized to the pill's `--node-size`. */
+export type PillButtonProps = Omit<PillButtonElementProps, "children"> & {
+  /** Element rendered before the label (inline-start), e.g. `<Icon icon={Tag} />`. */
   startIcon?: React.ReactNode;
-  /** A node after the label (inline-end), sized to the pill's `--node-size`. */
+  /** Element rendered after the label (inline-end), e.g. `<Icon icon={X} />`. */
   endIcon?: React.ReactNode;
+  /** Visible pill label. */
+  label: React.ReactNode;
   /** Busy state: swaps the inline-start node for a spinner and blocks clicks. */
   loading?: boolean;
 };
@@ -31,7 +32,7 @@ export function PillButton({
   endIcon,
   loading = false,
   disabled,
-  children,
+  label,
   ...props
 }: PillButtonProps) {
   return (
@@ -46,11 +47,11 @@ export function PillButton({
         <Spinner>
           <LoaderCircle />
         </Spinner>
-      ) : startIcon ? (
-        <Icon>{startIcon}</Icon>
-      ) : null}
-      <PillLabel>{children}</PillLabel>
-      {!loading && endIcon ? <Icon>{endIcon}</Icon> : null}
+      ) : (
+        startIcon
+      )}
+      <PillLabel>{label}</PillLabel>
+      {!loading ? endIcon : null}
     </BaseButton>
   );
 }
diff --git a/packages/propel/src/components/popover/popover.stories.tsx b/packages/propel/src/components/popover/popover.stories.tsx
index 8e660a23..1dd72c26 100644
--- a/packages/propel/src/components/popover/popover.stories.tsx
+++ b/packages/propel/src/components/popover/popover.stories.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { useLayoutEffect } from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Button } from "../../elements/button";
+import { Button } from "../button";
 import { Checkbox } from "../checkbox/index";
 import { DirectionProvider } from "../direction-provider";
 import { PillSwitch } from "../pill/index";
@@ -86,9 +86,8 @@ export const Default: Story = {
         tone="neutral"
         magnitude="xl"
         render={<PopoverTrigger />}
-      >
-        Options
-      </Button>
+        label="Options"
+      />
       <PopoverContent side="bottom" align="start" sizing="md" aria-label="Options">
         <ToggleFooter defaultToggles={{ sub: true }} />
       </PopoverContent>
@@ -153,9 +152,8 @@ export const DisplayProperties: Story = {
           tone="neutral"
           magnitude="xl"
           render={<PopoverTrigger />}
-        >
-          Display
-        </Button>
+          label="Display"
+        />
         <PopoverContent side="bottom" align="start" sizing="md" aria-label="Display options">
           <PanelLabel>Display Properties</PanelLabel>
           <div className="flex flex-wrap gap-1.5 px-2 py-1.5">
@@ -165,9 +163,8 @@ export const DisplayProperties: Story = {
                 magnitude="md"
                 pressed={Boolean(pills[p])}
                 onPressedChange={(next) => setPills((s) => ({ ...s, [p]: next }))}
-              >
-                {p}
-              </PillSwitch>
+                label={p}
+              />
             ))}
           </div>
           <PanelSeparator />
@@ -233,9 +230,8 @@ export const DisplayAccordion: Story = {
           tone="neutral"
           magnitude="xl"
           render={<PopoverTrigger />}
-        >
-          Display options
-        </Button>
+          label="Display options"
+        />
         <PopoverContent side="bottom" align="start" sizing="md" aria-label="Display options">
           {SECTIONS.map((title) => {
             const key = title.split(" ")[0].toLowerCase();
@@ -322,9 +318,8 @@ export const OpenOnHover: Story = {
         tone="neutral"
         magnitude="xl"
         render={<PopoverTrigger openOnHover delay={100} />}
-      >
-        Filters
-      </Button>
+        label="Filters"
+      />
       <PopoverContent side="bottom" align="start" sizing="md" aria-label="Active filters">
         <PanelLabel>Applied filters</PanelLabel>
         <div className="flex flex-col gap-1 px-2 py-1.5 text-13 text-secondary">
@@ -379,9 +374,8 @@ export const DetachedTrigger: Story = {
           tone="neutral"
           magnitude="xl"
           render={<PopoverTrigger handle={displayPopoverHandle} />}
-        >
-          Display
-        </Button>
+          label="Display"
+        />
       </div>
       {/* The popover: declared elsewhere, associated by `handle`. */}
       <Popover handle={displayPopoverHandle}>
@@ -446,9 +440,8 @@ export const MultipleTriggers: Story = {
                   tone="neutral"
                   magnitude="xl"
                   render={<PopoverTrigger payload={member} />}
-                >
-                  {member.name}
-                </Button>
+                  label={member.name}
+                />
               ))}
             </div>
             <PopoverContent side="bottom" align="start" sizing="md" aria-label="Member details">
@@ -522,18 +515,16 @@ export const Controlled: Story = {
             tone="neutral"
             magnitude="xl"
             render={<PopoverTrigger id="view-sort-trigger" />}
-          >
-            Sort
-          </Button>
+            label="Sort"
+          />
           <Button
             sizing="hug"
             prominence="secondary"
             tone="neutral"
             magnitude="xl"
             render={<PopoverTrigger id="view-filter-trigger" />}
-          >
-            Filter
-          </Button>
+            label="Filter"
+          />
           <PopoverContent side="bottom" align="start" sizing="md" aria-label="View options">
             {triggerId === "view-filter-trigger" ? (
               <>
@@ -562,9 +553,8 @@ export const Controlled: Story = {
             setTriggerId("view-filter-trigger");
             setOpen(true);
           }}
-        >
-          Reopen filters
-        </Button>
+          label="Reopen filters"
+        />
       </div>
     );
   },
@@ -645,9 +635,8 @@ export const RTL: Story = {
             tone="neutral"
             magnitude="xl"
             render={<PopoverTrigger />}
-          >
-            خيارات
-          </Button>
+            label="خيارات"
+          />
           <PopoverContent side="bottom" align="start" sizing="md" aria-label="Options">
             <PanelLabel>الترتيب حسب</PanelLabel>
             <RadioGroup density="comfortable" defaultValue="priority">
diff --git a/packages/propel/src/components/preview-card/preview-card.stories.tsx b/packages/propel/src/components/preview-card/preview-card.stories.tsx
index a19a6f89..059f66d3 100644
--- a/packages/propel/src/components/preview-card/preview-card.stories.tsx
+++ b/packages/propel/src/components/preview-card/preview-card.stories.tsx
@@ -132,7 +132,7 @@ export const WithImageInteraction: Story = {
   },
 };
 
-// Per-trigger payload content: the card resolves its body from the string payload the
+// Per-trigger payload body: the card resolves its body from the string payload the
 // active trigger passed, so one card serves several launch points.
 const topics: Record<string, { title: string; description: string }> = {
   cycles: {
@@ -284,9 +284,8 @@ export const Controlled: Story = {
             setTriggerId("modules-trigger");
             setOpen(true);
           }}
-        >
-          Preview modules
-        </Button>
+          label="Preview modules"
+        />
       </div>
     );
   },
diff --git a/packages/propel/src/components/radio/radio.stories.tsx b/packages/propel/src/components/radio/radio.stories.tsx
index ccd82b80..69ca6f5f 100644
--- a/packages/propel/src/components/radio/radio.stories.tsx
+++ b/packages/propel/src/components/radio/radio.stories.tsx
@@ -209,9 +209,14 @@ export const FormIntegration: Story = {
             </RadioGroupField>
           </FormBody>
           <FormActions layout="inline">
-            <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
-              Save
-            </Button>
+            <Button
+              sizing="hug"
+              type="submit"
+              prominence="primary"
+              tone="neutral"
+              magnitude="md"
+              label="Save"
+            />
           </FormActions>
         </Form>
         <output className="text-13 text-secondary">
diff --git a/packages/propel/src/components/select-field/select-field.tsx b/packages/propel/src/components/select-field/select-field.tsx
index c4675d2e..6dcae4bf 100644
--- a/packages/propel/src/components/select-field/select-field.tsx
+++ b/packages/propel/src/components/select-field/select-field.tsx
@@ -1,22 +1,19 @@
 import { Select as BaseSelect } from "@base-ui/react/select";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { Check } from "lucide-react";
 import type * as React from "react";
 
 import type { FieldMagnitude } from "../../elements/field/variants";
 import {
   SelectItemIndicator,
   SelectLabel,
-  SelectTrigger,
   type SelectTriggerMagnitude,
-  SelectValue,
 } from "../../elements/select/index";
-import { Icon } from "../../internal/icon";
 import { ListboxItem } from "../../internal/listbox-item";
 import { ListboxPopup } from "../../internal/listbox-popup";
 import { Positioner } from "../../internal/positioner";
 import { Field, FieldDescription } from "../field";
 import { FieldHelperText } from "../field/field-helper-text";
-import { Select, type SelectProps } from "../select";
+import { Select, SelectTrigger, type SelectProps } from "../select";
 
 export type { FieldMagnitude } from "../../elements/field/variants";
 
@@ -65,12 +62,7 @@ export function SelectField({
     <Field name={name} disabled={disabled} invalid={error != null || undefined}>
       <Select disabled={disabled} items={options} {...selectProps}>
         <BaseSelect.Label render={<SelectLabel />}>{label}</BaseSelect.Label>
-        <BaseSelect.Trigger render={<SelectTrigger magnitude={selectMagnitude} />}>
-          <BaseSelect.Value render={<SelectValue />} />
-          <Icon tint="secondary">
-            <ChevronsUpDown />
-          </Icon>
-        </BaseSelect.Trigger>
+        <SelectTrigger magnitude={selectMagnitude} />
         {description != null ? (
           <FieldDescription magnitude={magnitude}>{description}</FieldDescription>
         ) : null}
diff --git a/packages/propel/src/components/select/index.tsx b/packages/propel/src/components/select/index.tsx
index 88f96519..9cec3f60 100644
--- a/packages/propel/src/components/select/index.tsx
+++ b/packages/propel/src/components/select/index.tsx
@@ -9,7 +9,7 @@ export * from "./select-group-label";
 // Re-export propel's STYLED select parts that stay styling-only, so a full select can be assembled
 // from one entry. The ready-mades above graft Base UI's `Trigger`/`Value`/`Label`/`List`/`Item`
 // behavior onto the styled parts, so consumers never compose `@base-ui/react/select` directly. The
-// styled `SelectTrigger`/`SelectValue`/`SelectIcon`/`SelectLabel` elements are NOT re-exported here
+// styled `SelectTrigger`/`SelectValue`/`SelectLabel` elements are NOT re-exported here
 // — the same-named ready-mades replace them (name collision rule); import them from
 // `elements/select` to hand-wire a custom anatomy.
 export {
diff --git a/packages/propel/src/components/select/select-item.tsx b/packages/propel/src/components/select/select-item.tsx
index 1f2c8109..10739501 100644
--- a/packages/propel/src/components/select/select-item.tsx
+++ b/packages/propel/src/components/select/select-item.tsx
@@ -1,12 +1,18 @@
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { Check } from "lucide-react";
+import type * as React from "react";
 
 import { SelectItemIndicator } from "../../elements/select";
 import { ListboxItem, type ListboxItemMagnitude } from "../../internal/listbox-item";
 
-export type SelectItemProps = Omit<BaseSelect.Item.Props, "className" | "render" | "style"> & {
+export type SelectItemProps = Omit<
+  BaseSelect.Item.Props,
+  "children" | "className" | "label" | "render" | "style"
+> & {
   /** Visual size of the row: controls its height and text size. Required. */
   magnitude: ListboxItemMagnitude;
+  /** Option label. */
+  label: React.ReactNode;
 };
 
 /**
@@ -14,16 +20,16 @@ export type SelectItemProps = Omit<BaseSelect.Item.Props, "className" | "render"
  * row and bakes the selection marker — Base UI's `Select.ItemIndicator` grafted onto the styled
  * `SelectItemIndicator` with a check glyph. The marker is `keepMounted` because the
  * `layout="indicator"` row places children positionally: it must occupy the leading column even
- * while unselected (the styled marker hides its glyph off `data-selected`). Children become the
- * item's text via Base UI's `Select.ItemText`.
+ * while unselected (the styled marker hides its glyph off `data-selected`). The `label` prop
+ * becomes the item's text via Base UI's `Select.ItemText`.
  */
-export function SelectItem({ children, magnitude, ...props }: SelectItemProps) {
+export function SelectItem({ label, magnitude, ...props }: SelectItemProps) {
   return (
     <BaseSelect.Item {...props} render={<ListboxItem layout="indicator" magnitude={magnitude} />}>
       <BaseSelect.ItemIndicator keepMounted render={<SelectItemIndicator />}>
         <Check aria-hidden />
       </BaseSelect.ItemIndicator>
-      <BaseSelect.ItemText>{children}</BaseSelect.ItemText>
+      <BaseSelect.ItemText>{label}</BaseSelect.ItemText>
     </BaseSelect.Item>
   );
 }
diff --git a/packages/propel/src/components/select/select-trigger.tsx b/packages/propel/src/components/select/select-trigger.tsx
index 1e00bde9..13daa4f9 100644
--- a/packages/propel/src/components/select/select-trigger.tsx
+++ b/packages/propel/src/components/select/select-trigger.tsx
@@ -7,7 +7,7 @@ import {
   type SelectTriggerMagnitude,
   SelectValue,
 } from "../../elements/select";
-import { Icon } from "../../internal/icon";
+import { Icon as IconSlot } from "../../internal/icon";
 
 export type SelectTriggerProps = Omit<
   BaseSelect.Trigger.Props,
@@ -15,23 +15,22 @@ export type SelectTriggerProps = Omit<
 > & {
   /** Visual size of the trigger: controls its height, text, and icon size. Required. */
   magnitude: SelectTriggerMagnitude;
-  /** Glyph for the trailing `SelectIcon` slot. Defaults to a chevrons-up-down. */
-  icon?: React.ReactNode;
   /** Shown in the trigger while nothing is selected — Base UI's `Select.Value` placeholder. */
   placeholder?: React.ReactNode;
 };
 
 /**
  * The ready-made select trigger: grafts Base UI's `Select.Trigger` behavior onto the styled trigger
- * and bakes its anatomy — the selected value (Base UI's `Select.Value` grafted onto the styled
- * `SelectValue`) plus the trailing `SelectIcon`, whose default glyph is overridable via `icon`
- * (defaults are a `components` concern). Children are baked, so the prop is omitted.
+ * and bakes its anatomy — the selected value (Base UI's `Select.Value` grafted onto `SelectValue`)
+ * plus the owned chevron indicator. Children are baked, so the prop is omitted.
  */
-export function SelectTrigger({ icon, magnitude, placeholder, ...props }: SelectTriggerProps) {
+export function SelectTrigger({ magnitude, placeholder, ...props }: SelectTriggerProps) {
   return (
     <BaseSelect.Trigger {...props} render={<SelectTriggerElement magnitude={magnitude} />}>
       <BaseSelect.Value render={<SelectValue />} placeholder={placeholder} />
-      <Icon tint="secondary">{icon ?? <ChevronsUpDown aria-hidden />}</Icon>
+      <IconSlot tint="secondary">
+        <ChevronsUpDown aria-hidden />
+      </IconSlot>
     </BaseSelect.Trigger>
   );
 }
diff --git a/packages/propel/src/components/select/select.stories.tsx b/packages/propel/src/components/select/select.stories.tsx
index d6729e82..ed6b4543 100644
--- a/packages/propel/src/components/select/select.stories.tsx
+++ b/packages/propel/src/components/select/select.stories.tsx
@@ -57,9 +57,7 @@ export const Default: Story = {
         <SelectContent>
           <SelectList>
             {SERVER_TYPES.map(({ label, value }) => (
-              <SelectItem key={value} value={value} magnitude="md">
-                {label}
-              </SelectItem>
+              <SelectItem key={value} value={value} magnitude="md" label={label} />
             ))}
           </SelectList>
         </SelectContent>
@@ -100,9 +98,7 @@ export const Placeholder: Story = {
         <SelectContent>
           <SelectList>
             {SERVER_TYPES.map(({ label, value }) => (
-              <SelectItem key={value} value={value} magnitude="md">
-                {label}
-              </SelectItem>
+              <SelectItem key={value} value={value} magnitude="md" label={label} />
             ))}
           </SelectList>
         </SelectContent>
@@ -146,9 +142,7 @@ export const Multiple: Story = {
         <SelectContent>
           <SelectList>
             {SERVER_TYPES.map(({ label, value }) => (
-              <SelectItem key={value} value={value} magnitude="md">
-                {label}
-              </SelectItem>
+              <SelectItem key={value} value={value} magnitude="md" label={label} />
             ))}
           </SelectList>
         </SelectContent>
@@ -209,9 +203,7 @@ export const ObjectValues: Story = {
         <SelectContent>
           <SelectList>
             {ASSIGNEES.map((member) => (
-              <SelectItem key={member.id} value={member} magnitude="md">
-                {member.name}
-              </SelectItem>
+              <SelectItem key={member.id} value={member} magnitude="md" label={member.name} />
             ))}
           </SelectList>
         </SelectContent>
@@ -275,9 +267,7 @@ export const Grouped: Story = {
               <SelectGroup key={group.label}>
                 <SelectGroupLabel>{group.label}</SelectGroupLabel>
                 {group.items.map(({ label, value }) => (
-                  <SelectItem key={value} value={value} magnitude="md">
-                    {label}
-                  </SelectItem>
+                  <SelectItem key={value} value={value} magnitude="md" label={label} />
                 ))}
               </SelectGroup>
             ))}
@@ -318,9 +308,7 @@ export const Magnitudes: Story = {
           <SelectContent>
             <SelectList>
               {SERVER_TYPES.map(({ label, value }) => (
-                <SelectItem key={value} value={value} magnitude={magnitude}>
-                  {label}
-                </SelectItem>
+                <SelectItem key={value} value={value} magnitude={magnitude} label={label} />
               ))}
             </SelectList>
           </SelectContent>
diff --git a/packages/propel/src/components/slider/slider.stories.tsx b/packages/propel/src/components/slider/slider.stories.tsx
index 7ec8d726..501e6915 100644
--- a/packages/propel/src/components/slider/slider.stories.tsx
+++ b/packages/propel/src/components/slider/slider.stories.tsx
@@ -180,9 +180,14 @@ export const FormIntegration: Story = {
             </Field>
           </FormBody>
           <FormActions layout="inline">
-            <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
-              Save
-            </Button>
+            <Button
+              sizing="hug"
+              type="submit"
+              prominence="primary"
+              tone="neutral"
+              magnitude="md"
+              label="Save"
+            />
           </FormActions>
         </Form>
         <output className="text-13 text-secondary">
diff --git a/packages/propel/src/components/switch/switch.stories.tsx b/packages/propel/src/components/switch/switch.stories.tsx
index dde8ed49..1f9685bb 100644
--- a/packages/propel/src/components/switch/switch.stories.tsx
+++ b/packages/propel/src/components/switch/switch.stories.tsx
@@ -214,9 +214,14 @@ export const FormIntegration: Story = {
             />
           </FormBody>
           <FormActions layout="inline">
-            <Button sizing="hug" type="submit" prominence="primary" tone="neutral" magnitude="md">
-              Save
-            </Button>
+            <Button
+              sizing="hug"
+              type="submit"
+              prominence="primary"
+              tone="neutral"
+              magnitude="md"
+              label="Save"
+            />
           </FormActions>
         </Form>
         <output className="text-13 text-secondary">
diff --git a/packages/propel/src/components/table/table-cell.tsx b/packages/propel/src/components/table/table-cell.tsx
index 427b71f8..ff33daa8 100644
--- a/packages/propel/src/components/table/table-cell.tsx
+++ b/packages/propel/src/components/table/table-cell.tsx
@@ -6,14 +6,15 @@ import {
   TableCellContent,
   TableCellLayout,
 } from "../../elements/table/index";
-import { NodeSlot } from "../../internal/node-slot";
 import { useTableMode } from "./table-context";
 
-export type TableCellProps = Omit<TableCellElementProps, "mode"> & {
-  /** Leading content beside the cell text — an icon or an `Avatar`. */
+export type TableCellProps = Omit<TableCellElementProps, "children" | "mode"> & {
+  /** Leading element beside the cell text, e.g. `<Icon icon={...} />` or an `Avatar`. */
   startIcon?: React.ReactNode;
-  /** Trailing content beside the cell text — an icon or an `Avatar`. */
+  /** Trailing element beside the cell text, e.g. `<Icon icon={...} />` or an `Avatar`. */
   endIcon?: React.ReactNode;
+  /** Cell content. */
+  children?: React.ReactNode;
 };
 
 /** A ready-made data cell: optional leading/trailing slots around a truncating content region. */
@@ -22,9 +23,9 @@ export function TableCell({ startIcon, endIcon, children, ...props }: TableCellP
   return (
     <TableCellElement mode={mode} {...props}>
       <TableCellLayout>
-        {startIcon != null ? <NodeSlot>{startIcon}</NodeSlot> : null}
+        {startIcon}
         <TableCellContent>{children}</TableCellContent>
-        {endIcon != null ? <NodeSlot>{endIcon}</NodeSlot> : null}
+        {endIcon}
       </TableCellLayout>
     </TableCellElement>
   );
diff --git a/packages/propel/src/components/table/table-head.tsx b/packages/propel/src/components/table/table-head.tsx
index bef67518..f62fb49e 100644
--- a/packages/propel/src/components/table/table-head.tsx
+++ b/packages/propel/src/components/table/table-head.tsx
@@ -25,7 +25,9 @@ const ariaSort: Record<TableHeadSort, React.AriaAttributes["aria-sort"]> = {
   none: "none",
 };
 
-export type TableHeadProps = Omit<TableHeadElementProps, "aria-sort" | "mode"> & {
+export type TableHeadProps = Omit<TableHeadElementProps, "aria-sort" | "children" | "mode"> & {
+  /** Header label. */
+  label: React.ReactNode;
   /** Visual treatment. `sortable` renders the title as a sort-cycling button. */
   /** Whether this header is interactive sortable (renders a sort trigger + reflects `aria-sort`). */
   sortable?: boolean;
@@ -37,10 +39,10 @@ export type TableHeadProps = Omit<TableHeadElementProps, "aria-sort" | "mode"> &
 
 /** A ready-made header cell: a plain title, or (when sortable) a sort-cycling button with a chevron. */
 export function TableHead({
+  label,
   sortable = false,
   sort = "none",
   onSort,
-  children,
   ...props
 }: TableHeadProps) {
   const tableMode = useTableMode();
@@ -56,13 +58,13 @@ export function TableHead({
     >
       {hasSortControl ? (
         <TableHeadSortTrigger onClick={onSort}>
-          <TableHeadTitle>{children}</TableHeadTitle>
+          <TableHeadTitle>{label}</TableHeadTitle>
           <TableHeadSortIndicator>
             <SortGlyph />
           </TableHeadSortIndicator>
         </TableHeadSortTrigger>
       ) : (
-        <TableHeadTitle>{children}</TableHeadTitle>
+        <TableHeadTitle>{label}</TableHeadTitle>
       )}
     </TableHeadElement>
   );
diff --git a/packages/propel/src/components/table/table.stories.tsx b/packages/propel/src/components/table/table.stories.tsx
index 28041d8a..273ffd31 100644
--- a/packages/propel/src/components/table/table.stories.tsx
+++ b/packages/propel/src/components/table/table.stories.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
 import { Avatar } from "../avatar/index";
+import { Icon } from "../icon";
 import { MenuContent, MenuItem } from "../menu/index";
 import { Pagination } from "../pagination/index";
 import {
@@ -89,9 +90,7 @@ export const Default: Story = {
       <TableHeader>
         <TableRow>
           {COLUMNS.map((c) => (
-            <TableHead pinned="none" key={c}>
-              {c}
-            </TableHead>
+            <TableHead pinned="none" label={c} key={c} />
           ))}
         </TableRow>
       </TableHeader>
@@ -180,11 +179,9 @@ export const Sortable: Story = {
       <Table {...args}>
         <TableHeader>
           <TableRow>
-            <TableHead pinned="none" sortable sort={sort} onSort={cycle}>
-              Name
-            </TableHead>
-            <TableHead pinned="none">Account type</TableHead>
-            <TableHead pinned="none">Email</TableHead>
+            <TableHead pinned="none" label="Name" sortable sort={sort} onSort={cycle} />
+            <TableHead pinned="none" label="Account type" />
+            <TableHead pinned="none" label="Email" />
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -252,9 +249,9 @@ export const EditableCells: Story = {
       <Table {...args}>
         <TableHeader>
           <TableRow>
-            <TableHead pinned="none">Name</TableHead>
-            <TableHead pinned="none">Email</TableHead>
-            <TableHead pinned="none">Account type</TableHead>
+            <TableHead pinned="none" label="Name" />
+            <TableHead pinned="none" label="Email" />
+            <TableHead pinned="none" label="Account type" />
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -284,11 +281,10 @@ export const EditableCells: Story = {
                   {ROLES.map((role) => (
                     <MenuItem
                       key={role}
+                      label={role}
                       selected={role === person.role}
                       onClick={() => setRole(person.email, role)}
-                    >
-                      {role}
-                    </MenuItem>
+                    />
                   ))}
                 </MenuContent>
               </TableEditableCell>
@@ -354,10 +350,10 @@ export const WithPagination: Story = {
         <Table {...args}>
           <TableHeader>
             <TableRow>
-              <TableHead pinned="none">Name</TableHead>
-              <TableHead pinned="none">Email</TableHead>
-              <TableHead pinned="none">Account type</TableHead>
-              <TableHead pinned="none">Billing status</TableHead>
+              <TableHead pinned="none" label="Name" />
+              <TableHead pinned="none" label="Email" />
+              <TableHead pinned="none" label="Account type" />
+              <TableHead pinned="none" label="Billing status" />
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -441,12 +437,10 @@ export const RichRows: Story = {
       <Table {...args}>
         <TableHeader>
           <TableRow>
-            <TableHead pinned="none">Name</TableHead>
-            <TableHead pinned="none">Email</TableHead>
-            <TableHead pinned="none">Account type</TableHead>
-            <TableHead pinned="none">
-              <span className="sr-only">Actions</span>
-            </TableHead>
+            <TableHead pinned="none" label="Name" />
+            <TableHead pinned="none" label="Email" />
+            <TableHead pinned="none" label="Account type" />
+            <TableHead pinned="none" label={<span className="sr-only">Actions</span>} />
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -469,18 +463,17 @@ export const RichRows: Story = {
                   {ROLES.map((role) => (
                     <MenuItem
                       key={role}
+                      label={role}
                       selected={role === person.role}
                       onClick={() => setRole(person.email, role)}
-                    >
-                      {role}
-                    </MenuItem>
+                    />
                   ))}
                 </MenuContent>
               </TableEditableCell>
               <TableActionCell aria-label={`Options for ${person.name}`}>
                 <MenuContent>
-                  <MenuItem icon={<Pencil />}>Edit</MenuItem>
-                  <MenuItem icon={<Trash2 />}>Delete</MenuItem>
+                  <MenuItem icon={<Icon icon={Pencil} tint="secondary" />} label="Edit" />
+                  <MenuItem icon={<Icon icon={Trash2} tint="danger" />} label="Delete" />
                 </MenuContent>
               </TableActionCell>
             </TableRow>
@@ -524,11 +517,11 @@ export const StickyHeaderAndColumns: Story = {
       <Table {...args}>
         <TableHeader>
           <TableRow>
-            <TableHead pinned="start">Name</TableHead>
-            <TableHead pinned="none">Display name</TableHead>
-            <TableHead pinned="none">Email</TableHead>
-            <TableHead pinned="none">Account type</TableHead>
-            <TableHead pinned="none">Billing status</TableHead>
+            <TableHead pinned="start" label="Name" />
+            <TableHead pinned="none" label="Display name" />
+            <TableHead pinned="none" label="Email" />
+            <TableHead pinned="none" label="Account type" />
+            <TableHead pinned="none" label="Billing status" />
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -601,10 +594,8 @@ export const SortableKeyboard: Story = {
       <Table {...args}>
         <TableHeader>
           <TableRow>
-            <TableHead pinned="none" sortable sort={sort} onSort={cycle}>
-              Name
-            </TableHead>
-            <TableHead pinned="none">Email</TableHead>
+            <TableHead pinned="none" label="Name" sortable sort={sort} onSort={cycle} />
+            <TableHead pinned="none" label="Email" />
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -671,8 +662,8 @@ export const EditableCellKeyboard: Story = {
       <Table {...args}>
         <TableHeader>
           <TableRow>
-            <TableHead pinned="none">Name</TableHead>
-            <TableHead pinned="none">Account type</TableHead>
+            <TableHead pinned="none" label="Name" />
+            <TableHead pinned="none" label="Account type" />
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -683,9 +674,7 @@ export const EditableCellKeyboard: Story = {
             <TableEditableCell value={role} aria-label="Account type for Chargers">
               <MenuContent>
                 {ROLES.map((r) => (
-                  <MenuItem key={r} selected={r === role} onClick={() => setRole(r)}>
-                    {r}
-                  </MenuItem>
+                  <MenuItem key={r} label={r} selected={r === role} onClick={() => setRole(r)} />
                 ))}
               </MenuContent>
             </TableEditableCell>
diff --git a/packages/propel/src/components/tabs/tab.tsx b/packages/propel/src/components/tabs/tab.tsx
index 6407e7fa..fdc3a7da 100644
--- a/packages/propel/src/components/tabs/tab.tsx
+++ b/packages/propel/src/components/tabs/tab.tsx
@@ -7,15 +7,13 @@ import {
   TabUnderlineBarTrack,
   TabUnderlineLabel,
 } from "../../elements/tabs";
-import { NodeSlot } from "../../internal/node-slot";
 import { TabsAppearanceContext } from "./tabs-context";
 
-export type TabProps = Omit<BaseTabs.Tab.Props, "className" | "style"> & {
-  /**
-   * Node rendered before the label (inline-start). Sized to the tab's `--node-size` (16px) and
-   * tinted to the tab's text color. Decorative, kept out of the name.
-   */
+export type TabProps = Omit<BaseTabs.Tab.Props, "children" | "className" | "style"> & {
+  /** Element rendered before the label (inline-start), e.g. `<Icon icon={Folder} />`. */
   icon?: React.ReactNode;
+  /** Visible tab label. */
+  label: React.ReactNode;
 };
 
 /**
@@ -24,16 +22,15 @@ export type TabProps = Omit<BaseTabs.Tab.Props, "className" | "style"> & {
  * `icon` with the label. The `underline` appearance additionally renders the sliding bar track
  * beneath the label.
  */
-export function Tab({ icon, children, ...props }: TabProps) {
+export function Tab({ icon, label, ...props }: TabProps) {
   const appearance = React.useContext(TabsAppearanceContext);
-  const iconNode = icon ? <NodeSlot aria-hidden>{icon}</NodeSlot> : null;
 
   if (appearance === "underline") {
     return (
       <BaseTabs.Tab render={<TabElement appearance={appearance} />} {...props}>
         <TabUnderlineLabel>
-          {iconNode}
-          {children}
+          {icon}
+          {label}
         </TabUnderlineLabel>
         <TabUnderlineBarTrack>
           <TabUnderlineBar />
@@ -44,8 +41,8 @@ export function Tab({ icon, children, ...props }: TabProps) {
 
   return (
     <BaseTabs.Tab render={<TabElement appearance={appearance} />} {...props}>
-      {iconNode}
-      {children}
+      {icon}
+      {label}
     </BaseTabs.Tab>
   );
 }
diff --git a/packages/propel/src/components/tabs/tabs.stories.tsx b/packages/propel/src/components/tabs/tabs.stories.tsx
index ec3e7803..9ceedc1f 100644
--- a/packages/propel/src/components/tabs/tabs.stories.tsx
+++ b/packages/propel/src/components/tabs/tabs.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Activity, LayoutGrid, Settings } from "lucide-react";
 import { expect, waitFor } from "storybook/test";
 
+import { Icon } from "../icon";
 import { Tab, Tabs, TabsIndicator, TabsList, TabsPanel } from "./index";
 
 // The standard three-tab set the basic stories share (the only difference between
@@ -10,14 +11,19 @@ const TAB_ITEMS = [
   {
     value: "overview",
     label: "Overview",
-    icon: <LayoutGrid />,
+    icon: <Icon icon={LayoutGrid} />,
     panel: "A high-level summary of the project.",
   },
-  { value: "activity", label: "Activity", icon: <Activity />, panel: "The latest activity feed." },
+  {
+    value: "activity",
+    label: "Activity",
+    icon: <Icon icon={Activity} />,
+    panel: "The latest activity feed.",
+  },
   {
     value: "settings",
     label: "Settings",
-    icon: <Settings />,
+    icon: <Icon icon={Settings} />,
     panel: "Configuration and preferences.",
   },
 ];
@@ -48,9 +54,7 @@ export const Contained: Story = {
     <Tabs {...args}>
       <TabsList>
         {TAB_ITEMS.map((t) => (
-          <Tab key={t.value} value={t.value}>
-            {t.label}
-          </Tab>
+          <Tab key={t.value} value={t.value} label={t.label} />
         ))}
       </TabsList>
       {TAB_ITEMS.map((t) => (
@@ -69,9 +73,7 @@ export const Underline: Story = {
     <Tabs {...args}>
       <TabsList>
         {TAB_ITEMS.map((t) => (
-          <Tab key={t.value} value={t.value}>
-            {t.label}
-          </Tab>
+          <Tab key={t.value} value={t.value} label={t.label} />
         ))}
       </TabsList>
       {TAB_ITEMS.map((t) => (
@@ -90,9 +92,7 @@ export const WithIcons: Story = {
     <Tabs {...args}>
       <TabsList>
         {TAB_ITEMS.map((t) => (
-          <Tab key={t.value} value={t.value} icon={t.icon}>
-            {t.label}
-          </Tab>
+          <Tab key={t.value} value={t.value} icon={t.icon} label={t.label} />
         ))}
       </TabsList>
       {TAB_ITEMS.map((t) => (
@@ -111,9 +111,7 @@ export const UnderlineWithIcons: Story = {
     <Tabs {...args}>
       <TabsList>
         {TAB_ITEMS.map((t) => (
-          <Tab key={t.value} value={t.value} icon={t.icon}>
-            {t.label}
-          </Tab>
+          <Tab key={t.value} value={t.value} icon={t.icon} label={t.label} />
         ))}
       </TabsList>
       {TAB_ITEMS.map((t) => (
@@ -147,9 +145,7 @@ export const Overflowing: Story = {
             "Webhooks",
             "Billing",
           ].map((label) => (
-            <Tab key={label} value={label.toLowerCase()}>
-              {label}
-            </Tab>
+            <Tab key={label} value={label.toLowerCase()} label={label} />
           ))}
         </TabsList>
         <TabsPanel value="overview">A high-level summary of the project.</TabsPanel>
@@ -171,9 +167,7 @@ export const OverflowScrolls: Story = {
       <Tabs {...args}>
         <TabsList>
           {Array.from({ length: 12 }, (_, i) => (
-            <Tab key={i} value={`tab-${i}`}>
-              {`Section ${i + 1}`}
-            </Tab>
+            <Tab key={i} value={`tab-${i}`} label={`Section ${i + 1}`} />
           ))}
         </TabsList>
         <TabsPanel value="tab-0">Section 1 panel</TabsPanel>
@@ -202,8 +196,8 @@ export const ClickActivates: Story = {
   render: (args) => (
     <Tabs {...args}>
       <TabsList>
-        <Tab value="overview">Overview</Tab>
-        <Tab value="activity">Activity</Tab>
+        <Tab value="overview" label="Overview" />
+        <Tab value="activity" label="Activity" />
       </TabsList>
       <TabsPanel value="overview">Overview panel</TabsPanel>
       <TabsPanel value="activity">Activity panel</TabsPanel>
@@ -248,9 +242,9 @@ export const KeyboardNavigates: Story = {
   render: (args) => (
     <Tabs {...args}>
       <TabsList>
-        <Tab value="overview">Overview</Tab>
-        <Tab value="activity">Activity</Tab>
-        <Tab value="settings">Settings</Tab>
+        <Tab value="overview" label="Overview" />
+        <Tab value="activity" label="Activity" />
+        <Tab value="settings" label="Settings" />
       </TabsList>
       <TabsPanel value="overview">Overview panel</TabsPanel>
       <TabsPanel value="activity">Activity panel</TabsPanel>
diff --git a/packages/propel/src/components/toast/toast.stories.tsx b/packages/propel/src/components/toast/toast.stories.tsx
index b4616852..644d0753 100644
--- a/packages/propel/src/components/toast/toast.stories.tsx
+++ b/packages/propel/src/components/toast/toast.stories.tsx
@@ -3,6 +3,7 @@ import { X } from "lucide-react";
 import * as React from "react";
 import { expect, fn, waitFor, within } from "storybook/test";
 
+import { Icon } from "../icon";
 import { IconButton } from "../icon-button";
 import {
   Toast,
@@ -19,9 +20,13 @@ const TONES: ToastTone[] = ["success", "danger", "info", "warning", "neutral"];
 
 // A shared close control passed to each ToastProvider — carries its own (localizable) aria-label.
 const closeButton = (
-  <IconButton prominence="ghost" tone="neutral" magnitude="sm" aria-label="Dismiss">
-    <X />
-  </IconButton>
+  <IconButton
+    prominence="ghost"
+    tone="neutral"
+    magnitude="sm"
+    aria-label="Dismiss"
+    icon={<Icon icon={X} />}
+  />
 );
 
 // Stable spies shared between the ActionsInteraction story's render and play fn so the
diff --git a/packages/propel/src/components/toggle-group/toggle-group.stories.tsx b/packages/propel/src/components/toggle-group/toggle-group.stories.tsx
index 506b51cb..37882982 100644
--- a/packages/propel/src/components/toggle-group/toggle-group.stories.tsx
+++ b/packages/propel/src/components/toggle-group/toggle-group.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Bold, Italic, List, ListOrdered, Underline } from "lucide-react";
 import { expect, fn } from "storybook/test";
 
+import { Icon } from "../icon";
 import { Toggle, type ToggleMagnitude } from "../toggle/index";
 import { ToggleGroup } from "./index";
 
@@ -35,12 +36,8 @@ export const Default: Story = {
   args: { magnitude: "md", defaultValue: ["bulleted"], onValueChange: fn() },
   render: (args) => (
     <ToggleGroup {...args} aria-label="List style">
-      <Toggle value="bulleted" aria-label="Bulleted list">
-        <List />
-      </Toggle>
-      <Toggle value="numbered" aria-label="Numbered list">
-        <ListOrdered />
-      </Toggle>
+      <Toggle value="bulleted" aria-label="Bulleted list" icon={<Icon icon={List} />} />
+      <Toggle value="numbered" aria-label="Numbered list" icon={<Icon icon={ListOrdered} />} />
     </ToggleGroup>
   ),
 };
@@ -84,15 +81,17 @@ export const Magnitudes: Story = {
           defaultValue={["bold"]}
           aria-label={`Text formatting (${magnitude})`}
         >
-          <Toggle value="bold" aria-label={`Bold (${magnitude})`}>
-            <Bold />
-          </Toggle>
-          <Toggle value="italic" aria-label={`Italic (${magnitude})`}>
-            <Italic />
-          </Toggle>
-          <Toggle value="underline" aria-label={`Underline (${magnitude})`}>
-            <Underline />
-          </Toggle>
+          <Toggle value="bold" aria-label={`Bold (${magnitude})`} icon={<Icon icon={Bold} />} />
+          <Toggle
+            value="italic"
+            aria-label={`Italic (${magnitude})`}
+            icon={<Icon icon={Italic} />}
+          />
+          <Toggle
+            value="underline"
+            aria-label={`Underline (${magnitude})`}
+            icon={<Icon icon={Underline} />}
+          />
         </ToggleGroup>
       ))}
     </div>
@@ -104,15 +103,9 @@ export const Multiple: Story = {
   args: { magnitude: "md", multiple: true, defaultValue: ["bold", "italic"] },
   render: (args) => (
     <ToggleGroup {...args} aria-label="Text formatting">
-      <Toggle value="bold" aria-label="Bold">
-        <Bold />
-      </Toggle>
-      <Toggle value="italic" aria-label="Italic">
-        <Italic />
-      </Toggle>
-      <Toggle value="underline" aria-label="Underline">
-        <Underline />
-      </Toggle>
+      <Toggle value="bold" aria-label="Bold" icon={<Icon icon={Bold} />} />
+      <Toggle value="italic" aria-label="Italic" icon={<Icon icon={Italic} />} />
+      <Toggle value="underline" aria-label="Underline" icon={<Icon icon={Underline} />} />
     </ToggleGroup>
   ),
 };
diff --git a/packages/propel/src/components/toggle/toggle.stories.tsx b/packages/propel/src/components/toggle/toggle.stories.tsx
index b1209095..a80e6982 100644
--- a/packages/propel/src/components/toggle/toggle.stories.tsx
+++ b/packages/propel/src/components/toggle/toggle.stories.tsx
@@ -3,17 +3,17 @@ import { Heart, Star } from "lucide-react";
 import * as React from "react";
 import { expect } from "storybook/test";
 
+import { Icon } from "../icon";
 import { Toggle, type ToggleMagnitude } from "./index";
 
 const MAGNITUDES: ToggleMagnitude[] = ["sm", "md", "lg"];
 
-// Components-tier story: the ready-made `Toggle` (a 1:1 re-export of the elements primitive) —
-// a two-state icon button that wraps its bare svg child in the shared glyph slot. The elements-tier story documents
-// the same parts and magnitudes.
+// Components-tier story: the ready-made `Toggle` is a two-state icon button that renders a provided
+// icon element. The elements-tier story documents the same parts and magnitudes.
 const meta = {
   title: "Components/Toggle",
   component: Toggle,
-  args: { magnitude: "md", "aria-label": "Favorite" },
+  args: { magnitude: "md", "aria-label": "Favorite", icon: <Icon icon={Star} /> },
 } satisfies Meta<typeof Toggle>;
 
 export default meta;
@@ -22,11 +22,7 @@ type Story = StoryObj<typeof meta>;
 /** A toggle wrapping an icon; click flips pressed. */
 export const Default: Story = {
   args: { magnitude: "md" },
-  render: (args) => (
-    <Toggle {...args}>
-      <Star />
-    </Toggle>
-  ),
+  render: (args) => <Toggle {...args} />,
 };
 
 /**
@@ -58,9 +54,8 @@ export const Magnitudes: Story = {
           {...args}
           magnitude={magnitude}
           aria-label={`Favorite (${magnitude})`}
-        >
-          <Star />
-        </Toggle>
+          icon={<Icon icon={Star} />}
+        />
       ))}
     </div>
   ),
@@ -75,9 +70,13 @@ export const Controlled: Story = {
   render: function Render() {
     const [pressed, setPressed] = React.useState(false);
     return (
-      <Toggle magnitude="md" aria-label="Favorite" pressed={pressed} onPressedChange={setPressed}>
-        <Heart fill={pressed ? "currentColor" : "none"} />
-      </Toggle>
+      <Toggle
+        magnitude="md"
+        aria-label="Favorite"
+        pressed={pressed}
+        onPressedChange={setPressed}
+        icon={<Icon icon={<Heart fill={pressed ? "currentColor" : "none"} />} />}
+      />
     );
   },
 };
@@ -109,15 +108,9 @@ export const States: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex items-center gap-2">
-      <Toggle magnitude="md" aria-label="Off">
-        <Star />
-      </Toggle>
-      <Toggle magnitude="md" defaultPressed aria-label="On">
-        <Star />
-      </Toggle>
-      <Toggle magnitude="md" disabled aria-label="Disabled">
-        <Star />
-      </Toggle>
+      <Toggle magnitude="md" aria-label="Off" icon={<Icon icon={Star} />} />
+      <Toggle magnitude="md" defaultPressed aria-label="On" icon={<Icon icon={Star} />} />
+      <Toggle magnitude="md" disabled aria-label="Disabled" icon={<Icon icon={Star} />} />
     </div>
   ),
 };
diff --git a/packages/propel/src/components/toggle/toggle.tsx b/packages/propel/src/components/toggle/toggle.tsx
index 647bb572..15bfe30f 100644
--- a/packages/propel/src/components/toggle/toggle.tsx
+++ b/packages/propel/src/components/toggle/toggle.tsx
@@ -3,18 +3,19 @@ import type { Toggle as BaseToggleTypes } from "@base-ui/react/toggle";
 import * as React from "react";
 
 import { Toggle as ToggleElement, type ToggleMagnitude } from "../../elements/toggle";
-import { Icon } from "../../internal/icon";
 import { ToggleGroupContext } from "./toggle-group-context";
 
 export type ToggleProps<Value extends string = string> = Omit<
   BaseToggleTypes.Props<Value>,
-  "className" | "style"
+  "children" | "className" | "style"
 > & {
   /**
    * Size override. Inside a `ToggleGroup` the group's `magnitude` is used (so you can omit it);
    * standalone it defaults to `md`.
    */
   magnitude?: ToggleMagnitude;
+  /** Icon element rendered inside the toggle, usually `<Icon icon={...} />`. */
+  icon: React.ReactNode;
 };
 
 /**
@@ -24,7 +25,7 @@ export type ToggleProps<Value extends string = string> = Omit<
  */
 export function Toggle<Value extends string = string>({
   magnitude,
-  children,
+  icon,
   ...toggleProps
 }: ToggleProps<Value>) {
   const groupMagnitude = React.useContext(ToggleGroupContext);
@@ -33,7 +34,7 @@ export function Toggle<Value extends string = string>({
       {...toggleProps}
       render={<ToggleElement magnitude={magnitude ?? groupMagnitude ?? "md"} />}
     >
-      <Icon>{children}</Icon>
+      {icon}
     </BaseToggle>
   );
 }
diff --git a/packages/propel/src/components/toolbar/toolbar-button.tsx b/packages/propel/src/components/toolbar/toolbar-button.tsx
index 83a75914..6c38de58 100644
--- a/packages/propel/src/components/toolbar/toolbar-button.tsx
+++ b/packages/propel/src/components/toolbar/toolbar-button.tsx
@@ -6,27 +6,28 @@ import {
   type ToolbarButtonProps as ToolbarButtonElementProps,
   type ToolbarDensity,
 } from "../../elements/toolbar";
-import { Icon } from "../../internal/icon";
 import { ToolbarDensityContext } from "./toolbar-context";
 
-export type ToolbarButtonProps = Omit<ToolbarButtonElementProps, "density"> & {
+export type ToolbarButtonProps = Omit<ToolbarButtonElementProps, "children" | "density"> & {
   /** Density override; defaults to the surrounding `Toolbar`'s density. */
   density?: ToolbarDensity;
   /** Accessible name for the icon button. */
   "aria-label": string;
+  /** Icon element rendered inside the toolbar button. */
+  icon: React.ReactNode;
 };
 
 /**
  * A toolbar action button: grafts Base UI's `Toolbar.Button` (roving-focus item) behavior onto the
  * styled `ToolbarButton`, taking its `density` from the surrounding `Toolbar` via context.
  */
-export function ToolbarButton({ density, children, ...props }: ToolbarButtonProps) {
+export function ToolbarButton({ density, icon, ...props }: ToolbarButtonProps) {
   const toolbarDensity = React.useContext(ToolbarDensityContext);
   return (
     <BaseToolbar.Button
       render={<ToolbarButtonElement density={density ?? toolbarDensity} {...props} />}
     >
-      <Icon>{children}</Icon>
+      {icon}
     </BaseToolbar.Button>
   );
 }
diff --git a/packages/propel/src/components/toolbar/toolbar-link.tsx b/packages/propel/src/components/toolbar/toolbar-link.tsx
index a62776be..15bcf037 100644
--- a/packages/propel/src/components/toolbar/toolbar-link.tsx
+++ b/packages/propel/src/components/toolbar/toolbar-link.tsx
@@ -2,27 +2,27 @@ import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
 import * as React from "react";
 
 import { ToolbarLink as ToolbarLinkElement, type ToolbarDensity } from "../../elements/toolbar";
-import { Icon } from "../../internal/icon";
 import { ToolbarDensityContext } from "./toolbar-context";
 
-export type ToolbarLinkProps = Omit<BaseToolbar.Link.Props, "className" | "style"> & {
+export type ToolbarLinkProps = Omit<BaseToolbar.Link.Props, "children" | "className" | "style"> & {
   /** Size override; defaults to the surrounding `Toolbar`'s density. */
   density?: ToolbarDensity;
+  /** Icon element rendered inside the toolbar link. */
+  icon: React.ReactNode;
 };
 
 /**
  * A toolbar item that navigates — Base UI's `Toolbar.Link` (`<a>` in the roving tab order) grafted
- * onto the toolbar item chrome, wrapping bare svg children in the shared glyph slot like
- * `ToolbarButton` does.
+ * onto the toolbar item chrome. Pass an icon element, e.g. `<Icon icon={ExternalLink} />`.
  */
-export function ToolbarLink({ density, children, ...props }: ToolbarLinkProps) {
+export function ToolbarLink({ density, icon, ...props }: ToolbarLinkProps) {
   const toolbarDensity = React.useContext(ToolbarDensityContext);
   return (
     <BaseToolbar.Link
       render={<ToolbarLinkElement density={density ?? toolbarDensity} />}
       {...props}
     >
-      <Icon>{children}</Icon>
+      {icon}
     </BaseToolbar.Link>
   );
 }
diff --git a/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx b/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx
index e161dd7a..d1cf6b04 100644
--- a/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx
+++ b/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx
@@ -1,18 +1,25 @@
 import { Menu } from "@base-ui/react/menu";
 import { ChevronDown } from "lucide-react";
+import type * as React from "react";
 
 import { ToolbarMenuTriggerIndicator, ToolbarMenuTriggerLabel } from "../../elements/toolbar/index";
 import { ToolbarMenuTriggerButton } from "./toolbar-menu-trigger-button";
 
-export type ToolbarMenuTriggerProps = Omit<Menu.Trigger.Props, "className" | "style">;
+export type ToolbarMenuTriggerProps = Omit<
+  Menu.Trigger.Props,
+  "children" | "className" | "style"
+> & {
+  /** Visible menu-trigger label. */
+  label: React.ReactNode;
+};
 
 /** The trigger that opens a `ToolbarMenu`: a label plus a disclosure chevron. */
-export function ToolbarMenuTrigger({ render, children, ...props }: ToolbarMenuTriggerProps) {
+export function ToolbarMenuTrigger({ render, label, ...props }: ToolbarMenuTriggerProps) {
   // The toolbar item renders as a `Menu.Trigger`; a consumer `render` customizes that
   // inner element (not the wrapping button), so it is nested onto the trigger.
   return (
     <ToolbarMenuTriggerButton render={<Menu.Trigger render={render} />} {...props}>
-      <ToolbarMenuTriggerLabel>{children}</ToolbarMenuTriggerLabel>
+      <ToolbarMenuTriggerLabel>{label}</ToolbarMenuTriggerLabel>
       <ToolbarMenuTriggerIndicator>
         <ChevronDown />
       </ToolbarMenuTriggerIndicator>
diff --git a/packages/propel/src/components/toolbar/toolbar-toggle.tsx b/packages/propel/src/components/toolbar/toolbar-toggle.tsx
index 3ccf365d..52294a6e 100644
--- a/packages/propel/src/components/toolbar/toolbar-toggle.tsx
+++ b/packages/propel/src/components/toolbar/toolbar-toggle.tsx
@@ -8,17 +8,18 @@ import {
   type ToolbarButtonProps,
   type ToolbarDensity,
 } from "../../elements/toolbar";
-import { Icon } from "../../internal/icon";
 import { ToolbarDensityContext } from "./toolbar-context";
 
 export type ToolbarToggleProps<Value extends string = string> = Omit<
   BaseToggleTypes.Props<Value>,
-  "className" | "style" | "render"
+  "children" | "className" | "style" | "render"
 > & {
   /** Density override; defaults to the surrounding `Toolbar`'s density. */
   density?: ToolbarDensity;
   /** Accessible name for the icon toggle. */
   "aria-label": string;
+  /** Icon element rendered inside the toolbar toggle. */
+  icon: React.ReactNode;
   /** Custom render for the underlying styled toolbar button. */
   render?: ToolbarButtonProps["render"];
 };
@@ -31,7 +32,7 @@ export type ToolbarToggleProps<Value extends string = string> = Omit<
 export function ToolbarToggle<Value extends string = string>({
   render,
   density,
-  children,
+  icon,
   "aria-label": ariaLabel,
   ...toggleProps
 }: ToolbarToggleProps<Value>) {
@@ -51,7 +52,7 @@ export function ToolbarToggle<Value extends string = string>({
         />
       }
     >
-      <Icon>{children}</Icon>
+      {icon}
     </BaseToolbar.Button>
   );
 }
diff --git a/packages/propel/src/components/toolbar/toolbar.stories.tsx b/packages/propel/src/components/toolbar/toolbar.stories.tsx
index 31451668..bccc3548 100644
--- a/packages/propel/src/components/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/components/toolbar/toolbar.stories.tsx
@@ -25,6 +25,7 @@ import {
 import type * as React from "react";
 import { expect, waitFor, within } from "storybook/test";
 
+import { Icon } from "../icon";
 import { Menu, MenuContent, MenuItem, MenuSeparator } from "../menu";
 import { Tooltip, TooltipProvider } from "../tooltip";
 import {
@@ -48,82 +49,54 @@ function FormattingToolbar(args: React.ComponentProps<typeof Toolbar>) {
   return (
     <Toolbar {...args}>
       <Menu>
-        <ToolbarMenuTrigger aria-label="Text style">Text</ToolbarMenuTrigger>
+        <ToolbarMenuTrigger aria-label="Text style" label="Text" />
         <MenuContent>
           {TEXT_STYLES.map((style) => (
-            <MenuItem key={style}>{style}</MenuItem>
+            <MenuItem key={style} label={style} />
           ))}
         </MenuContent>
       </Menu>
       <Menu>
-        <ToolbarMenuTrigger aria-label="Font">Aa</ToolbarMenuTrigger>
+        <ToolbarMenuTrigger aria-label="Font" label="Aa" />
         <MenuContent>
           {FONTS.map((font) => (
-            <MenuItem key={font}>{font}</MenuItem>
+            <MenuItem key={font} label={font} />
           ))}
         </MenuContent>
       </Menu>
-      <ToolbarButton aria-label="Comment">
-        <MessageSquare />
-      </ToolbarButton>
+      <ToolbarButton aria-label="Comment" icon={<Icon icon={MessageSquare} />} />
       <ToolbarSeparator />
       <ToolbarGroup aria-label="Text formatting">
-        <ToolbarToggle aria-label="Bold">
-          <Bold />
-        </ToolbarToggle>
-        <ToolbarToggle aria-label="Italic">
-          <Italic />
-        </ToolbarToggle>
-        <ToolbarToggle aria-label="Underline">
-          <Underline />
-        </ToolbarToggle>
-        <ToolbarToggle aria-label="Strikethrough">
-          <Strikethrough />
-        </ToolbarToggle>
+        <ToolbarToggle aria-label="Bold" icon={<Icon icon={Bold} />} />
+        <ToolbarToggle aria-label="Italic" icon={<Icon icon={Italic} />} />
+        <ToolbarToggle aria-label="Underline" icon={<Icon icon={Underline} />} />
+        <ToolbarToggle aria-label="Strikethrough" icon={<Icon icon={Strikethrough} />} />
       </ToolbarGroup>
       <ToolbarSeparator />
       <ToolbarToggleGroup defaultValue={["left"]} aria-label="Text alignment">
-        <ToolbarToggle value="left" aria-label="Align left">
-          <AlignLeft />
-        </ToolbarToggle>
-        <ToolbarToggle value="center" aria-label="Align center">
-          <AlignCenter />
-        </ToolbarToggle>
-        <ToolbarToggle value="right" aria-label="Align right">
-          <AlignRight />
-        </ToolbarToggle>
+        <ToolbarToggle value="left" aria-label="Align left" icon={<Icon icon={AlignLeft} />} />
+        <ToolbarToggle
+          value="center"
+          aria-label="Align center"
+          icon={<Icon icon={AlignCenter} />}
+        />
+        <ToolbarToggle value="right" aria-label="Align right" icon={<Icon icon={AlignRight} />} />
       </ToolbarToggleGroup>
       <ToolbarSeparator />
       <ToolbarGroup aria-label="Lists">
-        <ToolbarToggle aria-label="Bullet list">
-          <List />
-        </ToolbarToggle>
-        <ToolbarToggle aria-label="Numbered list">
-          <ListOrdered />
-        </ToolbarToggle>
-        <ToolbarToggle aria-label="Checklist">
-          <ListChecks />
-        </ToolbarToggle>
+        <ToolbarToggle aria-label="Bullet list" icon={<Icon icon={List} />} />
+        <ToolbarToggle aria-label="Numbered list" icon={<Icon icon={ListOrdered} />} />
+        <ToolbarToggle aria-label="Checklist" icon={<Icon icon={ListChecks} />} />
       </ToolbarGroup>
       <ToolbarSeparator />
       <ToolbarGroup aria-label="Blocks">
-        <ToolbarToggle aria-label="Quote">
-          <Quote />
-        </ToolbarToggle>
-        <ToolbarToggle aria-label="Code block">
-          <Code />
-        </ToolbarToggle>
-        <ToolbarButton aria-label="Insert table">
-          <Table />
-        </ToolbarButton>
+        <ToolbarToggle aria-label="Quote" icon={<Icon icon={Quote} />} />
+        <ToolbarToggle aria-label="Code block" icon={<Icon icon={Code} />} />
+        <ToolbarButton aria-label="Insert table" icon={<Icon icon={Table} />} />
       </ToolbarGroup>
       <ToolbarSeparator />
-      <ToolbarButton aria-label="Insert link">
-        <Link />
-      </ToolbarButton>
-      <ToolbarButton aria-label="Insert image">
-        <Image />
-      </ToolbarButton>
+      <ToolbarButton aria-label="Insert link" icon={<Icon icon={Link} />} />
+      <ToolbarButton aria-label="Insert image" icon={<Icon icon={Image} />} />
     </Toolbar>
   );
 }
@@ -219,9 +192,7 @@ export const DensityDrivesControlSize: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   render: () => (
     <Toolbar elevation="flat" density="compact">
-      <ToolbarToggle aria-label="Bold">
-        <Bold />
-      </ToolbarToggle>
+      <ToolbarToggle aria-label="Bold" icon={<Icon icon={Bold} />} />
     </Toolbar>
   ),
   play: async ({ canvas }) => {
@@ -245,18 +216,14 @@ export const ComposableMenu: Story = {
   render: (args) => (
     <Toolbar {...args}>
       <Menu defaultOpen>
-        <ToolbarMenuTrigger aria-label="Text style">Text</ToolbarMenuTrigger>
+        <ToolbarMenuTrigger aria-label="Text style" label="Text" />
         <MenuContent>
-          <MenuItem icon={<Pilcrow />} selected>
-            Paragraph
-          </MenuItem>
-          <MenuItem icon={<Heading1 />}>Heading 1</MenuItem>
-          <MenuItem icon={<Heading2 />}>Heading 2</MenuItem>
-          <MenuItem icon={<Heading3 />}>Heading 3</MenuItem>
+          <MenuItem icon={<Icon icon={Pilcrow} tint="secondary" />} selected label="Paragraph" />
+          <MenuItem icon={<Icon icon={Heading1} tint="secondary" />} label="Heading 1" />
+          <MenuItem icon={<Icon icon={Heading2} tint="secondary" />} label="Heading 2" />
+          <MenuItem icon={<Icon icon={Heading3} tint="secondary" />} label="Heading 3" />
           <MenuSeparator />
-          <MenuItem icon={<Code />} disabled>
-            Code block
-          </MenuItem>
+          <MenuItem icon={<Icon icon={Code} tint="secondary" />} disabled label="Code block" />
         </MenuContent>
       </Menu>
     </Toolbar>
@@ -295,15 +262,9 @@ export const KeyboardRovingFocus: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   render: () => (
     <Toolbar elevation="raised" density="compact">
-      <ToolbarToggle aria-label="Bold">
-        <Bold />
-      </ToolbarToggle>
-      <ToolbarToggle aria-label="Italic">
-        <Italic />
-      </ToolbarToggle>
-      <ToolbarToggle aria-label="Underline">
-        <Underline />
-      </ToolbarToggle>
+      <ToolbarToggle aria-label="Bold" icon={<Icon icon={Bold} />} />
+      <ToolbarToggle aria-label="Italic" icon={<Icon icon={Italic} />} />
+      <ToolbarToggle aria-label="Underline" icon={<Icon icon={Underline} />} />
     </Toolbar>
   ),
   play: async ({ canvas, userEvent }) => {
@@ -353,12 +314,8 @@ export const WithFilter: Story = {
       <ToolbarInput aria-label="Filter issues" placeholder="Filter…" />
       <ToolbarSeparator />
       <ToolbarGroup aria-label="Text formatting">
-        <ToolbarToggle aria-label="Bold">
-          <Bold />
-        </ToolbarToggle>
-        <ToolbarToggle aria-label="Italic">
-          <Italic />
-        </ToolbarToggle>
+        <ToolbarToggle aria-label="Bold" icon={<Icon icon={Bold} />} />
+        <ToolbarToggle aria-label="Italic" icon={<Icon icon={Italic} />} />
       </ToolbarGroup>
     </Toolbar>
   ),
@@ -388,17 +345,11 @@ export const WithLink: Story = {
   render: (args) => (
     <Toolbar {...args} aria-label="Document actions">
       <ToolbarGroup aria-label="Text formatting">
-        <ToolbarToggle aria-label="Bold">
-          <Bold />
-        </ToolbarToggle>
-        <ToolbarToggle aria-label="Italic">
-          <Italic />
-        </ToolbarToggle>
+        <ToolbarToggle aria-label="Bold" icon={<Icon icon={Bold} />} />
+        <ToolbarToggle aria-label="Italic" icon={<Icon icon={Italic} />} />
       </ToolbarGroup>
       <ToolbarSeparator />
-      <ToolbarLink href="#history" aria-label="View edit history">
-        <History />
-      </ToolbarLink>
+      <ToolbarLink href="#history" aria-label="View edit history" icon={<Icon icon={History} />} />
     </Toolbar>
   ),
 };
@@ -438,20 +389,14 @@ export const WithTooltips: Story = {
   render: (args) => (
     <TooltipProvider>
       <Toolbar {...args} aria-label="Text formatting">
-        <Tooltip content="Bold" shortcut="⌘ B">
-          <ToolbarToggle aria-label="Bold">
-            <Bold />
-          </ToolbarToggle>
+        <Tooltip label="Bold" shortcut="⌘ B">
+          <ToolbarToggle aria-label="Bold" icon={<Icon icon={Bold} />} />
         </Tooltip>
-        <Tooltip content="Italic" shortcut="⌘ I">
-          <ToolbarToggle aria-label="Italic">
-            <Italic />
-          </ToolbarToggle>
+        <Tooltip label="Italic" shortcut="⌘ I">
+          <ToolbarToggle aria-label="Italic" icon={<Icon icon={Italic} />} />
         </Tooltip>
-        <Tooltip content="Underline" shortcut="⌘ U">
-          <ToolbarToggle aria-label="Underline">
-            <Underline />
-          </ToolbarToggle>
+        <Tooltip label="Underline" shortcut="⌘ U">
+          <ToolbarToggle aria-label="Underline" icon={<Icon icon={Underline} />} />
         </Tooltip>
       </Toolbar>
     </TooltipProvider>
diff --git a/packages/propel/src/components/tooltip/tooltip.stories.tsx b/packages/propel/src/components/tooltip/tooltip.stories.tsx
index 7acab4dd..c2b69d99 100644
--- a/packages/propel/src/components/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/components/tooltip/tooltip.stories.tsx
@@ -21,7 +21,7 @@ const meta = {
   component: Tooltip,
   subcomponents: { TooltipProvider },
   args: {
-    content: "Tooltip text",
+    label: "Tooltip text",
     children: <button type="button">Hover or focus me</button>,
   },
   parameters: {
@@ -60,7 +60,7 @@ export const Sides: Story = {
   render: () => (
     <div style={sidesGridStyle}>
       {ALL_SIDES.map((side) => (
-        <Tooltip key={side} side={side} content={side} delay={0} open>
+        <Tooltip key={side} side={side} label={side} delay={0} open>
           <button type="button">{side}</button>
         </Tooltip>
       ))}
@@ -112,7 +112,7 @@ export const SidesRtl: Story = {
     <DirectionProvider direction="rtl">
       <div style={sidesGridStyle}>
         {ALL_SIDES.map((side) => (
-          <Tooltip key={side} side={side} content={side} delay={0} open>
+          <Tooltip key={side} side={side} label={side} delay={0} open>
             <button type="button">{side}</button>
           </Tooltip>
         ))}
@@ -127,7 +127,7 @@ export const SidesRtl: Story = {
  */
 export const WithShortcut: Story = {
   args: {
-    content: "Open command menu",
+    label: "Open command menu",
     shortcut: "⌘ K",
   },
 };
@@ -143,13 +143,13 @@ export const WithProvider: Story = {
   render: () => (
     <TooltipProvider closeDelay={100}>
       <div style={{ display: "flex", gap: "0.5rem" }}>
-        <Tooltip content="Bold the selection">
+        <Tooltip label="Bold the selection">
           <button type="button">Bold</button>
         </Tooltip>
-        <Tooltip content="Italicize the selection">
+        <Tooltip label="Italicize the selection">
           <button type="button">Italic</button>
         </Tooltip>
-        <Tooltip content="Underline the selection">
+        <Tooltip label="Underline the selection">
           <button type="button">Underline</button>
         </Tooltip>
       </div>
@@ -169,7 +169,7 @@ export const Controlled: Story = {
     const [open, setOpen] = useState(false);
     return (
       <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-        <Tooltip content="Copies the invite link" open={open} onOpenChange={setOpen}>
+        <Tooltip label="Copies the invite link" open={open} onOpenChange={setOpen}>
           <button type="button">Copy link</button>
         </Tooltip>
         <button type="button" onClick={() => setOpen(true)}>
@@ -192,7 +192,7 @@ export const ShowsOnFocus: Story = {
   // A 0ms hover delay keeps this behavior test deterministic; focus opens instantly
   // regardless, but scoping the override here (not on meta) lets docs/examples use
   // the real 600ms default.
-  args: { content: "Tooltip text", delay: 0 },
+  args: { label: "Tooltip text", delay: 0 },
   play: async ({ canvas }) => {
     const trigger = canvas.getByRole("button", { name: "Hover or focus me" });
     // The popup renders in a Portal outside the story canvas, so query the document.
@@ -223,7 +223,7 @@ export const ShowsOnFocus: Story = {
  */
 export const EscapeCloses: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
-  args: { content: "Tooltip text", delay: 0 },
+  args: { label: "Tooltip text", delay: 0 },
   play: async ({ canvas }) => {
     const trigger = canvas.getByRole("button", { name: "Hover or focus me" });
     const screen = within(document.body);
diff --git a/packages/propel/src/components/tooltip/tooltip.tsx b/packages/propel/src/components/tooltip/tooltip.tsx
index 3c4870b3..6e2d5cf3 100644
--- a/packages/propel/src/components/tooltip/tooltip.tsx
+++ b/packages/propel/src/components/tooltip/tooltip.tsx
@@ -7,12 +7,12 @@ import { Positioner } from "../../internal/positioner";
 
 export type TooltipProps<Payload = unknown> = Omit<
   TooltipRoot.Props<Payload>,
-  "children" | "className" | "style"
+  "children" | "className" | "label" | "style"
 > & {
   /** The text (or rich content) shown inside the tooltip popup. */
-  content: React.ReactNode;
+  label: React.ReactNode;
   /**
-   * Optional keyboard-shortcut hint shown to the right of `content`, dimmed (e.g. `"⌘ K"`). Maps to
+   * Optional keyboard-shortcut hint shown to the right of `label`, dimmed (e.g. `"⌘ K"`). Maps to
    * the Figma "Cmd + K" slot — omit it for a plain tooltip.
    */
   shortcut?: React.ReactNode;
@@ -47,8 +47,8 @@ export type TooltipProps<Payload = unknown> = Omit<
  * the trigger and is dismissed on blur, pointer-leave, or `Esc`.
  *
  * Built on Base UI's tooltip, so it's accessible by default: the popup is exposed as
- * `role="tooltip"` and wired to the trigger. Pass the trigger as `children`, the label as
- * `content`, and an optional `shortcut` for a dimmed keyboard hint.
+ * `role="tooltip"` and wired to the trigger. Pass the trigger as `children`, the popup copy as
+ * `label`, and an optional `shortcut` for a dimmed keyboard hint.
  *
  * Grafts Base UI's tooltip behavior onto propel's styled parts: `Tooltip.Root` + `Tooltip.Trigger`
  * + `Tooltip.Portal` → `Tooltip.Positioner` (shared `internal/positioner`) → `TooltipPopup` +
@@ -57,7 +57,7 @@ export type TooltipProps<Payload = unknown> = Omit<
  * the Figma "Tooltip" component (node 1144-3159).
  */
 export function Tooltip<Payload = unknown>({
-  content,
+  label,
   shortcut,
   children,
   side = "top",
@@ -76,7 +76,7 @@ export function Tooltip<Payload = unknown>({
               popup chrome (inverse-adaptive surface, caption text, radius, shadow,
               padding, and the gap to the shortcut) lives on the styled `TooltipPopup`. */}
           <BaseTooltip.Popup role="tooltip" render={<TooltipPopup />}>
-            {content}
+            {label}
             {shortcut != null ? <TooltipShortcut>{shortcut}</TooltipShortcut> : null}
             <BaseTooltip.Arrow render={<TooltipArrow />} />
           </BaseTooltip.Popup>
diff --git a/packages/propel/src/internal/icon.tsx b/packages/propel/src/internal/icon.tsx
index 200a072f..097ef157 100644
--- a/packages/propel/src/internal/icon.tsx
+++ b/packages/propel/src/internal/icon.tsx
@@ -25,6 +25,9 @@ export const iconVariants = cva(nodeSlotClass, {
   variants: {
     tint: {
       inherit: "",
+      danger: "text-danger-primary",
+      placeholder:
+        "text-icon-placeholder transition-colors group-focus-within/control:text-icon-secondary",
       secondary: "text-icon-secondary",
       tertiary: "text-icon-tertiary",
     },
diff --git a/packages/propel/src/patterns/comment.stories.tsx b/packages/propel/src/patterns/comment.stories.tsx
index 879e20e1..ffd3f1d0 100644
--- a/packages/propel/src/patterns/comment.stories.tsx
+++ b/packages/propel/src/patterns/comment.stories.tsx
@@ -15,8 +15,10 @@ import {
 import * as React from "react";
 import { expect, fn, userEvent } from "storybook/test";
 
+import { Button } from "../components/button/index";
 import { Field } from "../components/field";
 import { IconButton } from "../components/icon-button/index";
+import { Icon } from "../components/icon/index";
 import { TextArea } from "../components/text-area";
 import {
   Toolbar,
@@ -25,7 +27,6 @@ import {
   ToolbarSeparator,
   ToolbarToggle,
 } from "../components/toolbar/index";
-import { Button } from "../elements/button/index";
 
 // A comment composer is a compositional (application-level) component, not a propel
 // primitive: it is assembled entirely from propel building blocks (Toolbar, Button,
@@ -59,36 +60,20 @@ function FormattingToolbar() {
   return (
     <Toolbar elevation="flat" density="compact" aria-label="Comment formatting">
       <ToolbarGroup aria-label="Insert">
-        <ToolbarButton aria-label="Mention someone">
-          <AtSign />
-        </ToolbarButton>
-        <ToolbarButton aria-label="Add reaction">
-          <SmilePlus />
-        </ToolbarButton>
-        <ToolbarButton aria-label="Add link">
-          <Link />
-        </ToolbarButton>
+        <ToolbarButton aria-label="Mention someone" icon={<Icon icon={AtSign} />} />
+        <ToolbarButton aria-label="Add reaction" icon={<Icon icon={SmilePlus} />} />
+        <ToolbarButton aria-label="Add link" icon={<Icon icon={Link} />} />
       </ToolbarGroup>
       <ToolbarSeparator />
       <ToolbarGroup aria-label="Text formatting">
-        <ToolbarToggle aria-label="Bold">
-          <Bold />
-        </ToolbarToggle>
-        <ToolbarToggle aria-label="Italic">
-          <Italic />
-        </ToolbarToggle>
-        <ToolbarToggle aria-label="Underline">
-          <Underline />
-        </ToolbarToggle>
+        <ToolbarToggle aria-label="Bold" icon={<Icon icon={Bold} />} />
+        <ToolbarToggle aria-label="Italic" icon={<Icon icon={Italic} />} />
+        <ToolbarToggle aria-label="Underline" icon={<Icon icon={Underline} />} />
       </ToolbarGroup>
       <ToolbarSeparator />
       <ToolbarGroup aria-label="Lists">
-        <ToolbarButton aria-label="Bulleted list">
-          <List />
-        </ToolbarButton>
-        <ToolbarButton aria-label="More formatting">
-          <MoreHorizontal />
-        </ToolbarButton>
+        <ToolbarButton aria-label="Bulleted list" icon={<Icon icon={List} />} />
+        <ToolbarButton aria-label="More formatting" icon={<Icon icon={MoreHorizontal} />} />
       </ToolbarGroup>
     </Toolbar>
   );
@@ -176,9 +161,8 @@ function CommentComposer({
                 tone="neutral"
                 magnitude="md"
                 aria-label="Attach a file"
-              >
-                <Paperclip aria-hidden />
-              </IconButton>
+                icon={<Icon icon={Paperclip} />}
+              />
               <IconButton
                 prominence="secondary"
                 tone="neutral"
@@ -186,9 +170,8 @@ function CommentComposer({
                 aria-label={sendLabel}
                 disabled={isEmpty}
                 onClick={handleSubmit}
-              >
-                <ArrowUp aria-hidden />
-              </IconButton>
+                icon={<Icon icon={ArrowUp} />}
+              />
             </div>
           </>
         ) : (
@@ -206,9 +189,8 @@ function CommentComposer({
                   magnitude="md"
                   disabled={isEmpty}
                   onClick={handleSubmit}
-                >
-                  {submitLabel}
-                </Button>
+                  label={submitLabel}
+                />
               ) : (
                 <IconButton
                   prominence="secondary"
@@ -217,9 +199,8 @@ function CommentComposer({
                   aria-label={sendLabel}
                   disabled={isEmpty}
                   onClick={handleSubmit}
-                >
-                  <ArrowUp aria-hidden />
-                </IconButton>
+                  icon={<Icon icon={ArrowUp} />}
+                />
               )}
             </div>
           </>
@@ -257,32 +238,25 @@ const RECIPE_SOURCE = `function CommentComposer() {
         <div className="flex min-h-9 items-center justify-between gap-2 py-1 pe-1.5 ps-1">
           <Toolbar elevation="flat" density="compact" aria-label="Comment formatting">
             <ToolbarGroup aria-label="Insert">
-              <ToolbarButton aria-label="Mention someone">
-                <AtSign />
-              </ToolbarButton>
-              <ToolbarButton aria-label="Add reaction">
-                <SmilePlus />
-              </ToolbarButton>
-              <ToolbarButton aria-label="Add link">
-                <Link />
-              </ToolbarButton>
+              <ToolbarButton aria-label="Mention someone" icon={<Icon icon={AtSign} />} />
+              <ToolbarButton aria-label="Add reaction" icon={<Icon icon={SmilePlus} />} />
+              <ToolbarButton aria-label="Add link" icon={<Icon icon={Link} />} />
             </ToolbarGroup>
             <ToolbarSeparator />
             <ToolbarGroup aria-label="Text formatting">
-              <ToolbarToggle aria-label="Bold">
-                <Bold />
-              </ToolbarToggle>
-              <ToolbarToggle aria-label="Italic">
-                <Italic />
-              </ToolbarToggle>
-              <ToolbarToggle aria-label="Underline">
-                <Underline />
-              </ToolbarToggle>
+              <ToolbarToggle aria-label="Bold" icon={<Icon icon={Bold} />} />
+              <ToolbarToggle aria-label="Italic" icon={<Icon icon={Italic} />} />
+              <ToolbarToggle aria-label="Underline" icon={<Icon icon={Underline} />} />
             </ToolbarGroup>
           </Toolbar>
-          <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="md" disabled={isEmpty}>
-            Comment
-          </Button>
+          <Button
+            sizing="hug"
+            prominence="secondary"
+            tone="neutral"
+            magnitude="md"
+            disabled={isEmpty}
+            label="Comment"
+          />
         </div>
       </div>
     </Field>
diff --git a/packages/propel/src/patterns/sidebar.stories.tsx b/packages/propel/src/patterns/sidebar.stories.tsx
index 01d30369..00b055cd 100644
--- a/packages/propel/src/patterns/sidebar.stories.tsx
+++ b/packages/propel/src/patterns/sidebar.stories.tsx
@@ -3,6 +3,7 @@ import { expect } from "storybook/test";
 
 import { Button } from "../components/button/index";
 import { IconButton } from "../components/icon-button/index";
+import { Icon } from "../components/icon/index";
 import {
   List,
   ListItem,
@@ -11,7 +12,6 @@ import {
   ListItemLink,
   ListSection,
 } from "../components/list/index";
-import { Icon } from "../internal/icon";
 import {
   AddWorkItemIcon,
   AnalyticsIcon,
@@ -58,12 +58,20 @@ export const WorkspaceSidebar: Story = {
       <div className="flex items-center justify-between px-2">
         <span className="text-15 font-semibold text-primary">Projects</span>
         <div className="flex items-center gap-0.5">
-          <IconButton prominence="ghost" tone="neutral" magnitude="sm" aria-label="Filter">
-            <PreferencesIcon aria-hidden />
-          </IconButton>
-          <IconButton prominence="ghost" tone="neutral" magnitude="sm" aria-label="Toggle sidebar">
-            <SidePeekIcon aria-hidden />
-          </IconButton>
+          <IconButton
+            prominence="ghost"
+            tone="neutral"
+            magnitude="sm"
+            aria-label="Filter"
+            icon={<Icon icon={PreferencesIcon} />}
+          />
+          <IconButton
+            prominence="ghost"
+            tone="neutral"
+            magnitude="sm"
+            aria-label="Toggle sidebar"
+            icon={<Icon icon={SidePeekIcon} />}
+          />
         </div>
       </div>
 
@@ -72,33 +80,26 @@ export const WorkspaceSidebar: Story = {
         tone="neutral"
         magnitude="xl"
         sizing="fill"
-        startIcon={<AddWorkItemIcon aria-hidden />}
-      >
-        New work item
-      </Button>
+        startIcon={<Icon icon={AddWorkItemIcon} />}
+        label="New work item"
+      />
 
       <List role="toolbar" aria-label="Primary">
         <ListItem>
           <ListItemLink href="#home">
-            <Icon magnitude="md">
-              <HomeIcon aria-hidden />
-            </Icon>
+            <Icon icon={HomeIcon} magnitude="md" />
             <ListItemLabel>Home</ListItemLabel>
           </ListItemLink>
         </ListItem>
         <ListItem>
           <ListItemLink href="#stickers">
-            <Icon magnitude="md">
-              <StickersIcon aria-hidden />
-            </Icon>
+            <Icon icon={StickersIcon} magnitude="md" />
             <ListItemLabel>Stickers</ListItemLabel>
           </ListItemLink>
         </ListItem>
         <ListItem>
           <ListItemLink href="#your-work">
-            <Icon magnitude="md">
-              <YourWorkIcon aria-hidden />
-            </Icon>
+            <Icon icon={YourWorkIcon} magnitude="md" />
             <ListItemLabel>Your work</ListItemLabel>
           </ListItemLink>
         </ListItem>
@@ -108,49 +109,37 @@ export const WorkspaceSidebar: Story = {
         <List role="toolbar" aria-label="Workspace">
           <ListItem>
             <ListItemLink href="#projects" aria-current="page">
-              <Icon magnitude="md">
-                <ProjectsIcon aria-hidden />
-              </Icon>
+              <Icon icon={ProjectsIcon} magnitude="md" />
               <ListItemLabel>Projects</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#work-graph">
-              <Icon magnitude="md">
-                <YourWorkIcon aria-hidden />
-              </Icon>
+              <Icon icon={YourWorkIcon} magnitude="md" />
               <ListItemLabel>Work graph</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#initiatives">
-              <Icon magnitude="md">
-                <InitiativesIcon aria-hidden />
-              </Icon>
+              <Icon icon={InitiativesIcon} magnitude="md" />
               <ListItemLabel>Initiatives</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#analytics">
-              <Icon magnitude="md">
-                <AnalyticsIcon aria-hidden />
-              </Icon>
+              <Icon icon={AnalyticsIcon} magnitude="md" />
               <ListItemLabel>Analytics</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#releases">
-              <Icon magnitude="md">
-                <ReleasesIcon aria-hidden />
-              </Icon>
+              <Icon icon={ReleasesIcon} magnitude="md" />
               <ListItemLabel>Releases</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemButton>
-              <Icon magnitude="md">
-                <MoreIcon aria-hidden />
-              </Icon>
+              <Icon icon={MoreIcon} magnitude="md" />
               <ListItemLabel>More</ListItemLabel>
             </ListItemButton>
           </ListItem>
@@ -161,41 +150,31 @@ export const WorkspaceSidebar: Story = {
         <List role="toolbar" aria-label="Projects">
           <ListItem>
             <ListItemLink href="#acme">
-              <Icon magnitude="md" aria-hidden>
-                🚜
-              </Icon>
+              <Icon icon="🚜" magnitude="md" />
               <ListItemLabel>Acme Inc.</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#web-development">
-              <Icon magnitude="md" aria-hidden>
-                🧩
-              </Icon>
+              <Icon icon="🧩" magnitude="md" />
               <ListItemLabel>Web Development</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#plane-pro">
-              <Icon magnitude="md" aria-hidden>
-                🚗
-              </Icon>
+              <Icon icon="🚗" magnitude="md" />
               <ListItemLabel>Plane Pro</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#discover">
-              <Icon magnitude="md" aria-hidden>
-                📞
-              </Icon>
+              <Icon icon="📞" magnitude="md" />
               <ListItemLabel>Discover</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemButton>
-              <Icon magnitude="md">
-                <MoreIcon aria-hidden />
-              </Icon>
+              <Icon icon={MoreIcon} magnitude="md" />
               <ListItemLabel>More</ListItemLabel>
             </ListItemButton>
           </ListItem>
@@ -206,25 +185,19 @@ export const WorkspaceSidebar: Story = {
         <List role="toolbar" aria-label="Try">
           <ListItem>
             <ListItemLink href="#github">
-              <Icon magnitude="md">
-                <GithubIcon aria-hidden />
-              </Icon>
+              <Icon icon={GithubIcon} magnitude="md" />
               <ListItemLabel>Connect to GitHub</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#slack">
-              <Icon magnitude="md">
-                <SlackIcon aria-hidden />
-              </Icon>
+              <Icon icon={SlackIcon} magnitude="md" />
               <ListItemLabel>Connect to Slack</ListItemLabel>
             </ListItemLink>
           </ListItem>
           <ListItem>
             <ListItemLink href="#plane-ai">
-              <Icon magnitude="md">
-                <PlaneAiIcon aria-hidden />
-              </Icon>
+              <Icon icon={PlaneAiIcon} magnitude="md" />
               <ListItemLabel>Try Plane AI</ListItemLabel>
             </ListItemLink>
           </ListItem>
diff --git a/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx b/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx
index 63131626..d6e23570 100644
--- a/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx
+++ b/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx
@@ -3,6 +3,7 @@ import { type ComponentType, Fragment, type SVGProps } from "react";
 import { expect } from "storybook/test";
 
 import { Badge } from "../components/badge/index";
+import { Icon } from "../components/icon/index";
 import {
   List,
   ListItem,
@@ -12,7 +13,6 @@ import {
 } from "../components/list/index";
 import { Separator } from "../components/separator/index";
 import { WorkspaceAvatar } from "../components/workspace-avatar/index";
-import { Icon } from "../internal/icon";
 import {
   AccessAndRolesIcon,
   BillingsIcon,
@@ -148,9 +148,7 @@ export const WorkspaceSettings: Story = {
           <span className="truncate text-14 font-medium text-primary">Acme Inc.</span>
           <span className="text-12 text-tertiary">Admin</span>
         </div>
-        <Badge tone="brand" magnitude="sm">
-          Business
-        </Badge>
+        <Badge tone="brand" magnitude="sm" label="Business" />
       </div>
 
       {sections.map((section, index) => (
@@ -164,9 +162,7 @@ export const WorkspaceSettings: Story = {
                 return (
                   <ListItem key={row.href}>
                     <ListItemLink href={row.href}>
-                      <Icon magnitude="md">
-                        <RowIcon aria-hidden />
-                      </Icon>
+                      <Icon icon={RowIcon} magnitude="md" />
                       <ListItemLabel>{row.label}</ListItemLabel>
                     </ListItemLink>
                   </ListItem>
diff --git a/packages/propel/src/storybook/icon-control.tsx b/packages/propel/src/storybook/icon-control.tsx
index 7e15af65..686ed9d0 100644
--- a/packages/propel/src/storybook/icon-control.tsx
+++ b/packages/propel/src/storybook/icon-control.tsx
@@ -16,29 +16,31 @@ import {
   Tag,
   User,
 } from "lucide-react";
+import type * as React from "react";
+
+import { Icon } from "../components/icon";
 
 // A curated set of lucide icons selectable from the Storybook Controls panel. Icons
-// are passed bare: every propel icon slot owns its own size (`[&>svg]:size-full` or an
-// `[&_svg]:size-*` row rule), so the component sizes the chosen icon. `None` maps to
+// are passed as complete icon elements so components render slots directly. `None` maps to
 // `undefined` so an icon prop can be cleared from the control.
 export const STORY_ICONS: Record<string, React.ReactNode> = {
   None: undefined,
-  Activity: <Activity />,
-  Bell: <Bell />,
-  Calendar: <Calendar />,
-  Check: <Check />,
-  ChevronRight: <ChevronRight />,
-  CircleHelp: <CircleHelp />,
-  Folder: <Folder />,
-  Inbox: <Inbox />,
-  LayoutGrid: <LayoutGrid />,
-  Mail: <Mail />,
-  Plus: <Plus />,
-  Search: <Search />,
-  Settings: <Settings />,
-  Star: <Star />,
-  Tag: <Tag />,
-  User: <User />,
+  Activity: <Icon icon={Activity} />,
+  Bell: <Icon icon={Bell} />,
+  Calendar: <Icon icon={Calendar} />,
+  Check: <Icon icon={Check} />,
+  ChevronRight: <Icon icon={ChevronRight} />,
+  CircleHelp: <Icon icon={CircleHelp} />,
+  Folder: <Icon icon={Folder} />,
+  Inbox: <Icon icon={Inbox} />,
+  LayoutGrid: <Icon icon={LayoutGrid} />,
+  Mail: <Icon icon={Mail} />,
+  Plus: <Icon icon={Plus} />,
+  Search: <Icon icon={Search} />,
+  Settings: <Icon icon={Settings} />,
+  Star: <Icon icon={Star} />,
+  Tag: <Icon icon={Tag} />,
+  User: <Icon icon={User} />,
 };
 
 /**

From 1f2c06090d0ff7e532f539cdf346f13427db4c95 Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Tue, 7 Jul 2026 01:27:36 +0700
Subject: [PATCH 2/4] Refine list item slots

---
 .../src/components/list/list-item-button.tsx  |  23 ++-
 .../src/components/list/list-item-link.tsx    |  26 +++-
 .../src/components/list/list.stories.tsx      |  48 +++---
 .../propel/src/patterns/sidebar.stories.tsx   | 143 +++++++++---------
 .../workspace-settings-sidebar.stories.tsx    |  17 +--
 5 files changed, 141 insertions(+), 116 deletions(-)

diff --git a/packages/propel/src/components/list/list-item-button.tsx b/packages/propel/src/components/list/list-item-button.tsx
index 77c3b874..ebef9f3a 100644
--- a/packages/propel/src/components/list/list-item-button.tsx
+++ b/packages/propel/src/components/list/list-item-button.tsx
@@ -1,16 +1,29 @@
+import type * as React from "react";
+
 import { CompositeItem, type CompositeItemProps } from "../../base/composite";
 import { ListItemButton as ListItemButtonElement } from "../../elements/list/list-item-button";
+import { ListItemLabel } from "../../elements/list/list-item-label";
 
 export type ListItemButtonProps = Omit<
   CompositeItemProps,
-  "className" | "style" | "tag" | "render"
->;
+  "children" | "className" | "style" | "tag" | "render"
+> & {
+  /** Element rendered before the label, usually `<Icon icon={...} />`. */
+  icon?: React.ReactNode;
+  /** Visible row label. */
+  label: React.ReactNode;
+};
 
 /**
  * A list row's primary action — a `<button>` that is also a roving `Composite` item. Base UI's
  * `CompositeItem` roving behavior grafted onto the styled `elements` `ListItemButton` element (rule
- * 1a). Compose a `ListItemIcon` + `ListItemLabel` inside.
+ * 1a). Pass `icon` for the leading visual and `label` for the visible row text.
  */
-export function ListItemButton(props: ListItemButtonProps) {
-  return <CompositeItem tag="button" {...props} render={<ListItemButtonElement />} />;
+export function ListItemButton({ icon, label, ...props }: ListItemButtonProps) {
+  return (
+    <CompositeItem tag="button" {...props} render={<ListItemButtonElement />}>
+      {icon}
+      <ListItemLabel>{label}</ListItemLabel>
+    </CompositeItem>
+  );
 }
diff --git a/packages/propel/src/components/list/list-item-link.tsx b/packages/propel/src/components/list/list-item-link.tsx
index 01f879a3..a89c698f 100644
--- a/packages/propel/src/components/list/list-item-link.tsx
+++ b/packages/propel/src/components/list/list-item-link.tsx
@@ -1,14 +1,30 @@
+import type * as React from "react";
+
 import { CompositeItem, type CompositeItemProps } from "../../base/composite";
+import { ListItemLabel } from "../../elements/list/list-item-label";
 import { ListItemLink as ListItemLinkElement } from "../../elements/list/list-item-link";
 
-export type ListItemLinkProps = Omit<CompositeItemProps, "className" | "style" | "tag" | "render">;
+export type ListItemLinkProps = Omit<
+  CompositeItemProps,
+  "children" | "className" | "style" | "tag" | "render"
+> & {
+  /** Element rendered before the label, usually `<Icon icon={...} />`. */
+  icon?: React.ReactNode;
+  /** Visible row label. */
+  label: React.ReactNode;
+};
 
 /**
  * A list row's primary navigation target — an `<a>` that is also a roving `Composite` item. Base
  * UI's `CompositeItem` roving behavior grafted onto the styled `elements` `ListItemLink` element
- * (rule 1a). Mark the current page with `aria-current="page"`. Compose a `ListItemIcon` +
- * `ListItemLabel` inside.
+ * (rule 1a). Mark the current page with `aria-current="page"`. Pass `icon` for the leading visual
+ * and `label` for the visible row text.
  */
-export function ListItemLink(props: ListItemLinkProps) {
-  return <CompositeItem tag="a" {...props} render={<ListItemLinkElement />} />;
+export function ListItemLink({ icon, label, ...props }: ListItemLinkProps) {
+  return (
+    <CompositeItem tag="a" {...props} render={<ListItemLinkElement />}>
+      {icon}
+      <ListItemLabel>{label}</ListItemLabel>
+    </CompositeItem>
+  );
 }
diff --git a/packages/propel/src/components/list/list.stories.tsx b/packages/propel/src/components/list/list.stories.tsx
index 8b9bd66b..7a674873 100644
--- a/packages/propel/src/components/list/list.stories.tsx
+++ b/packages/propel/src/components/list/list.stories.tsx
@@ -50,29 +50,26 @@ export const Default: Story = {
   render: () => (
     <List role="toolbar" aria-label="Workspace">
       <ListItem>
-        <ListItemLink href="#inbox">
-          <Icon icon={Inbox} magnitude="md" />
-          <ListItemLabel>Inbox</ListItemLabel>
-        </ListItemLink>
+        <ListItemLink href="#inbox" icon={<Icon icon={Inbox} magnitude="md" />} label="Inbox" />
       </ListItem>
       <ListItem>
-        <ListItemLink href="#projects" aria-current="page">
-          <Icon icon={LayoutGrid} magnitude="md" />
-          <ListItemLabel>Projects</ListItemLabel>
-        </ListItemLink>
+        <ListItemLink
+          href="#projects"
+          aria-current="page"
+          icon={<Icon icon={LayoutGrid} magnitude="md" />}
+          label="Projects"
+        />
       </ListItem>
       <ListItem>
-        <ListItemLink href="#settings">
-          <Icon icon={Settings} magnitude="md" />
-          <ListItemLabel>Settings</ListItemLabel>
-        </ListItemLink>
+        <ListItemLink
+          href="#settings"
+          icon={<Icon icon={Settings} magnitude="md" />}
+          label="Settings"
+        />
       </ListItem>
       <ListItem>
         {/* An action row (not navigation) — a button that shares the row chrome. */}
-        <ListItemButton>
-          <Icon icon={Ellipsis} magnitude="md" />
-          <ListItemLabel>More</ListItemLabel>
-        </ListItemButton>
+        <ListItemButton icon={<Icon icon={Ellipsis} magnitude="md" />} label="More" />
       </ListItem>
     </List>
   ),
@@ -121,16 +118,19 @@ export const Section: Story = {
     <ListSection label="Workspace" indicator defaultOpen>
       <List role="toolbar" aria-label="Workspace">
         <ListItem>
-          <ListItemLink href="#projects" aria-current="page">
-            <Icon icon={LayoutGrid} magnitude="md" />
-            <ListItemLabel>Projects</ListItemLabel>
-          </ListItemLink>
+          <ListItemLink
+            href="#projects"
+            aria-current="page"
+            icon={<Icon icon={LayoutGrid} magnitude="md" />}
+            label="Projects"
+          />
         </ListItem>
         <ListItem>
-          <ListItemLink href="#settings">
-            <Icon icon={Settings} magnitude="md" />
-            <ListItemLabel>Settings</ListItemLabel>
-          </ListItemLink>
+          <ListItemLink
+            href="#settings"
+            icon={<Icon icon={Settings} magnitude="md" />}
+            label="Settings"
+          />
         </ListItem>
       </List>
     </ListSection>
diff --git a/packages/propel/src/patterns/sidebar.stories.tsx b/packages/propel/src/patterns/sidebar.stories.tsx
index 00b055cd..6eb07360 100644
--- a/packages/propel/src/patterns/sidebar.stories.tsx
+++ b/packages/propel/src/patterns/sidebar.stories.tsx
@@ -8,7 +8,6 @@ import {
   List,
   ListItem,
   ListItemButton,
-  ListItemLabel,
   ListItemLink,
   ListSection,
 } from "../components/list/index";
@@ -32,8 +31,8 @@ import {
 // App-level demo (not a shipped primitive): the Plane workspace sidebar assembled entirely from
 // existing propel components — proving the design frame distills into the system with no bespoke
 // "navbar". Header actions are `IconButton`s, the create action is a `Button`; collapsible groups are
-// the ready-made `ListSection`, and rows are `List` + `ListItem`(+`Link`/`Button`/`Icon`/`Label`) —
-// all from `components/list`. The glyphs are Plane's own Foundations icons (copied verbatim from
+// the ready-made `ListSection`, and rows are `List` + `ListItem`(+`Link`/`Button` label/icon slots)
+// — all from `components/list`. The glyphs are Plane's own Foundations icons (copied verbatim from
 // Figma as SVG in sidebar-icons.tsx — Plane uses its own set, not lucide, and propel doesn't ship it
 // yet); project glyphs are emoji.
 //
@@ -86,62 +85,64 @@ export const WorkspaceSidebar: Story = {
 
       <List role="toolbar" aria-label="Primary">
         <ListItem>
-          <ListItemLink href="#home">
-            <Icon icon={HomeIcon} magnitude="md" />
-            <ListItemLabel>Home</ListItemLabel>
-          </ListItemLink>
+          <ListItemLink href="#home" icon={<Icon icon={HomeIcon} magnitude="md" />} label="Home" />
         </ListItem>
         <ListItem>
-          <ListItemLink href="#stickers">
-            <Icon icon={StickersIcon} magnitude="md" />
-            <ListItemLabel>Stickers</ListItemLabel>
-          </ListItemLink>
+          <ListItemLink
+            href="#stickers"
+            icon={<Icon icon={StickersIcon} magnitude="md" />}
+            label="Stickers"
+          />
         </ListItem>
         <ListItem>
-          <ListItemLink href="#your-work">
-            <Icon icon={YourWorkIcon} magnitude="md" />
-            <ListItemLabel>Your work</ListItemLabel>
-          </ListItemLink>
+          <ListItemLink
+            href="#your-work"
+            icon={<Icon icon={YourWorkIcon} magnitude="md" />}
+            label="Your work"
+          />
         </ListItem>
       </List>
 
       <ListSection label="Workspace" indicator defaultOpen>
         <List role="toolbar" aria-label="Workspace">
           <ListItem>
-            <ListItemLink href="#projects" aria-current="page">
-              <Icon icon={ProjectsIcon} magnitude="md" />
-              <ListItemLabel>Projects</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink
+              href="#projects"
+              aria-current="page"
+              icon={<Icon icon={ProjectsIcon} magnitude="md" />}
+              label="Projects"
+            />
           </ListItem>
           <ListItem>
-            <ListItemLink href="#work-graph">
-              <Icon icon={YourWorkIcon} magnitude="md" />
-              <ListItemLabel>Work graph</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink
+              href="#work-graph"
+              icon={<Icon icon={YourWorkIcon} magnitude="md" />}
+              label="Work graph"
+            />
           </ListItem>
           <ListItem>
-            <ListItemLink href="#initiatives">
-              <Icon icon={InitiativesIcon} magnitude="md" />
-              <ListItemLabel>Initiatives</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink
+              href="#initiatives"
+              icon={<Icon icon={InitiativesIcon} magnitude="md" />}
+              label="Initiatives"
+            />
           </ListItem>
           <ListItem>
-            <ListItemLink href="#analytics">
-              <Icon icon={AnalyticsIcon} magnitude="md" />
-              <ListItemLabel>Analytics</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink
+              href="#analytics"
+              icon={<Icon icon={AnalyticsIcon} magnitude="md" />}
+              label="Analytics"
+            />
           </ListItem>
           <ListItem>
-            <ListItemLink href="#releases">
-              <Icon icon={ReleasesIcon} magnitude="md" />
-              <ListItemLabel>Releases</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink
+              href="#releases"
+              icon={<Icon icon={ReleasesIcon} magnitude="md" />}
+              label="Releases"
+            />
           </ListItem>
           <ListItem>
-            <ListItemButton>
-              <Icon icon={MoreIcon} magnitude="md" />
-              <ListItemLabel>More</ListItemLabel>
-            </ListItemButton>
+            <ListItemButton icon={<Icon icon={MoreIcon} magnitude="md" />} label="More" />
           </ListItem>
         </List>
       </ListSection>
@@ -149,34 +150,31 @@ export const WorkspaceSidebar: Story = {
       <ListSection label="Projects" indicator defaultOpen>
         <List role="toolbar" aria-label="Projects">
           <ListItem>
-            <ListItemLink href="#acme">
-              <Icon icon="🚜" magnitude="md" />
-              <ListItemLabel>Acme Inc.</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink href="#acme" icon={<Icon icon="🚜" magnitude="md" />} label="Acme Inc." />
           </ListItem>
           <ListItem>
-            <ListItemLink href="#web-development">
-              <Icon icon="🧩" magnitude="md" />
-              <ListItemLabel>Web Development</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink
+              href="#web-development"
+              icon={<Icon icon="🧩" magnitude="md" />}
+              label="Web Development"
+            />
           </ListItem>
           <ListItem>
-            <ListItemLink href="#plane-pro">
-              <Icon icon="🚗" magnitude="md" />
-              <ListItemLabel>Plane Pro</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink
+              href="#plane-pro"
+              icon={<Icon icon="🚗" magnitude="md" />}
+              label="Plane Pro"
+            />
           </ListItem>
           <ListItem>
-            <ListItemLink href="#discover">
-              <Icon icon="📞" magnitude="md" />
-              <ListItemLabel>Discover</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink
+              href="#discover"
+              icon={<Icon icon="📞" magnitude="md" />}
+              label="Discover"
+            />
           </ListItem>
           <ListItem>
-            <ListItemButton>
-              <Icon icon={MoreIcon} magnitude="md" />
-              <ListItemLabel>More</ListItemLabel>
-            </ListItemButton>
+            <ListItemButton icon={<Icon icon={MoreIcon} magnitude="md" />} label="More" />
           </ListItem>
         </List>
       </ListSection>
@@ -184,22 +182,25 @@ export const WorkspaceSidebar: Story = {
       <ListSection label="Try" indicator defaultOpen>
         <List role="toolbar" aria-label="Try">
           <ListItem>
-            <ListItemLink href="#github">
-              <Icon icon={GithubIcon} magnitude="md" />
-              <ListItemLabel>Connect to GitHub</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink
+              href="#github"
+              icon={<Icon icon={GithubIcon} magnitude="md" />}
+              label="Connect to GitHub"
+            />
           </ListItem>
           <ListItem>
-            <ListItemLink href="#slack">
-              <Icon icon={SlackIcon} magnitude="md" />
-              <ListItemLabel>Connect to Slack</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink
+              href="#slack"
+              icon={<Icon icon={SlackIcon} magnitude="md" />}
+              label="Connect to Slack"
+            />
           </ListItem>
           <ListItem>
-            <ListItemLink href="#plane-ai">
-              <Icon icon={PlaneAiIcon} magnitude="md" />
-              <ListItemLabel>Try Plane AI</ListItemLabel>
-            </ListItemLink>
+            <ListItemLink
+              href="#plane-ai"
+              icon={<Icon icon={PlaneAiIcon} magnitude="md" />}
+              label="Try Plane AI"
+            />
           </ListItem>
         </List>
       </ListSection>
diff --git a/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx b/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx
index d6e23570..eaa7b2b2 100644
--- a/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx
+++ b/packages/propel/src/patterns/workspace-settings-sidebar.stories.tsx
@@ -4,13 +4,7 @@ import { expect } from "storybook/test";
 
 import { Badge } from "../components/badge/index";
 import { Icon } from "../components/icon/index";
-import {
-  List,
-  ListItem,
-  ListItemLabel,
-  ListItemLink,
-  ListSectionHeading,
-} from "../components/list/index";
+import { List, ListItem, ListItemLink, ListSectionHeading } from "../components/list/index";
 import { Separator } from "../components/separator/index";
 import { WorkspaceAvatar } from "../components/workspace-avatar/index";
 import {
@@ -161,10 +155,11 @@ export const WorkspaceSettings: Story = {
                 const RowIcon = row.icon;
                 return (
                   <ListItem key={row.href}>
-                    <ListItemLink href={row.href}>
-                      <Icon icon={RowIcon} magnitude="md" />
-                      <ListItemLabel>{row.label}</ListItemLabel>
-                    </ListItemLink>
+                    <ListItemLink
+                      href={row.href}
+                      icon={<Icon icon={RowIcon} magnitude="md" />}
+                      label={row.label}
+                    />
                   </ListItem>
                 );
               })}

From 6bb27368c3f08956c8b9e0471936a1d3be94e2dd Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Tue, 7 Jul 2026 15:30:14 +0700
Subject: [PATCH 3/4] Replace styled labels with explicit props

---
 .../src/components/checkbox/checkbox.tsx      |  7 ++-
 .../src/components/dialog/dialog.stories.tsx  |  3 +-
 .../components/menu/menu-checkbox-item.tsx    | 13 ++++-
 .../propel/src/components/menu/menu-item.tsx  |  6 ++-
 .../src/components/menu/menu-link-item.tsx    |  7 ++-
 .../src/components/menu/menu-radio-item.tsx   |  7 ++-
 .../components/menu/menu-submenu-trigger.tsx  | 13 ++++-
 .../src/components/menu/menu.stories.tsx      | 10 +---
 .../components/popover/popover.stories.tsx    |  6 ++-
 .../src/components/table/table-head.tsx       |  9 ++--
 .../src/components/table/table.stories.tsx    |  4 +-
 .../src/elements/checkbox/checkbox-label.tsx  | 13 +++--
 .../propel/src/elements/checkbox/variants.ts  | 23 +++++++-
 .../src/elements/menu/menu-checkbox-item.tsx  | 11 ++--
 .../propel/src/elements/menu/menu-item.tsx    |  8 ++-
 .../src/elements/menu/menu-link-item.tsx      |  9 ++--
 .../src/elements/menu/menu-radio-item.tsx     |  9 ++--
 .../elements/menu/menu-submenu-trigger.tsx    |  9 ++--
 packages/propel/src/elements/menu/variants.ts | 52 +++++++++++++++++--
 .../src/elements/table/table-head-title.tsx   | 13 +++--
 .../propel/src/elements/table/variants.ts     | 24 ++++++++-
 21 files changed, 197 insertions(+), 59 deletions(-)

diff --git a/packages/propel/src/components/checkbox/checkbox.tsx b/packages/propel/src/components/checkbox/checkbox.tsx
index 002bae93..d1c425f8 100644
--- a/packages/propel/src/components/checkbox/checkbox.tsx
+++ b/packages/propel/src/components/checkbox/checkbox.tsx
@@ -7,6 +7,7 @@ import {
   CheckboxIndeterminateIndicator,
   CheckboxIndicator,
   CheckboxLabel,
+  type CheckboxLabelSizing,
 } from "../../elements/checkbox";
 
 export type CheckboxProps = Omit<BaseCheckbox.Root.Props, "className" | "style" | "render"> & {
@@ -16,6 +17,8 @@ export type CheckboxProps = Omit<BaseCheckbox.Root.Props, "className" | "style"
    * or `aria-labelledby`.
    */
   label?: React.ReactNode;
+  /** Width of the clickable label row when `label` is present. */
+  sizing?: CheckboxLabelSizing;
   /**
    * Element shown between the box and the label (inline-start), e.g. `<Icon icon={User}
    * tint="secondary" magnitude="sm" />`. Only rendered when `label` is present.
@@ -28,7 +31,7 @@ export type CheckboxProps = Omit<BaseCheckbox.Root.Props, "className" | "style"
  * check and indeterminate indicators, and optionally wraps the row in a clickable `CheckboxLabel`
  * with an icon slot.
  */
-export function Checkbox({ label, icon, id, ...props }: CheckboxProps) {
+export function Checkbox({ label, sizing, icon, id, ...props }: CheckboxProps) {
   // Generate a stable id so an explicit `label` can be associated with the box.
   const generatedId = React.useId();
   const checkboxId = id ?? generatedId;
@@ -49,7 +52,7 @@ export function Checkbox({ label, icon, id, ...props }: CheckboxProps) {
   if (label == null) return box;
 
   return (
-    <CheckboxLabel htmlFor={checkboxId}>
+    <CheckboxLabel htmlFor={checkboxId} sizing={sizing}>
       {box}
       {icon}
       {label}
diff --git a/packages/propel/src/components/dialog/dialog.stories.tsx b/packages/propel/src/components/dialog/dialog.stories.tsx
index 60b5f081..4f572b5a 100644
--- a/packages/propel/src/components/dialog/dialog.stories.tsx
+++ b/packages/propel/src/components/dialog/dialog.stories.tsx
@@ -366,7 +366,8 @@ export const OpenFromMenu: Story = {
             <MenuItem icon={<Icon icon={Link2} tint="secondary" />} label="Copy link" />
             <MenuSeparator />
             <MenuItem
-              icon={<Icon icon={Trash2} tint="danger" />}
+              tone="danger"
+              icon={<Icon icon={Trash2} />}
               onClick={() => setOpen(true)}
               label="Delete project…"
             />
diff --git a/packages/propel/src/components/menu/menu-checkbox-item.tsx b/packages/propel/src/components/menu/menu-checkbox-item.tsx
index 117e83f8..739093d9 100644
--- a/packages/propel/src/components/menu/menu-checkbox-item.tsx
+++ b/packages/propel/src/components/menu/menu-checkbox-item.tsx
@@ -10,12 +10,15 @@ import {
   MenuItemMeta,
   MenuItemTitle,
   MenuItemTitleRow,
+  type MenuItemTone,
 } from "../../elements/menu";
 
 export type MenuCheckboxItemProps = Omit<
   BaseMenu.CheckboxItem.Props,
   "children" | "className" | "label" | "style"
 > & {
+  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  tone?: MenuItemTone;
   /** Leading element shown after the checkbox, e.g. `<Icon icon={Settings} tint="secondary" />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
@@ -32,9 +35,15 @@ export type MenuCheckboxItemProps = Omit<
  * state, so `checked` / `defaultChecked` / `onCheckedChange` forward straight to it and the
  * indicator reads it from context.
  */
-export function MenuCheckboxItem({ icon, label, endContent, ...props }: MenuCheckboxItemProps) {
+export function MenuCheckboxItem({
+  tone,
+  icon,
+  label,
+  endContent,
+  ...props
+}: MenuCheckboxItemProps) {
   return (
-    <BaseMenu.CheckboxItem {...props} render={<MenuCheckboxItemElement />}>
+    <BaseMenu.CheckboxItem {...props} render={<MenuCheckboxItemElement tone={tone} />}>
       <MenuItemControl>
         <BaseMenu.CheckboxItemIndicator keepMounted render={<MenuCheckboxItemIndicator />}>
           <Check aria-hidden />
diff --git a/packages/propel/src/components/menu/menu-item.tsx b/packages/propel/src/components/menu/menu-item.tsx
index 694e526f..902dc466 100644
--- a/packages/propel/src/components/menu/menu-item.tsx
+++ b/packages/propel/src/components/menu/menu-item.tsx
@@ -4,6 +4,7 @@ import type * as React from "react";
 
 import {
   MenuItem as MenuItemElement,
+  type MenuItemTone,
   MenuItemContent,
   MenuItemDescription,
   MenuItemSecondaryText,
@@ -17,6 +18,8 @@ export type MenuItemProps = Omit<
   BaseMenu.Item.Props,
   "children" | "className" | "label" | "style"
 > & {
+  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  tone?: MenuItemTone;
   /** Leading element before the label, e.g. `<Icon icon={Settings} tint="secondary" />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
@@ -37,6 +40,7 @@ export type MenuItemProps = Omit<
  * the single-select check indicator.
  */
 export function MenuItem({
+  tone,
   icon,
   description,
   secondaryText,
@@ -48,7 +52,7 @@ export function MenuItem({
   // The taller, top-aligned row layout is implied by having a description — derived, not a prop.
   const layout = description != null ? "with-description" : "default";
   return (
-    <BaseMenu.Item {...props} render={<MenuItemElement layout={layout} />}>
+    <BaseMenu.Item {...props} render={<MenuItemElement layout={layout} tone={tone} />}>
       {icon}
       <MenuItemContent>
         <MenuItemTitleRow>
diff --git a/packages/propel/src/components/menu/menu-link-item.tsx b/packages/propel/src/components/menu/menu-link-item.tsx
index 676a5c4c..1b48a864 100644
--- a/packages/propel/src/components/menu/menu-link-item.tsx
+++ b/packages/propel/src/components/menu/menu-link-item.tsx
@@ -7,12 +7,15 @@ import {
   MenuItemTitleRow,
   MenuItemTrailing,
   MenuLinkItem as MenuLinkItemElement,
+  type MenuItemTone,
 } from "../../elements/menu";
 
 export type MenuLinkItemProps = Omit<
   BaseMenu.LinkItem.Props,
   "children" | "className" | "label" | "style"
 > & {
+  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  tone?: MenuItemTone;
   /** Leading element before the label, e.g. `<Icon icon={ExternalLink} tint="secondary" />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
@@ -25,9 +28,9 @@ export type MenuLinkItemProps = Omit<
  * The ready-made navigational `<a>` menu row: grafts Base UI's `Menu.LinkItem` behavior onto the
  * styled `MenuLinkItem` and lays out an optional leading icon, label, and end content.
  */
-export function MenuLinkItem({ icon, label, endContent, ...props }: MenuLinkItemProps) {
+export function MenuLinkItem({ tone, icon, label, endContent, ...props }: MenuLinkItemProps) {
   return (
-    <BaseMenu.LinkItem {...props} render={<MenuLinkItemElement />}>
+    <BaseMenu.LinkItem {...props} render={<MenuLinkItemElement tone={tone} />}>
       {icon}
       <MenuItemContent>
         <MenuItemTitleRow>
diff --git a/packages/propel/src/components/menu/menu-radio-item.tsx b/packages/propel/src/components/menu/menu-radio-item.tsx
index a207016a..a9b9d58b 100644
--- a/packages/propel/src/components/menu/menu-radio-item.tsx
+++ b/packages/propel/src/components/menu/menu-radio-item.tsx
@@ -8,6 +8,7 @@ import {
   MenuItemMeta,
   MenuItemTitle,
   MenuItemTitleRow,
+  type MenuItemTone,
   MenuRadioItem as MenuRadioItemElement,
   MenuRadioItemIndicator,
 } from "../../elements/menu";
@@ -16,6 +17,8 @@ export type MenuRadioItemProps = Omit<
   BaseMenu.RadioItem.Props,
   "children" | "className" | "label" | "style"
 > & {
+  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  tone?: MenuItemTone;
   /** Leading element shown after the radio dot, e.g. `<Icon icon={Settings} tint="secondary" />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
@@ -31,9 +34,9 @@ export type MenuRadioItemProps = Omit<
  * `MenuRadioGroup` carrying `value`/`onValueChange`; the dot reads the selected state from
  * context.
  */
-export function MenuRadioItem({ icon, label, endContent, ...props }: MenuRadioItemProps) {
+export function MenuRadioItem({ tone, icon, label, endContent, ...props }: MenuRadioItemProps) {
   return (
-    <BaseMenu.RadioItem {...props} render={<MenuRadioItemElement />}>
+    <BaseMenu.RadioItem {...props} render={<MenuRadioItemElement tone={tone} />}>
       <MenuItemControl>
         <BaseMenu.RadioItemIndicator keepMounted render={<MenuRadioItemIndicator />}>
           <Circle aria-hidden />
diff --git a/packages/propel/src/components/menu/menu-submenu-trigger.tsx b/packages/propel/src/components/menu/menu-submenu-trigger.tsx
index 06229033..05d44d2f 100644
--- a/packages/propel/src/components/menu/menu-submenu-trigger.tsx
+++ b/packages/propel/src/components/menu/menu-submenu-trigger.tsx
@@ -7,6 +7,7 @@ import {
   MenuItemTitle,
   MenuItemTitleRow,
   MenuItemTrailing,
+  type MenuItemTone,
   MenuSubmenuTrigger as MenuSubmenuTriggerElement,
 } from "../../elements/menu";
 import { DisclosureIndicator } from "../../internal/disclosure-indicator";
@@ -15,6 +16,8 @@ export type MenuSubmenuTriggerProps = Omit<
   BaseMenu.SubmenuTrigger.Props,
   "children" | "className" | "label" | "style"
 > & {
+  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  tone?: MenuItemTone;
   /** Leading element before the label, e.g. `<Icon icon={Folder} tint="secondary" />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
@@ -28,9 +31,15 @@ export type MenuSubmenuTriggerProps = Omit<
  * styled `MenuSubmenuTrigger` and lays out an optional leading icon, label, end content, and the
  * submenu chevron indicator.
  */
-export function MenuSubmenuTrigger({ icon, endContent, label, ...props }: MenuSubmenuTriggerProps) {
+export function MenuSubmenuTrigger({
+  tone,
+  icon,
+  endContent,
+  label,
+  ...props
+}: MenuSubmenuTriggerProps) {
   return (
-    <BaseMenu.SubmenuTrigger {...props} render={<MenuSubmenuTriggerElement />}>
+    <BaseMenu.SubmenuTrigger {...props} render={<MenuSubmenuTriggerElement tone={tone} />}>
       {icon}
       <MenuItemContent>
         <MenuItemTitleRow>
diff --git a/packages/propel/src/components/menu/menu.stories.tsx b/packages/propel/src/components/menu/menu.stories.tsx
index 73e2138c..045ba37e 100644
--- a/packages/propel/src/components/menu/menu.stories.tsx
+++ b/packages/propel/src/components/menu/menu.stories.tsx
@@ -344,10 +344,7 @@ export const ActionMenu: Story = {
           label="Archive"
         />
         <MenuSeparator />
-        <MenuItem
-          icon={<Icon icon={Trash2} tint="danger" />}
-          label={<span className="text-danger-primary">Delete</span>}
-        />
+        <MenuItem tone="danger" icon={<Icon icon={Trash2} />} label="Delete" />
       </MenuContent>
     </Menu>
   ),
@@ -1149,10 +1146,7 @@ export const DetachedTrigger: Story = {
           <MenuItem icon={<Icon icon={Pencil} tint="secondary" />} label="Edit" />
           <MenuItem icon={<Icon icon={Copy} tint="secondary" />} label="Make a copy" />
           <MenuSeparator />
-          <MenuItem
-            icon={<Icon icon={Trash2} tint="danger" />}
-            label={<span className="text-danger-primary">Delete</span>}
-          />
+          <MenuItem tone="danger" icon={<Icon icon={Trash2} />} label="Delete" />
         </MenuContent>
       </Menu>
     </>
diff --git a/packages/propel/src/components/popover/popover.stories.tsx b/packages/propel/src/components/popover/popover.stories.tsx
index 1dd72c26..4345a3d8 100644
--- a/packages/propel/src/components/popover/popover.stories.tsx
+++ b/packages/propel/src/components/popover/popover.stories.tsx
@@ -58,14 +58,16 @@ function ToggleFooter({ defaultToggles = {} }: { defaultToggles?: Record<string,
   return (
     <div className="flex flex-col">
       <Checkbox
+        sizing="fill"
         checked={Boolean(toggles.sub)}
         onCheckedChange={(next) => setToggles((t) => ({ ...t, sub: Boolean(next) }))}
-        label={<span className="flex-1">Show sub-work items</span>}
+        label="Show sub-work items"
       />
       <Checkbox
+        sizing="fill"
         checked={Boolean(toggles.empty)}
         onCheckedChange={(next) => setToggles((t) => ({ ...t, empty: Boolean(next) }))}
-        label={<span className="flex-1">Show empty groups</span>}
+        label="Show empty groups"
       />
     </div>
   );
diff --git a/packages/propel/src/components/table/table-head.tsx b/packages/propel/src/components/table/table-head.tsx
index f62fb49e..1ee371d3 100644
--- a/packages/propel/src/components/table/table-head.tsx
+++ b/packages/propel/src/components/table/table-head.tsx
@@ -28,7 +28,8 @@ const ariaSort: Record<TableHeadSort, React.AriaAttributes["aria-sort"]> = {
 export type TableHeadProps = Omit<TableHeadElementProps, "aria-sort" | "children" | "mode"> & {
   /** Header label. */
   label: React.ReactNode;
-  /** Visual treatment. `sortable` renders the title as a sort-cycling button. */
+  /** Visually hide the label while keeping it available to assistive tech. */
+  visuallyHidden?: boolean;
   /** Whether this header is interactive sortable (renders a sort trigger + reflects `aria-sort`). */
   sortable?: boolean;
   /** Current sort state for a sortable header. @default "none" */
@@ -40,6 +41,7 @@ export type TableHeadProps = Omit<TableHeadElementProps, "aria-sort" | "children
 /** A ready-made header cell: a plain title, or (when sortable) a sort-cycling button with a chevron. */
 export function TableHead({
   label,
+  visuallyHidden = false,
   sortable = false,
   sort = "none",
   onSort,
@@ -49,6 +51,7 @@ export function TableHead({
   const isSortable = sortable;
   const hasSortControl = isSortable && onSort != null;
   const SortGlyph = sortGlyph[sort];
+  const titleVisibility = visuallyHidden ? "hidden" : "visible";
 
   return (
     <TableHeadElement
@@ -58,13 +61,13 @@ export function TableHead({
     >
       {hasSortControl ? (
         <TableHeadSortTrigger onClick={onSort}>
-          <TableHeadTitle>{label}</TableHeadTitle>
+          <TableHeadTitle visibility={titleVisibility}>{label}</TableHeadTitle>
           <TableHeadSortIndicator>
             <SortGlyph />
           </TableHeadSortIndicator>
         </TableHeadSortTrigger>
       ) : (
-        <TableHeadTitle>{label}</TableHeadTitle>
+        <TableHeadTitle visibility={titleVisibility}>{label}</TableHeadTitle>
       )}
     </TableHeadElement>
   );
diff --git a/packages/propel/src/components/table/table.stories.tsx b/packages/propel/src/components/table/table.stories.tsx
index 273ffd31..90913051 100644
--- a/packages/propel/src/components/table/table.stories.tsx
+++ b/packages/propel/src/components/table/table.stories.tsx
@@ -440,7 +440,7 @@ export const RichRows: Story = {
             <TableHead pinned="none" label="Name" />
             <TableHead pinned="none" label="Email" />
             <TableHead pinned="none" label="Account type" />
-            <TableHead pinned="none" label={<span className="sr-only">Actions</span>} />
+            <TableHead pinned="none" label="Actions" visuallyHidden />
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -473,7 +473,7 @@ export const RichRows: Story = {
               <TableActionCell aria-label={`Options for ${person.name}`}>
                 <MenuContent>
                   <MenuItem icon={<Icon icon={Pencil} tint="secondary" />} label="Edit" />
-                  <MenuItem icon={<Icon icon={Trash2} tint="danger" />} label="Delete" />
+                  <MenuItem tone="danger" icon={<Icon icon={Trash2} />} label="Delete" />
                 </MenuContent>
               </TableActionCell>
             </TableRow>
diff --git a/packages/propel/src/elements/checkbox/checkbox-label.tsx b/packages/propel/src/elements/checkbox/checkbox-label.tsx
index 5edf6fc7..414ab69c 100644
--- a/packages/propel/src/elements/checkbox/checkbox-label.tsx
+++ b/packages/propel/src/elements/checkbox/checkbox-label.tsx
@@ -1,9 +1,12 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 
-import { checkboxLabelVariants } from "./variants";
+import { type CheckboxLabelVariantProps, checkboxLabelVariants } from "./variants";
 
-export type CheckboxLabelProps = Omit<useRender.ComponentProps<"label">, "className" | "style">;
+export type { CheckboxLabelSizing } from "./variants";
+
+export type CheckboxLabelProps = Omit<useRender.ComponentProps<"label">, "className" | "style"> &
+  CheckboxLabelVariantProps;
 
 /**
  * The clickable row chip that wraps a `Checkbox` box with an optional `CheckboxIcon` and the label
@@ -11,7 +14,9 @@ export type CheckboxLabelProps = Omit<useRender.ComponentProps<"label">, "classN
  * so clicking anywhere in the row toggles the box. The row reads its disabled look off the wrapped
  * `Checkbox` (which carries `data-disabled`) via `:has()`, so it takes no `disabled` prop.
  */
-export function CheckboxLabel({ render, ...props }: CheckboxLabelProps) {
-  const defaultProps: useRender.ElementProps<"label"> = { className: checkboxLabelVariants() };
+export function CheckboxLabel({ sizing, render, ...props }: CheckboxLabelProps) {
+  const defaultProps: useRender.ElementProps<"label"> = {
+    className: checkboxLabelVariants({ sizing }),
+  };
   return useRender({ defaultTagName: "label", render, props: mergeProps(defaultProps, props) });
 }
diff --git a/packages/propel/src/elements/checkbox/variants.ts b/packages/propel/src/elements/checkbox/variants.ts
index a9a66a96..8fde55ce 100644
--- a/packages/propel/src/elements/checkbox/variants.ts
+++ b/packages/propel/src/elements/checkbox/variants.ts
@@ -1,7 +1,8 @@
-import { cva, cx } from "class-variance-authority";
+import { cva, cx, type VariantProps } from "class-variance-authority";
 
 import { checkboxBoxVariants } from "../../internal/checkbox-box";
 import { nodeSlotClass } from "../../internal/node-slot";
+import { type StrictVariantProps } from "../../internal/variant-props";
 
 // The box look lives in `internal/checkbox-box` so it can be shared with the menu's checkbox
 // indicator (rule 4). `Checkbox` renders it directly — same signature, so delegate to it.
@@ -25,10 +26,30 @@ export const checkboxIndeterminateIndicatorVariants = cva(
 // disabled state off the wrapped `Checkbox` (Base UI — and `Field.Root` — set `data-disabled` on
 // it) via `:has()`, so it needs no `disabled` prop: it cancels the hover background and shows the
 // not-allowed cursor whenever a descendant is disabled.
+const checkboxLabelDefaultVariants = {
+  sizing: "hug",
+} as const;
+
 export const checkboxLabelVariants = cva(
   cx(
     "inline-flex items-center gap-2 rounded-sm px-2 py-1",
     "text-13 text-secondary transition-colors",
     "cursor-pointer not-has-[[data-disabled]]:hover:bg-layer-transparent-hover has-[[data-disabled]]:cursor-not-allowed",
   ),
+  {
+    variants: {
+      sizing: {
+        hug: "w-fit",
+        fill: "w-full",
+      },
+    },
+    defaultVariants: checkboxLabelDefaultVariants,
+  },
 );
+
+type CheckboxLabelVariantConfig = VariantProps<typeof checkboxLabelVariants>;
+export type CheckboxLabelSizing = NonNullable<CheckboxLabelVariantConfig["sizing"]>;
+export type CheckboxLabelVariantProps = StrictVariantProps<
+  typeof checkboxLabelVariants,
+  keyof typeof checkboxLabelDefaultVariants
+>;
diff --git a/packages/propel/src/elements/menu/menu-checkbox-item.tsx b/packages/propel/src/elements/menu/menu-checkbox-item.tsx
index b1ecfecb..71d859ef 100644
--- a/packages/propel/src/elements/menu/menu-checkbox-item.tsx
+++ b/packages/propel/src/elements/menu/menu-checkbox-item.tsx
@@ -1,16 +1,19 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 
-import { menuCheckboxItemVariants } from "./variants";
+import { type MenuCheckboxItemVariantProps, menuCheckboxItemVariants } from "./variants";
 
-export type MenuCheckboxItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+export type MenuCheckboxItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  MenuCheckboxItemVariantProps;
 
 /**
  * A styled toggleable multi-select menu row. Base-UI-agnostic — graft the checkbox-item behavior in
  * `components` via `<BaseMenu.CheckboxItem render={<MenuCheckboxItem />} />` (Base UI applies
  * `role="menuitemcheckbox"` and the checked state).
  */
-export function MenuCheckboxItem({ render, ...props }: MenuCheckboxItemProps) {
-  const defaultProps: useRender.ElementProps<"div"> = { className: menuCheckboxItemVariants() };
+export function MenuCheckboxItem({ tone, render, ...props }: MenuCheckboxItemProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: menuCheckboxItemVariants({ tone }),
+  };
   return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
 }
diff --git a/packages/propel/src/elements/menu/menu-item.tsx b/packages/propel/src/elements/menu/menu-item.tsx
index b6b18f79..b684f6ef 100644
--- a/packages/propel/src/elements/menu/menu-item.tsx
+++ b/packages/propel/src/elements/menu/menu-item.tsx
@@ -3,6 +3,8 @@ import { useRender } from "@base-ui/react/use-render";
 
 import { type MenuRowVariantProps, menuRowVariants } from "./variants";
 
+export type { MenuItemTone } from "./variants";
+
 export type MenuItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
   MenuRowVariantProps;
 
@@ -10,7 +12,9 @@ export type MenuItemProps = Omit<useRender.ComponentProps<"div">, "className" |
  * A styled selectable menu row. Base-UI-agnostic — graft the menu-item behavior in `components` via
  * `<BaseMenu.Item render={<MenuItem layout="…" />} />`.
  */
-export function MenuItem({ layout, render, ...props }: MenuItemProps) {
-  const defaultProps: useRender.ElementProps<"div"> = { className: menuRowVariants({ layout }) };
+export function MenuItem({ layout, tone, render, ...props }: MenuItemProps) {
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: menuRowVariants({ layout, tone }),
+  };
   return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
 }
diff --git a/packages/propel/src/elements/menu/menu-link-item.tsx b/packages/propel/src/elements/menu/menu-link-item.tsx
index 17ef356e..92c17dc1 100644
--- a/packages/propel/src/elements/menu/menu-link-item.tsx
+++ b/packages/propel/src/elements/menu/menu-link-item.tsx
@@ -1,17 +1,18 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 
-import { menuRowVariants } from "./variants";
+import { type MenuRowVariantProps, menuRowVariants } from "./variants";
 
-export type MenuLinkItemProps = Omit<useRender.ComponentProps<"a">, "className" | "style">;
+export type MenuLinkItemProps = Omit<useRender.ComponentProps<"a">, "className" | "style"> &
+  Pick<MenuRowVariantProps, "tone">;
 
 /**
  * A styled navigational `<a>` menu row. Base-UI-agnostic — graft the link-item behavior in
  * `components` via `<BaseMenu.LinkItem render={<MenuLinkItem />} />`.
  */
-export function MenuLinkItem({ render, ...props }: MenuLinkItemProps) {
+export function MenuLinkItem({ tone, render, ...props }: MenuLinkItemProps) {
   const defaultProps: useRender.ElementProps<"a"> = {
-    className: menuRowVariants({ layout: "default" }),
+    className: menuRowVariants({ layout: "default", tone }),
   };
   return useRender({ defaultTagName: "a", render, props: mergeProps(defaultProps, props) });
 }
diff --git a/packages/propel/src/elements/menu/menu-radio-item.tsx b/packages/propel/src/elements/menu/menu-radio-item.tsx
index 1ce8fdc4..1a7ca994 100644
--- a/packages/propel/src/elements/menu/menu-radio-item.tsx
+++ b/packages/propel/src/elements/menu/menu-radio-item.tsx
@@ -1,17 +1,18 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 
-import { menuRowVariants } from "./variants";
+import { type MenuRowVariantProps, menuRowVariants } from "./variants";
 
-export type MenuRadioItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+export type MenuRadioItemProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  Pick<MenuRowVariantProps, "tone">;
 
 /**
  * A styled menu row that behaves like a radio button. Base-UI-agnostic — graft the radio-item
  * behavior in `components` via `<BaseMenu.RadioItem render={<MenuRadioItem />} />`.
  */
-export function MenuRadioItem({ render, ...props }: MenuRadioItemProps) {
+export function MenuRadioItem({ tone, render, ...props }: MenuRadioItemProps) {
   const defaultProps: useRender.ElementProps<"div"> = {
-    className: menuRowVariants({ layout: "default" }),
+    className: menuRowVariants({ layout: "default", tone }),
   };
   return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
 }
diff --git a/packages/propel/src/elements/menu/menu-submenu-trigger.tsx b/packages/propel/src/elements/menu/menu-submenu-trigger.tsx
index dc493f93..27552062 100644
--- a/packages/propel/src/elements/menu/menu-submenu-trigger.tsx
+++ b/packages/propel/src/elements/menu/menu-submenu-trigger.tsx
@@ -1,17 +1,18 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 
-import { menuSubmenuTriggerVariants } from "./variants";
+import { type MenuSubmenuTriggerVariantProps, menuSubmenuTriggerVariants } from "./variants";
 
-export type MenuSubmenuTriggerProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
+export type MenuSubmenuTriggerProps = Omit<useRender.ComponentProps<"div">, "className" | "style"> &
+  MenuSubmenuTriggerVariantProps;
 
 /**
  * The styled row that opens a submenu. Base-UI-agnostic — graft the submenu-trigger behavior in
  * `components` via `<BaseMenu.SubmenuTrigger render={<MenuSubmenuTrigger />} />`.
  */
-export function MenuSubmenuTrigger({ render, ...props }: MenuSubmenuTriggerProps) {
+export function MenuSubmenuTrigger({ tone, render, ...props }: MenuSubmenuTriggerProps) {
   const defaultProps: useRender.ElementProps<"div"> = {
-    className: menuSubmenuTriggerVariants(),
+    className: menuSubmenuTriggerVariants({ tone }),
   };
   return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
 }
diff --git a/packages/propel/src/elements/menu/variants.ts b/packages/propel/src/elements/menu/variants.ts
index 49a2723a..d1df6959 100644
--- a/packages/propel/src/elements/menu/variants.ts
+++ b/packages/propel/src/elements/menu/variants.ts
@@ -1,4 +1,4 @@
-import { cva, cx } from "class-variance-authority";
+import { cva, cx, type VariantProps } from "class-variance-authority";
 
 import { checkboxBoxVariants } from "../../internal/checkbox-box";
 import { itemIndicatorClass } from "../../internal/item-indicator";
@@ -32,10 +32,18 @@ export const menuPopupVariants = cva("outline-none", {
 // the hover/cursor affordance.
 const menuRowBase = cx(
   "group/item flex w-full gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
-  "text-secondary",
   "data-disabled:pointer-events-none data-disabled:text-disabled",
 );
 
+const menuRowDefaultVariants = {
+  tone: "neutral",
+} as const;
+
+const menuRowToneVariants = {
+  neutral: "text-secondary",
+  danger: "text-danger-primary data-disabled:text-disabled data-highlighted:text-danger-primary",
+} as const;
+
 /** Standalone `MenuItem` row: `layout` (single vs with-description) + `emphasis`. */
 export const menuRowVariants = cva(cx(menuRowBase, "data-highlighted:bg-layer-transparent-hover"), {
   variants: {
@@ -43,7 +51,10 @@ export const menuRowVariants = cva(cx(menuRowBase, "data-highlighted:bg-layer-tr
       default: "h-[34px] items-center",
       "with-description": "min-h-[34px] items-start py-1.5",
     },
+    /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+    tone: menuRowToneVariants,
   },
+  defaultVariants: menuRowDefaultVariants,
 });
 
 /**
@@ -55,6 +66,13 @@ export const menuCheckboxItemVariants = cva(
     menuRowBase,
     "h-[34px] cursor-default items-center data-highlighted:bg-layer-transparent-hover",
   ),
+  {
+    variants: {
+      /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+      tone: menuRowToneVariants,
+    },
+    defaultVariants: menuRowDefaultVariants,
+  },
 );
 
 /**
@@ -67,6 +85,17 @@ export const menuSubmenuTriggerVariants = cva(
     "h-[34px] cursor-default items-center",
     "data-highlighted:bg-layer-transparent-hover data-popup-open:bg-layer-transparent-hover",
   ),
+  {
+    variants: {
+      /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+      tone: {
+        neutral: "text-secondary",
+        danger:
+          "text-danger-primary data-disabled:text-disabled data-highlighted:text-danger-primary data-popup-open:text-danger-primary",
+      },
+    },
+    defaultVariants: menuRowDefaultVariants,
+  },
 );
 
 /**
@@ -161,4 +190,21 @@ export const menuFooterVariants = cva(
 
 export type MenuPopupVariantProps = StrictVariantProps<typeof menuPopupVariants>;
 
-export type MenuRowVariantProps = StrictVariantProps<typeof menuRowVariants>;
+type MenuRowVariantConfig = VariantProps<typeof menuRowVariants>;
+/** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+export type MenuItemTone = NonNullable<MenuRowVariantConfig["tone"]>;
+
+export type MenuRowVariantProps = StrictVariantProps<
+  typeof menuRowVariants,
+  keyof typeof menuRowDefaultVariants
+>;
+
+export type MenuCheckboxItemVariantProps = StrictVariantProps<
+  typeof menuCheckboxItemVariants,
+  keyof typeof menuRowDefaultVariants
+>;
+
+export type MenuSubmenuTriggerVariantProps = StrictVariantProps<
+  typeof menuSubmenuTriggerVariants,
+  keyof typeof menuRowDefaultVariants
+>;
diff --git a/packages/propel/src/elements/table/table-head-title.tsx b/packages/propel/src/elements/table/table-head-title.tsx
index 62945581..91e20642 100644
--- a/packages/propel/src/elements/table/table-head-title.tsx
+++ b/packages/propel/src/elements/table/table-head-title.tsx
@@ -1,12 +1,17 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 
-import { tableHeadTitleVariants } from "./variants";
+import { type TableHeadTitleVariantProps, tableHeadTitleVariants } from "./variants";
 
-export type TableHeadTitleProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+export type { TableHeadTitleVisibility } from "./variants";
+
+export type TableHeadTitleProps = Omit<useRender.ComponentProps<"span">, "className" | "style"> &
+  TableHeadTitleVariantProps;
 
 /** The column title inside a `TableHead`. Truncates instead of overflowing the cell. */
-export function TableHeadTitle({ render, ...props }: TableHeadTitleProps) {
-  const defaultProps: useRender.ElementProps<"span"> = { className: tableHeadTitleVariants() };
+export function TableHeadTitle({ visibility, render, ...props }: TableHeadTitleProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: tableHeadTitleVariants({ visibility }),
+  };
   return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
 }
diff --git a/packages/propel/src/elements/table/variants.ts b/packages/propel/src/elements/table/variants.ts
index b113875a..ae417be2 100644
--- a/packages/propel/src/elements/table/variants.ts
+++ b/packages/propel/src/elements/table/variants.ts
@@ -109,8 +109,28 @@ export const tableCellLayoutVariants = cva("flex items-center gap-2 [--node-size
 // The growing text region of a cell; truncates instead of overflowing.
 export const tableCellContentVariants = cva("min-w-0 flex-1 truncate");
 
-// The label region inside a `TableHead`: truncates the column title.
-export const tableHeadTitleVariants = cva("truncate");
+const tableHeadTitleDefaultVariants = {
+  visibility: "visible",
+} as const;
+
+// The label region inside a `TableHead`: truncates the column title, or visually hides it for
+// icon/action columns that still need an accessible header.
+export const tableHeadTitleVariants = cva("truncate", {
+  variants: {
+    visibility: {
+      visible: "",
+      hidden: "sr-only",
+    },
+  },
+  defaultVariants: tableHeadTitleDefaultVariants,
+});
+
+type TableHeadTitleVariantConfig = VariantProps<typeof tableHeadTitleVariants>;
+export type TableHeadTitleVisibility = NonNullable<TableHeadTitleVariantConfig["visibility"]>;
+export type TableHeadTitleVariantProps = StrictVariantProps<
+  typeof tableHeadTitleVariants,
+  keyof typeof tableHeadTitleDefaultVariants
+>;
 
 // The sort control inside a sortable `TableHead`: a button that wraps the title + the
 // sort indicator. The chevron sits to the inline-end of the text (an "always").

From 4db3d749661ff259d0d6be1c55500290bf2641e4 Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Tue, 7 Jul 2026 16:14:03 +0700
Subject: [PATCH 4/4] Tighten component text props

---
 .changeset/clean-label-slots.md               |   9 +
 .../accordion/accordion-trigger.tsx           |   2 +-
 .../anchor-button/anchor-button.tsx           |   2 +-
 .../autocomplete-field/autocomplete-field.tsx |   2 +-
 .../propel/src/components/badge/badge.tsx     |   4 +-
 .../breadcrumb/breadcrumb-menu-trigger.tsx    |   2 +-
 .../propel/src/components/button/button.tsx   |   2 +-
 .../checkbox-field/checkbox-field.tsx         |   2 +-
 .../checkbox-group-field-option.tsx           |   2 +-
 .../checkbox-group-field.tsx                  |   2 +-
 .../src/components/checkbox/checkbox.tsx      |   2 +-
 .../combobox-field/combobox-field.tsx         |   2 +-
 .../src/components/combobox/combobox-item.tsx |   3 +-
 .../propel/src/components/combobox/index.tsx  |   6 -
 .../context-menu-checkbox-item.tsx            |   9 +-
 .../context-menu/context-menu-group.tsx       |   2 +-
 .../context-menu/context-menu-item.tsx        |   9 +-
 .../context-menu/context-menu-link-item.tsx   |   9 +-
 .../context-menu/context-menu-radio-item.tsx  |   9 +-
 .../context-menu-submenu-trigger.tsx          |   7 +-
 .../context-menu/context-menu.stories.tsx     |  22 +-
 .../src/components/context-menu/index.tsx     |   4 -
 .../components/field/field-label-group.tsx    |   2 +-
 .../components/input-field/input-field.tsx    |   2 +-
 .../linear-progress/linear-progress.tsx       |   3 +-
 .../src/components/list/list-item-button.tsx  |   2 +-
 .../src/components/list/list-item-link.tsx    |   2 +-
 .../src/components/list/list-section.tsx      |   2 +-
 packages/propel/src/components/menu/index.tsx |   8 +-
 .../components/menu/menu-checkbox-item.tsx    |  12 +-
 .../propel/src/components/menu/menu-item.tsx  |  20 +-
 .../src/components/menu/menu-link-item.tsx    |  12 +-
 .../src/components/menu/menu-radio-item.tsx   |  12 +-
 .../components/menu/menu-submenu-trigger.tsx  |  12 +-
 .../src/components/menu/menu.stories.tsx      |  47 +++-
 .../propel/src/components/meter/meter.tsx     |   3 +-
 .../navigation-menu-trigger.tsx               |   2 +-
 .../src/components/pagination/pagination.tsx  |   2 +-
 .../src/components/pill/pill-switch.tsx       |   2 +-
 packages/propel/src/components/pill/pill.tsx  |   2 +-
 .../radio-group-field-option.tsx              |   2 +-
 .../radio-group-field/radio-group-field.tsx   |   2 +-
 .../components/select-field/select-field.tsx  |   4 +-
 .../propel/src/components/select/index.tsx    |   4 -
 .../src/components/select/select-item.tsx     |   3 +-
 .../propel/src/components/shortcut/index.tsx  |  24 ++
 .../propel/src/components/slider/slider.tsx   |   3 +-
 .../components/switch-field/switch-field.tsx  |   2 +-
 .../src/components/table/table-head.tsx       |   2 +-
 packages/propel/src/components/tabs/tab.tsx   |   2 +-
 .../text-area-field/text-area-field.tsx       |   2 +-
 .../toolbar/toolbar-menu-trigger.tsx          |   3 +-
 .../components/toolbar/toolbar.stories.tsx    |  14 +-
 .../propel/src/components/tooltip/index.tsx   |   2 -
 .../components/tooltip/tooltip.stories.tsx    |  18 +-
 .../propel/src/components/tooltip/tooltip.tsx |  16 +-
 .../propel/src/elements/avatar/avatar.tsx     |   6 +-
 .../src/elements/combobox/combobox-label.tsx  |  15 --
 .../elements/combobox/combobox.stories.tsx    |  25 +-
 .../propel/src/elements/combobox/index.tsx    |   1 -
 .../propel/src/elements/combobox/variants.ts  |   2 -
 .../context-menu/context-menu-group-label.tsx |  20 --
 .../context-menu-item-shortcut.tsx            |  21 --
 .../context-menu/context-menu.stories.tsx     |  54 ++--
 .../src/elements/context-menu/index.tsx       |   2 -
 .../src/elements/context-menu/variants.ts     |   9 +-
 packages/propel/src/elements/menu/index.tsx   |   4 +-
 .../src/elements/menu/menu-group-label.tsx    |  15 --
 .../elements/menu/menu-item-end-content.tsx   |  16 ++
 .../src/elements/menu/menu-item-meta.tsx      |  12 -
 .../src/elements/menu/menu-item-trailing.tsx  |  16 --
 .../propel/src/elements/menu/menu.stories.tsx |  66 ++---
 packages/propel/src/elements/menu/variants.ts |  32 +--
 .../propel/src/elements/popover/index.tsx     |   6 -
 .../src/elements/popover/popover-actions.tsx  |  16 --
 .../src/elements/popover/popover-arrow.tsx    |  17 --
 .../src/elements/popover/popover-body.tsx     |  17 --
 .../src/elements/popover/popover-close.tsx    |  18 --
 .../src/elements/popover/popover-intro.tsx    |  16 --
 .../elements/popover/popover-panel-popup.tsx  |   3 +-
 .../src/elements/popover/popover-popup.tsx    |  18 --
 .../src/elements/popover/popover.stories.tsx  | 240 ++----------------
 .../propel/src/elements/popover/variants.ts   |  39 +--
 .../propel/src/elements/scroll-area/index.tsx |   1 -
 .../scroll-area/scroll-area-content.tsx       |  15 --
 .../scroll-area/scroll-area.stories.tsx       |  30 +--
 .../src/elements/scroll-area/variants.ts      |   1 -
 packages/propel/src/elements/select/index.tsx |   2 -
 .../select/select-scroll-down-arrow.tsx       |  15 --
 .../select/select-scroll-up-arrow.tsx         |  12 -
 .../src/elements/select/select.stories.tsx    |   8 +-
 .../propel/src/elements/tooltip/index.tsx     |   1 -
 .../src/elements/tooltip/tooltip-shortcut.tsx |  15 --
 .../src/elements/tooltip/tooltip.stories.tsx  |  21 +-
 .../propel/src/elements/tooltip/variants.ts   |   4 -
 .../propel/src/internal/menu-row-parts.ts     |   3 +-
 packages/propel/src/internal/shortcut.tsx     |  37 +++
 .../propel/src/patterns/comment.stories.tsx   |   9 +-
 98 files changed, 405 insertions(+), 838 deletions(-)
 create mode 100644 .changeset/clean-label-slots.md
 create mode 100644 packages/propel/src/components/shortcut/index.tsx
 delete mode 100644 packages/propel/src/elements/combobox/combobox-label.tsx
 delete mode 100644 packages/propel/src/elements/context-menu/context-menu-group-label.tsx
 delete mode 100644 packages/propel/src/elements/context-menu/context-menu-item-shortcut.tsx
 delete mode 100644 packages/propel/src/elements/menu/menu-group-label.tsx
 create mode 100644 packages/propel/src/elements/menu/menu-item-end-content.tsx
 delete mode 100644 packages/propel/src/elements/menu/menu-item-meta.tsx
 delete mode 100644 packages/propel/src/elements/menu/menu-item-trailing.tsx
 delete mode 100644 packages/propel/src/elements/popover/popover-actions.tsx
 delete mode 100644 packages/propel/src/elements/popover/popover-arrow.tsx
 delete mode 100644 packages/propel/src/elements/popover/popover-body.tsx
 delete mode 100644 packages/propel/src/elements/popover/popover-close.tsx
 delete mode 100644 packages/propel/src/elements/popover/popover-intro.tsx
 delete mode 100644 packages/propel/src/elements/popover/popover-popup.tsx
 delete mode 100644 packages/propel/src/elements/scroll-area/scroll-area-content.tsx
 delete mode 100644 packages/propel/src/elements/select/select-scroll-down-arrow.tsx
 delete mode 100644 packages/propel/src/elements/select/select-scroll-up-arrow.tsx
 delete mode 100644 packages/propel/src/elements/tooltip/tooltip-shortcut.tsx
 create mode 100644 packages/propel/src/internal/shortcut.tsx

diff --git a/.changeset/clean-label-slots.md b/.changeset/clean-label-slots.md
new file mode 100644
index 00000000..47ac3748
--- /dev/null
+++ b/.changeset/clean-label-slots.md
@@ -0,0 +1,9 @@
+---
+"@makeplane/propel": minor
+---
+
+Tighten component text props, add a decorative `Shortcut` component slot with `aria-keyshortcuts`
+examples on actionable controls, remove shortcut-specific menu element wrappers, and add an accent
+menu row tone for emphasized menu actions. Remove unused/story-only element exports, including
+group-label wrappers, popover anatomy wrappers, pass-through select scroll arrows, scroll-area
+content, tooltip shortcut, and the unused `initialsToneClass` avatar style-map export.
diff --git a/packages/propel/src/components/accordion/accordion-trigger.tsx b/packages/propel/src/components/accordion/accordion-trigger.tsx
index b27b9c86..e5b90229 100644
--- a/packages/propel/src/components/accordion/accordion-trigger.tsx
+++ b/packages/propel/src/components/accordion/accordion-trigger.tsx
@@ -18,7 +18,7 @@ export type AccordionTriggerProps = Omit<
    */
   icon?: React.ReactNode;
   /** Visible trigger label. */
-  label: React.ReactNode;
+  label: string;
 };
 
 /**
diff --git a/packages/propel/src/components/anchor-button/anchor-button.tsx b/packages/propel/src/components/anchor-button/anchor-button.tsx
index c3576888..931ad4b3 100644
--- a/packages/propel/src/components/anchor-button/anchor-button.tsx
+++ b/packages/propel/src/components/anchor-button/anchor-button.tsx
@@ -23,7 +23,7 @@ export type AnchorButtonProps = Omit<AnchorButtonElementProps, "children"> & {
   /** Element rendered after the label (inline-end), e.g. `<Icon icon={ArrowUpRight} />`. */
   endIcon?: React.ReactNode;
   /** Visible action/link label. */
-  label: React.ReactNode;
+  label: string;
   /** Shows a spinner, sets `aria-busy`, and makes the control non-interactive. */
   loading?: boolean;
 };
diff --git a/packages/propel/src/components/autocomplete-field/autocomplete-field.tsx b/packages/propel/src/components/autocomplete-field/autocomplete-field.tsx
index c7764b5c..4824bd41 100644
--- a/packages/propel/src/components/autocomplete-field/autocomplete-field.tsx
+++ b/packages/propel/src/components/autocomplete-field/autocomplete-field.tsx
@@ -35,7 +35,7 @@ export type AutocompleteFieldProps<Value = string> = Omit<
   /** Items rendered in the popup. */
   items: readonly Value[];
   /** Visible field label. */
-  label: React.ReactNode;
+  label: string;
   /** Label and helper text size. */
   magnitude: FieldMagnitude;
   /** Input placeholder. */
diff --git a/packages/propel/src/components/badge/badge.tsx b/packages/propel/src/components/badge/badge.tsx
index c82a77c2..6a7a021a 100644
--- a/packages/propel/src/components/badge/badge.tsx
+++ b/packages/propel/src/components/badge/badge.tsx
@@ -7,8 +7,8 @@ import {
 } from "../../elements/badge";
 
 export type BadgeProps = Omit<BadgeElementProps, "children"> & {
-  /** The badge label — text, a count, or any inline content. */
-  label?: React.ReactNode;
+  /** The badge label text. */
+  label?: string;
   /** Element rendered before the label (inline-start), e.g. `<Icon icon={Check} />`. */
   startIcon?: React.ReactNode;
   /** Element rendered after the label (inline-end), e.g. `<Icon icon={Sparkles} />`. */
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx
index 92eec5b4..04317ade 100644
--- a/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx
@@ -12,7 +12,7 @@ export type BreadcrumbMenuTriggerProps = Omit<
   /** Leading element, typically `<Icon icon={...} tint="tertiary" magnitude="md" />`. */
   icon?: React.ReactNode;
   /** The crumb label. */
-  label?: React.ReactNode;
+  label?: string;
 };
 
 /** The crumb that opens a `BreadcrumbMenu`. */
diff --git a/packages/propel/src/components/button/button.tsx b/packages/propel/src/components/button/button.tsx
index ab6e27ee..c55c50e2 100644
--- a/packages/propel/src/components/button/button.tsx
+++ b/packages/propel/src/components/button/button.tsx
@@ -20,7 +20,7 @@ export type ButtonProps = Omit<ButtonElementProps, "children"> & {
   /** Element rendered after the label (inline-end), e.g. `<Icon icon={ArrowRight} />`. */
   endIcon?: React.ReactNode;
   /** Visible button label. */
-  label: React.ReactNode;
+  label: string;
   /** Shows a spinner, sets `aria-busy`, and makes the button non-interactive. */
   loading?: boolean;
 };
diff --git a/packages/propel/src/components/checkbox-field/checkbox-field.tsx b/packages/propel/src/components/checkbox-field/checkbox-field.tsx
index 12cd1690..2e4428b1 100644
--- a/packages/propel/src/components/checkbox-field/checkbox-field.tsx
+++ b/packages/propel/src/components/checkbox-field/checkbox-field.tsx
@@ -19,7 +19,7 @@ export type CheckboxFieldProps = Omit<
   /** Error text shown below the control. */
   error?: React.ReactNode;
   /** Visible field label. */
-  label: React.ReactNode;
+  label: string;
   /** Label and helper text size. */
   magnitude: FieldMagnitude;
   /** Optional supporting text announced as the checkbox description. */
diff --git a/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx b/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx
index 209d6f75..73d7c847 100644
--- a/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx
+++ b/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx
@@ -13,7 +13,7 @@ export type CheckboxGroupFieldOptionProps = Omit<
   "aria-label" | "label" | "icon"
 > & {
   /** Visible option label. */
-  label: React.ReactNode;
+  label: string;
   /** Optional supporting text announced as the checkbox description. */
   description?: React.ReactNode;
   /** Label and description size. Inherited from `CheckboxGroupField` when omitted. */
diff --git a/packages/propel/src/components/checkbox-group-field/checkbox-group-field.tsx b/packages/propel/src/components/checkbox-group-field/checkbox-group-field.tsx
index f56fca1b..4e5736e0 100644
--- a/packages/propel/src/components/checkbox-group-field/checkbox-group-field.tsx
+++ b/packages/propel/src/components/checkbox-group-field/checkbox-group-field.tsx
@@ -19,7 +19,7 @@ export type CheckboxGroupFieldProps = Omit<CheckboxGroupProps, "children" | "den
   /** Helper text shown below the group. Replaced by `error` when an error is set. */
   hint?: React.ReactNode;
   /** Visible fieldset legend. */
-  label: React.ReactNode;
+  label: string;
   /** Legend and helper text size. */
   magnitude: FieldMagnitude;
   /** Submitted field name. */
diff --git a/packages/propel/src/components/checkbox/checkbox.tsx b/packages/propel/src/components/checkbox/checkbox.tsx
index d1c425f8..c0492f01 100644
--- a/packages/propel/src/components/checkbox/checkbox.tsx
+++ b/packages/propel/src/components/checkbox/checkbox.tsx
@@ -16,7 +16,7 @@ export type CheckboxProps = Omit<BaseCheckbox.Root.Props, "className" | "style"
    * bare checkbox (just the box) — in that case give the box an accessible name with `aria-label`
    * or `aria-labelledby`.
    */
-  label?: React.ReactNode;
+  label?: string;
   /** Width of the clickable label row when `label` is present. */
   sizing?: CheckboxLabelSizing;
   /**
diff --git a/packages/propel/src/components/combobox-field/combobox-field.tsx b/packages/propel/src/components/combobox-field/combobox-field.tsx
index 1f4e5eaa..5d87c46f 100644
--- a/packages/propel/src/components/combobox-field/combobox-field.tsx
+++ b/packages/propel/src/components/combobox-field/combobox-field.tsx
@@ -37,7 +37,7 @@ export type ComboboxFieldProps<Value = string> = Omit<
   /** Items rendered in the popup. */
   items: readonly Value[];
   /** Visible field label. */
-  label: React.ReactNode;
+  label: string;
   /** Label and helper text size. */
   magnitude: FieldMagnitude;
   /** Input placeholder. */
diff --git a/packages/propel/src/components/combobox/combobox-item.tsx b/packages/propel/src/components/combobox/combobox-item.tsx
index 54818997..487d24d2 100644
--- a/packages/propel/src/components/combobox/combobox-item.tsx
+++ b/packages/propel/src/components/combobox/combobox-item.tsx
@@ -1,5 +1,4 @@
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-import type * as React from "react";
 
 import { ListboxItem, type ListboxItemMagnitude } from "../../internal/listbox-item";
 // Ready-made marker that supplies the default check glyph (defaults are a `components` concern).
@@ -12,7 +11,7 @@ export type ComboboxItemProps = Omit<
   /** Row height and text size. Required. */
   magnitude: ListboxItemMagnitude;
   /** Option label. */
-  label: React.ReactNode;
+  label: string;
 };
 
 /**
diff --git a/packages/propel/src/components/combobox/index.tsx b/packages/propel/src/components/combobox/index.tsx
index 59713fe4..07338e29 100644
--- a/packages/propel/src/components/combobox/index.tsx
+++ b/packages/propel/src/components/combobox/index.tsx
@@ -12,10 +12,4 @@ export * from "./combobox-item-indicator";
 export * from "./combobox-list";
 export * from "./combobox-row";
 export * from "./combobox-status";
-// The ready-mades above bundle every Base UI behavior part (`Clear`/`Trigger` as node props on
-// `ComboboxInputGroup`; `Portal`/`Positioner`/`Popup` inside `ComboboxContent`;
-// `Value`/`Chip`/`ChipRemove` inside `ComboboxChips`; `List` as a passthrough), so a full combobox
-// composes from this entry without importing `@base-ui/react`. `ComboboxLabel` stays a styled
-// `elements` part — graft it onto `BaseCombobox.Label` at the call site for the advanced anatomy.
-export { ComboboxLabel, type ComboboxLabelProps } from "../../elements/combobox";
 export * from "./use-filter";
diff --git a/packages/propel/src/components/context-menu/context-menu-checkbox-item.tsx b/packages/propel/src/components/context-menu/context-menu-checkbox-item.tsx
index 737287a5..02029551 100644
--- a/packages/propel/src/components/context-menu/context-menu-checkbox-item.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-checkbox-item.tsx
@@ -6,7 +6,6 @@ import {
   ContextMenuCheckboxItem as ContextMenuCheckboxItemElement,
   ContextMenuCheckboxItemIndicator,
   ContextMenuItemLabel,
-  ContextMenuItemShortcut,
   type ContextMenuItemTone,
 } from "../../elements/context-menu";
 
@@ -19,9 +18,9 @@ export type ContextMenuCheckboxItemProps = Omit<
   /** Leading element after the tick, e.g. `<Icon icon={Columns} />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
-  label: React.ReactNode;
-  /** Element rendered at the inline end of the row, often a keyboard shortcut. */
-  endContent?: React.ReactNode;
+  label: string;
+  /** Element rendered at the inline end of the row, e.g. `<Shortcut keys="⌘ K" />`. */
+  endContent?: React.ReactElement;
 };
 
 /**
@@ -49,7 +48,7 @@ export function ContextMenuCheckboxItem({
       </BaseContextMenu.CheckboxItemIndicator>
       {icon}
       <ContextMenuItemLabel>{label}</ContextMenuItemLabel>
-      {endContent != null ? <ContextMenuItemShortcut>{endContent}</ContextMenuItemShortcut> : null}
+      {endContent}
     </BaseContextMenu.CheckboxItem>
   );
 }
diff --git a/packages/propel/src/components/context-menu/context-menu-group.tsx b/packages/propel/src/components/context-menu/context-menu-group.tsx
index 1639d13c..74590964 100644
--- a/packages/propel/src/components/context-menu/context-menu-group.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-group.tsx
@@ -2,7 +2,7 @@ import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 
 export type ContextMenuGroupProps = Omit<BaseContextMenu.Group.Props, "className" | "style">;
 
-/** Groups related rows so a `ContextMenuGroupLabel` names them for assistive tech. */
+/** Groups related rows; provide `aria-label`/`aria-labelledby` when the group needs a name. */
 export function ContextMenuGroup(props: ContextMenuGroupProps) {
   return <BaseContextMenu.Group {...props} />;
 }
diff --git a/packages/propel/src/components/context-menu/context-menu-item.tsx b/packages/propel/src/components/context-menu/context-menu-item.tsx
index 96ba46e0..cfaba5c7 100644
--- a/packages/propel/src/components/context-menu/context-menu-item.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-item.tsx
@@ -7,7 +7,6 @@ import {
   ContextMenuItemLabel,
   ContextMenuItem as ContextMenuItemElement,
   type ContextMenuItemTone,
-  ContextMenuItemShortcut,
 } from "../../elements/context-menu";
 
 export type ContextMenuItemProps = Omit<
@@ -19,9 +18,9 @@ export type ContextMenuItemProps = Omit<
   /** Leading element before the label, e.g. `<Icon icon={Copy} />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
-  label: React.ReactNode;
-  /** Element rendered at the inline end of the row, often a keyboard shortcut. */
-  endContent?: React.ReactNode;
+  label: string;
+  /** Element rendered at the inline end of the row, e.g. `<Shortcut keys="⌘ K" />`. */
+  endContent?: React.ReactElement;
   /** Single-select selected state. */
   selected?: boolean;
 };
@@ -43,7 +42,7 @@ export function ContextMenuItem({
     <BaseContextMenu.Item {...props} render={<ContextMenuItemElement tone={tone} />}>
       {icon}
       <ContextMenuItemLabel>{label}</ContextMenuItemLabel>
-      {endContent != null ? <ContextMenuItemShortcut>{endContent}</ContextMenuItemShortcut> : null}
+      {endContent}
       {selected ? (
         <ContextMenuItemIndicator data-selected="">
           <Check />
diff --git a/packages/propel/src/components/context-menu/context-menu-link-item.tsx b/packages/propel/src/components/context-menu/context-menu-link-item.tsx
index cd6aa2b5..3576ec87 100644
--- a/packages/propel/src/components/context-menu/context-menu-link-item.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-link-item.tsx
@@ -5,7 +5,6 @@ import {
   ContextMenuItemLabel,
   ContextMenuLinkItem as ContextMenuLinkItemElement,
   type ContextMenuItemTone,
-  ContextMenuItemShortcut,
 } from "../../elements/context-menu";
 
 export type ContextMenuLinkItemProps = Omit<
@@ -17,9 +16,9 @@ export type ContextMenuLinkItemProps = Omit<
   /** Leading element before the label, e.g. `<Icon icon={ExternalLink} />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
-  label: React.ReactNode;
-  /** Element rendered at the inline end of the row. */
-  endContent?: React.ReactNode;
+  label: string;
+  /** Element rendered at the inline end of the row, e.g. `<Shortcut keys="⌘ K" />`. */
+  endContent?: React.ReactElement;
 };
 
 /**
@@ -38,7 +37,7 @@ export function ContextMenuLinkItem({
     <BaseContextMenu.LinkItem {...props} render={<ContextMenuLinkItemElement tone={tone} />}>
       {icon}
       <ContextMenuItemLabel>{label}</ContextMenuItemLabel>
-      {endContent != null ? <ContextMenuItemShortcut>{endContent}</ContextMenuItemShortcut> : null}
+      {endContent}
     </BaseContextMenu.LinkItem>
   );
 }
diff --git a/packages/propel/src/components/context-menu/context-menu-radio-item.tsx b/packages/propel/src/components/context-menu/context-menu-radio-item.tsx
index e6692504..649b91aa 100644
--- a/packages/propel/src/components/context-menu/context-menu-radio-item.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-radio-item.tsx
@@ -4,7 +4,6 @@ import type * as React from "react";
 
 import {
   ContextMenuItemLabel,
-  ContextMenuItemShortcut,
   type ContextMenuItemTone,
   ContextMenuRadioItem as ContextMenuRadioItemElement,
   ContextMenuRadioItemIndicator,
@@ -19,9 +18,9 @@ export type ContextMenuRadioItemProps = Omit<
   /** Leading element after the radio dot, e.g. `<Icon icon={AlignLeft} />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
-  label: React.ReactNode;
-  /** Element rendered at the inline end of the row, often a keyboard shortcut. */
-  endContent?: React.ReactNode;
+  label: string;
+  /** Element rendered at the inline end of the row, e.g. `<Shortcut keys="⌘ K" />`. */
+  endContent?: React.ReactElement;
 };
 
 /**
@@ -43,7 +42,7 @@ export function ContextMenuRadioItem({
       </BaseContextMenu.RadioItemIndicator>
       {icon}
       <ContextMenuItemLabel>{label}</ContextMenuItemLabel>
-      {endContent != null ? <ContextMenuItemShortcut>{endContent}</ContextMenuItemShortcut> : null}
+      {endContent}
     </BaseContextMenu.RadioItem>
   );
 }
diff --git a/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx b/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx
index 1941b212..b845e431 100644
--- a/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx
+++ b/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx
@@ -4,7 +4,6 @@ import type * as React from "react";
 
 import {
   ContextMenuItemLabel,
-  ContextMenuItemShortcut,
   ContextMenuSubmenuTrigger as ContextMenuSubmenuTriggerElement,
   type ContextMenuSubmenuTriggerTone,
 } from "../../elements/context-menu";
@@ -19,9 +18,9 @@ export type ContextMenuSubmenuTriggerProps = Omit<
   /** Leading element before the label, e.g. `<Icon icon={Folder} />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
-  label: React.ReactNode;
+  label: string;
   /** Element rendered before the submenu caret at the inline end of the row. */
-  endContent?: React.ReactNode;
+  endContent?: React.ReactElement;
 };
 
 /**
@@ -43,7 +42,7 @@ export function ContextMenuSubmenuTrigger({
     >
       {icon}
       <ContextMenuItemLabel>{label}</ContextMenuItemLabel>
-      {endContent != null ? <ContextMenuItemShortcut>{endContent}</ContextMenuItemShortcut> : null}
+      {endContent}
       <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
         <ChevronDown />
       </DisclosureIndicator>
diff --git a/packages/propel/src/components/context-menu/context-menu.stories.tsx b/packages/propel/src/components/context-menu/context-menu.stories.tsx
index 281fd18a..8b9494e2 100644
--- a/packages/propel/src/components/context-menu/context-menu.stories.tsx
+++ b/packages/propel/src/components/context-menu/context-menu.stories.tsx
@@ -13,6 +13,7 @@ import * as React from "react";
 import { expect, fireEvent, userEvent, waitFor, within } from "storybook/test";
 
 import { Icon } from "../icon";
+import { Shortcut } from "../shortcut";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -63,14 +64,22 @@ export const Default: Story = {
         <ContextMenuItem
           tone="neutral"
           icon={<Icon icon={Scissors} />}
-          endContent="⌘X"
+          aria-keyshortcuts="Meta+X"
+          endContent={<Shortcut keys="⌘X" />}
           label="Cut"
         />
-        <ContextMenuItem tone="neutral" icon={<Icon icon={Copy} />} endContent="⌘C" label="Copy" />
+        <ContextMenuItem
+          tone="neutral"
+          icon={<Icon icon={Copy} />}
+          aria-keyshortcuts="Meta+C"
+          endContent={<Shortcut keys="⌘C" />}
+          label="Copy"
+        />
         <ContextMenuItem
           tone="neutral"
           icon={<Icon icon={ClipboardPaste} />}
-          endContent="⌘V"
+          aria-keyshortcuts="Meta+V"
+          endContent={<Shortcut keys="⌘V" />}
           label="Paste"
         />
         <ContextMenuSeparator />
@@ -88,6 +97,10 @@ export const DefaultInteraction: Story = {
     await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
     await expect(document.body).toHaveTextContent("Copy");
     await expect(document.body).toHaveTextContent("Delete");
+    const copy = within(document.body).getByRole("menuitem", { name: "Copy" });
+    await expect(copy).toHaveAttribute("aria-keyshortcuts", "Meta+C");
+    await expect(copy).toHaveAccessibleName("Copy");
+    await expect(within(copy).getByText("⌘C")).toHaveAttribute("aria-hidden", "true");
   },
 };
 
@@ -228,7 +241,8 @@ export const LinkItems: Story = {
         <ContextMenuItem
           tone="neutral"
           icon={<Icon icon={Copy} />}
-          endContent="⌘C"
+          aria-keyshortcuts="Meta+C"
+          endContent={<Shortcut keys="⌘C" />}
           label="Copy link"
         />
       </ContextMenuContent>
diff --git a/packages/propel/src/components/context-menu/index.tsx b/packages/propel/src/components/context-menu/index.tsx
index c34c5488..3c4d70a1 100644
--- a/packages/propel/src/components/context-menu/index.tsx
+++ b/packages/propel/src/components/context-menu/index.tsx
@@ -19,14 +19,10 @@ export * from "./context-menu-radio-item";
 export {
   ContextMenuCheckboxItemIndicator,
   type ContextMenuCheckboxItemIndicatorProps,
-  ContextMenuGroupLabel,
-  type ContextMenuGroupLabelProps,
   ContextMenuItemIndicator,
   type ContextMenuItemIndicatorProps,
   ContextMenuItemLabel,
   type ContextMenuItemLabelProps,
-  ContextMenuItemShortcut,
-  type ContextMenuItemShortcutProps,
   type ContextMenuItemTone,
   ContextMenuRadioItemIndicator,
   type ContextMenuRadioItemIndicatorProps,
diff --git a/packages/propel/src/components/field/field-label-group.tsx b/packages/propel/src/components/field/field-label-group.tsx
index daa10eb2..c1f00896 100644
--- a/packages/propel/src/components/field/field-label-group.tsx
+++ b/packages/propel/src/components/field/field-label-group.tsx
@@ -11,7 +11,7 @@ import { FieldLabel } from "./field-label";
 export type FieldLabelGroupProps = FieldLabelGroupVariantProps & {
   magnitude: InputMagnitude;
   required?: boolean;
-  label?: React.ReactNode;
+  label?: string;
   description?: React.ReactNode;
 };
 
diff --git a/packages/propel/src/components/input-field/input-field.tsx b/packages/propel/src/components/input-field/input-field.tsx
index 9b0fe5ae..aa9408ff 100644
--- a/packages/propel/src/components/input-field/input-field.tsx
+++ b/packages/propel/src/components/input-field/input-field.tsx
@@ -19,7 +19,7 @@ export type InputFieldProps = Omit<
   /** Magnitude scale. `md` | `lg` | `xl`. */
   magnitude: InputMagnitude;
   /** Label text shown above (or beside) the control. */
-  label?: React.ReactNode;
+  label?: string;
   /** Marks the field required: adds a `*` asterisk and sets `required`. */
   required?: boolean;
   /** Supporting text shown directly below the label. */
diff --git a/packages/propel/src/components/linear-progress/linear-progress.tsx b/packages/propel/src/components/linear-progress/linear-progress.tsx
index 0302a1ac..da06ecf3 100644
--- a/packages/propel/src/components/linear-progress/linear-progress.tsx
+++ b/packages/propel/src/components/linear-progress/linear-progress.tsx
@@ -1,5 +1,4 @@
 import { Progress as BaseProgress } from "@base-ui/react/progress";
-import type * as React from "react";
 
 import {
   LinearProgress as LinearProgressElement,
@@ -27,7 +26,7 @@ export type LinearProgressProps = Omit<BaseProgress.Root.Props, "className" | "s
   /** Show the trailing percentage label. @default true */
   showValue?: boolean;
   /** Visible text label before the track — Base UI's `Progress.Label` (also names the bar). */
-  label?: React.ReactNode;
+  label?: string;
   /** Accessible name (required — the visible % is not a substitute). */
   "aria-label": string;
 };
diff --git a/packages/propel/src/components/list/list-item-button.tsx b/packages/propel/src/components/list/list-item-button.tsx
index ebef9f3a..79f1b64f 100644
--- a/packages/propel/src/components/list/list-item-button.tsx
+++ b/packages/propel/src/components/list/list-item-button.tsx
@@ -11,7 +11,7 @@ export type ListItemButtonProps = Omit<
   /** Element rendered before the label, usually `<Icon icon={...} />`. */
   icon?: React.ReactNode;
   /** Visible row label. */
-  label: React.ReactNode;
+  label: string;
 };
 
 /**
diff --git a/packages/propel/src/components/list/list-item-link.tsx b/packages/propel/src/components/list/list-item-link.tsx
index a89c698f..547ce751 100644
--- a/packages/propel/src/components/list/list-item-link.tsx
+++ b/packages/propel/src/components/list/list-item-link.tsx
@@ -11,7 +11,7 @@ export type ListItemLinkProps = Omit<
   /** Element rendered before the label, usually `<Icon icon={...} />`. */
   icon?: React.ReactNode;
   /** Visible row label. */
-  label: React.ReactNode;
+  label: string;
 };
 
 /**
diff --git a/packages/propel/src/components/list/list-section.tsx b/packages/propel/src/components/list/list-section.tsx
index 2cc13386..950e4c70 100644
--- a/packages/propel/src/components/list/list-section.tsx
+++ b/packages/propel/src/components/list/list-section.tsx
@@ -8,7 +8,7 @@ import { DisclosureIndicator } from "../../internal/disclosure-indicator";
 
 export type ListSectionProps = Omit<BaseCollapsible.Root.Props, "className" | "style"> & {
   /** The section heading shown in the toggle. */
-  label: React.ReactNode;
+  label: string;
   /** The section body — typically a `List` of rows. */
   children: React.ReactNode;
   /** Whether to show the rotating disclosure chevron at the heading's inline-end. */
diff --git a/packages/propel/src/components/menu/index.tsx b/packages/propel/src/components/menu/index.tsx
index aac1be97..78eb5774 100644
--- a/packages/propel/src/components/menu/index.tsx
+++ b/packages/propel/src/components/menu/index.tsx
@@ -25,16 +25,12 @@ export * from "./menu-viewport";
 export {
   MenuCheckboxItemIndicator,
   type MenuCheckboxItemIndicatorProps,
-  MenuGroupLabel,
-  type MenuGroupLabelProps,
   MenuItemContent,
   type MenuItemContentProps,
   MenuItemControl,
   type MenuItemControlProps,
   MenuItemDescription,
   type MenuItemDescriptionProps,
-  MenuItemMeta,
-  type MenuItemMetaProps,
   MenuItemSecondaryText,
   type MenuItemSecondaryTextProps,
   MenuItemIndicator,
@@ -43,8 +39,8 @@ export {
   type MenuItemTitleProps,
   MenuItemTitleRow,
   type MenuItemTitleRowProps,
-  MenuItemTrailing,
-  type MenuItemTrailingProps,
+  MenuItemEndContent,
+  type MenuItemEndContentProps,
   MenuLabelMeta,
   type MenuLabelMetaProps,
   MenuLabelTitle,
diff --git a/packages/propel/src/components/menu/menu-checkbox-item.tsx b/packages/propel/src/components/menu/menu-checkbox-item.tsx
index 739093d9..5766a406 100644
--- a/packages/propel/src/components/menu/menu-checkbox-item.tsx
+++ b/packages/propel/src/components/menu/menu-checkbox-item.tsx
@@ -7,7 +7,7 @@ import {
   MenuCheckboxItemIndicator,
   MenuItemContent,
   MenuItemControl,
-  MenuItemMeta,
+  MenuItemEndContent,
   MenuItemTitle,
   MenuItemTitleRow,
   type MenuItemTone,
@@ -17,14 +17,14 @@ export type MenuCheckboxItemProps = Omit<
   BaseMenu.CheckboxItem.Props,
   "children" | "className" | "label" | "style"
 > & {
-  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  /** Row text palette. */
   tone?: MenuItemTone;
   /** Leading element shown after the checkbox, e.g. `<Icon icon={Settings} tint="secondary" />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
-  label: React.ReactNode;
-  /** Element rendered at the inline end of the row. */
-  endContent?: React.ReactNode;
+  label: string;
+  /** Element rendered at the inline end of the row, e.g. `<Shortcut keys="⌘ K" />`. */
+  endContent?: React.ReactElement;
 };
 
 /**
@@ -55,7 +55,7 @@ export function MenuCheckboxItem({
           <MenuItemTitle>{label}</MenuItemTitle>
         </MenuItemTitleRow>
       </MenuItemContent>
-      {endContent != null ? <MenuItemMeta>{endContent}</MenuItemMeta> : null}
+      {endContent != null ? <MenuItemEndContent>{endContent}</MenuItemEndContent> : null}
     </BaseMenu.CheckboxItem>
   );
 }
diff --git a/packages/propel/src/components/menu/menu-item.tsx b/packages/propel/src/components/menu/menu-item.tsx
index 902dc466..e1d87167 100644
--- a/packages/propel/src/components/menu/menu-item.tsx
+++ b/packages/propel/src/components/menu/menu-item.tsx
@@ -11,33 +11,33 @@ import {
   MenuItemIndicator,
   MenuItemTitle,
   MenuItemTitleRow,
-  MenuItemTrailing,
+  MenuItemEndContent,
 } from "../../elements/menu";
 
 export type MenuItemProps = Omit<
   BaseMenu.Item.Props,
   "children" | "className" | "label" | "style"
 > & {
-  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  /** Row text palette. */
   tone?: MenuItemTone;
   /** Leading element before the label, e.g. `<Icon icon={Settings} tint="secondary" />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
-  label: React.ReactNode;
+  label: string;
   /** Muted secondary line under the label. */
-  description?: React.ReactNode;
+  description?: string;
   /** Muted text shown inline after the label. */
-  secondaryText?: React.ReactNode;
-  /** Element rendered at the inline end of the row. */
-  endContent?: React.ReactNode;
+  secondaryText?: string;
+  /** Element rendered at the inline end of the row, e.g. `<Shortcut keys="⌘ K" />`. */
+  endContent?: React.ReactElement;
   /** Single-select selected state. */
   selected?: boolean;
 };
 
 /**
  * The ready-made selectable menu row: grafts Base UI's `Menu.Item` behavior onto the styled
- * `MenuItem` and lays out an optional leading icon, label, secondary line, and end content, plus
- * the single-select check indicator.
+ * `MenuItem` and lays out an optional leading icon, label, secondary line, and inline-end content,
+ * plus the single-select check indicator.
  */
 export function MenuItem({
   tone,
@@ -63,7 +63,7 @@ export function MenuItem({
         </MenuItemTitleRow>
         {description != null ? <MenuItemDescription>{description}</MenuItemDescription> : null}
       </MenuItemContent>
-      {endContent != null ? <MenuItemTrailing>{endContent}</MenuItemTrailing> : null}
+      {endContent != null ? <MenuItemEndContent>{endContent}</MenuItemEndContent> : null}
       {selected ? (
         <MenuItemIndicator>
           <Check />
diff --git a/packages/propel/src/components/menu/menu-link-item.tsx b/packages/propel/src/components/menu/menu-link-item.tsx
index 1b48a864..ebe3d19c 100644
--- a/packages/propel/src/components/menu/menu-link-item.tsx
+++ b/packages/propel/src/components/menu/menu-link-item.tsx
@@ -5,7 +5,7 @@ import {
   MenuItemContent,
   MenuItemTitle,
   MenuItemTitleRow,
-  MenuItemTrailing,
+  MenuItemEndContent,
   MenuLinkItem as MenuLinkItemElement,
   type MenuItemTone,
 } from "../../elements/menu";
@@ -14,14 +14,14 @@ export type MenuLinkItemProps = Omit<
   BaseMenu.LinkItem.Props,
   "children" | "className" | "label" | "style"
 > & {
-  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  /** Row text palette. */
   tone?: MenuItemTone;
   /** Leading element before the label, e.g. `<Icon icon={ExternalLink} tint="secondary" />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
-  label: React.ReactNode;
-  /** Element rendered at the inline end of the row. */
-  endContent?: React.ReactNode;
+  label: string;
+  /** Element rendered at the inline end of the row, e.g. `<Shortcut keys="⌘ K" />`. */
+  endContent?: React.ReactElement;
 };
 
 /**
@@ -37,7 +37,7 @@ export function MenuLinkItem({ tone, icon, label, endContent, ...props }: MenuLi
           <MenuItemTitle>{label}</MenuItemTitle>
         </MenuItemTitleRow>
       </MenuItemContent>
-      {endContent != null ? <MenuItemTrailing>{endContent}</MenuItemTrailing> : null}
+      {endContent != null ? <MenuItemEndContent>{endContent}</MenuItemEndContent> : null}
     </BaseMenu.LinkItem>
   );
 }
diff --git a/packages/propel/src/components/menu/menu-radio-item.tsx b/packages/propel/src/components/menu/menu-radio-item.tsx
index a9b9d58b..bb68dfd9 100644
--- a/packages/propel/src/components/menu/menu-radio-item.tsx
+++ b/packages/propel/src/components/menu/menu-radio-item.tsx
@@ -5,7 +5,7 @@ import type * as React from "react";
 import {
   MenuItemContent,
   MenuItemControl,
-  MenuItemMeta,
+  MenuItemEndContent,
   MenuItemTitle,
   MenuItemTitleRow,
   type MenuItemTone,
@@ -17,14 +17,14 @@ export type MenuRadioItemProps = Omit<
   BaseMenu.RadioItem.Props,
   "children" | "className" | "label" | "style"
 > & {
-  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  /** Row text palette. */
   tone?: MenuItemTone;
   /** Leading element shown after the radio dot, e.g. `<Icon icon={Settings} tint="secondary" />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
-  label: React.ReactNode;
-  /** Element rendered at the inline end of the row. */
-  endContent?: React.ReactNode;
+  label: string;
+  /** Element rendered at the inline end of the row, e.g. `<Shortcut keys="⌘ K" />`. */
+  endContent?: React.ReactElement;
 };
 
 /**
@@ -48,7 +48,7 @@ export function MenuRadioItem({ tone, icon, label, endContent, ...props }: MenuR
           <MenuItemTitle>{label}</MenuItemTitle>
         </MenuItemTitleRow>
       </MenuItemContent>
-      {endContent != null ? <MenuItemMeta>{endContent}</MenuItemMeta> : null}
+      {endContent != null ? <MenuItemEndContent>{endContent}</MenuItemEndContent> : null}
     </BaseMenu.RadioItem>
   );
 }
diff --git a/packages/propel/src/components/menu/menu-submenu-trigger.tsx b/packages/propel/src/components/menu/menu-submenu-trigger.tsx
index 05d44d2f..be4ac0d6 100644
--- a/packages/propel/src/components/menu/menu-submenu-trigger.tsx
+++ b/packages/propel/src/components/menu/menu-submenu-trigger.tsx
@@ -6,7 +6,7 @@ import {
   MenuItemContent,
   MenuItemTitle,
   MenuItemTitleRow,
-  MenuItemTrailing,
+  MenuItemEndContent,
   type MenuItemTone,
   MenuSubmenuTrigger as MenuSubmenuTriggerElement,
 } from "../../elements/menu";
@@ -16,14 +16,14 @@ export type MenuSubmenuTriggerProps = Omit<
   BaseMenu.SubmenuTrigger.Props,
   "children" | "className" | "label" | "style"
 > & {
-  /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+  /** Row text palette. */
   tone?: MenuItemTone;
   /** Leading element before the label, e.g. `<Icon icon={Folder} tint="secondary" />`. */
   icon?: React.ReactNode;
   /** Primary row label. */
-  label: React.ReactNode;
-  /** Element rendered before the submenu chevron at the inline end of the row. */
-  endContent?: React.ReactNode;
+  label: string;
+  /** Element rendered before the submenu chevron, e.g. `<Shortcut keys="⌘ K" />`. */
+  endContent?: React.ReactElement;
 };
 
 /**
@@ -46,7 +46,7 @@ export function MenuSubmenuTrigger({
           <MenuItemTitle>{label}</MenuItemTitle>
         </MenuItemTitleRow>
       </MenuItemContent>
-      {endContent != null ? <MenuItemTrailing>{endContent}</MenuItemTrailing> : null}
+      {endContent != null ? <MenuItemEndContent>{endContent}</MenuItemEndContent> : null}
       <DisclosureIndicator motion="pointEnd" tint="tertiary" magnitude="inherit">
         <ChevronDown />
       </DisclosureIndicator>
diff --git a/packages/propel/src/components/menu/menu.stories.tsx b/packages/propel/src/components/menu/menu.stories.tsx
index 045ba37e..88364a0d 100644
--- a/packages/propel/src/components/menu/menu.stories.tsx
+++ b/packages/propel/src/components/menu/menu.stories.tsx
@@ -25,6 +25,7 @@ import { expect, userEvent, waitFor, within } from "storybook/test";
 import { Avatar } from "../avatar/index";
 import { Badge } from "../badge/index";
 import { Icon } from "../icon";
+import { Shortcut } from "../shortcut";
 import {
   createMenuHandle,
   Menu,
@@ -160,13 +161,23 @@ const PRIORITIES = [
 ] as const;
 
 const LABELS = [
-  { key: "customer", label: "Customer request", color: "bg-label-orange-bg-strong" },
-  { key: "feedback", label: "Feedback", color: "bg-label-emerald-bg-strong" },
-  { key: "design", label: "Design", color: "bg-label-purple-bg-strong" },
-  { key: "dev", label: "Dev", color: "bg-label-indigo-bg-strong" },
-  { key: "feature", label: "Feature", color: "bg-label-crimson-bg-strong" },
+  { key: "customer", label: "Customer request", tone: "orange" },
+  { key: "feedback", label: "Feedback", tone: "emerald" },
+  { key: "design", label: "Design", tone: "purple" },
+  { key: "dev", label: "Dev", tone: "indigo" },
+  { key: "feature", label: "Feature", tone: "crimson" },
 ] as const;
 
+const labelSwatchClass = {
+  orange: "bg-label-orange-bg-strong",
+  emerald: "bg-label-emerald-bg-strong",
+  purple: "bg-label-purple-bg-strong",
+  indigo: "bg-label-indigo-bg-strong",
+  crimson: "bg-label-crimson-bg-strong",
+} as const;
+
+type LabelSwatchTone = keyof typeof labelSwatchClass;
+
 const ASSIGNEES: ReadonlyArray<{ key: string; name: string; disabled?: boolean }> = [
   { key: "amelia", name: "Amelia Parker" },
   { key: "david", name: "David Wilson" },
@@ -187,8 +198,8 @@ const LANGUAGES = [
 
 // A small color swatch, used as the leading control alongside the Checkbox for
 // labels. Not a propel primitive — local to the demo.
-function ColorSwatch({ className }: { className: string }) {
-  return <span className={`size-3.5 shrink-0 rounded-xs ${className}`} aria-hidden />;
+function ColorSwatch({ tone }: { tone: LabelSwatchTone }) {
+  return <span className={`size-3.5 shrink-0 rounded-xs ${labelSwatchClass[tone]}`} aria-hidden />;
 }
 
 // Initials for an Avatar fallback ("Amelia Parker" -> "AP").
@@ -284,7 +295,7 @@ export const Labels: Story = {
           {visible.map((l) => (
             <MenuCheckboxItem
               key={l.key}
-              icon={<ColorSwatch className={l.color} />}
+              icon={<ColorSwatch tone={l.tone} />}
               checked={Boolean(checked[l.key])}
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [l.key]: next }))}
               label={l.label}
@@ -333,7 +344,8 @@ export const ActionMenu: Story = {
         <MenuItem icon={<Icon icon={ExternalLink} tint="secondary" />} label="Open in new tab" />
         <MenuItem
           icon={<Icon icon={Link2} tint="secondary" />}
-          endContent={<span className="text-12 text-tertiary">⌘L</span>}
+          aria-keyshortcuts="Meta+L"
+          endContent={<Shortcut keys="⌘L" />}
           label="Copy link"
         />
         <MenuSeparator />
@@ -360,6 +372,16 @@ export const ActionMenuInteraction: Story = {
       await expect(archive).toHaveAttribute("data-disabled");
     });
 
+    await step(
+      "shortcut hints stay decorative while the row exposes aria-keyshortcuts",
+      async () => {
+        const copyLink = within(document.body).getByRole("menuitem", { name: "Copy link" });
+        await expect(copyLink).toHaveAttribute("aria-keyshortcuts", "Meta+L");
+        await expect(copyLink).toHaveAccessibleName("Copy link");
+        await expect(within(copyLink).getByText("⌘L")).toHaveAttribute("aria-hidden", "true");
+      },
+    );
+
     // Keyboard ARIA pattern (WAI-ARIA menu button): on the trigger, Enter/Space/
     // ArrowDown open the menu and focus the first item; Arrow Down/Up navigate;
     // Enter activates + closes + returns focus to the trigger; Escape closes +
@@ -802,11 +824,8 @@ export const Filters: Story = {
                       onClick={() =>
                         setExpandedAll((s) => ({ ...s, [section.title]: !isExpandedAll }))
                       }
-                      label={
-                        <span className="text-accent-primary">
-                          {isExpandedAll ? "Show less" : `View all (${items.length})`}
-                        </span>
-                      }
+                      tone="accent"
+                      label={isExpandedAll ? "Show less" : `View all (${items.length})`}
                     />
                   ) : null}
                 </MenuGroup>
diff --git a/packages/propel/src/components/meter/meter.tsx b/packages/propel/src/components/meter/meter.tsx
index 1c88afd9..9be8b3ca 100644
--- a/packages/propel/src/components/meter/meter.tsx
+++ b/packages/propel/src/components/meter/meter.tsx
@@ -1,5 +1,4 @@
 import { Meter as BaseMeter } from "@base-ui/react/meter";
-import type * as React from "react";
 
 import {
   Meter as MeterElement,
@@ -19,7 +18,7 @@ export type MeterProps = Omit<
    * Optional visible label rendered above the track (e.g. "Disk usage"). When omitted, provide an
    * `aria-label` so the gauge is still named for assistive tech.
    */
-  label?: React.ReactNode;
+  label?: string;
   /**
    * Whether to show the formatted value text alongside the label.
    *
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu-trigger.tsx b/packages/propel/src/components/navigation-menu/navigation-menu-trigger.tsx
index a74f2944..d3fe667e 100644
--- a/packages/propel/src/components/navigation-menu/navigation-menu-trigger.tsx
+++ b/packages/propel/src/components/navigation-menu/navigation-menu-trigger.tsx
@@ -15,7 +15,7 @@ export type NavigationMenuTriggerProps = Omit<
   /** Replaces the default disclosure caret (a down chevron) in the trigger's `Icon` slot. */
   icon?: React.ReactNode;
   /** Visible trigger label. */
-  label: React.ReactNode;
+  label: string;
 };
 
 /**
diff --git a/packages/propel/src/components/pagination/pagination.tsx b/packages/propel/src/components/pagination/pagination.tsx
index cbc87ee3..2c21af14 100644
--- a/packages/propel/src/components/pagination/pagination.tsx
+++ b/packages/propel/src/components/pagination/pagination.tsx
@@ -87,7 +87,7 @@ export type PaginationLabels = {
    */
   page: (page: number) => string;
   /** Visible text on the per-page selector trigger, given the size. Defaults to `"50"`. */
-  perPageValue: (pageSize: number) => React.ReactNode;
+  perPageValue: (pageSize: number) => string;
   /** Trailing text after the per-page selector. Defaults to `"per page"`. */
   perPage: string;
 };
diff --git a/packages/propel/src/components/pill/pill-switch.tsx b/packages/propel/src/components/pill/pill-switch.tsx
index fe61443a..3a65926a 100644
--- a/packages/propel/src/components/pill/pill-switch.tsx
+++ b/packages/propel/src/components/pill/pill-switch.tsx
@@ -19,7 +19,7 @@ export type PillSwitchProps<Value extends string = string> = Omit<
   /** Element rendered after the label (inline-end), e.g. `<Icon icon={X} />`. */
   endIcon?: React.ReactNode;
   /** Visible pill label. */
-  label: React.ReactNode;
+  label: string;
 };
 
 /**
diff --git a/packages/propel/src/components/pill/pill.tsx b/packages/propel/src/components/pill/pill.tsx
index 75ceccd3..f077921c 100644
--- a/packages/propel/src/components/pill/pill.tsx
+++ b/packages/propel/src/components/pill/pill.tsx
@@ -15,7 +15,7 @@ export type PillButtonProps = Omit<PillButtonElementProps, "children"> & {
   /** Element rendered after the label (inline-end), e.g. `<Icon icon={X} />`. */
   endIcon?: React.ReactNode;
   /** Visible pill label. */
-  label: React.ReactNode;
+  label: string;
   /** Busy state: swaps the inline-start node for a spinner and blocks clicks. */
   loading?: boolean;
 };
diff --git a/packages/propel/src/components/radio-group-field/radio-group-field-option.tsx b/packages/propel/src/components/radio-group-field/radio-group-field-option.tsx
index 1884400c..88e8dd82 100644
--- a/packages/propel/src/components/radio-group-field/radio-group-field-option.tsx
+++ b/packages/propel/src/components/radio-group-field/radio-group-field-option.tsx
@@ -7,7 +7,7 @@ import { Radio, type RadioProps } from "../radio/radio";
 
 export type RadioGroupFieldOptionProps = RadioProps & {
   /** Visible option label. */
-  label: React.ReactNode;
+  label: string;
   /** Optional supporting text announced as the radio description. */
   description?: React.ReactNode;
   /** Label and description size. Inherited from `RadioGroupField` when omitted. */
diff --git a/packages/propel/src/components/radio-group-field/radio-group-field.tsx b/packages/propel/src/components/radio-group-field/radio-group-field.tsx
index 0d0177bb..9d6f1026 100644
--- a/packages/propel/src/components/radio-group-field/radio-group-field.tsx
+++ b/packages/propel/src/components/radio-group-field/radio-group-field.tsx
@@ -22,7 +22,7 @@ export type RadioGroupFieldProps<Value = string> = Omit<
   /** Helper text shown below the group. Replaced by `error` when an error is set. */
   hint?: React.ReactNode;
   /** Visible fieldset legend. */
-  label: React.ReactNode;
+  label: string;
   /** Legend and helper text size. */
   magnitude: FieldMagnitude;
   /** Submitted field name. */
diff --git a/packages/propel/src/components/select-field/select-field.tsx b/packages/propel/src/components/select-field/select-field.tsx
index 6dcae4bf..3276c471 100644
--- a/packages/propel/src/components/select-field/select-field.tsx
+++ b/packages/propel/src/components/select-field/select-field.tsx
@@ -26,7 +26,7 @@ const SELECT_MAGNITUDE: Record<FieldMagnitude, SelectTriggerMagnitude> = {
 };
 
 export type SelectFieldOption = {
-  label: React.ReactNode;
+  label: string;
   value: string;
 };
 
@@ -38,7 +38,7 @@ export type SelectFieldProps = Omit<SelectProps<string>, "children" | "items"> &
   /** Helper text shown below the control. Replaced by `error` when an error is set. */
   hint?: React.ReactNode;
   /** Visible field label. */
-  label: React.ReactNode;
+  label: string;
   /** Label and helper text size. */
   magnitude: FieldMagnitude;
   /** Options rendered in the popup. */
diff --git a/packages/propel/src/components/select/index.tsx b/packages/propel/src/components/select/index.tsx
index 9cec3f60..8fb24907 100644
--- a/packages/propel/src/components/select/index.tsx
+++ b/packages/propel/src/components/select/index.tsx
@@ -17,9 +17,5 @@ export {
   type SelectFieldProps,
   SelectItemIndicator,
   type SelectItemIndicatorProps,
-  SelectScrollDownArrow,
-  type SelectScrollDownArrowProps,
-  SelectScrollUpArrow,
-  type SelectScrollUpArrowProps,
   type SelectTriggerMagnitude,
 } from "../../elements/select";
diff --git a/packages/propel/src/components/select/select-item.tsx b/packages/propel/src/components/select/select-item.tsx
index 10739501..1a8d8e49 100644
--- a/packages/propel/src/components/select/select-item.tsx
+++ b/packages/propel/src/components/select/select-item.tsx
@@ -1,6 +1,5 @@
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { Check } from "lucide-react";
-import type * as React from "react";
 
 import { SelectItemIndicator } from "../../elements/select";
 import { ListboxItem, type ListboxItemMagnitude } from "../../internal/listbox-item";
@@ -12,7 +11,7 @@ export type SelectItemProps = Omit<
   /** Visual size of the row: controls its height and text size. Required. */
   magnitude: ListboxItemMagnitude;
   /** Option label. */
-  label: React.ReactNode;
+  label: string;
 };
 
 /**
diff --git a/packages/propel/src/components/shortcut/index.tsx b/packages/propel/src/components/shortcut/index.tsx
new file mode 100644
index 00000000..25cb15f0
--- /dev/null
+++ b/packages/propel/src/components/shortcut/index.tsx
@@ -0,0 +1,24 @@
+import {
+  Shortcut as ShortcutSlot,
+  type ShortcutMagnitude,
+  type ShortcutProps as ShortcutSlotProps,
+} from "../../internal/shortcut";
+
+export type { ShortcutMagnitude };
+
+export type ShortcutProps = Omit<ShortcutSlotProps, "children" | "render"> & {
+  /** Keyboard shortcut text, e.g. `"⌘ K"`. */
+  keys: string;
+};
+
+/**
+ * Public shortcut text slot. It is a visual hint by default; put the canonical `aria-keyshortcuts`
+ * value on the actionable item or trigger.
+ */
+export function Shortcut({ keys, "aria-hidden": ariaHidden = true, ...props }: ShortcutProps) {
+  return (
+    <ShortcutSlot aria-hidden={ariaHidden} {...props}>
+      {keys}
+    </ShortcutSlot>
+  );
+}
diff --git a/packages/propel/src/components/slider/slider.tsx b/packages/propel/src/components/slider/slider.tsx
index 501170c4..ada1c88e 100644
--- a/packages/propel/src/components/slider/slider.tsx
+++ b/packages/propel/src/components/slider/slider.tsx
@@ -1,5 +1,4 @@
 import { Slider as BaseSlider } from "@base-ui/react/slider";
-import type * as React from "react";
 
 import {
   Slider as SliderElement,
@@ -18,7 +17,7 @@ export type SliderProps = Omit<BaseSlider.Root.Props<number>, "className" | "sty
    * Optional visible label rendered above the track (e.g. "Volume"). When omitted, provide an
    * `aria-label` for the thumb so the control is still named for assistive tech.
    */
-  label?: React.ReactNode;
+  label?: string;
   /** Accessible name for the thumb. Required when there is no visible `label`. */
   "aria-label"?: string;
   /** Thumb and control size. `sm` = 12 px thumb, `md` = 16 px, `lg` = 20 px. */
diff --git a/packages/propel/src/components/switch-field/switch-field.tsx b/packages/propel/src/components/switch-field/switch-field.tsx
index b7b19483..9ebaa026 100644
--- a/packages/propel/src/components/switch-field/switch-field.tsx
+++ b/packages/propel/src/components/switch-field/switch-field.tsx
@@ -17,7 +17,7 @@ export type SwitchFieldProps = Omit<SwitchProps, "aria-label"> & {
   /** Error text shown below the control. */
   error?: React.ReactNode;
   /** Visible field label. */
-  label: React.ReactNode;
+  label: string;
   /** Optional supporting text announced as the switch description. */
   description?: React.ReactNode;
 };
diff --git a/packages/propel/src/components/table/table-head.tsx b/packages/propel/src/components/table/table-head.tsx
index 1ee371d3..6a46208a 100644
--- a/packages/propel/src/components/table/table-head.tsx
+++ b/packages/propel/src/components/table/table-head.tsx
@@ -27,7 +27,7 @@ const ariaSort: Record<TableHeadSort, React.AriaAttributes["aria-sort"]> = {
 
 export type TableHeadProps = Omit<TableHeadElementProps, "aria-sort" | "children" | "mode"> & {
   /** Header label. */
-  label: React.ReactNode;
+  label: string;
   /** Visually hide the label while keeping it available to assistive tech. */
   visuallyHidden?: boolean;
   /** Whether this header is interactive sortable (renders a sort trigger + reflects `aria-sort`). */
diff --git a/packages/propel/src/components/tabs/tab.tsx b/packages/propel/src/components/tabs/tab.tsx
index fdc3a7da..7238ae4b 100644
--- a/packages/propel/src/components/tabs/tab.tsx
+++ b/packages/propel/src/components/tabs/tab.tsx
@@ -13,7 +13,7 @@ export type TabProps = Omit<BaseTabs.Tab.Props, "children" | "className" | "styl
   /** Element rendered before the label (inline-start), e.g. `<Icon icon={Folder} />`. */
   icon?: React.ReactNode;
   /** Visible tab label. */
-  label: React.ReactNode;
+  label: string;
 };
 
 /**
diff --git a/packages/propel/src/components/text-area-field/text-area-field.tsx b/packages/propel/src/components/text-area-field/text-area-field.tsx
index 41e23a24..3e6aac84 100644
--- a/packages/propel/src/components/text-area-field/text-area-field.tsx
+++ b/packages/propel/src/components/text-area-field/text-area-field.tsx
@@ -14,7 +14,7 @@ export type TextAreaFieldProps = Omit<TextAreaProps, "magnitude" | "surface"> &
   /** Magnitude scale. `md` | `lg` | `xl`. */
   magnitude: InputMagnitude;
   /** Label text shown above the control. */
-  label?: React.ReactNode;
+  label?: string;
   /** Marks the field required: adds a `*` asterisk and sets `required`. */
   required?: boolean;
   /** Supporting text shown directly below the label. */
diff --git a/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx b/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx
index d1cf6b04..76a1cd85 100644
--- a/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx
+++ b/packages/propel/src/components/toolbar/toolbar-menu-trigger.tsx
@@ -1,6 +1,5 @@
 import { Menu } from "@base-ui/react/menu";
 import { ChevronDown } from "lucide-react";
-import type * as React from "react";
 
 import { ToolbarMenuTriggerIndicator, ToolbarMenuTriggerLabel } from "../../elements/toolbar/index";
 import { ToolbarMenuTriggerButton } from "./toolbar-menu-trigger-button";
@@ -10,7 +9,7 @@ export type ToolbarMenuTriggerProps = Omit<
   "children" | "className" | "style"
 > & {
   /** Visible menu-trigger label. */
-  label: React.ReactNode;
+  label: string;
 };
 
 /** The trigger that opens a `ToolbarMenu`: a label plus a disclosure chevron. */
diff --git a/packages/propel/src/components/toolbar/toolbar.stories.tsx b/packages/propel/src/components/toolbar/toolbar.stories.tsx
index bccc3548..f96ec448 100644
--- a/packages/propel/src/components/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/components/toolbar/toolbar.stories.tsx
@@ -390,13 +390,21 @@ export const WithTooltips: Story = {
     <TooltipProvider>
       <Toolbar {...args} aria-label="Text formatting">
         <Tooltip label="Bold" shortcut="⌘ B">
-          <ToolbarToggle aria-label="Bold" icon={<Icon icon={Bold} />} />
+          <ToolbarToggle aria-label="Bold" aria-keyshortcuts="Meta+B" icon={<Icon icon={Bold} />} />
         </Tooltip>
         <Tooltip label="Italic" shortcut="⌘ I">
-          <ToolbarToggle aria-label="Italic" icon={<Icon icon={Italic} />} />
+          <ToolbarToggle
+            aria-label="Italic"
+            aria-keyshortcuts="Meta+I"
+            icon={<Icon icon={Italic} />}
+          />
         </Tooltip>
         <Tooltip label="Underline" shortcut="⌘ U">
-          <ToolbarToggle aria-label="Underline" icon={<Icon icon={Underline} />} />
+          <ToolbarToggle
+            aria-label="Underline"
+            aria-keyshortcuts="Meta+U"
+            icon={<Icon icon={Underline} />}
+          />
         </Tooltip>
       </Toolbar>
     </TooltipProvider>
diff --git a/packages/propel/src/components/tooltip/index.tsx b/packages/propel/src/components/tooltip/index.tsx
index 39d764ef..ddae2e1d 100644
--- a/packages/propel/src/components/tooltip/index.tsx
+++ b/packages/propel/src/components/tooltip/index.tsx
@@ -9,6 +9,4 @@ export {
   type TooltipArrowProps,
   TooltipPopup,
   type TooltipPopupProps,
-  TooltipShortcut,
-  type TooltipShortcutProps,
 } from "../../elements/tooltip";
diff --git a/packages/propel/src/components/tooltip/tooltip.stories.tsx b/packages/propel/src/components/tooltip/tooltip.stories.tsx
index c2b69d99..724b2c94 100644
--- a/packages/propel/src/components/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/components/tooltip/tooltip.stories.tsx
@@ -123,12 +123,17 @@ export const SidesRtl: Story = {
 
 /**
  * A keyboard-shortcut hint sits to the right of the label, dimmed at the smaller caption scale —
- * the Figma "Cmd + K" slot. Pass any node to `shortcut`.
+ * the Figma "Cmd + K" slot. Put the canonical `aria-keyshortcuts` value on the trigger itself.
  */
 export const WithShortcut: Story = {
   args: {
     label: "Open command menu",
     shortcut: "⌘ K",
+    children: (
+      <button type="button" aria-keyshortcuts="Meta+K">
+        Hover or focus me
+      </button>
+    ),
   },
 };
 
@@ -270,9 +275,9 @@ export const WithProviderInteraction: Story = {
 
 /**
  * Hidden behavior twin of `WithShortcut` (relocated from the old elements-tier story, rule 2b): the
- * open tooltip is one `role="tooltip"` popup carrying both the label and the `shortcut` hint, so
- * assistive tech announces them together. Focus (not hover) keeps the open deterministic regardless
- * of Base UI's hover delays.
+ * open tooltip is one `role="tooltip"` popup carrying the label and a visible, decorative shortcut
+ * hint. The trigger carries the semantic `aria-keyshortcuts` value. Focus (not hover) keeps the
+ * open deterministic regardless of Base UI's hover delays.
  */
 export const WithShortcutInteraction: Story = {
   ...WithShortcut,
@@ -280,10 +285,13 @@ export const WithShortcutInteraction: Story = {
   args: { ...WithShortcut.args, delay: 0 },
   play: async ({ canvas }) => {
     await userEvent.tab();
-    await expect(canvas.getByRole("button", { name: "Hover or focus me" })).toHaveFocus();
+    const trigger = canvas.getByRole("button", { name: "Hover or focus me" });
+    await expect(trigger).toHaveFocus();
+    await expect(trigger).toHaveAttribute("aria-keyshortcuts", "Meta+K");
     const tooltip = await within(document.body).findByRole("tooltip");
     await expect(tooltip).toHaveTextContent("Open command menu");
     await expect(tooltip).toHaveTextContent("⌘ K");
+    await expect(within(tooltip).getByText("⌘ K")).toHaveAttribute("aria-hidden", "true");
   },
 };
 
diff --git a/packages/propel/src/components/tooltip/tooltip.tsx b/packages/propel/src/components/tooltip/tooltip.tsx
index 6e2d5cf3..3d0eb3ec 100644
--- a/packages/propel/src/components/tooltip/tooltip.tsx
+++ b/packages/propel/src/components/tooltip/tooltip.tsx
@@ -2,20 +2,22 @@ import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import type { TooltipRoot } from "@base-ui/react/tooltip";
 import type * as React from "react";
 
-import { TooltipArrow, TooltipPopup, TooltipShortcut } from "../../elements/tooltip";
+import { TooltipArrow, TooltipPopup } from "../../elements/tooltip";
 import { Positioner } from "../../internal/positioner";
+import { Shortcut } from "../shortcut";
 
 export type TooltipProps<Payload = unknown> = Omit<
   TooltipRoot.Props<Payload>,
   "children" | "className" | "label" | "style"
 > & {
-  /** The text (or rich content) shown inside the tooltip popup. */
-  label: React.ReactNode;
+  /** The text shown inside the tooltip popup. */
+  label: string;
   /**
    * Optional keyboard-shortcut hint shown to the right of `label`, dimmed (e.g. `"⌘ K"`). Maps to
-   * the Figma "Cmd + K" slot — omit it for a plain tooltip.
+   * the Figma "Cmd + K" slot — omit it for a plain tooltip. This is visual text; put the canonical
+   * `aria-keyshortcuts` value on the trigger element.
    */
-  shortcut?: React.ReactNode;
+  shortcut?: string;
   /**
    * The element the tooltip is attached to. Base UI renders the trigger as a `<button>` by default;
    * pass a single element and it is used as the trigger via the `render` prop, so any focusable
@@ -48,7 +50,7 @@ export type TooltipProps<Payload = unknown> = Omit<
  *
  * Built on Base UI's tooltip, so it's accessible by default: the popup is exposed as
  * `role="tooltip"` and wired to the trigger. Pass the trigger as `children`, the popup copy as
- * `label`, and an optional `shortcut` for a dimmed keyboard hint.
+ * `label`, and an optional `shortcut` for a dimmed visual keyboard hint.
  *
  * Grafts Base UI's tooltip behavior onto propel's styled parts: `Tooltip.Root` + `Tooltip.Trigger`
  * + `Tooltip.Portal` → `Tooltip.Positioner` (shared `internal/positioner`) → `TooltipPopup` +
@@ -77,7 +79,7 @@ export function Tooltip<Payload = unknown>({
               padding, and the gap to the shortcut) lives on the styled `TooltipPopup`. */}
           <BaseTooltip.Popup role="tooltip" render={<TooltipPopup />}>
             {label}
-            {shortcut != null ? <TooltipShortcut>{shortcut}</TooltipShortcut> : null}
+            {shortcut != null ? <Shortcut keys={shortcut} magnitude="sm" /> : null}
             <BaseTooltip.Arrow render={<TooltipArrow />} />
           </BaseTooltip.Popup>
         </BaseTooltip.Positioner>
diff --git a/packages/propel/src/elements/avatar/avatar.tsx b/packages/propel/src/elements/avatar/avatar.tsx
index 4b85450d..5afbc7e2 100644
--- a/packages/propel/src/elements/avatar/avatar.tsx
+++ b/packages/propel/src/elements/avatar/avatar.tsx
@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 
-import { avatarToneBgClass, avatarVariants, type AvatarVariantProps } from "./variants";
+import { avatarVariants, type AvatarVariantProps } from "./variants";
 
 export type { AvatarMagnitude } from "./variants";
 
@@ -9,10 +9,6 @@ export type { AvatarMagnitude } from "./variants";
 export const AVATAR_TONES = ["orange", "indigo", "emerald", "crimson", "pink", "purple"] as const;
 export type AvatarTone = (typeof AVATAR_TONES)[number];
 
-// Re-exported for callers (e.g. `WorkspaceAvatar`) that style their own fallback surface.
-// The source of truth lives in `variants.ts`.
-export const initialsToneClass: Record<AvatarTone, string> = avatarToneBgClass;
-
 /**
  * Deterministically pick a tone from a seed (e.g. a name or user id) so the same person always gets
  * the same color — the "system picks it" behavior. Used as the default when `tone` is not set.
diff --git a/packages/propel/src/elements/combobox/combobox-label.tsx b/packages/propel/src/elements/combobox/combobox-label.tsx
deleted file mode 100644
index 2abceb68..00000000
--- a/packages/propel/src/elements/combobox/combobox-label.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { comboboxLabelVariants } from "./variants";
-
-export type ComboboxLabelProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * The styled combobox label. Graft in `components` via `<BaseCombobox.Label
- * render={<ComboboxLabel/>} />`.
- */
-export function ComboboxLabel({ render, ...props }: ComboboxLabelProps) {
-  const defaultProps: useRender.ElementProps<"div"> = { className: comboboxLabelVariants() };
-  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/combobox/combobox.stories.tsx b/packages/propel/src/elements/combobox/combobox.stories.tsx
index fd359761..0fbb1c54 100644
--- a/packages/propel/src/elements/combobox/combobox.stories.tsx
+++ b/packages/propel/src/elements/combobox/combobox.stories.tsx
@@ -14,7 +14,6 @@ import {
   ComboboxInput,
   ComboboxInputGroup,
   ComboboxItemIndicator,
-  ComboboxLabel,
   type ComboboxMagnitude,
 } from "./index";
 
@@ -46,7 +45,6 @@ const meta = {
   title: "Elements/Combobox",
   component: ComboboxInputGroup,
   subcomponents: {
-    ComboboxLabel,
     ComboboxInput,
     ComboboxChips,
     ComboboxChip,
@@ -63,15 +61,14 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * The full single-select anatomy assembled statically: `ComboboxLabel`, then `ComboboxInputGroup`
- * (the bordered frame) holding the `ComboboxInput` plus the consumer-provided clear/trigger
- * `IconButton` controls; below it, the internal `ListboxPopup` surface with the `ComboboxEmpty`
- * live region (mounted but content-less while there are matches — its padding applies via
- * `:not(:empty)`) and one `ListboxItem` row per pinnable state. `layout="indicator"` reserves the
- * leading 1rem column, so every row keeps a `ComboboxItemIndicator` — only the selected row's
- * indicator carries `data-selected` and shows its check. The popup's anchor-derived sizing vars
- * (`--anchor-width`, `--available-height`) are supplied by the wrapper, standing in for Base UI's
- * positioner.
+ * The full single-select anatomy assembled statically: `ComboboxInputGroup` (the bordered frame)
+ * holds the `ComboboxInput` plus the consumer-provided clear/trigger `IconButton` controls; below
+ * it, the internal `ListboxPopup` surface with the `ComboboxEmpty` live region (mounted but
+ * content-less while there are matches — its padding applies via `:not(:empty)`) and one
+ * `ListboxItem` row per pinnable state. `layout="indicator"` reserves the leading 1rem column, so
+ * every row keeps a `ComboboxItemIndicator` — only the selected row's indicator carries
+ * `data-selected` and shows its check. The popup's anchor-derived sizing vars (`--anchor-width`,
+ * `--available-height`) are supplied by the story wrapper, standing in for Base UI's positioner.
  */
 export const Default: Story = {
   parameters: {
@@ -86,9 +83,8 @@ export const Default: Story = {
   },
   render: ({ magnitude }) => (
     <div className="flex w-72 flex-col gap-1.5 [--anchor-width:18rem] [--available-height:18rem]">
-      <ComboboxLabel id="combobox-region-label">Region</ComboboxLabel>
       <ComboboxInputGroup magnitude={magnitude}>
-        <ComboboxInput aria-labelledby="combobox-region-label" placeholder="e.g. eu-central-1" />
+        <ComboboxInput aria-label="Region" placeholder="e.g. eu-central-1" />
         <IconButton prominence="ghost" tone="neutral" magnitude="md" aria-label="Clear region">
           <Icon>
             <X />
@@ -269,7 +265,6 @@ export const Chips: Story = {
   },
   render: () => (
     <div className="flex w-96 flex-col gap-1.5">
-      <ComboboxLabel id="combobox-regions-label">Regions</ComboboxLabel>
       <ComboboxChips magnitude="md">
         <ComboboxChip>
           us-east-1
@@ -289,7 +284,7 @@ export const Chips: Story = {
             <X aria-hidden />
           </ComboboxChipRemove>
         </ComboboxChip>
-        <ComboboxInput aria-labelledby="combobox-regions-label" placeholder="Add a region" />
+        <ComboboxInput aria-label="Regions" placeholder="Add a region" />
       </ComboboxChips>
     </div>
   ),
diff --git a/packages/propel/src/elements/combobox/index.tsx b/packages/propel/src/elements/combobox/index.tsx
index 2ed23ebd..9dfcc56b 100644
--- a/packages/propel/src/elements/combobox/index.tsx
+++ b/packages/propel/src/elements/combobox/index.tsx
@@ -5,4 +5,3 @@ export * from "./combobox-empty";
 export * from "./combobox-input";
 export * from "./combobox-input-group";
 export * from "./combobox-item-indicator";
-export * from "./combobox-label";
diff --git a/packages/propel/src/elements/combobox/variants.ts b/packages/propel/src/elements/combobox/variants.ts
index 30307ff1..8ff827fa 100644
--- a/packages/propel/src/elements/combobox/variants.ts
+++ b/packages/propel/src/elements/combobox/variants.ts
@@ -1,14 +1,12 @@
 import { cva, cx } from "class-variance-authority";
 
 import { controlGroupClass, controlMagnitude } from "../../internal/control-group";
-import { controlLabelClass } from "../../internal/control-group";
 import { controlInputClass } from "../../internal/control-input";
 import { itemIndicatorClass } from "../../internal/item-indicator";
 import { listboxEmptyClass } from "../../internal/listbox-empty";
 import { nodeSlotClass } from "../../internal/node-slot";
 import { type StrictVariantProps } from "../../internal/variant-props";
 
-export const comboboxLabelVariants = cva(controlLabelClass);
 export const comboboxInputGroupVariants = cva(
   cx(
     // Wraps a separate focusable input → the shared `focus: within` group chrome.
diff --git a/packages/propel/src/elements/context-menu/context-menu-group-label.tsx b/packages/propel/src/elements/context-menu/context-menu-group-label.tsx
deleted file mode 100644
index 5b95fdbc..00000000
--- a/packages/propel/src/elements/context-menu/context-menu-group-label.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { contextMenuGroupLabelVariants } from "./variants";
-
-export type ContextMenuGroupLabelProps = Omit<
-  useRender.ComponentProps<"div">,
-  "className" | "style"
->;
-
-/**
- * The styled non-interactive section heading. Base-UI-agnostic — graft in `components` via
- * `<BaseContextMenu.GroupLabel render={<ContextMenuGroupLabel/>} />`.
- */
-export function ContextMenuGroupLabel({ render, ...props }: ContextMenuGroupLabelProps) {
-  const defaultProps: useRender.ElementProps<"div"> = {
-    className: contextMenuGroupLabelVariants(),
-  };
-  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/context-menu/context-menu-item-shortcut.tsx b/packages/propel/src/elements/context-menu/context-menu-item-shortcut.tsx
deleted file mode 100644
index d9f154f2..00000000
--- a/packages/propel/src/elements/context-menu/context-menu-item-shortcut.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { contextMenuItemShortcutVariants } from "./variants";
-
-export type ContextMenuItemShortcutProps = Omit<
-  useRender.ComponentProps<"span">,
-  "className" | "style"
->;
-
-/**
- * The keyboard-shortcut text region of a menu row, sitting at the row's inline-end. Decorative hint
- * (the row's label carries the accessible name), so it is `aria-hidden`. Base-UI-agnostic.
- */
-export function ContextMenuItemShortcut({ render, ...props }: ContextMenuItemShortcutProps) {
-  const defaultProps: useRender.ElementProps<"span"> = {
-    "aria-hidden": true,
-    className: contextMenuItemShortcutVariants(),
-  };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/context-menu/context-menu.stories.tsx b/packages/propel/src/elements/context-menu/context-menu.stories.tsx
index accd5083..392e2f1e 100644
--- a/packages/propel/src/elements/context-menu/context-menu.stories.tsx
+++ b/packages/propel/src/elements/context-menu/context-menu.stories.tsx
@@ -15,14 +15,13 @@ import { expect } from "storybook/test";
 
 import { DisclosureIndicator } from "../../internal/disclosure-indicator";
 import { Icon } from "../../internal/icon";
+import { Shortcut } from "../../internal/shortcut";
 import {
   ContextMenuCheckboxItem,
   ContextMenuCheckboxItemIndicator,
-  ContextMenuGroupLabel,
   ContextMenuItem,
   ContextMenuItemIndicator,
   ContextMenuItemLabel,
-  ContextMenuItemShortcut,
   ContextMenuLinkItem,
   ContextMenuPopup,
   ContextMenuRadioItem,
@@ -44,7 +43,6 @@ const meta = {
   subcomponents: {
     ContextMenuItem,
     ContextMenuItemLabel,
-    ContextMenuItemShortcut,
     ContextMenuItemIndicator,
     ContextMenuCheckboxItem,
     ContextMenuCheckboxItemIndicator,
@@ -53,7 +51,6 @@ const meta = {
     ContextMenuLinkItem,
     ContextMenuSubmenuTrigger,
     ContextMenuSeparator,
-    ContextMenuGroupLabel,
   },
 } satisfies Meta<typeof ContextMenuPopup>;
 
@@ -61,13 +58,12 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * The full anatomy assembled statically: `ContextMenuPopup` › a labelled group
- * (`ContextMenuGroupLabel` + `ContextMenuItem` rows of internal `Icon` + `ContextMenuItemLabel` +
- * `ContextMenuItemShortcut`), a `ContextMenuSubmenuTrigger` row whose trailing caret is the
- * internal `DisclosureIndicator` (`motion="pointEnd"`), `ContextMenuSeparator` dividers, a
- * single-select row whose trailing check (`ContextMenuItemIndicator`) shows via the pinned
- * `data-selected=""`, and a `tone="danger"` row. The "Copy" row pins `data-highlighted=""` — the
- * state Base UI sets on the row under the pointer.
+ * The full anatomy assembled statically: `ContextMenuPopup` › an accessible group of
+ * `ContextMenuItem` rows of internal `Icon` + `ContextMenuItemLabel` + inline-end shortcut content,
+ * a `ContextMenuSubmenuTrigger` row whose trailing caret is the internal `DisclosureIndicator`
+ * (`motion="pointEnd"`), `ContextMenuSeparator` dividers, a single-select row whose trailing check
+ * (`ContextMenuItemIndicator`) shows via the pinned `data-selected=""`, and a `tone="danger"` row.
+ * The "Copy" row pins `data-highlighted=""` — the state Base UI sets on the row under the pointer.
  */
 export const Default: Story = {
   parameters: {
@@ -82,30 +78,32 @@ export const Default: Story = {
   },
   render: () => (
     <ContextMenuPopup role="menu">
-      <div role="group" aria-labelledby="context-menu-elements-default-actions">
-        <ContextMenuGroupLabel id="context-menu-elements-default-actions">
-          Actions
-        </ContextMenuGroupLabel>
-        <ContextMenuItem role="menuitem" tone="neutral">
+      <div role="group" aria-label="Actions">
+        <ContextMenuItem role="menuitem" tone="neutral" aria-keyshortcuts="Meta+X">
           <Icon>
             <Scissors />
           </Icon>
           <ContextMenuItemLabel>Cut</ContextMenuItemLabel>
-          <ContextMenuItemShortcut>⌘X</ContextMenuItemShortcut>
+          <Shortcut aria-hidden>⌘X</Shortcut>
         </ContextMenuItem>
-        <ContextMenuItem role="menuitem" tone="neutral" data-highlighted="">
+        <ContextMenuItem
+          role="menuitem"
+          tone="neutral"
+          aria-keyshortcuts="Meta+C"
+          data-highlighted=""
+        >
           <Icon>
             <Copy />
           </Icon>
           <ContextMenuItemLabel>Copy</ContextMenuItemLabel>
-          <ContextMenuItemShortcut>⌘C</ContextMenuItemShortcut>
+          <Shortcut aria-hidden>⌘C</Shortcut>
         </ContextMenuItem>
-        <ContextMenuItem role="menuitem" tone="neutral">
+        <ContextMenuItem role="menuitem" tone="neutral" aria-keyshortcuts="Meta+V">
           <Icon>
             <ClipboardPaste />
           </Icon>
           <ContextMenuItemLabel>Paste</ContextMenuItemLabel>
-          <ContextMenuItemShortcut>⌘V</ContextMenuItemShortcut>
+          <Shortcut aria-hidden>⌘V</Shortcut>
         </ContextMenuItem>
       </div>
       <ContextMenuSeparator role="separator" />
@@ -287,10 +285,7 @@ export const SelectionItems: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <ContextMenuPopup role="menu">
-      <div role="group" aria-labelledby="context-menu-elements-selection-display">
-        <ContextMenuGroupLabel id="context-menu-elements-selection-display">
-          Display
-        </ContextMenuGroupLabel>
+      <div role="group" aria-label="Display">
         <ContextMenuCheckboxItem role="menuitemcheckbox" aria-checked="true" tone="neutral">
           <ContextMenuCheckboxItemIndicator data-selected="">
             <Check />
@@ -305,10 +300,7 @@ export const SelectionItems: Story = {
         </ContextMenuCheckboxItem>
       </div>
       <ContextMenuSeparator role="separator" />
-      <div role="group" aria-labelledby="context-menu-elements-selection-order">
-        <ContextMenuGroupLabel id="context-menu-elements-selection-order">
-          Order by
-        </ContextMenuGroupLabel>
+      <div role="group" aria-label="Order by">
         <ContextMenuRadioItem role="menuitemradio" aria-checked="true" tone="neutral">
           <ContextMenuRadioItemIndicator data-selected="">
             <Dot />
@@ -360,12 +352,12 @@ export const LinkItems: Story = {
         <ContextMenuItemLabel>Go to activity</ContextMenuItemLabel>
       </ContextMenuLinkItem>
       <ContextMenuSeparator role="separator" />
-      <ContextMenuItem role="menuitem" tone="neutral">
+      <ContextMenuItem role="menuitem" tone="neutral" aria-keyshortcuts="Meta+C">
         <Icon>
           <Copy />
         </Icon>
         <ContextMenuItemLabel>Copy link</ContextMenuItemLabel>
-        <ContextMenuItemShortcut>⌘C</ContextMenuItemShortcut>
+        <Shortcut aria-hidden>⌘C</Shortcut>
       </ContextMenuItem>
     </ContextMenuPopup>
   ),
diff --git a/packages/propel/src/elements/context-menu/index.tsx b/packages/propel/src/elements/context-menu/index.tsx
index 1a20ffd9..3807ece4 100644
--- a/packages/propel/src/elements/context-menu/index.tsx
+++ b/packages/propel/src/elements/context-menu/index.tsx
@@ -1,10 +1,8 @@
 export * from "./context-menu-checkbox-item";
 export * from "./context-menu-checkbox-item-indicator";
-export * from "./context-menu-group-label";
 export * from "./context-menu-item";
 export * from "./context-menu-item-indicator";
 export * from "./context-menu-item-label";
-export * from "./context-menu-item-shortcut";
 export * from "./context-menu-link-item";
 export * from "./context-menu-popup";
 export * from "./context-menu-radio-item";
diff --git a/packages/propel/src/elements/context-menu/variants.ts b/packages/propel/src/elements/context-menu/variants.ts
index 83a981ec..1c615209 100644
--- a/packages/propel/src/elements/context-menu/variants.ts
+++ b/packages/propel/src/elements/context-menu/variants.ts
@@ -1,8 +1,7 @@
 import { cva, cx, type VariantProps } from "class-variance-authority";
 
 import { itemIndicatorClass } from "../../internal/item-indicator";
-import { groupLabelClass } from "../../internal/listbox-group-label";
-import { menuSeparatorClass, rowMetaClass } from "../../internal/menu-row-parts";
+import { menuSeparatorClass } from "../../internal/menu-row-parts";
 import { nodeSlotClass } from "../../internal/node-slot";
 import { popupSurfaceClass } from "../../internal/popup-surface";
 import { type StrictVariantProps } from "../../internal/variant-props";
@@ -58,9 +57,6 @@ export const contextMenuSubmenuTriggerVariants = cva(
 /** The growing label region of an item row; fills the row so trailing regions sit at the inline-end. */
 export const contextMenuItemLabelVariants = cva("min-w-0 flex-1 truncate");
 
-/** The trailing keyboard-shortcut text region, sitting at the row's inline-end. */
-export const contextMenuItemShortcutVariants = cva(rowMetaClass);
-
 /**
  * Selection indicator region: the check inside checkbox/radio items and the trailing check of a
  * single-select `ContextMenuItem`. Sizes its single child to the row's `--node-size` and tints it
@@ -89,9 +85,6 @@ export const contextMenuRadioItemIndicatorVariants = cva(
 /** Separator: a thin divider spanning the popup padding. */
 export const contextMenuSeparatorVariants = cva(menuSeparatorClass);
 
-/** GroupLabel: a non-interactive section heading. */
-export const contextMenuGroupLabelVariants = cva(groupLabelClass);
-
 type ContextMenuItemVariantConfig = VariantProps<typeof contextMenuItemVariants>;
 /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
 export type ContextMenuItemTone = NonNullable<ContextMenuItemVariantConfig["tone"]>;
diff --git a/packages/propel/src/elements/menu/index.tsx b/packages/propel/src/elements/menu/index.tsx
index f0218664..e5025eb4 100644
--- a/packages/propel/src/elements/menu/index.tsx
+++ b/packages/propel/src/elements/menu/index.tsx
@@ -1,17 +1,15 @@
 export * from "./menu-checkbox-item";
 export * from "./menu-checkbox-item-indicator";
 export * from "./menu-footer";
-export * from "./menu-group-label";
 export * from "./menu-item";
 export * from "./menu-item-content";
 export * from "./menu-item-control";
 export * from "./menu-item-description";
-export * from "./menu-item-meta";
 export * from "./menu-item-secondary-text";
 export * from "./menu-item-indicator";
 export * from "./menu-item-title";
 export * from "./menu-item-title-row";
-export * from "./menu-item-trailing";
+export * from "./menu-item-end-content";
 export * from "./menu-label";
 export * from "./menu-label-meta";
 export * from "./menu-label-title";
diff --git a/packages/propel/src/elements/menu/menu-group-label.tsx b/packages/propel/src/elements/menu/menu-group-label.tsx
deleted file mode 100644
index 5498c70d..00000000
--- a/packages/propel/src/elements/menu/menu-group-label.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { menuGroupLabelVariants } from "./variants";
-
-export type MenuGroupLabelProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * A styled non-interactive heading for a group of menu items. Base-UI-agnostic — graft the
- * group-label behavior in `components` via `<BaseMenu.GroupLabel render={<MenuGroupLabel />} />`.
- */
-export function MenuGroupLabel({ render, ...props }: MenuGroupLabelProps) {
-  const defaultProps: useRender.ElementProps<"div"> = { className: menuGroupLabelVariants() };
-  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/menu/menu-item-end-content.tsx b/packages/propel/src/elements/menu/menu-item-end-content.tsx
new file mode 100644
index 00000000..348862f4
--- /dev/null
+++ b/packages/propel/src/elements/menu/menu-item-end-content.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { menuItemEndContentVariants } from "./variants";
+
+export type MenuItemEndContentProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
+
+/**
+ * An end-content slot at the row's inline-end for arbitrary content (a shortcut, a count, a
+ * chevron). Sizes any icon child to the row's `--node-size`; unlike `MenuItemIcon` it adds no tint,
+ * so passed content keeps its own color.
+ */
+export function MenuItemEndContent({ render, ...props }: MenuItemEndContentProps) {
+  const defaultProps: useRender.ElementProps<"span"> = { className: menuItemEndContentVariants() };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/elements/menu/menu-item-meta.tsx b/packages/propel/src/elements/menu/menu-item-meta.tsx
deleted file mode 100644
index ee8dd537..00000000
--- a/packages/propel/src/elements/menu/menu-item-meta.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { menuItemMetaVariants } from "./variants";
-
-export type MenuItemMetaProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/** Trailing muted metadata after the title column (e.g. a keyboard shortcut). */
-export function MenuItemMeta({ render, ...props }: MenuItemMetaProps) {
-  const defaultProps: useRender.ElementProps<"span"> = { className: menuItemMetaVariants() };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/menu/menu-item-trailing.tsx b/packages/propel/src/elements/menu/menu-item-trailing.tsx
deleted file mode 100644
index 899454c6..00000000
--- a/packages/propel/src/elements/menu/menu-item-trailing.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { menuItemTrailingVariants } from "./variants";
-
-export type MenuItemTrailingProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/**
- * A trailing slot at the row's inline-end for arbitrary content (a shortcut, a count, a chevron).
- * Sizes any icon child to the row's `--node-size`; unlike `MenuItemIcon` it adds no tint, so passed
- * content keeps its own color.
- */
-export function MenuItemTrailing({ render, ...props }: MenuItemTrailingProps) {
-  const defaultProps: useRender.ElementProps<"span"> = { className: menuItemTrailingVariants() };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/menu/menu.stories.tsx b/packages/propel/src/elements/menu/menu.stories.tsx
index 17b7e474..2a06048a 100644
--- a/packages/propel/src/elements/menu/menu.stories.tsx
+++ b/packages/propel/src/elements/menu/menu.stories.tsx
@@ -17,21 +17,20 @@ import { expect } from "storybook/test";
 
 import { DisclosureIndicator } from "../../internal/disclosure-indicator";
 import { Icon } from "../../internal/icon";
+import { Shortcut } from "../../internal/shortcut";
 import {
   MenuCheckboxItem,
   MenuCheckboxItemIndicator,
   MenuFooter,
-  MenuGroupLabel,
   MenuItem,
   MenuItemContent,
   MenuItemControl,
   MenuItemDescription,
   MenuItemIndicator,
-  MenuItemMeta,
   MenuItemSecondaryText,
   MenuItemTitle,
   MenuItemTitleRow,
-  MenuItemTrailing,
+  MenuItemEndContent,
   MenuLabel,
   MenuLabelMeta,
   MenuLabelTitle,
@@ -63,8 +62,7 @@ const meta = {
     MenuItemTitle,
     MenuItemSecondaryText,
     MenuItemDescription,
-    MenuItemMeta,
-    MenuItemTrailing,
+    MenuItemEndContent,
     MenuItemIndicator,
     MenuItemControl,
     MenuCheckboxItem,
@@ -74,7 +72,6 @@ const meta = {
     MenuLinkItem,
     MenuSubmenuTrigger,
     MenuSeparator,
-    MenuGroupLabel,
     MenuLabel,
     MenuLabelTitle,
     MenuLabelMeta,
@@ -89,9 +86,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * The full anatomy assembled statically: `MenuPopup` › a labelled group (`MenuGroupLabel` +
- * `MenuItem` rows of internal `Icon` + `MenuItemContent` › `MenuItemTitleRow` › `MenuItemTitle`), a
- * trailing `MenuItemMeta` shortcut, a `MenuSubmenuTrigger` row whose caret is the internal
+ * The full anatomy assembled statically: `MenuPopup` › a labelled group (`MenuLabel` + `MenuItem`
+ * rows of internal `Icon` + `MenuItemContent` › `MenuItemTitleRow` › `MenuItemTitle`), an
+ * inline-end `MenuItemEndContent` shortcut, a `MenuSubmenuTrigger` row whose caret is the internal
  * `DisclosureIndicator` (`motion="pointEnd"`), `MenuSeparator` dividers, and a single-select row
  * whose inline-end check (`MenuItemIndicator`) shows via the pinned `data-selected=""`. The
  * "Duplicate" row pins `data-highlighted=""` — the state Base UI sets on the active row.
@@ -101,8 +98,10 @@ export const Default: Story = {
     <div className="w-56">
       <MenuPopup elevation={elevation} role="menu">
         <div role="group" aria-labelledby="menu-elements-default-actions">
-          <MenuGroupLabel id="menu-elements-default-actions">Actions</MenuGroupLabel>
-          <MenuItem role="menuitem" layout="default">
+          <MenuLabel id="menu-elements-default-actions">
+            <MenuLabelTitle>Actions</MenuLabelTitle>
+          </MenuLabel>
+          <MenuItem role="menuitem" layout="default" aria-keyshortcuts="Meta+E">
             <Icon tint="secondary">
               <Pencil />
             </Icon>
@@ -111,7 +110,9 @@ export const Default: Story = {
                 <MenuItemTitle>Edit</MenuItemTitle>
               </MenuItemTitleRow>
             </MenuItemContent>
-            <MenuItemMeta>⌘E</MenuItemMeta>
+            <MenuItemEndContent>
+              <Shortcut aria-hidden>⌘E</Shortcut>
+            </MenuItemEndContent>
           </MenuItem>
           <MenuItem role="menuitem" layout="default" data-highlighted="">
             <Icon tint="secondary">
@@ -216,8 +217,8 @@ export const Elevations: Story = {
 /**
  * `MenuItem`'s `layout` axis and the row's text anatomy. `default` is the 34px single-line row:
  * `MenuItemTitleRow` baseline-aligns the `MenuItemTitle` with optional inline
- * `MenuItemSecondaryText`, and the inline-end holds a muted `MenuItemMeta` shortcut or a free-form
- * `MenuItemTrailing` slot. `with-description` is the taller, top-aligned row that stacks a
+ * `MenuItemSecondaryText`, and the inline-end holds a muted shortcut or a free-form
+ * `MenuItemEndContent` slot. `with-description` is the taller, top-aligned row that stacks a
  * `MenuItemDescription` beneath the title (the components-tier ready-made derives this layout from
  * its `description` prop rather than exposing it).
  */
@@ -226,7 +227,7 @@ export const ItemLayouts: Story = {
   render: () => (
     <div className="w-72">
       <MenuPopup elevation="raised" role="menu" aria-label="Row layouts">
-        <MenuItem role="menuitem" layout="default">
+        <MenuItem role="menuitem" layout="default" aria-keyshortcuts="Meta+L">
           <Icon tint="secondary">
             <Link2 />
           </Icon>
@@ -235,7 +236,9 @@ export const ItemLayouts: Story = {
               <MenuItemTitle>Copy link</MenuItemTitle>
             </MenuItemTitleRow>
           </MenuItemContent>
-          <MenuItemMeta>⌘L</MenuItemMeta>
+          <MenuItemEndContent>
+            <Shortcut aria-hidden>⌘L</Shortcut>
+          </MenuItemEndContent>
         </MenuItem>
         <MenuItem role="menuitem" layout="default">
           <MenuItemContent>
@@ -249,11 +252,9 @@ export const ItemLayouts: Story = {
           <MenuItemContent>
             <MenuItemTitleRow>
               <MenuItemTitle>Assignees</MenuItemTitle>
+              <MenuItemSecondaryText>5</MenuItemSecondaryText>
             </MenuItemTitleRow>
           </MenuItemContent>
-          <MenuItemTrailing>
-            <span className="text-12 text-tertiary">5</span>
-          </MenuItemTrailing>
         </MenuItem>
         <MenuSeparator role="separator" />
         <MenuItem role="menuitem" layout="with-description">
@@ -428,7 +429,9 @@ export const SelectionItems: Story = {
     <div className="w-56">
       <MenuPopup elevation="raised" role="menu">
         <div role="group" aria-labelledby="menu-elements-selection-notify">
-          <MenuGroupLabel id="menu-elements-selection-notify">Notify me about</MenuGroupLabel>
+          <MenuLabel id="menu-elements-selection-notify">
+            <MenuLabelTitle>Notify me about</MenuLabelTitle>
+          </MenuLabel>
           <MenuCheckboxItem role="menuitemcheckbox" aria-checked="true">
             <MenuItemControl>
               <MenuCheckboxItemIndicator data-checked="">
@@ -473,11 +476,13 @@ export const SelectionItems: Story = {
         </div>
         <MenuSeparator role="separator" />
         <div role="group" aria-labelledby="menu-elements-selection-layout">
-          <MenuGroupLabel id="menu-elements-selection-layout">Layout</MenuGroupLabel>
+          <MenuLabel id="menu-elements-selection-layout">
+            <MenuLabelTitle>Layout</MenuLabelTitle>
+          </MenuLabel>
           <MenuRadioItem role="menuitemradio" aria-checked="true">
             <MenuItemControl>
               <MenuRadioItemIndicator>
-                <Circle className="size-2 fill-current" aria-hidden />
+                <Circle aria-hidden />
               </MenuRadioItemIndicator>
             </MenuItemControl>
             <MenuItemContent>
@@ -531,7 +536,7 @@ export const LinkItems: Story = {
           </MenuItemContent>
         </MenuLinkItem>
         <MenuSeparator role="separator" />
-        <MenuItem role="menuitem" layout="default">
+        <MenuItem role="menuitem" layout="default" aria-keyshortcuts="Meta+C">
           <Icon tint="secondary">
             <Copy />
           </Icon>
@@ -540,7 +545,9 @@ export const LinkItems: Story = {
               <MenuItemTitle>Copy link</MenuItemTitle>
             </MenuItemTitleRow>
           </MenuItemContent>
-          <MenuItemMeta>⌘C</MenuItemMeta>
+          <MenuItemEndContent>
+            <Shortcut aria-hidden>⌘C</Shortcut>
+          </MenuItemEndContent>
         </MenuItem>
       </MenuPopup>
     </div>
@@ -548,10 +555,9 @@ export const LinkItems: Story = {
 };
 
 /**
- * The two heading kinds plus the divider. `MenuGroupLabel` is the plain muted heading Base UI's
- * `GroupLabel` grafts onto; `MenuLabel` is the richer heading row laying a growing `MenuLabelTitle`
- * against an inline-end `MenuLabelMeta` (the components-tier `MenuLabel` fills it from its `meta`
- * prop). `MenuSeparator` spans the popup padding between the sections.
+ * Heading rows plus the divider. `MenuLabel` lays a growing `MenuLabelTitle` against an inline-end
+ * `MenuLabelMeta` (the components-tier `MenuLabel` fills it from its `meta` prop). `MenuSeparator`
+ * spans the popup padding between the sections.
  */
 export const Sections: Story = {
   parameters: { controls: { disable: true } },
@@ -559,7 +565,9 @@ export const Sections: Story = {
     <div className="w-56">
       <MenuPopup elevation="raised" role="menu">
         <div role="group" aria-labelledby="menu-elements-sections-sort">
-          <MenuGroupLabel id="menu-elements-sections-sort">Sort</MenuGroupLabel>
+          <MenuLabel id="menu-elements-sections-sort">
+            <MenuLabelTitle>Sort</MenuLabelTitle>
+          </MenuLabel>
           <MenuItem role="menuitem" layout="default">
             <MenuItemContent>
               <MenuItemTitleRow>
diff --git a/packages/propel/src/elements/menu/variants.ts b/packages/propel/src/elements/menu/variants.ts
index d1df6959..262c75d3 100644
--- a/packages/propel/src/elements/menu/variants.ts
+++ b/packages/propel/src/elements/menu/variants.ts
@@ -2,8 +2,7 @@ import { cva, cx, type VariantProps } from "class-variance-authority";
 
 import { checkboxBoxVariants } from "../../internal/checkbox-box";
 import { itemIndicatorClass } from "../../internal/item-indicator";
-import { groupLabelClass } from "../../internal/listbox-group-label";
-import { menuSeparatorClass, rowMetaClass } from "../../internal/menu-row-parts";
+import { menuSeparatorClass } from "../../internal/menu-row-parts";
 import { nodeSlotClass } from "../../internal/node-slot";
 import { popupSurfaceClass } from "../../internal/popup-surface";
 import { type StrictVariantProps } from "../../internal/variant-props";
@@ -27,9 +26,9 @@ export const menuPopupVariants = cva("outline-none", {
 });
 
 // All interactive rows (item, link, radio, checkbox, submenu trigger) share one row base:
-// the same height, padding, radius, gap, text + disabled treatment. `variant` switches between
-// a single-line row and a taller top-aligned row that fits a description; `emphasis` switches
-// the hover/cursor affordance.
+// the same height, padding, radius, gap, text + disabled treatment. `layout` switches between
+// a single-line row and a taller top-aligned row that fits a description; `tone` switches the row
+// palette.
 const menuRowBase = cx(
   "group/item flex w-full gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
   "data-disabled:pointer-events-none data-disabled:text-disabled",
@@ -41,17 +40,18 @@ const menuRowDefaultVariants = {
 
 const menuRowToneVariants = {
   neutral: "text-secondary",
+  accent: "text-accent-primary data-disabled:text-disabled data-highlighted:text-accent-primary",
   danger: "text-danger-primary data-disabled:text-disabled data-highlighted:text-danger-primary",
 } as const;
 
-/** Standalone `MenuItem` row: `layout` (single vs with-description) + `emphasis`. */
+/** Standalone `MenuItem` row: `layout` (single vs with-description) + `tone`. */
 export const menuRowVariants = cva(cx(menuRowBase, "data-highlighted:bg-layer-transparent-hover"), {
   variants: {
     layout: {
       default: "h-[34px] items-center",
       "with-description": "min-h-[34px] items-start py-1.5",
     },
-    /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+    /** Row text palette. */
     tone: menuRowToneVariants,
   },
   defaultVariants: menuRowDefaultVariants,
@@ -68,7 +68,7 @@ export const menuCheckboxItemVariants = cva(
   ),
   {
     variants: {
-      /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+      /** Row text palette. */
       tone: menuRowToneVariants,
     },
     defaultVariants: menuRowDefaultVariants,
@@ -87,9 +87,11 @@ export const menuSubmenuTriggerVariants = cva(
   ),
   {
     variants: {
-      /** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+      /** Row text palette. */
       tone: {
         neutral: "text-secondary",
+        accent:
+          "text-accent-primary data-disabled:text-disabled data-highlighted:text-accent-primary data-popup-open:text-accent-primary",
         danger:
           "text-danger-primary data-disabled:text-disabled data-highlighted:text-danger-primary data-popup-open:text-danger-primary",
       },
@@ -120,11 +122,8 @@ export const menuItemDescriptionVariants = cva(
   "truncate text-12 text-tertiary group-data-disabled/item:text-disabled",
 );
 
-/** Trailing muted metadata shown after the title column (e.g. a keyboard shortcut). */
-export const menuItemMetaVariants = cva(rowMetaClass);
-
-/** A trailing slot for arbitrary content. Sizes an icon child to `--node-size`; adds no tint. */
-export const menuItemTrailingVariants = cva(nodeSlotClass);
+/** An end-content slot for arbitrary content. Sizes an icon child to `--node-size`; adds no tint. */
+export const menuItemEndContentVariants = cva(nodeSlotClass);
 
 /**
  * The single-select check shown at a row's inline-end. Sizes its single child to `--node-size` and
@@ -158,9 +157,6 @@ export const menuCheckboxItemIndicatorVariants = cva(
 /** Separator: a thin divider spanning the popup padding. */
 export const menuSeparatorVariants = cva(menuSeparatorClass);
 
-/** GroupLabel: a non-interactive section heading. */
-export const menuGroupLabelVariants = cva(groupLabelClass);
-
 /**
  * Label: a non-interactive section heading row that can carry inline-end metadata. Lays out a
  * growing `MenuLabelTitle` and an optional `MenuLabelMeta`.
@@ -191,7 +187,7 @@ export const menuFooterVariants = cva(
 export type MenuPopupVariantProps = StrictVariantProps<typeof menuPopupVariants>;
 
 type MenuRowVariantConfig = VariantProps<typeof menuRowVariants>;
-/** Neutral rows use the standard text hierarchy; `danger` rows use the error palette. */
+/** Row text palette. */
 export type MenuItemTone = NonNullable<MenuRowVariantConfig["tone"]>;
 
 export type MenuRowVariantProps = StrictVariantProps<
diff --git a/packages/propel/src/elements/popover/index.tsx b/packages/propel/src/elements/popover/index.tsx
index c17e32fa..ad2f4dc9 100644
--- a/packages/propel/src/elements/popover/index.tsx
+++ b/packages/propel/src/elements/popover/index.tsx
@@ -1,7 +1 @@
-export * from "./popover-actions";
-export * from "./popover-arrow";
-export * from "./popover-body";
-export * from "./popover-close";
-export * from "./popover-intro";
 export * from "./popover-panel-popup";
-export * from "./popover-popup";
diff --git a/packages/propel/src/elements/popover/popover-actions.tsx b/packages/propel/src/elements/popover/popover-actions.tsx
deleted file mode 100644
index 406efce8..00000000
--- a/packages/propel/src/elements/popover/popover-actions.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { popoverActionsVariants } from "./variants";
-
-/** Props for {@link PopoverActions}. */
-export type PopoverActionsProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * The popup's trailing controls row (e.g. a `PopoverClose` styled as a `Button`). Pushes its
- * children to the inline-end and spaces them by a gap. Sits as a child of `PopoverBody`.
- */
-export function PopoverActions({ render, ...props }: PopoverActionsProps) {
-  const defaultProps: useRender.ElementProps<"div"> = { className: popoverActionsVariants() };
-  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/popover/popover-arrow.tsx b/packages/propel/src/elements/popover/popover-arrow.tsx
deleted file mode 100644
index 55e9e36a..00000000
--- a/packages/propel/src/elements/popover/popover-arrow.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { popoverArrowVariants } from "./variants";
-
-/** Props for {@link PopoverArrow}. */
-export type PopoverArrowProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * The popover's caret — a small rotated square clipped to a triangle that points back at the
- * trigger, its offset and clip switching per `data-[side]`. Base-UI-agnostic — graft in
- * `components` via `<BasePopover.Arrow render={<PopoverArrow/>} />`.
- */
-export function PopoverArrow({ render, ...props }: PopoverArrowProps) {
-  const defaultProps: useRender.ElementProps<"div"> = { className: popoverArrowVariants() };
-  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/popover/popover-body.tsx b/packages/propel/src/elements/popover/popover-body.tsx
deleted file mode 100644
index f5d02665..00000000
--- a/packages/propel/src/elements/popover/popover-body.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { popoverBodyVariants } from "./variants";
-
-/** Props for {@link PopoverBody}. */
-export type PopoverBodyProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * The padded content column inside a `PopoverPopup`. Lays its children out as a vertical stack and
- * supplies the popup's internal padding, so the bare popup carries only the surface chrome. Layout
- * regions (e.g. `PopoverIntro`, `PopoverActions`) sit as its children, separated by its gap.
- */
-export function PopoverBody({ render, ...props }: PopoverBodyProps) {
-  const defaultProps: useRender.ElementProps<"div"> = { className: popoverBodyVariants() };
-  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/popover/popover-close.tsx b/packages/propel/src/elements/popover/popover-close.tsx
deleted file mode 100644
index 6296ab1b..00000000
--- a/packages/propel/src/elements/popover/popover-close.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { popoverCloseVariants } from "./variants";
-
-/** Props for {@link PopoverClose}. */
-export type PopoverCloseProps = Omit<useRender.ComponentProps<"button">, "className" | "style">;
-
-/**
- * The bare button that dismisses the popover — no icon-button chrome baked in, just a focus ring.
- * Base-UI-agnostic — graft in `components` via `<BasePopover.Close render={<PopoverClose/>} />`; to
- * give it a fuller look, graft the close behavior onto a `Button` instead (`<BasePopover.Close
- * render={<Button…/>} />`).
- */
-export function PopoverClose({ render, ...props }: PopoverCloseProps) {
-  const defaultProps: useRender.ElementProps<"button"> = { className: popoverCloseVariants() };
-  return useRender({ defaultTagName: "button", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/popover/popover-intro.tsx b/packages/propel/src/elements/popover/popover-intro.tsx
deleted file mode 100644
index 41aa3c63..00000000
--- a/packages/propel/src/elements/popover/popover-intro.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { popoverIntroVariants } from "./variants";
-
-/** Props for {@link PopoverIntro}. */
-export type PopoverIntroProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * The popup's leading text group — an `OverlayTitle` stacked over an `OverlayDescription`, spaced
- * by a tight gap. Sits as a child of `PopoverBody`.
- */
-export function PopoverIntro({ render, ...props }: PopoverIntroProps) {
-  const defaultProps: useRender.ElementProps<"div"> = { className: popoverIntroVariants() };
-  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/popover/popover-panel-popup.tsx b/packages/propel/src/elements/popover/popover-panel-popup.tsx
index 9ff72e4f..eabcf73d 100644
--- a/packages/propel/src/elements/popover/popover-panel-popup.tsx
+++ b/packages/propel/src/elements/popover/popover-panel-popup.tsx
@@ -10,8 +10,7 @@ export type PopoverPanelPopupProps = Omit<useRender.ComponentProps<"div">, "clas
  * The popup as the scroll body of an elevated panel surface. Carries only the inner padding +
  * focus-outline reset — the surrounding panel supplies the surface chrome (border, background,
  * shadow, radius), so this never doubles it up. Base-UI-agnostic — graft in `components` via
- * `<BasePopover.Popup render={<PopoverPanelPopup/>} />`. Use {@link PopoverPopup} for a
- * self-contained popup that is its own surface.
+ * `<BasePopover.Popup render={<PopoverPanelPopup/>} />`.
  */
 export function PopoverPanelPopup({ render, ...props }: PopoverPanelPopupProps) {
   const defaultProps: useRender.ElementProps<"div"> = { className: popoverPanelPopupVariants() };
diff --git a/packages/propel/src/elements/popover/popover-popup.tsx b/packages/propel/src/elements/popover/popover-popup.tsx
deleted file mode 100644
index 17d5ccde..00000000
--- a/packages/propel/src/elements/popover/popover-popup.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { popoverPopupVariants } from "./variants";
-
-/** Props for {@link PopoverPopup}. */
-export type PopoverPopupProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * The self-contained popup surface — an elevated card carrying its own border, background, shadow,
- * radius, and the open/close scale-fade. Base-UI-agnostic — graft in `components` via
- * `<BasePopover.Popup render={<PopoverPopup/>} />`. Use {@link PopoverPanelPopup} for a bare scroll
- * body inside an elevated panel that supplies the surface chrome.
- */
-export function PopoverPopup({ render, ...props }: PopoverPopupProps) {
-  const defaultProps: useRender.ElementProps<"div"> = { className: popoverPopupVariants() };
-  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/popover/popover.stories.tsx b/packages/propel/src/elements/popover/popover.stories.tsx
index 4692daa3..8075f4fa 100644
--- a/packages/propel/src/elements/popover/popover.stories.tsx
+++ b/packages/propel/src/elements/popover/popover.stories.tsx
@@ -1,239 +1,45 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import { OverlayDescription } from "../../internal/overlay-description";
-import { OverlayTitle } from "../../internal/overlay-title";
-import { Button, ButtonLabel } from "../button";
-import {
-  PopoverActions,
-  PopoverArrow,
-  PopoverBody,
-  PopoverClose,
-  PopoverIntro,
-  PopoverPanelPopup,
-  PopoverPopup,
-} from "./index";
+import { OverlayPanel } from "../../internal/overlay-panel";
+import { PopoverPanelPopup } from "./index";
 
-// elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
-// DIRECTLY — no Base UI grafts — inline instead of portaled/positioned, with every visual state
-// pinned statically via the `data-*` attributes Base UI's popover would set (`data-side` on the
-// arrow, `data-starting-style=""`/`data-ending-style=""` on the popup). The Root, Trigger, Portal,
-// Positioner, Backdrop, and Viewport are behavior-only or shared `internal` roles (they live in
-// `components`/`internal`); the title and description use the shared `internal/overlay-*` recipes
-// at the popover's `md` size. Opening, dismissal, focus, and aria behavior are demonstrated AND
-// tested in Components/Popover.
+// elements-tier story (rule 2b): a pure UI-configuration showcase. `PopoverPanelPopup`
+// renders directly with the shared internal overlay panel that the components-tier
+// `PopoverContent` uses for surface chrome. Base UI's Root, Trigger, Portal, Positioner and Popup
+// behavior are demonstrated and tested in Components/Popover.
 const meta = {
   title: "Elements/Popover",
-  component: PopoverPopup,
-  subcomponents: {
-    PopoverPanelPopup,
-    PopoverBody,
-    PopoverIntro,
-    PopoverActions,
-    PopoverArrow,
-    PopoverClose,
-  },
-} satisfies Meta<typeof PopoverPopup>;
+  component: PopoverPanelPopup,
+} satisfies Meta<typeof PopoverPanelPopup>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * The full anatomy assembled statically, as Base UI would lay it out open below its trigger:
- * `PopoverPopup` (the self-contained elevated surface) holds a `PopoverBody` stacking a
- * `PopoverIntro` (the shared `OverlayTitle` + `OverlayDescription` at the popover's `md` size) over
- * a `PopoverActions` row, and the `PopoverArrow` — pinned `data-side="bottom"` and parked at the
- * top edge by a demo wrapper (Base UI's positioner owns the real placement) — points back at the
- * would-be trigger.
- */
-export const Default: Story = {
-  render: () => (
-    <div className="relative w-fit pt-2">
-      <PopoverPopup>
-        <PopoverBody>
-          <PopoverIntro>
-            <OverlayTitle magnitude="md">Keyboard shortcuts</OverlayTitle>
-            <OverlayDescription magnitude="md">
-              Press <kbd>?</kbd> anywhere to see the full list.
-            </OverlayDescription>
-          </PopoverIntro>
-          <PopoverActions>
-            <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
-              <ButtonLabel>Got it</ButtonLabel>
-            </Button>
-          </PopoverActions>
-        </PopoverBody>
-      </PopoverPopup>
-      <div className="absolute inset-s-8 top-1" aria-hidden="true">
-        <PopoverArrow data-side="bottom" />
-      </div>
-    </div>
-  ),
-};
-
-/**
- * The two popup surfaces:
- *
- * - **`PopoverPopup`** — self-contained: the shared popup surface chrome (subtle border, `layer-1`
- *   fill, overlay shadow, `rounded-lg`, the open/close scale-fade) plus the `max-w-xs`
- *   readable-column cap.
- * - **`PopoverPanelPopup`** — the bare scroll body used when an elevated panel supplies the surface
- *   (the components-tier `PopoverContent` wraps it in the shared overlay panel): only the inner
- *   padding + focus-outline reset, never border/bg/shadow/radius, which would double up with the
- *   panel. The demo frame stands in for that panel chrome so the two read side by side.
- */
-export const Surfaces: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-start gap-6">
-      <div className="flex shrink-0 flex-col gap-2">
-        <p className="text-13 text-secondary">PopoverPopup — self-contained surface</p>
-        <PopoverPopup>
-          <PopoverBody>
-            <PopoverIntro>
-              <OverlayTitle magnitude="md">Self-contained</OverlayTitle>
-              <OverlayDescription magnitude="md">
-                Carries its own border, fill, shadow, and radius.
-              </OverlayDescription>
-            </PopoverIntro>
-          </PopoverBody>
-        </PopoverPopup>
-      </div>
-      <div className="flex shrink-0 flex-col gap-2">
-        <p className="text-13 text-secondary">PopoverPanelPopup — bare body, chrome from panel</p>
-        <div className="w-72 rounded-lg border-sm border-subtle bg-layer-1 shadow-overlay-100">
-          <PopoverPanelPopup>
-            <PopoverBody>
-              <PopoverIntro>
-                <OverlayTitle magnitude="md">Panel body</OverlayTitle>
-                <OverlayDescription magnitude="md">
-                  Padding only — the surrounding panel owns the surface.
-                </OverlayDescription>
-              </PopoverIntro>
-            </PopoverBody>
-          </PopoverPanelPopup>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-const ARROW_SIDES = ["top", "bottom", "left", "right", "inline-start", "inline-end"] as const;
-
-/**
- * The caret's placement axis: `data-side` — the attribute Base UI's positioner sets to report which
- * side of the trigger the popup resolved to — switches the rotated square's clip-path (and, under
- * the positioner's absolute placement, its `-3px` edge offset) so the visible triangle always
- * points back at the trigger. The logical `inline-start`/`inline-end` values flip their clip under
- * RTL.
- */
-export const ArrowSides: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-start gap-4">
-      {ARROW_SIDES.map((side) => (
-        <div key={side} className="flex flex-col items-center gap-2">
-          <p className="text-12 text-tertiary">{side}</p>
-          <div
-            className="flex size-10 items-center justify-center rounded-md border-sm border-subtle"
-            aria-hidden="true"
-          >
-            <PopoverArrow data-side={side} />
-          </div>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-/**
- * `PopoverClose` is deliberately bare at the elements tier — a plain `<button>` carrying only the
- * focus-visible ring, for inline dismiss affordances inside arbitrary popover content. For a fuller
- * look, the components tier grafts the close behavior onto a `Button` instead; both render targets
- * sit side by side here.
- */
-export const Close: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-start gap-6">
-      <div className="flex shrink-0 flex-col gap-2">
-        <p className="text-13 text-secondary">Bare PopoverClose</p>
-        <PopoverClose>Dismiss</PopoverClose>
-      </div>
-      <div className="flex shrink-0 flex-col gap-2">
-        <p className="text-13 text-secondary">Close grafted onto a Button</p>
-        <Button sizing="hug" prominence="secondary" tone="neutral" magnitude="xl">
-          <ButtonLabel>Close</ButtonLabel>
-        </Button>
-      </div>
-    </div>
-  ),
-};
-
-/**
- * The popup's transition poses, pinned statically:
- *
- * - **Resting** — the open pose: full opacity, natural scale.
- * - **Entering** — `data-starting-style=""` pins the pre-open endpoint of the transition (`opacity-0
- *   scale-95`), so the card is intentionally invisible while holding its layout.
- * - **Exiting** — `data-ending-style=""` pins the same faded, scaled-down endpoint on the way closed.
+ * The popover element used by the components-tier `PopoverContent`: an elevated `OverlayPanel`
+ * supplies the border, fill, shadow, radius and scroll shell; `PopoverPanelPopup` contributes only
+ * the popup body padding and focus outline reset.
  */
-export const States: Story = {
+export const PanelPopup: Story = {
   render: () => (
-    <div className="flex flex-wrap items-start gap-6">
-      <div className="flex shrink-0 flex-col gap-2">
-        <p className="text-13 text-secondary">Resting</p>
-        <PopoverPopup id="popover-popup-resting">
-          <PopoverBody>
-            <PopoverIntro>
-              <OverlayTitle magnitude="md">Resting</OverlayTitle>
-              <OverlayDescription magnitude="md">The open pose.</OverlayDescription>
-            </PopoverIntro>
-          </PopoverBody>
-        </PopoverPopup>
-      </div>
-      <div className="flex shrink-0 flex-col gap-2">
-        <p className="text-13 text-secondary">Entering (data-starting-style) — invisible</p>
-        <PopoverPopup id="popover-popup-entering" data-starting-style="">
-          <PopoverBody>
-            <PopoverIntro>
-              <OverlayTitle magnitude="md">Entering</OverlayTitle>
-              <OverlayDescription magnitude="md">Pinned at opacity-0 scale-95.</OverlayDescription>
-            </PopoverIntro>
-          </PopoverBody>
-        </PopoverPopup>
-      </div>
-      <div className="flex shrink-0 flex-col gap-2">
-        <p className="text-13 text-secondary">Exiting (data-ending-style) — invisible</p>
-        <PopoverPopup id="popover-popup-exiting" data-ending-style="">
-          <PopoverBody>
-            <PopoverIntro>
-              <OverlayTitle magnitude="md">Exiting</OverlayTitle>
-              <OverlayDescription magnitude="md">Pinned at opacity-0 scale-95.</OverlayDescription>
-            </PopoverIntro>
-          </PopoverBody>
-        </PopoverPopup>
-      </div>
-    </div>
+    <OverlayPanel elevation="overlay" radius="lg" sizing="sm">
+      <PopoverPanelPopup id="popover-panel-popup">Panel body</PopoverPanelPopup>
+    </OverlayPanel>
   ),
 };
 
 /**
- * CSS canary (rule 2b): asserts the pinned attribute selectors actually compiled — the
- * `data-starting-style`/`data-ending-style` popups compute to opacity 0 while the resting popup
- * stays fully opaque. Tagged out of the sidebar/docs/manifest while still running under the default
- * `test` tag.
+ * CSS canary (rule 2b): asserts the popup body carries the expected outline reset while the
+ * surrounding panel owns the visible surface chrome. Tagged out of the sidebar/docs/manifest while
+ * still running under the default `test` tag.
  */
-export const StatesCanary: Story = {
-  ...States,
+export const PanelPopupCanary: Story = {
+  ...PanelPopup,
   tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvasElement }) => {
-    const popup = (id: string) => {
-      const el = canvasElement.querySelector(`#${id}`);
-      if (!(el instanceof HTMLElement)) throw new Error(`missing #${id} popup`);
-      return el;
-    };
-    // The compiled `data-starting-style:opacity-0` / `data-ending-style:opacity-0` selectors pin
-    // the transition endpoints; the resting popup carries neither attribute.
-    await expect(getComputedStyle(popup("popover-popup-resting")).opacity).toBe("1");
-    await expect(getComputedStyle(popup("popover-popup-entering")).opacity).toBe("0");
-    await expect(getComputedStyle(popup("popover-popup-exiting")).opacity).toBe("0");
+    const popup = canvasElement.querySelector("#popover-panel-popup");
+    if (!(popup instanceof HTMLElement)) throw new Error("missing #popover-panel-popup");
+    await expect(getComputedStyle(popup).outlineStyle).toBe("none");
   },
 };
diff --git a/packages/propel/src/elements/popover/variants.ts b/packages/propel/src/elements/popover/variants.ts
index d70c7f2a..b0f59d64 100644
--- a/packages/propel/src/elements/popover/variants.ts
+++ b/packages/propel/src/elements/popover/variants.ts
@@ -1,42 +1,7 @@
-import { cva, cx } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
-import { overlayActionsClass } from "../../internal/overlay-frame";
-import { popupSurfaceClass } from "../../internal/popup-surface";
-
-// Spec "always the same": shadow/elevation, border-radius, max-width constraint, and
-// the open/close scale-fade. `max-w-xs` caps the popup at a readable column width.
-export const popoverPopupVariants = cva(cx(popupSurfaceClass, "max-w-xs p-1"));
-// The padded content column inside the popup: stacks its children vertically and
-// supplies the internal padding (the bare popup carries only the surface chrome).
-// The gap spaces sibling layout regions — e.g. an intro from an actions row — so
-// regions are separated by the parent's gap, never a margin on a child.
-export const popoverBodyVariants = cva("flex flex-col gap-2 p-2");
-// The popup's leading text group: an `OverlayTitle` stacked over an
-// `OverlayDescription`, spaced by a tight gap.
-export const popoverIntroVariants = cva("flex flex-col gap-1");
-// The popup's trailing controls row (e.g. a `PopoverClose` styled as a button):
-// pushes its children to the inline-end and spaces them by a gap.
-export const popoverActionsVariants = cva(overlayActionsClass);
 // The bare scroll-body popup used inside an elevated panel surface (see the
 // components-tier `PopoverContent`, which supplies the surface chrome via the shared
 // overlay panel). Carries only the inner padding + focus outline reset — never the
-// border / bg / shadow / radius, which would double up with the panel surface. The
-// standalone `popoverPopupVariants` (above) is the self-contained surface used when
-// the popup is NOT wrapped in a panel.
+// border / bg / shadow / radius, which would double up with the panel surface.
 export const popoverPanelPopupVariants = cva("p-1 outline-none");
-export const popoverArrowVariants = cva(
-  "size-2 rotate-45 border-sm border-subtle bg-layer-1" +
-    " data-[side=bottom]:top-[-3px] data-[side=bottom]:[clip-path:polygon(0_0,100%_0,0_100%)]" +
-    " data-[side=top]:bottom-[-3px] data-[side=top]:[clip-path:polygon(100%_0,100%_100%,0_100%)]" +
-    " data-[side=left]:right-[-3px] data-[side=left]:[clip-path:polygon(0_0,100%_0,100%_100%)]" +
-    " data-[side=right]:left-[-3px] data-[side=right]:[clip-path:polygon(0_0,0_100%,100%_100%)]" +
-    " data-[side=inline-start]:inset-e-[-3px] data-[side=inline-start]:[clip-path:polygon(0_0,100%_0,100%_100%)] rtl:data-[side=inline-start]:[clip-path:polygon(0_0,0_100%,100%_100%)]" +
-    " data-[side=inline-end]:inset-s-[-3px] data-[side=inline-end]:[clip-path:polygon(0_0,0_100%,100%_100%)] rtl:data-[side=inline-end]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
-);
-// PopoverClose is a bare button at the elements tier — no icon-button styles baked in.
-// Graft the close behavior onto it via `BasePopover.Close render={<PopoverClose />}`;
-// to give it a fuller look, graft the behavior onto a `Button` instead
-// (`BasePopover.Close render={<Button … />}`). See the Modal story for the pattern.
-export const popoverCloseVariants = cva(
-  "outline-none focus-visible:ring-2 focus-visible:ring-accent-strong",
-);
diff --git a/packages/propel/src/elements/scroll-area/index.tsx b/packages/propel/src/elements/scroll-area/index.tsx
index 000f9aed..85771b72 100644
--- a/packages/propel/src/elements/scroll-area/index.tsx
+++ b/packages/propel/src/elements/scroll-area/index.tsx
@@ -1,5 +1,4 @@
 export * from "./scroll-area";
-export * from "./scroll-area-content";
 export * from "./scroll-area-corner";
 export * from "./scroll-area-scrollbar";
 export * from "./scroll-area-thumb";
diff --git a/packages/propel/src/elements/scroll-area/scroll-area-content.tsx b/packages/propel/src/elements/scroll-area/scroll-area-content.tsx
deleted file mode 100644
index f3cb65a3..00000000
--- a/packages/propel/src/elements/scroll-area/scroll-area-content.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { scrollAreaContentVariants } from "./variants";
-
-export type ScrollAreaContentProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * The styled content wrapper inside the viewport. Base-UI-agnostic — graft in `components` via
- * `<BaseScrollArea.Content render={<ScrollAreaContent/>} />`.
- */
-export function ScrollAreaContent({ render, ...props }: ScrollAreaContentProps) {
-  const defaultProps: useRender.ElementProps<"div"> = { className: scrollAreaContentVariants() };
-  return useRender({ defaultTagName: "div", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/scroll-area/scroll-area.stories.tsx b/packages/propel/src/elements/scroll-area/scroll-area.stories.tsx
index 42de947c..f5e76586 100644
--- a/packages/propel/src/elements/scroll-area/scroll-area.stories.tsx
+++ b/packages/propel/src/elements/scroll-area/scroll-area.stories.tsx
@@ -3,7 +3,6 @@ import { expect } from "storybook/test";
 
 import {
   ScrollArea,
-  ScrollAreaContent,
   ScrollAreaCorner,
   ScrollAreaScrollbar,
   type ScrollAreaScrollbarMagnitude,
@@ -24,7 +23,6 @@ const meta = {
   component: ScrollArea,
   subcomponents: {
     ScrollAreaViewport,
-    ScrollAreaContent,
     ScrollAreaScrollbar,
     ScrollAreaThumb,
     ScrollAreaCorner,
@@ -37,12 +35,12 @@ type Story = StoryObj<typeof meta>;
 
 /**
  * The full anatomy assembled statically: `ScrollArea` (the relative flex-column root) holding
- * `ScrollAreaViewport` › `ScrollAreaContent` › the overflowing content, plus a vertical and a
- * horizontal `ScrollAreaScrollbar` rail (each with its `ScrollAreaThumb`) and the
- * `ScrollAreaCorner` where they meet (transparent by design). The rails pin the `data-orientation`
- * attribute Base UI's Scrollbar would set — the cva keys its axis layout and gutter dimension off
- * it — and use `visibility="always"` so they show at rest. The absolute positioning wrappers and
- * the fixed-length thumb wrappers stand in for Base UI's inline placement and scroll-ratio thumb
+ * `ScrollAreaViewport` › the overflowing content, plus a vertical and a horizontal
+ * `ScrollAreaScrollbar` rail (each with its `ScrollAreaThumb`) and the `ScrollAreaCorner` where
+ * they meet (transparent by design). The rails pin the `data-orientation` attribute Base UI's
+ * Scrollbar would set — the cva keys its axis layout and gutter dimension off it — and use
+ * `visibility="always"` so they show at rest. The absolute positioning wrappers and the
+ * fixed-length thumb wrappers stand in for Base UI's inline placement and scroll-ratio thumb
  * sizing; the outer box clips, standing in for the viewport's Base-UI-applied `overflow: scroll`.
  */
 export const Default: Story = {
@@ -50,15 +48,13 @@ export const Default: Story = {
     <div className="flex h-64 w-72 flex-col overflow-hidden rounded-lg border border-subtle bg-layer-1">
       <ScrollArea>
         <ScrollAreaViewport>
-          <ScrollAreaContent>
-            <div className="flex flex-col gap-2 p-3">
-              {Array.from({ length: 30 }, (_, i) => (
-                <p key={i} className="text-13 whitespace-nowrap text-secondary">
-                  Line {i + 1} of wide content that overflows horizontally as well as down.
-                </p>
-              ))}
-            </div>
-          </ScrollAreaContent>
+          <div className="flex flex-col gap-2 p-3">
+            {Array.from({ length: 30 }, (_, i) => (
+              <p key={i} className="text-13 whitespace-nowrap text-secondary">
+                Line {i + 1} of wide content that overflows horizontally as well as down.
+              </p>
+            ))}
+          </div>
         </ScrollAreaViewport>
         <div className="absolute inset-e-0 top-0 bottom-3 flex">
           <ScrollAreaScrollbar visibility="always" magnitude="thin" data-orientation="vertical">
diff --git a/packages/propel/src/elements/scroll-area/variants.ts b/packages/propel/src/elements/scroll-area/variants.ts
index 72383c45..3774bd86 100644
--- a/packages/propel/src/elements/scroll-area/variants.ts
+++ b/packages/propel/src/elements/scroll-area/variants.ts
@@ -6,7 +6,6 @@ export const scrollAreaVariants = cva("relative flex min-h-0 flex-1 flex-col");
 export const scrollAreaViewportVariants = cva(
   "min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none",
 );
-export const scrollAreaContentVariants = cva("min-w-full");
 export const scrollAreaCornerVariants = cva("bg-transparent");
 
 /**
diff --git a/packages/propel/src/elements/select/index.tsx b/packages/propel/src/elements/select/index.tsx
index 78398687..3263b718 100644
--- a/packages/propel/src/elements/select/index.tsx
+++ b/packages/propel/src/elements/select/index.tsx
@@ -1,7 +1,5 @@
 export * from "./select-field";
 export * from "./select-item-indicator";
 export * from "./select-label";
-export * from "./select-scroll-down-arrow";
-export * from "./select-scroll-up-arrow";
 export * from "./select-trigger";
 export * from "./select-value";
diff --git a/packages/propel/src/elements/select/select-scroll-down-arrow.tsx b/packages/propel/src/elements/select/select-scroll-down-arrow.tsx
deleted file mode 100644
index bbb39acb..00000000
--- a/packages/propel/src/elements/select/select-scroll-down-arrow.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useRender } from "@base-ui/react/use-render";
-
-export type SelectScrollDownArrowProps = Omit<
-  useRender.ComponentProps<"div">,
-  "className" | "style"
->;
-
-/**
- * The styled scroll-down affordance at the bottom of a scrollable popup. Base-UI-agnostic — graft
- * the scroll behavior in `components` via `<BaseSelect.ScrollDownArrow
- * render={<SelectScrollDownArrow/>} />`.
- */
-export function SelectScrollDownArrow({ render, ...props }: SelectScrollDownArrowProps) {
-  return useRender({ defaultTagName: "div", render, props });
-}
diff --git a/packages/propel/src/elements/select/select-scroll-up-arrow.tsx b/packages/propel/src/elements/select/select-scroll-up-arrow.tsx
deleted file mode 100644
index 1e1dfcdd..00000000
--- a/packages/propel/src/elements/select/select-scroll-up-arrow.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useRender } from "@base-ui/react/use-render";
-
-export type SelectScrollUpArrowProps = Omit<useRender.ComponentProps<"div">, "className" | "style">;
-
-/**
- * The styled scroll-up affordance at the top of a scrollable popup. Base-UI-agnostic — graft the
- * scroll behavior in `components` via `<BaseSelect.ScrollUpArrow render={<SelectScrollUpArrow/>}
- * />`.
- */
-export function SelectScrollUpArrow({ render, ...props }: SelectScrollUpArrowProps) {
-  return useRender({ defaultTagName: "div", render, props });
-}
diff --git a/packages/propel/src/elements/select/select.stories.tsx b/packages/propel/src/elements/select/select.stories.tsx
index 0314b24b..467dde1b 100644
--- a/packages/propel/src/elements/select/select.stories.tsx
+++ b/packages/propel/src/elements/select/select.stories.tsx
@@ -9,8 +9,6 @@ import {
   SelectField,
   SelectItemIndicator,
   SelectLabel,
-  SelectScrollDownArrow,
-  SelectScrollUpArrow,
   SelectTrigger,
   type SelectTriggerMagnitude,
   SelectValue,
@@ -24,9 +22,7 @@ const MAGNITUDES: SelectTriggerMagnitude[] = ["sm", "md", "lg"];
 // only positions it) and every visual state pinned statically via the `data-*`/aria attributes
 // Base UI's select would set (`data-highlighted=""`, `data-selected=""`, `data-disabled=""`,
 // `data-invalid=""`) or the native `disabled` attribute. Grafting, keyboard, and aria behavior are
-// demonstrated AND tested in the components-tier story (Components/Select). The scroll-arrow parts
-// carry no styling of their own yet, so they are documented as subcomponents without a pinned
-// showcase.
+// demonstrated AND tested in the components-tier story (Components/Select).
 const meta = {
   title: "Elements/Select",
   component: SelectTrigger,
@@ -35,8 +31,6 @@ const meta = {
     SelectLabel,
     SelectValue,
     SelectItemIndicator,
-    SelectScrollUpArrow,
-    SelectScrollDownArrow,
     ListboxPopup,
     ListboxItem,
   },
diff --git a/packages/propel/src/elements/tooltip/index.tsx b/packages/propel/src/elements/tooltip/index.tsx
index 244c4a97..290d1a71 100644
--- a/packages/propel/src/elements/tooltip/index.tsx
+++ b/packages/propel/src/elements/tooltip/index.tsx
@@ -1,3 +1,2 @@
 export * from "./tooltip-arrow";
 export * from "./tooltip-popup";
-export * from "./tooltip-shortcut";
diff --git a/packages/propel/src/elements/tooltip/tooltip-shortcut.tsx b/packages/propel/src/elements/tooltip/tooltip-shortcut.tsx
deleted file mode 100644
index 7a50c65a..00000000
--- a/packages/propel/src/elements/tooltip/tooltip-shortcut.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-
-import { tooltipShortcutVariants } from "./variants";
-
-export type TooltipShortcutProps = Omit<useRender.ComponentProps<"span">, "className" | "style">;
-
-/**
- * A dimmed caption-scale label for a keyboard-shortcut hint shown to the inline-end of the tooltip
- * content — the Figma "Cmd + K" slot. Omit it for a plain tooltip.
- */
-export function TooltipShortcut({ render, ...props }: TooltipShortcutProps) {
-  const defaultProps: useRender.ElementProps<"span"> = { className: tooltipShortcutVariants() };
-  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
-}
diff --git a/packages/propel/src/elements/tooltip/tooltip.stories.tsx b/packages/propel/src/elements/tooltip/tooltip.stories.tsx
index edb03ee6..894585b3 100644
--- a/packages/propel/src/elements/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/elements/tooltip/tooltip.stories.tsx
@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import { TooltipArrow, TooltipPopup, TooltipShortcut } from "./index";
+import { Shortcut as InternalShortcut } from "../../internal/shortcut";
+import { TooltipArrow, TooltipPopup } from "./index";
 
 // elements-tier story (rule 2b): a pure UI-configuration showcase. The styled parts render
 // DIRECTLY — no Base UI grafts — with the popup laid out inline (it is just a styled div; Base UI
@@ -15,7 +16,6 @@ const meta = {
   component: TooltipPopup,
   subcomponents: {
     TooltipArrow,
-    TooltipShortcut,
   },
 } satisfies Meta<typeof TooltipPopup>;
 
@@ -25,7 +25,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * The full anatomy assembled statically, as Base UI would lay it out open above its trigger (the
  * ready-made's default `side="top"`): the `TooltipPopup` surface (adaptive `layer-2` fill, caption
- * text, radius, overlay shadow) holds the label and a `TooltipShortcut` hint, with the
+ * text, radius, overlay shadow) holds the label and a decorative shortcut hint, with the
  * `TooltipArrow` pinned `data-side="top"` and parked at the bottom edge by a demo wrapper (Base
  * UI's positioner owns the real placement) so it points down at the would-be trigger.
  */
@@ -34,7 +34,9 @@ export const Default: Story = {
     <div className="relative w-fit pb-2">
       <TooltipPopup>
         Saves automatically
-        <TooltipShortcut>⌘ S</TooltipShortcut>
+        <InternalShortcut aria-hidden magnitude="sm">
+          ⌘ S
+        </InternalShortcut>
       </TooltipPopup>
       <div className="absolute inset-s-6 bottom-1" aria-hidden="true">
         <TooltipArrow data-side="top" />
@@ -44,10 +46,9 @@ export const Default: Story = {
 };
 
 /**
- * The `TooltipShortcut` slot: a keyboard-shortcut hint to the inline-end of the label — the Figma
- * "Cmd + K" slot — one notch smaller (`caption-sm`) and tinted `text/tertiary` so it reads as a
- * dimmer, secondary cue while still meeting text contrast on the popup surface. Omit it for a plain
- * tooltip.
+ * The shortcut hint sits inline-end of the label — the Figma "Cmd + K" slot — one notch smaller
+ * (`caption-sm`) and tinted `text/tertiary` so it reads as a dimmer, secondary cue while still
+ * meeting text contrast on the popup surface. Omit it for a plain tooltip.
  */
 export const Shortcut: Story = {
   render: () => (
@@ -60,7 +61,9 @@ export const Shortcut: Story = {
         <p className="text-13 text-secondary">With shortcut</p>
         <TooltipPopup>
           Open command menu
-          <TooltipShortcut>⌘ K</TooltipShortcut>
+          <InternalShortcut aria-hidden magnitude="sm">
+            ⌘ K
+          </InternalShortcut>
         </TooltipPopup>
       </div>
     </div>
diff --git a/packages/propel/src/elements/tooltip/variants.ts b/packages/propel/src/elements/tooltip/variants.ts
index 10513d73..d7ffaf90 100644
--- a/packages/propel/src/elements/tooltip/variants.ts
+++ b/packages/propel/src/elements/tooltip/variants.ts
@@ -14,7 +14,3 @@ export const tooltipArrowVariants = cva(
     "data-[side=inline-end]:inset-s-[-3px] data-[side=inline-end]:[clip-path:polygon(0_0,0_100%,100%_100%)] rtl:data-[side=inline-end]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
   ),
 );
-// Keyboard-shortcut hint rendered to the inline-end of the tooltip label (Figma "Cmd + K"):
-// one notch smaller than the label and tinted `text/tertiary` so it reads as a dimmer,
-// secondary cue while still meeting text-contrast on the popup surface.
-export const tooltipShortcutVariants = cva("text-caption-sm-regular text-tertiary");
diff --git a/packages/propel/src/internal/menu-row-parts.ts b/packages/propel/src/internal/menu-row-parts.ts
index 3f73fe24..cc9b74c2 100644
--- a/packages/propel/src/internal/menu-row-parts.ts
+++ b/packages/propel/src/internal/menu-row-parts.ts
@@ -1,6 +1,5 @@
 /**
  * Row furniture shared verbatim by the menu and context-menu families (rule 4a): the separator
- * spanning the popup padding, and the muted trailing meta/shortcut text.
+ * spanning the popup padding.
  */
 export const menuSeparatorClass = "-mx-1 my-1 border-t border-subtle";
-export const rowMetaClass = "shrink-0 text-12 text-tertiary";
diff --git a/packages/propel/src/internal/shortcut.tsx b/packages/propel/src/internal/shortcut.tsx
new file mode 100644
index 00000000..f31588fa
--- /dev/null
+++ b/packages/propel/src/internal/shortcut.tsx
@@ -0,0 +1,37 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { type StrictVariantProps } from "./variant-props";
+
+const shortcutDefaultVariants = {
+  magnitude: "md",
+} as const;
+
+export const shortcutVariants = cva("shrink-0 text-tertiary", {
+  variants: {
+    magnitude: {
+      sm: "text-caption-sm-regular",
+      md: "text-12",
+    },
+  },
+  defaultVariants: shortcutDefaultVariants,
+});
+
+type ShortcutVariantConfig = VariantProps<typeof shortcutVariants>;
+export type ShortcutMagnitude = NonNullable<ShortcutVariantConfig["magnitude"]>;
+
+export type ShortcutVariantProps = StrictVariantProps<
+  typeof shortcutVariants,
+  keyof typeof shortcutDefaultVariants
+>;
+
+export type ShortcutProps = Omit<useRender.ComponentProps<"span">, "className" | "style"> &
+  ShortcutVariantProps;
+
+export function Shortcut({ magnitude, render, ...props }: ShortcutProps) {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: shortcutVariants({ magnitude }),
+  };
+  return useRender({ defaultTagName: "span", render, props: mergeProps(defaultProps, props) });
+}
diff --git a/packages/propel/src/patterns/comment.stories.tsx b/packages/propel/src/patterns/comment.stories.tsx
index ffd3f1d0..594d12b3 100644
--- a/packages/propel/src/patterns/comment.stories.tsx
+++ b/packages/propel/src/patterns/comment.stories.tsx
@@ -91,9 +91,9 @@ type CommentComposerProps = {
   /** Placeholder shown in the empty composer. */
   placeholder?: string;
   /** Accessible name for the textarea (visually hidden). */
-  label?: React.ReactNode;
+  label?: string;
   /** Label for the submit button (base magnitude). */
-  submitLabel?: React.ReactNode;
+  submitLabel?: string;
   /** Called with the body value when the user submits a non-empty comment. */
   onSubmit?: (value: string) => void;
 };
@@ -126,7 +126,6 @@ function CommentComposer({
     onSubmit?.(currentValue);
   };
 
-  const sendLabel = typeof submitLabel === "string" ? submitLabel : "Comment";
   const controlMagnitude = magnitude === "xs" ? "sm" : "lg";
   const controlSurface = magnitude === "xs" ? "inline" : "embedded";
 
@@ -167,7 +166,7 @@ function CommentComposer({
                 prominence="secondary"
                 tone="neutral"
                 magnitude="md"
-                aria-label={sendLabel}
+                aria-label={submitLabel}
                 disabled={isEmpty}
                 onClick={handleSubmit}
                 icon={<Icon icon={ArrowUp} />}
@@ -196,7 +195,7 @@ function CommentComposer({
                   prominence="secondary"
                   tone="neutral"
                   magnitude="md"
-                  aria-label={sendLabel}
+                  aria-label={submitLabel}
                   disabled={isEmpty}
                   onClick={handleSubmit}
                   icon={<Icon icon={ArrowUp} />}