@thewhatmatters/wmds 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -7,6 +7,20 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.2
+
+**Breadcrumb** — the path to the current page, after the shadcn/ui breadcrumb: links from the root, a separator between them, the current page last, and a long path folded into a "…" menu of links. See **ADR-0042**.
+
+- **Breadcrumb** (new) — pass `items` (`{ label, href }`; the last item, without `href`, is the current page). Above `maxItems` (default 4) the first item and the last two stay and the middle folds into a "…" control; it opens a menu of the hidden links, with focus on the first, arrow keys between them, and Escape back to the control. Long labels truncate. `separator`: `chevron` (default) or `slash`. `variant`: `sans` (default) or `mono` (eyebrow caps). `renderLink` routes every link through your router (`(item) => <Link href={item.href} />`). New **Pattern — path**, **Pattern — long path**, **Pattern — router links**, and **Pattern — editorial**.
+- **Dropdown.Item** `render` — compose a row onto another element, such as `render={<a href />}` for a menu of links.
+- **Guides/Post page → Pattern — post page** — a mono, slash-separated **Breadcrumb** above the title. `PostPageData` gains `breadcrumb`.
+
+### Consumer actions
+
+1. **WhatMatters site, post page: re-copy Guides/Post page → Pattern — post page** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-post-page--post-page.tsx`) and re-apply only your content, data, and handlers. Pass `breadcrumb` in `PostPageData`, ending with the post — for example `[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog" }, { label: post.title }]`, with the post's category between Blog and the title if you link categories. To route crumbs through Next, pass `renderLink={(item) => <Link href={item.href} />}` on the pattern's **Breadcrumb**.
+2. **WhatMatters site, other deep pages** (a resource category, a case study): add `<Breadcrumb items={…} />` above the page title — `variant="mono" separator="slash"` on editorial pages, to match the post page.
+3. Other apps: none. **Breadcrumb** and **Dropdown.Item** `render` are new and optional.
+
 ## 0.4.1
 
 **ChatDock:** follow-ups in the open window, actions and a match score under each reply, a Start a project gate in the composer's place, the visitor's messages on a brand tint, and a new open and close transition.

package/CONSUMING.md

@@ -268,6 +268,7 @@ import {
 | `ChatDock` | `title`, `subtitle`, `mark`, `greeting`, `messages` (replies may carry `copyText`, `meta`, `feedback`), `thinking`, `suggestions`, `followUps`, `followUpsPlacement`, `onSend`, `onSuggestionSelect`, `onMessageFeedback`, `gate` (**ChatDock.Gate**), `disclaimer` | Components/ChatDock — **Pattern — chat dock**. The site assistant: a pinned **PromptBar** with suggested-question pills on hover that opens into a non-modal chat window (full screen on phones). The app owns the conversation and the request, and passes `followUps` for the latest reply when it has them (shown under the reply by default). Finished replies get Copy, thumbs, and a score row from `copyText`, `onMessageFeedback` with `feedback`, and `meta`. Start a project runs as a `gate` in the composer's place — **Pattern — start a project gate**. Replaces the separate ask page. |
 | `Card` | `variant`, `shape`, `padding` | Components/Card/Card — `Card.Header` (`start` | `end`), **`Card.Body` slot** (no default fill), `Card.Footer` |
 | `Accordion` | `variant`, `flush` (plain), `Accordion.Item` `leading` / `label` / `trailing` / `open` | Components/Accordion — FAQ, settings sections; **Pattern — flush** for filter groups. Closed panels leave the tab order |
+| `Breadcrumb` | `items` (`{ label, href }`, current page last), `maxItems`, `separator` (`chevron` \| `slash`), `variant` (`sans` \| `mono`), `renderLink`, `labels` | Components/Breadcrumb — **Pattern — path**, **long path**, **router links**, **editorial** |
 | `DescriptionList` | `layout` (`inline` \| `stacked`), `rule` (`solid` \| `dotted` \| `none`), `variant` (`sans` \| `mono`), `DescriptionList.Item` `name` / `layout` | Components/DescriptionList — **Pattern — post metadata**, **Pattern — details** |
 | `SectionCaption` | `children`, `as`, `id`, `end`, `marker`, `rule` | Components/SectionCaption — **Pattern — column caption**, **Pattern — caption with an action** |
 | `Prose` | `size` (`lg` \| `md`), `measure` (`reading` \| `none`), `as` | Components/Prose — **Pattern — article body**. Full page: **Guides/Post page → Pattern — post page** |

package/dist/components/molecules/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,59 @@
+import { type ReactElement } from "react";
+import { type BreadcrumbSeparator, type BreadcrumbVariant } from "./breadcrumbStyles";
+export { breadcrumbSeparators, breadcrumbVariants, type BreadcrumbSeparator, type BreadcrumbVariant, } from "./breadcrumbStyles";
+/** Layout-only — margin or grid placement. */
+export type BreadcrumbLayoutClassName = string;
+export interface BreadcrumbItemDef {
+    /** Stable key. Default: `href`, else `label`. */
+    id?: string;
+    label: string;
+    /** Where the crumb goes. Leave it out on the last item — the current page. */
+    href?: string;
+}
+/** A crumb with somewhere to go — what `renderLink` receives. */
+export type BreadcrumbLinkItem = BreadcrumbItemDef & {
+    href: string;
+};
+export interface BreadcrumbLabels {
+    /** Names the navigation landmark. Default: "Breadcrumb". */
+    nav: string;
+    /** Names the "…" control. Default: "Show 2 more pages". */
+    more: (count: number) => string;
+}
+export declare const breadcrumbDefaultLabels: BreadcrumbLabels;
+export interface BreadcrumbProps {
+    /** The path, from the root to the current page (the last item). */
+    items: BreadcrumbItemDef[];
+    /**
+     * The most crumbs shown. A longer path keeps the first item and the last `maxItems - 2`, and
+     * folds the middle into a "…" control that opens a menu of its links. Default: 4. Minimum: 3.
+     */
+    maxItems?: number;
+    /** `chevron` (default) or `slash`. */
+    separator?: BreadcrumbSeparator;
+    /** `sans` (default, body type) or `mono` (eyebrow caps, for editorial pages). */
+    variant?: BreadcrumbVariant;
+    /**
+     * Route links through your router: return the link element without children, for example
+     * `(item) => <Link href={item.href} />`. Default: `<a href={item.href} />`.
+     */
+    renderLink?: (item: BreadcrumbLinkItem) => ReactElement;
+    labels?: Partial<BreadcrumbLabels>;
+    className?: BreadcrumbLayoutClassName;
+}
+type BreadcrumbSlot = {
+    kind: "item";
+    item: BreadcrumbItemDef;
+    current: boolean;
+} | {
+    kind: "more";
+    items: BreadcrumbItemDef[];
+};
+/** First, the collapsed middle, then the last `maxItems - 2`. */
+export declare function breadcrumbSlots(items: BreadcrumbItemDef[], maxItems?: number): BreadcrumbSlot[];
+/**
+ * The path to the current page — links from the root, the current page last. A long path folds its
+ * middle into a "…" control that opens a menu of the hidden links.
+ */
+export declare function Breadcrumb({ items, maxItems, separator, variant, renderLink, labels: labelsProp, className, }: BreadcrumbProps): import("react").JSX.Element;
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/components/molecules/Breadcrumb/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAQf,OAAO,EAUL,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,GACvB,MAAM,oBAAoB,CAAC;AAE5B,8CAA8C;AAC9C,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,iEAAiE;AACjE,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtE,MAAM,WAAW,gBAAgB;IAC/B,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAC;IACZ,2DAA2D;IAC3D,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,uBAAuB,EAAE,gBAGrC,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,mEAAmE;IACnE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,iFAAiF;IACjF,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,YAAY,CAAC;IACxD,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,yBAAyB,CAAC;CACvC;AAED,KAAK,cAAc,GACf;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,iBAAiB,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAC3D;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,iBAAiB,EAAE,CAAA;CAAE,CAAC;AAEjD,iEAAiE;AACjE,wBAAgB,eAAe,CAC7B,KAAK,EAAE,iBAAiB,EAAE,EAC1B,QAAQ,SAAI,GACX,cAAc,EAAE,CAiBlB;AAoND;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAY,EACZ,SAAqB,EACrB,OAAgB,EAChB,UAA8B,EAC9B,MAAM,EAAE,UAAU,EAClB,SAAS,GACV,EAAE,eAAe,+BAwCjB"}

package/dist/components/molecules/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,188 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { ButtonIcon as t } from "../../atoms/Button/ButtonIcon.js";
+import { IconButton as n } from "../../atoms/IconButton/IconButton.js";
+import { Dropdown as r } from "../Dropdown/Dropdown.js";
+import { measureDropdownMenuStyle as i } from "../Dropdown/dropdownMenuPosition.js";
+import { breadcrumbItemClasses as a, breadcrumbLinkClasses as o, breadcrumbListClasses as s, breadcrumbMoreClasses as c, breadcrumbPageClasses as l, breadcrumbSeparatorClasses as u, breadcrumbSeparators as d, breadcrumbSlashClasses as f, breadcrumbTextClasses as p, breadcrumbVariantClasses as m, breadcrumbVariants as h } from "./breadcrumbStyles.js";
+import { Fragment as g, useCallback as _, useEffect as v, useId as y, useLayoutEffect as b, useRef as x, useState as S } from "react";
+import { ChevronRight as C, Ellipsis as w } from "lucide-react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { useRender as D } from "@base-ui/react/use-render";
+//#region src/components/molecules/Breadcrumb/Breadcrumb.tsx
+var O = {
+	nav: "Breadcrumb",
+	more: (e) => `Show ${e} more ${e === 1 ? "page" : "pages"}`
+};
+function k(e, t = 4) {
+	let n = Math.max(3, Math.floor(t)), r = e.length - 1, i = (e, t) => ({
+		kind: "item",
+		item: e,
+		current: t === r
+	});
+	if (e.length <= n) return e.map(i);
+	let a = n - 2;
+	return [
+		i(e[0], 0),
+		{
+			kind: "more",
+			items: e.slice(1, e.length - a)
+		},
+		...e.slice(e.length - a).map((t, n) => i(t, e.length - a + n))
+	];
+}
+function A(e) {
+	return e.id ?? e.href ?? e.label;
+}
+function j(e) {
+	return /* @__PURE__ */ T("a", { href: e.href });
+}
+function M(e) {
+	return e.href != null;
+}
+function N({ item: e, renderLink: t }) {
+	return D({
+		render: t(e),
+		props: {
+			className: o,
+			title: e.label,
+			children: e.label
+		}
+	});
+}
+function P({ separator: e }) {
+	return /* @__PURE__ */ T("li", {
+		role: "presentation",
+		"aria-hidden": "true",
+		className: u,
+		children: e === "slash" ? /* @__PURE__ */ T("span", {
+			className: f,
+			children: "/"
+		}) : /* @__PURE__ */ T(t, {
+			size: "xs",
+			children: /* @__PURE__ */ T(C, {})
+		})
+	});
+}
+function F({ items: e, label: t, renderLink: a }) {
+	let o = y(), s = x(null), l = x(null), u = x(null), [d, f] = S(!1), [p, m] = S(null), h = x(!1), g = _(() => {
+		let t = l.current;
+		t != null && m(i(t, e.map((e) => ({ label: e.label })), {
+			align: "start",
+			widthMode: "content"
+		}));
+	}, [e]), C = _((e) => {
+		f(!1), m(null), e && l.current?.querySelector("button")?.focus();
+	}, []);
+	b(() => {
+		if (d) return g(), window.addEventListener("resize", g), window.addEventListener("scroll", g, !0), () => {
+			window.removeEventListener("resize", g), window.removeEventListener("scroll", g, !0);
+		};
+	}, [d, g]), v(() => {
+		!d || p == null || !h.current || (h.current = !1, u.current?.querySelector("a, [href], button")?.focus());
+	}, [d, p]), v(() => {
+		if (!d) return;
+		function e(e) {
+			s.current != null && !s.current.contains(e.target) && C(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [d, C]);
+	function D() {
+		return [...u.current?.querySelectorAll("a, [href], button") ?? []];
+	}
+	function O(e) {
+		if (!d) {
+			e.key === "ArrowDown" && (e.preventDefault(), h.current = !0, f(!0));
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault(), C(!0);
+			return;
+		}
+		if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+		let t = D();
+		if (t.length === 0) return;
+		e.preventDefault();
+		let n = t.indexOf(document.activeElement), r = e.key === "ArrowDown" ? 1 : -1;
+		t[n === -1 ? r === 1 ? 0 : t.length - 1 : (n + r + t.length) % t.length]?.focus();
+	}
+	function k(e) {
+		if (!d) return;
+		let t = e.relatedTarget;
+		(t == null || !s.current?.contains(t)) && C(!1);
+	}
+	return /* @__PURE__ */ E("div", {
+		ref: s,
+		className: c,
+		onKeyDown: O,
+		onBlur: k,
+		children: [/* @__PURE__ */ T("div", {
+			ref: l,
+			className: "inline-flex",
+			children: /* @__PURE__ */ T(n, {
+				size: "sm",
+				icon: /* @__PURE__ */ T(w, {}),
+				"aria-label": t,
+				title: "",
+				"aria-expanded": d,
+				"aria-controls": d ? o : void 0,
+				onClick: () => {
+					d ? C(!1) : (h.current = !0, f(!0));
+				}
+			})
+		}), d && p != null ? /* @__PURE__ */ T("div", {
+			ref: u,
+			children: /* @__PURE__ */ T(r.Menu, {
+				id: o,
+				"aria-label": t,
+				style: p,
+				children: e.map((e) => /* @__PURE__ */ T("li", { children: M(e) ? /* @__PURE__ */ T(r.Item, {
+					truncate: !1,
+					render: a(e),
+					onClick: () => C(!1),
+					children: e.label
+				}) : /* @__PURE__ */ T(r.Item, {
+					truncate: !1,
+					disabled: !0,
+					children: e.label
+				}) }, A(e)))
+			})
+		}) : null]
+	});
+}
+function I({ items: t, maxItems: n = 4, separator: r = "chevron", variant: i = "sans", renderLink: o = j, labels: c, className: u }) {
+	let d = {
+		...O,
+		...c
+	}, f = k(t, n);
+	return /* @__PURE__ */ T("nav", {
+		"aria-label": d.nav,
+		className: u,
+		"data-variant": i,
+		children: /* @__PURE__ */ T("ol", {
+			className: e(s, m[i]),
+			children: f.map((e, t) => /* @__PURE__ */ E(g, { children: [t > 0 ? /* @__PURE__ */ T(P, { separator: r }) : null, /* @__PURE__ */ T("li", {
+				className: a,
+				children: e.kind === "more" ? /* @__PURE__ */ T(F, {
+					items: e.items,
+					label: d.more(e.items.length),
+					renderLink: o
+				}) : e.current ? /* @__PURE__ */ T("span", {
+					className: l,
+					"aria-current": "page",
+					title: e.item.label,
+					children: e.item.label
+				}) : M(e.item) ? /* @__PURE__ */ T(N, {
+					item: e.item,
+					renderLink: o
+				}) : /* @__PURE__ */ T("span", {
+					className: p,
+					title: e.item.label,
+					children: e.item.label
+				})
+			})] }, e.kind === "more" ? "more" : A(e.item)))
+		})
+	});
+}
+//#endregion
+export { I as Breadcrumb, O as breadcrumbDefaultLabels, d as breadcrumbSeparators, k as breadcrumbSlots, h as breadcrumbVariants };

package/dist/components/molecules/Breadcrumb/breadcrumbStyles.d.ts

@@ -0,0 +1,21 @@
+export declare const breadcrumbSeparators: readonly ["chevron", "slash"];
+/** Between crumbs: a chevron (default) or a slash. */
+export type BreadcrumbSeparator = (typeof breadcrumbSeparators)[number];
+export declare const breadcrumbVariants: readonly ["sans", "mono"];
+/** `sans` (default) — body type. `mono` — `type-eyebrow` caps, for editorial pages beside **SectionCaption**. */
+export type BreadcrumbVariant = (typeof breadcrumbVariants)[number];
+export declare const breadcrumbListClasses = "m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 sm:gap-x-2";
+export declare const breadcrumbVariantClasses: Record<BreadcrumbVariant, string>;
+export declare const breadcrumbItemClasses = "inline-flex min-w-0 items-center";
+/** A link crumb — muted, darkening with an underline on hover, the focus ring. */
+export declare const breadcrumbLinkClasses: string;
+/** The current page — the last crumb, not a link. */
+export declare const breadcrumbPageClasses: string;
+/** A crumb with no link that is not the current page. */
+export declare const breadcrumbTextClasses: string;
+export declare const breadcrumbSeparatorClasses = "inline-flex shrink-0 items-center text-muted";
+/** The slash separator — a character in the crumbs' own type. */
+export declare const breadcrumbSlashClasses = "select-none";
+/** Holds the 36px "…" control in the text line without growing the row. */
+export declare const breadcrumbMoreClasses = "relative -mx-2.5 -my-2 inline-flex";
+//# sourceMappingURL=breadcrumbStyles.d.ts.map

package/dist/components/molecules/Breadcrumb/breadcrumbStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Breadcrumb/breadcrumbStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,+BAAgC,CAAC;AAElE,sDAAsD;AACtD,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,kBAAkB,2BAA4B,CAAC;AAE5D,iHAAiH;AACjH,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,eAAO,MAAM,qBAAqB,uFAAuF,CAAC;AAE1H,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAGtE,CAAC;AAEF,eAAO,MAAM,qBAAqB,qCAAqC,CAAC;AAKxE,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,QAOjC,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,qBAAqB,QAAwC,CAAC;AAE3E,yDAAyD;AACzD,eAAO,MAAM,qBAAqB,QAA2C,CAAC;AAE9E,eAAO,MAAM,0BAA0B,iDAAiD,CAAC;AAEzF,iEAAiE;AACjE,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AAEpD,2EAA2E;AAC3E,eAAO,MAAM,qBAAqB,uCAAuC,CAAC"}

package/dist/components/molecules/Breadcrumb/breadcrumbStyles.js

@@ -0,0 +1,11 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { motionTransition as n } from "../../../lib/motion.js";
+//#region src/components/molecules/Breadcrumb/breadcrumbStyles.ts
+var r = ["chevron", "slash"], i = ["sans", "mono"], a = "m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 sm:gap-x-2", o = {
+	sans: e(t("body"), "text-muted"),
+	mono: t("eyebrow")
+}, s = "inline-flex min-w-0 items-center", c = "block max-w-[10rem] truncate sm:max-w-[16rem] lg:max-w-[24rem]", l = e(c, "rounded-sm text-muted underline decoration-transparent decoration-solid underline-offset-4", "transition-[color,text-decoration-color]", n("fast"), "hover:text-fg hover:decoration-current", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-body"), u = e(c, "text-fg"), d = e(c, "text-muted"), f = "inline-flex shrink-0 items-center text-muted", p = "select-none", m = "relative -mx-2.5 -my-2 inline-flex";
+//#endregion
+export { s as breadcrumbItemClasses, l as breadcrumbLinkClasses, a as breadcrumbListClasses, m as breadcrumbMoreClasses, u as breadcrumbPageClasses, f as breadcrumbSeparatorClasses, r as breadcrumbSeparators, p as breadcrumbSlashClasses, d as breadcrumbTextClasses, o as breadcrumbVariantClasses, i as breadcrumbVariants };

package/dist/components/molecules/Dropdown/DropdownItem.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
 /** Layout-only — not for row colors or typography overrides. */
 export type DropdownItemLayoutClassName = string;
 export interface DropdownItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -14,10 +14,15 @@ export interface DropdownItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonE
     active?: boolean;
     /** When false, label stays full width — **Select** listbox. Default true for action menus. */
     truncate?: boolean;
+    /**
+     * Compose the row onto another element (Base UI `render`) — `render={<a href="/docs" />}` for a
+     * menu of links, such as **Breadcrumb**'s collapsed pages. `disabled` maps to `aria-disabled`.
+     */
+    render?: ReactElement;
     className?: DropdownItemLayoutClassName;
 }
 /**
  * Dropdown row — start | label | end. Used by **Select** listbox options and future menu patterns.
  */
-export declare function DropdownItem({ children, start, end, selected, active, truncate, disabled, className, type, ...props }: DropdownItemProps): import("react").JSX.Element;
+export declare function DropdownItem({ children, start, end, selected, active, truncate, disabled, className, type, render, ...props }: DropdownItemProps): import("react").JSX.Element;
 //# sourceMappingURL=DropdownItem.d.ts.map

package/dist/components/molecules/Dropdown/DropdownItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAc7D,gEAAgE;AAChE,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,GAAG,EACH,QAAgB,EAChB,MAAc,EACd,QAAe,EACf,QAAQ,EACR,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAmCnB"}
+{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAc3E,gEAAgE;AAChE,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,GAAG,EACH,QAAgB,EAChB,MAAc,EACd,QAAe,EACf,QAAQ,EACR,SAAS,EACT,IAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA2CnB"}

package/dist/components/molecules/Dropdown/DropdownItem.js

@@ -2,35 +2,51 @@
 import { cn as e } from "../../../lib/cn.js";
 import { dropdownItemButtonClasses as t, dropdownItemEndClasses as n, dropdownItemLabelClasses as r, dropdownItemLabelFullClasses as i, dropdownItemSelectedCheckClasses as a, dropdownItemStartClasses as o } from "./dropdownStyles.js";
 import { Check as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useRender as d } from "@base-ui/react/use-render";
 //#region src/components/molecules/Dropdown/DropdownItem.tsx
-function u({ children: u, start: d, end: f, selected: p = !1, active: m = !1, truncate: h = !0, disabled: g, className: _, type: v = "button", ...y }) {
-	let b = p ? /* @__PURE__ */ c("span", {
+function f({ children: d, start: f, end: m, selected: h = !1, active: g = !1, truncate: _ = !0, disabled: v, className: y, type: b = "button", render: x, ...S }) {
+	let C = h ? /* @__PURE__ */ l("span", {
 		className: a,
 		"aria-hidden": !0,
-		children: /* @__PURE__ */ c(s, { strokeWidth: 2 })
-	}) : f == null ? null : /* @__PURE__ */ c("span", {
+		children: /* @__PURE__ */ l(s, { strokeWidth: 2 })
+	}) : m == null ? null : /* @__PURE__ */ l("span", {
 		className: n,
-		children: f
+		children: m
+	}), w = e(t, h && "hover:bg-transparent focus-visible:bg-transparent", g && !h && "bg-accent-muted", v && "pointer-events-none opacity-50", y), T = /* @__PURE__ */ u(c, { children: [
+		f == null ? null : /* @__PURE__ */ l("span", {
+			className: o,
+			"aria-hidden": !0,
+			children: f
+		}),
+		/* @__PURE__ */ l("span", {
+			className: _ ? r : i,
+			children: d
+		}),
+		C
+	] });
+	return /* @__PURE__ */ l(p, {
+		...S,
+		render: x,
+		type: b,
+		disabled: v,
+		className: w,
+		children: T
 	});
-	return /* @__PURE__ */ l("button", {
-		...y,
-		type: v,
-		disabled: g,
-		className: e(t, p && "hover:bg-transparent focus-visible:bg-transparent", m && !p && "bg-accent-muted", g && "pointer-events-none opacity-50", _),
-		children: [
-			d == null ? null : /* @__PURE__ */ c("span", {
-				className: o,
-				"aria-hidden": !0,
-				children: d
-			}),
-			/* @__PURE__ */ c("span", {
-				className: h ? r : i,
-				children: u
-			}),
-			b
-		]
+}
+function p({ render: e, type: t, disabled: n, ...r }) {
+	return d({
+		render: e,
+		defaultTagName: "button",
+		props: e ? {
+			...r,
+			"aria-disabled": n ? !0 : void 0
+		} : {
+			...r,
+			type: t,
+			disabled: n
+		}
 	});
 }
 //#endregion
-export { u as DropdownItem };
+export { f as DropdownItem };