@igne-agency/react-web-ui 0.5.0 → 0.6.0

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -1,4 +1,4 @@
-import { Button } from "../button/button.js";
+import { IconButton } from "../button/button.js";
 import { Menu } from "../menu/menu.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import breadcrumbs_module_default from "./breadcrumbs.module.js";
@@ -10,34 +10,41 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/components/breadcrumbs/breadcrumbs.tsx
 var isClipped = (element) => element.scrollWidth > element.clientWidth;
 /**
-* Shows the full text of a crumb as a tooltip, only while the crumb cuts it
-* short.
+* Renders a crumb with its text, and shows the full text as a tooltip only
+* while the crumb cuts it short.
+*
+* @example
+* <Breadcrumbs.ClippedHint render={<Breadcrumbs.Page />}>Invoice 2041</Breadcrumbs.ClippedHint>
 */
 var ClippedHint = (t0) => {
-	const $ = c(7);
-	const { element, children } = t0;
+	const $ = c(8);
+	const { render, children } = t0;
 	let t1;
-	if ($[0] !== element) {
-		t1 = /* @__PURE__ */ jsx(Tooltip.Trigger, { render: element });
-		$[0] = element;
-		$[1] = t1;
-	} else t1 = $[1];
+	if ($[0] !== children || $[1] !== render) {
+		t1 = /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			render,
+			children
+		});
+		$[0] = children;
+		$[1] = render;
+		$[2] = t1;
+	} else t1 = $[2];
 	let t2;
-	if ($[2] !== children) {
+	if ($[3] !== children) {
 		t2 = /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children }) }) });
-		$[2] = children;
-		$[3] = t2;
-	} else t2 = $[3];
+		$[3] = children;
+		$[4] = t2;
+	} else t2 = $[4];
 	let t3;
-	if ($[4] !== t1 || $[5] !== t2) {
+	if ($[5] !== t1 || $[6] !== t2) {
 		t3 = /* @__PURE__ */ jsxs(Tooltip.Root, {
 			onOpenChange: _temp,
 			children: [t1, t2]
 		});
-		$[4] = t1;
-		$[5] = t2;
-		$[6] = t3;
-	} else t3 = $[6];
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
 	return t3;
 };
 /** The breadcrumb landmark. */
