Align breadcrumb to architecture goals

packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx

@@ -2,7 +2,11 @@ import { Menu } from "@base-ui/react/menu";
 import { ChevronRight } from "lucide-react";
 import type * as React from "react";
 
-import { BreadcrumbTrigger } from "../../ui/breadcrumb";
+import {
+  BreadcrumbTrigger,
+  BreadcrumbTriggerIcon,
+  BreadcrumbTriggerIndicator,
+} from "../../ui/breadcrumb";
 
 export type BreadcrumbMenuTriggerProps = Omit<Menu.Trigger.Props, "className" | "style"> & {
   /** Leading content, typically a work-item/page icon. */
@@ -15,16 +19,11 @@ export type BreadcrumbMenuTriggerProps = Omit<Menu.Trigger.Props, "className" |
 export function BreadcrumbMenuTrigger({ icon, children, ...props }: BreadcrumbMenuTriggerProps) {
   return (
     <Menu.Trigger render={<BreadcrumbTrigger group />} {...props}>
-      {icon != null ? (
-        <span className="flex size-4 shrink-0 items-center justify-center text-icon-tertiary">
-          {icon}
-        </span>
-      ) : null}
+      {icon != null ? <BreadcrumbTriggerIcon>{icon}</BreadcrumbTriggerIcon> : null}
       {children}
-      <ChevronRight
-        className="size-3.5 shrink-0 text-icon-tertiary transition-transform group-data-popup-open/trigger:rotate-90 rtl:not-group-data-popup-open/trigger:-scale-x-100"
-        aria-hidden="true"
-      />
+      <BreadcrumbTriggerIndicator>
+        <ChevronRight />
+      </BreadcrumbTriggerIndicator>
     </Menu.Trigger>
   );
 }

packages/propel/src/components/breadcrumb/breadcrumb-menu.tsx

@@ -1,5 +1,5 @@
 import { Menu, type MenuProps } from "../../ui/menu/index";
 
-/** A breadcrumb crumb dropdown root for switching between sibling pages or contexts. */
+/** A breadcrumb crumb menu root for switching between sibling pages or contexts. */
 export const BreadcrumbMenu = Menu;
 export type BreadcrumbMenuProps = MenuProps;

packages/propel/src/components/breadcrumb/breadcrumb-separator.tsx

@@ -0,0 +1,20 @@
+import { ChevronRight } from "lucide-react";
+
+import {
+  BreadcrumbSeparator as BreadcrumbSeparatorSlot,
+  type BreadcrumbSeparatorProps as BreadcrumbSeparatorSlotProps,
+} from "../../ui/breadcrumb";
+
+export type BreadcrumbSeparatorProps = BreadcrumbSeparatorSlotProps;
+
+/**
+ * The divider between crumbs. Defaults to a chevron — the ready-made breadcrumb owns the default
+ * glyph so the `ui` slot stays a pure single element. Pass `children` to use a different divider.
+ */
+export function BreadcrumbSeparator({ children, ...props }: BreadcrumbSeparatorProps) {
+  return (
+    <BreadcrumbSeparatorSlot {...props}>
+      {children ?? <ChevronRight aria-hidden />}
+    </BreadcrumbSeparatorSlot>
+  );
+}