@@ -199,145 +206,116 @@ var Item = (t0) => {
 /**
 * A crumb leading to a page above the current one. It spreads every other prop
 * onto the `<a>` and forwards its ref, so a router's `createLink` can wrap it.
-* When it cuts its text short, it shows the full text as a tooltip.
+*
+* @example
+* <Breadcrumbs.Link href="/invoices">Invoices</Breadcrumbs.Link>
 */
 var BreadcrumbLink = (t0) => {
-	const $ = c(17);
-	let children;
+	const $ = c(14);
 	let className;
 	let props;
 	let ref;
 	let render;
 	if ($[0] !== t0) {
-		({render, className, children, ref, ...props} = t0);
+		({render, className, ref, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = ref;
-		$[5] = render;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
 	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		ref = $[4];
-		render = $[5];
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
 	}
 	let t1;
-	if ($[6] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(breadcrumbs_module_default.crumb, className);
-		$[6] = className;
-		$[7] = t1;
-	} else t1 = $[7];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[8] !== children || $[9] !== props || $[10] !== ref || $[11] !== render || $[12] !== t1) {
-		t2 = /* @__PURE__ */ jsx(LinkElement, {
-			render,
-			ref,
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
 			...props,
-			className: t1,
-			children
-		});
-		$[8] = children;
-		$[9] = props;
-		$[10] = ref;
-		$[11] = render;
-		$[12] = t1;
-		$[13] = t2;
-	} else t2 = $[13];
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
 	let t3;
-	if ($[14] !== children || $[15] !== t2) {
-		t3 = /* @__PURE__ */ jsx(ClippedHint, {
-			element: t2,
-			children
-		});
-		$[14] = children;
-		$[15] = t2;
-		$[16] = t3;
-	} else t3 = $[16];
-	return t3;
-};
-var LinkElement = (t0) => {
-	const $ = c(8);
-	let props;
-	let ref;
-	let render;
-	if ($[0] !== t0) {
-		({render, ref, ...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-		$[2] = ref;
-		$[3] = render;
-	} else {
-		props = $[1];
-		ref = $[2];
-		render = $[3];
-	}
-	let t1;
-	if ($[4] !== props || $[5] !== ref || $[6] !== render) {
-		t1 = {
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
 			defaultTagName: "a",
 			render,
 			ref,
-			props
+			props: t2
 		};
-		$[4] = props;
-		$[5] = ref;
-		$[6] = render;
-		$[7] = t1;
-	} else t1 = $[7];
-	return useRender(t1);
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
 };
 /**
-* The current page's crumb, which is not a link. When it cuts its text short,
-* it shows the full text as a tooltip.
+* The current page's crumb, which is not a link.
+*
+* @example
+* <Breadcrumbs.Page>Invoice 2041</Breadcrumbs.Page>
 */
 var Page = (t0) => {
-	const $ = c(13);
-	let children;
+	const $ = c(14);
 	let className;
 	let props;
+	let ref;
+	let render;
 	if ($[0] !== t0) {
-		({className, children, ...props} = t0);
+		({render, className, ref, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
 	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
 	}
 	let t1;
-	if ($[4] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(breadcrumbs_module_default.crumb, className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[6] !== children || $[7] !== props || $[8] !== t1) {
-		t2 = /* @__PURE__ */ jsx("span", {
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
 			"aria-current": "page",
 			...props,
-			className: t1,
-			children
-		});
-		$[6] = children;
+			className: t1
+		};
 		$[7] = props;
 		$[8] = t1;
 		$[9] = t2;
 	} else t2 = $[9];
 	let t3;
-	if ($[10] !== children || $[11] !== t2) {
-		t3 = /* @__PURE__ */ jsx(ClippedHint, {
-			element: t2,
-			children
-		});
-		$[10] = children;
-		$[11] = t2;
-		$[12] = t3;
-	} else t3 = $[12];
-	return t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
 };
 /**
 * The decorative space between two crumbs, holding the app's mark, such as a
@@ -394,47 +372,105 @@ var Separator = (t0) => {
 	} else t3 = $[13];
 	return useRender(t3);
 };
-/** A button that opens a menu of the crumbs the trail has no room for. */
-var Overflow = (t0) => {
-	const $ = c(8);
-	const { label, icon, children } = t0;
+/**
+* Holds the overflow menu's open state for `OverflowTrigger` and
+* `OverflowContent`. It renders no element of its own.
+*
+* @example
+* <Breadcrumbs.Overflow>
+* 	<Breadcrumbs.OverflowTrigger render={<IconButton label="Show more" variant="tertiary"><MoreIcon /></IconButton>} />
+* 	<Breadcrumbs.OverflowContent>…</Breadcrumbs.OverflowContent>
+* </Breadcrumbs.Overflow>
+*/
+var Overflow = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Menu.Root, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/**
+* The button that opens the menu of the crumbs the trail has no room for. It
+* renders whichever button it is given.
+*
+* @example
+* <Breadcrumbs.OverflowTrigger render={<IconButton label="Show more" variant="tertiary"><MoreIcon /></IconButton>} />
+*/
+var OverflowTrigger = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Menu.Trigger, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/**
+* The menu of folded crumbs, each a `Menu.LinkItem`, aligned under the
+* trigger's start and scrolling when it outgrows the room.
+*
+* @example
+* <Breadcrumbs.OverflowContent>
+* 	<Menu.LinkItem href="/region">Region</Menu.LinkItem>
+* </Breadcrumbs.OverflowContent>
+*/
+var OverflowContent = (t0) => {
+	const $ = c(12);
+	let className;
+	let props;
 	let t1;
-	if ($[0] !== icon || $[1] !== label) {
-		t1 = /* @__PURE__ */ jsx(Menu.Trigger, {
-			icon,
-			label
-		});
-		$[0] = icon;
-		$[1] = label;
-		$[2] = t1;
-	} else t1 = $[2];
 	let t2;
-	if ($[3] !== children) {
-		t2 = /* @__PURE__ */ jsx(Menu.Content, {
-			align: "start",
-			sideOffset: 4,
-			className: breadcrumbs_module_default.popup,
-			children
-		});
-		$[3] = children;
+	if ($[0] !== t0) {
+		({align: t1, sideOffset: t2, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
 		$[4] = t2;
-	} else t2 = $[4];
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	const align = t1 === void 0 ? "start" : t1;
+	const sideOffset = t2 === void 0 ? 4 : t2;
 	let t3;
-	if ($[5] !== t1 || $[6] !== t2) {
-		t3 = /* @__PURE__ */ jsxs(Menu.Root, { children: [t1, t2] });
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
+	if ($[5] !== className) {
+		t3 = clsx(breadcrumbs_module_default.popup, className);
+		$[5] = className;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Menu.Content, {
+			align,
+			sideOffset,
+			className: t3,
+			...props
+		});
+		$[7] = align;
+		$[8] = props;
+		$[9] = sideOffset;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
 };
 /**
 * A hidden copy of the whole trail at its full length, with one separator and
 * the overflow button, for `useFold` to measure.
+*
+* @example
+* <Breadcrumbs.Gauge ref={gauge} labels={labels} overflow={moreButton} separator={<ChevronIcon />} />
 */
 var Gauge = (t0) => {
-	const $ = c(13);
-	const { labels, overflowLabel, overflowIcon, separator, ref } = t0;
+	const $ = c(12);
+	const { labels, overflow, separator, ref } = t0;
 	let t1;
 	if ($[0] !== labels) {
 		t1 = labels.map(_temp2);
@@ -456,23 +492,17 @@ var Gauge = (t0) => {
 		$[4] = t3;
 	} else t3 = $[4];
 	let t4;
-	if ($[5] !== overflowIcon || $[6] !== overflowLabel) {
+	if ($[5] !== overflow) {
 		t4 = /* @__PURE__ */ jsx("li", {
 			"data-gauge": "overflow",
 			className: breadcrumbs_module_default.item,
-			children: /* @__PURE__ */ jsx(Button, {
-				variant: "tertiary",
-				iconOnly: true,
-				icon: overflowIcon,
-				label: overflowLabel
-			})
+			children: overflow
 		});
-		$[5] = overflowIcon;
-		$[6] = overflowLabel;
-		$[7] = t4;
-	} else t4 = $[7];
+		$[5] = overflow;
+		$[6] = t4;
+	} else t4 = $[6];
 	let t5;
-	if ($[8] !== ref || $[9] !== t1 || $[10] !== t3 || $[11] !== t4) {
+	if ($[7] !== ref || $[8] !== t1 || $[9] !== t3 || $[10] !== t4) {
 		t5 = /* @__PURE__ */ jsx("div", {
 			className: breadcrumbs_module_default.gauge,
 			"aria-hidden": true,
@@ -487,12 +517,12 @@ var Gauge = (t0) => {
 				]
 			})
 		});
-		$[8] = ref;
-		$[9] = t1;
-		$[10] = t3;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
 	return t5;
 };
 var Ancestor = (t0) => {
@@ -503,8 +533,8 @@ var Ancestor = (t0) => {
 		t1 = /* @__PURE__ */ jsx(Item, { children: crumb.render === void 0 ? /* @__PURE__ */ jsx("span", {
 			className: breadcrumbs_module_default.crumb,
 			children: crumb.label
-		}) : /* @__PURE__ */ jsx(BreadcrumbLink, {
-			render: crumb.render,
+		}) : /* @__PURE__ */ jsx(ClippedHint, {
+			render: /* @__PURE__ */ jsx(BreadcrumbLink, { render: crumb.render }),
 			children: crumb.label
 		}) });
 		$[0] = crumb.label;
@@ -532,7 +562,7 @@ var Ancestor = (t0) => {
 * and the current page stay. Renders nothing for a trail of one.
 */
 var Trail = (t0) => {
-	const $ = c(45);
+	const $ = c(49);
 	const { label, overflowLabel, overflowIcon, separator, crumbs, className } = t0;
 	const { root, gauge, folded } = useFold();
 	let t1;
@@ -545,6 +575,7 @@ var Trail = (t0) => {
 	if (crumbs.length < 2 || current === void 0) return null;
 	let T0;
 	let T1;
+	let overflowButton;
 	let t2;
 	let t3;
 	let t4;
@@ -554,36 +585,44 @@ var Trail = (t0) => {
 	if ($[2] !== className || $[3] !== crumbs || $[4] !== folded || $[5] !== label || $[6] !== overflowIcon || $[7] !== overflowLabel || $[8] !== root || $[9] !== separator) {
 		const ancestors = crumbs.slice(0, -1);
 		const hidden = ancestors.slice(1, 1 + folded);
+		let t8;
+		if ($[19] !== overflowIcon || $[20] !== overflowLabel) {
+			t8 = /* @__PURE__ */ jsx(IconButton, {
+				variant: "tertiary",
+				label: overflowLabel,
+				children: overflowIcon
+			});
+			$[19] = overflowIcon;
+			$[20] = overflowLabel;
+			$[21] = t8;
+		} else t8 = $[21];
+		overflowButton = t8;
 		T1 = Root;
 		t5 = root;
 		t6 = label;
 		t7 = className;
 		T0 = List;
-		let t8;
-		if ($[18] !== separator) {
-			t8 = (crumb) => /* @__PURE__ */ jsx(Ancestor, {
+		let t9;
+		if ($[22] !== separator) {
+			t9 = (crumb) => /* @__PURE__ */ jsx(Ancestor, {
 				crumb,
 				separator
 			}, crumb.id);
-			$[18] = separator;
-			$[19] = t8;
-		} else t8 = $[19];
-		t2 = ancestors.slice(0, 1).map(t8);
-		t3 = hidden.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(Overflow, {
-			label: overflowLabel,
-			icon: overflowIcon,
-			children: hidden.map(_temp3)
-		}) }), /* @__PURE__ */ jsx(Separator, { children: separator })] }) : null;
-		let t9;
-		if ($[20] !== separator) {
-			t9 = (crumb_1) => /* @__PURE__ */ jsx(Ancestor, {
+			$[22] = separator;
+			$[23] = t9;
+		} else t9 = $[23];
+		t2 = ancestors.slice(0, 1).map(t9);
+		t3 = hidden.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsxs(Overflow, { children: [/* @__PURE__ */ jsx(OverflowTrigger, { render: overflowButton }), /* @__PURE__ */ jsx(OverflowContent, { children: hidden.map(_temp3) })] }) }), /* @__PURE__ */ jsx(Separator, { children: separator })] }) : null;
+		let t10;
+		if ($[24] !== separator) {
+			t10 = (crumb_1) => /* @__PURE__ */ jsx(Ancestor, {
 				crumb: crumb_1,
 				separator
 			}, crumb_1.id);
-			$[20] = separator;
-			$[21] = t9;
-		} else t9 = $[21];
-		t4 = ancestors.slice(1 + hidden.length).map(t9);
+			$[24] = separator;
+			$[25] = t10;
+		} else t10 = $[25];
+		t4 = ancestors.slice(1 + hidden.length).map(t10);
 		$[2] = className;
 		$[3] = crumbs;
 		$[4] = folded;
@@ -594,86 +633,95 @@ var Trail = (t0) => {
 		$[9] = separator;
 		$[10] = T0;
 		$[11] = T1;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = t4;
-		$[15] = t5;
-		$[16] = t6;
-		$[17] = t7;
+		$[12] = overflowButton;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t7;
 	} else {
 		T0 = $[10];
 		T1 = $[11];
-		t2 = $[12];
-		t3 = $[13];
-		t4 = $[14];
-		t5 = $[15];
-		t6 = $[16];
-		t7 = $[17];
+		overflowButton = $[12];
+		t2 = $[13];
+		t3 = $[14];
+		t4 = $[15];
+		t5 = $[16];
+		t6 = $[17];
+		t7 = $[18];
 	}
 	let t8;
-	if ($[22] !== current.label) {
-		t8 = /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(Page, { children: current.label }) });
-		$[22] = current.label;
-		$[23] = t8;
-	} else t8 = $[23];
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Page, {});
+		$[26] = t8;
+	} else t8 = $[26];
 	let t9;
-	if ($[24] !== T0 || $[25] !== t2 || $[26] !== t3 || $[27] !== t4 || $[28] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(T0, { children: [
+	if ($[27] !== current.label) {
+		t9 = /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(ClippedHint, {
+			render: t8,
+			children: current.label
+		}) });
+		$[27] = current.label;
+		$[28] = t9;
+	} else t9 = $[28];
+	let t10;
+	if ($[29] !== T0 || $[30] !== t2 || $[31] !== t3 || $[32] !== t4 || $[33] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(T0, { children: [
 			t2,
 			t3,
 			t4,
-			t8
+			t9
 		] });
-		$[24] = T0;
-		$[25] = t2;
-		$[26] = t3;
-		$[27] = t4;
-		$[28] = t8;
-		$[29] = t9;
-	} else t9 = $[29];
-	let t10;
-	if ($[30] !== crumbs) {
-		t10 = crumbs.map(_temp4);
-		$[30] = crumbs;
-		$[31] = t10;
-	} else t10 = $[31];
+		$[29] = T0;
+		$[30] = t2;
+		$[31] = t3;
+		$[32] = t4;
+		$[33] = t9;
+		$[34] = t10;
+	} else t10 = $[34];
 	let t11;
-	if ($[32] !== gauge || $[33] !== overflowIcon || $[34] !== overflowLabel || $[35] !== separator || $[36] !== t10) {
-		t11 = /* @__PURE__ */ jsx(Gauge, {
+	if ($[35] !== crumbs) {
+		t11 = crumbs.map(_temp4);
+		$[35] = crumbs;
+		$[36] = t11;
+	} else t11 = $[36];
+	let t12;
+	if ($[37] !== gauge || $[38] !== overflowButton || $[39] !== separator || $[40] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Gauge, {
 			ref: gauge,
-			labels: t10,
-			overflowLabel,
-			overflowIcon,
+			labels: t11,
+			overflow: overflowButton,
 			separator
 		});
-		$[32] = gauge;
-		$[33] = overflowIcon;
-		$[34] = overflowLabel;
-		$[35] = separator;
-		$[36] = t10;
-		$[37] = t11;
-	} else t11 = $[37];
-	let t12;
-	if ($[38] !== T1 || $[39] !== t11 || $[40] !== t5 || $[41] !== t6 || $[42] !== t7 || $[43] !== t9) {
-		t12 = /* @__PURE__ */ jsxs(T1, {
+		$[37] = gauge;
+		$[38] = overflowButton;
+		$[39] = separator;
+		$[40] = t11;
+		$[41] = t12;
+	} else t12 = $[41];
+	let t13;
+	if ($[42] !== T1 || $[43] !== t10 || $[44] !== t12 || $[45] !== t5 || $[46] !== t6 || $[47] !== t7) {
+		t13 = /* @__PURE__ */ jsxs(T1, {
 			ref: t5,
 			"aria-label": t6,
 			className: t7,
-			children: [t9, t11]
+			children: [t10, t12]
 		});
-		$[38] = T1;
-		$[39] = t11;
-		$[40] = t5;
-		$[41] = t6;
-		$[42] = t7;
-		$[43] = t9;
+		$[42] = T1;
+		$[43] = t10;
 		$[44] = t12;
-	} else t12 = $[44];
-	return t12;
+		$[45] = t5;
+		$[46] = t6;
+		$[47] = t7;
+		$[48] = t13;
+	} else t13 = $[48];
+	return t13;
 };
 /**
 * The trail to the current page. Given `crumbs`, it folds what does not fit
-* into an overflow menu; the parts hanging off it compose a trail by hand.
+* into an overflow menu and hints the full text of a crumb it cuts short; the
+* parts hanging off it compose a trail by hand.
 *
 * @example
 * <Breadcrumbs
@@ -695,7 +743,10 @@ var Breadcrumbs = Object.assign(Trail, {
 	Link: BreadcrumbLink,
 	Page,
 	Separator,
+	ClippedHint,
 	Overflow,
+	OverflowTrigger,
+	OverflowContent,
 	Gauge
 });
 function _temp(open, details) {