@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/components/toast/toast-provider.js

@@ -1,147 +1,301 @@
-import SvgCheckCircle from "../../vendor/@material-design-icons/svg/outlined/check_circle.js";
-import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
-import SvgError from "../../vendor/@material-design-icons/svg/outlined/error.js";
-import SvgInfo from "../../vendor/@material-design-icons/svg/outlined/info.js";
-import SvgWarningAmber from "../../vendor/@material-design-icons/svg/outlined/warning_amber.js";
+import { useRequiredContext } from "../../lib/use-required-context.js";
 import { Button } from "../button/button.js";
-import { Icon } from "../icon/icon.js";
 import { flushBufferedToasts, toastManager } from "./toast.js";
 import toast_provider_module_default from "./toast-provider.module.js";
 import { c } from "react/compiler-runtime";
-import { useEffect } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, createContext, useEffect } from "react";
 import { Toast } from "@base-ui/react/toast";
 // src/components/toast/toast-provider.tsx
-var TONE_ICON = {
-	success: SvgCheckCircle,
-	error: SvgError,
-	warning: SvgWarningAmber,
-	info: SvgInfo
+var ToastIdContext = createContext(null);
+/** A toast's frame, in its tone: a dialog that holds the other parts. */
+var Root = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let toast;
+	if ($[0] !== t0) {
+		({toast, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = toast;
+	} else {
+		className = $[1];
+		props = $[2];
+		toast = $[3];
+	}
+	const t1 = toast.id;
+	const t2 = toast.data?.tone;
+	let t3;
+	if ($[4] !== className) {
+		t3 = clsx(toast_provider_module_default.toast, className);
+		$[4] = className;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== props || $[7] !== t2 || $[8] !== t3 || $[9] !== toast) {
+		t4 = /* @__PURE__ */ jsx(Toast.Root, {
+			toast,
+			"data-tone": t2,
+			...props,
+			className: t3
+		});
+		$[6] = props;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = toast;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t4 || $[12] !== toast.id) {
+		t5 = /* @__PURE__ */ jsx(ToastIdContext, {
+			value: t1,
+			children: t4
+		});
+		$[11] = t4;
+		$[12] = toast.id;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
 };
-var ToastBody = (t0) => {
-	const $ = c(22);
-	const { data, closeLabel, onClose } = t0;
-	if (!data) return null;
-	const t1 = TONE_ICON[data.tone];
+/** The caller's glyph before the title, sized and coloured by the toast. Renders nothing without children. */
+var Icon = (t0) => {
+	const $ = c(8);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== children || $[5] !== className || $[6] !== props) {
+		t1 = children === void 0 || children === null || children === false ? null : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			...props,
+			className: clsx(toast_provider_module_default.icon, className),
+			children
+		});
+		$[4] = children;
+		$[5] = className;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+};
+/** The toast's heading, which names its dialog. */
+var Title = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(toast_provider_module_default.title, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[0] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Icon, {
-			svg: t1,
-			size: 1.2,
-			label: ""
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Toast.Title, {
+			...props,
+			className: t1
 		});
-		$[0] = t1;
-		$[1] = t2;
-	} else t2 = $[1];
-	const t3 = data.title ?? data.body;
-	let t4;
-	if ($[2] !== t3) {
-		t4 = /* @__PURE__ */ jsx(Toast.Title, {
-			className: toast_provider_module_default.title,
-			children: t3
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The text under the title, which describes its dialog. */
+var Description = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(toast_provider_module_default.description, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Toast.Description, {
+			...props,
+			className: t1
 		});
-		$[2] = t3;
-		$[3] = t4;
-	} else t4 = $[3];
-	let t5;
-	if ($[4] !== t2 || $[5] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("div", {
-			className: toast_provider_module_default.headingMain,
-			children: [t2, t4]
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The row of buttons under the text, re-coloured for the toast's tone. */
+var Actions = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(toast_provider_module_default.actions, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			...props,
+			className: t1
 		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The icon-only button that closes the toast, named for every input. */
+var Close = (t0) => {
+	const $ = c(10);
+	const { label, children, className } = t0;
+	const id = useRequiredContext(ToastIdContext, "Toast.Close must be rendered inside <Toast.Root>.");
+	const { close } = Toast.useToastManager();
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(toast_provider_module_default.close, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== close || $[3] !== id) {
+		t2 = () => {
+			close(id);
+		};
+		$[2] = close;
+		$[3] = id;
 		$[4] = t2;
-		$[5] = t4;
-		$[6] = t5;
-	} else t5 = $[6];
-	let t6;
-	if ($[7] !== closeLabel || $[8] !== onClose) {
-		t6 = /* @__PURE__ */ jsx(Button, {
-			className: toast_provider_module_default.closeButton,
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== children || $[6] !== label || $[7] !== t1 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			className: t1,
 			variant: "tertiary",
 			size: "sm",
 			iconOnly: true,
-			icon: SvgClose,
-			label: closeLabel,
-			onClick: onClose
-		});
-		$[7] = closeLabel;
-		$[8] = onClose;
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[10] !== t5 || $[11] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			className: toast_provider_module_default.header,
-			children: [t5, t6]
-		});
-		$[10] = t5;
-		$[11] = t6;
-		$[12] = t7;
-	} else t7 = $[12];
-	let t8;
-	if ($[13] !== data.body || $[14] !== data.title) {
-		t8 = data.title !== void 0 && /* @__PURE__ */ jsx(Toast.Description, {
-			className: toast_provider_module_default.description,
-			children: data.body
+			icon: children,
+			label,
+			onClick: t2
 		});
-		$[13] = data.body;
-		$[14] = data.title;
-		$[15] = t8;
-	} else t8 = $[15];
-	let t9;
-	if ($[16] !== data.actions) {
-		t9 = data.actions && data.actions.length > 0 && /* @__PURE__ */ jsx("div", {
-			className: toast_provider_module_default.actions,
-			children: data.actions.map(_temp)
-		});
-		$[16] = data.actions;
-		$[17] = t9;
-	} else t9 = $[17];
-	let t10;
-	if ($[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			t7,
-			t8,
-			t9
-		] });
-		$[18] = t7;
-		$[19] = t8;
-		$[20] = t9;
-		$[21] = t10;
-	} else t10 = $[21];
-	return t10;
+		$[5] = children;
+		$[6] = label;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
 };
-var ToastList = (t0) => {
+/**
+* The parts of one toast: the `Root` frame in its tone, the `Icon`, `Title`,
+* `Description` and `Actions`, and the `Close` button.
+*
+* @example
+* <Toast.Root toast={toast}>
+* 	<Toast.Title>{toast.data?.body}</Toast.Title>
+* 	<Toast.Close label="Close"><CloseIcon /></Toast.Close>
+* </Toast.Root>
+*/
+var Toast$1 = {
+	Root,
+	Icon,
+	Title,
+	Description,
+	Actions,
+	Close
+};
+var DefaultToast = (t0) => {
 	const $ = c(7);
-	const { closeLabel } = t0;
-	const { toasts, close } = Toast.useToastManager();
+	const { toast, closeLabel, closeIcon } = t0;
+	const { data } = toast;
 	let t1;
-	if ($[0] !== close || $[1] !== closeLabel || $[2] !== toasts) {
-		let t2;
-		if ($[4] !== close || $[5] !== closeLabel) {
-			t2 = (toast) => /* @__PURE__ */ jsx(Toast.Root, {
-				toast,
-				className: toast_provider_module_default.toast,
-				"data-tone": toast.data?.tone,
-				children: /* @__PURE__ */ jsx("div", {
-					className: toast_provider_module_default.content,
-					children: /* @__PURE__ */ jsx(ToastBody, {
-						data: toast.data,
-						closeLabel,
-						onClose: () => close(toast.id)
-					})
-				})
-			}, toast.id);
-			$[4] = close;
-			$[5] = closeLabel;
-			$[6] = t2;
-		} else t2 = $[6];
-		t1 = toasts.map(t2);
-		$[0] = close;
+	if ($[0] !== closeIcon || $[1] !== closeLabel || $[2] !== data) {
+		t1 = data === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(Icon, { children: data.icon }),
+			/* @__PURE__ */ jsx(Title, { children: data.title ?? data.body }),
+			/* @__PURE__ */ jsx(Close, {
+				label: closeLabel,
+				children: closeIcon
+			}),
+			data.title === void 0 ? null : /* @__PURE__ */ jsx(Description, { children: data.body }),
+			data.actions && data.actions.length > 0 ? /* @__PURE__ */ jsx(Actions, { children: data.actions.map(_temp) }) : null
+		] });
+		$[0] = closeIcon;
 		$[1] = closeLabel;
-		$[2] = toasts;
+		$[2] = data;
 		$[3] = t1;
 	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1 || $[5] !== toast) {
+		t2 = /* @__PURE__ */ jsx(Root, {
+			toast,
+			children: t1
+		});
+		$[4] = t1;
+		$[5] = toast;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+};
+var ToastList = (t0) => {
+	const $ = c(5);
+	const { renderToast } = t0;
+	const { toasts } = Toast.useToastManager();
+	let t1;
+	if ($[0] !== renderToast || $[1] !== toasts) {
+		let t2;
+		if ($[3] !== renderToast) {
+			t2 = (toast) => /* @__PURE__ */ jsx(Fragment$1, { children: renderToast(toast) }, toast.id);
+			$[3] = renderToast;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = toasts.map(t2);
+		$[0] = renderToast;
+		$[1] = toasts;
+		$[2] = t1;
+	} else t1 = $[2];
 	return t1;
 };
 /**
@@ -149,13 +303,13 @@ var ToastList = (t0) => {
 * {@link toastManager} to base-ui and renders the viewport alongside the app.
 *
 * @example
-* <ToastProvider closeLabel="Close" viewportLabel="Notifications">
+* <ToastProvider closeLabel="Close" closeIcon={<CloseIcon />} viewportLabel="Notifications">
 *   <App />
 * </ToastProvider>
 */
 var ToastProvider = (t0) => {
-	const $ = c(9);
-	const { closeLabel, viewportLabel, children } = t0;
+	const $ = c(13);
+	const { closeLabel, closeIcon, viewportLabel, renderToast, children } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = [];
@@ -163,41 +317,52 @@ var ToastProvider = (t0) => {
 	} else t1 = $[0];
 	useEffect(flushBufferedToasts, t1);
 	let t2;
-	if ($[1] !== closeLabel) {
-		t2 = /* @__PURE__ */ jsx(ToastList, { closeLabel });
-		$[1] = closeLabel;
-		$[2] = t2;
-	} else t2 = $[2];
+	if ($[1] !== closeIcon || $[2] !== closeLabel || $[3] !== renderToast) {
+		t2 = renderToast ?? ((toast) => /* @__PURE__ */ jsx(DefaultToast, {
+			toast,
+			closeLabel,
+			closeIcon
+		}));
+		$[1] = closeIcon;
+		$[2] = closeLabel;
+		$[3] = renderToast;
+		$[4] = t2;
+	} else t2 = $[4];
 	let t3;
-	if ($[3] !== t2 || $[4] !== viewportLabel) {
-		t3 = /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ToastList, { renderToast: t2 });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3 || $[8] !== viewportLabel) {
+		t4 = /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
 			className: toast_provider_module_default.viewport,
 			"aria-label": viewportLabel,
-			children: t2
+			children: t3
 		}) });
-		$[3] = t2;
-		$[4] = viewportLabel;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== children || $[7] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(Toast.Provider, {
+		$[7] = t3;
+		$[8] = viewportLabel;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== children || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Toast.Provider, {
 			toastManager,
-			children: [children, t3]
+			children: [children, t4]
 		});
-		$[6] = children;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	return t4;
+		$[10] = children;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
 };
 function _temp(action) {
 	return /* @__PURE__ */ jsx(Button, {
-		className: toast_provider_module_default.action,
 		size: "sm",
 		variant: action.variant ?? "secondary",
 		onClick: action.onClick,
 		children: action.label
 	}, action.label);
 }
-export { ToastProvider };
+export { Toast$1 as Toast, ToastProvider };

package/dist/components/toast/toast-provider.module.js

@@ -1,24 +1,18 @@
 import './toast-provider.css';// src/components/toast/toast-provider.module.scss
-var viewport = "_viewport_r09x9_3";
-var toast = "_toast_r09x9_19";
-var content = "_content_r09x9_55";
-var header = "_header_r09x9_60";
-var headingMain = "_headingMain_r09x9_65";
-var title = "_title_r09x9_72";
-var description = "_description_r09x9_75";
-var actions = "_actions_r09x9_79";
-var closeButton = "_closeButton_r09x9_84";
-var action = "_action_r09x9_79";
+var viewport = "_viewport_x67qw_3";
+var toast = "_toast_x67qw_19";
+var icon = "_icon_x67qw_59";
+var title = "_title_x67qw_71";
+var close = "_close_x67qw_76";
+var description = "_description_x67qw_81";
+var actions = "_actions_x67qw_86";
 var toast_provider_module_default = {
 	viewport,
 	toast,
-	content,
-	header,
-	headingMain,
+	icon,
 	title,
+	close,
 	description,
-	actions,
-	closeButton,
-	action
+	actions
 };
-export { action, actions, closeButton, content, toast_provider_module_default as default, description, header, headingMain, title, toast, viewport };
+export { actions, close, toast_provider_module_default as default, description, icon, title, toast, viewport };

package/dist/components/toast/toast.d.ts

@@ -1,7 +1,7 @@
 import { type ToastManager } from "@base-ui/react/toast";
 import type { ReactNode } from "react";
 import type { Tone } from "../../lib/tone.ts";
-/** A toast's status role; drives its colour and icon. */
+/** A toast's status role; drives its colour. */
 export type ToastTone = Exclude<Tone, "neutral">;
 /** An action button rendered inside a toast, such as Retry on a failed send. */
 export type ToastAction = Readonly<{
@@ -15,6 +15,8 @@ export type ToastAction = Readonly<{
 /** The data every kit toast carries. */
 export type ToastData = Readonly<{
     tone: ToastTone;
+    /** A glyph before the title, such as one for the tone. */
+    icon?: ReactNode;
     /** Heading above the body, where one line will not carry the news. */
     title?: ReactNode;
     body: ReactNode;
@@ -32,6 +34,8 @@ export type ToastOptions = Readonly<{
      * copy short enough to read at a glance.
      */
     title?: ReactNode;
+    /** A glyph before the title, such as one for the tone. Left out, none shows. */
+    icon?: ReactNode;
     /** Action buttons rendered in the toast. */
     actions?: ReadonlyArray<ToastAction>;
     /**

package/dist/components/toast/toast.js

@@ -19,7 +19,7 @@ var flushBufferedToasts = () => {
 	for (const add of buffered.splice(0)) add();
 };
 var push = (tone, body, options = {}) => {
-	const { key, title, actions, timeout } = options;
+	const { key, title, icon, actions, timeout } = options;
 	if (key !== void 0) {
 		const existing = activeKeys.get(key);
 		if (existing !== void 0) return existing;
@@ -33,6 +33,7 @@ var push = (tone, body, options = {}) => {
 			timeout: resolvedTimeout,
 			data: {
 				tone,
+				icon,
 				title,
 				body,
 				actions

package/dist/components/toggle-group-field/toggle-group.js

@@ -5,8 +5,8 @@ import { FieldsetLegend, FieldsetRoot } from "../fieldset/fieldset-root.js";
 import { useFormDisabled } from "../form/form-context.js";
 import toggle_group_module_default from "./toggle-group.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 // src/components/toggle-group-field/toggle-group.tsx

package/dist/components/tooltip/tooltip.d.ts

@@ -5,8 +5,11 @@ export type TooltipTriggerProps = BaseTooltip.Trigger.Props & Readonly<{
     /** Called once a pointer rests on the trigger or it takes focus, to warm what the hint shows. */
     onIntent?: () => void;
 }>;
+/** The element the hint describes, warming what it shows on intent. */
 declare const TooltipTrigger: ({ onIntent, onPointerEnter, onPointerLeave, onFocus, ...props }: TooltipTriggerProps) => ReactNode;
+/** Places the hint against its trigger. */
 declare const TooltipPositioner: ({ sideOffset, ...props }: BaseTooltip.Positioner.Props) => ReactNode;
+/** The hint's surface. */
 declare const TooltipPopup: ({ className, ...props }: BaseTooltip.Popup.Props) => ReactNode;
 export type TooltipProps = Readonly<{
     /** The tooltip content; also serves as the visual hint for the trigger. */
@@ -30,12 +33,9 @@ type TooltipParts = typeof TooltipRoot & Omit<typeof BaseTooltip, "Trigger" | "P
     Popup: typeof TooltipPopup;
 }>;
 /**
- * A hint on a trigger, which is supplied as `children`. Mount `Tooltip.Provider`
- * once near the app root, so that moving between triggers keeps the hint up
- * instead of waiting out the delay again. Assembled from the parts hanging off
- * it, which stay reachable for a controlled `open`, an `align`, a
- * `collisionPadding`, or a `Handle` shared by a group of triggers. There is no
- * `Arrow`: a tooltip is an unarrowed popup with its own `box-shadow`.
+ * A hint on the trigger given as `children`, wired to describe it. Mount
+ * `Tooltip.Provider` once near the app root; the parts hanging off it build a
+ * tooltip by hand.
  *
  * @example
  * <Tooltip content="Previous page">

package/dist/components/tooltip/tooltip.js

@@ -1,12 +1,13 @@
 import { useIntent } from "../../lib/use-intent.js";
 import tooltip_module_default from "./tooltip.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Tooltip } from "@base-ui/react/tooltip";
 // src/components/tooltip/tooltip.tsx
 var DEFAULT_SIDE_OFFSET = 8;
+/** The element the hint describes, warming what it shows on intent. */
 var TooltipTrigger = (t0) => {
 	const $ = c(14);
 	let onFocus;
@@ -55,6 +56,7 @@ var TooltipTrigger = (t0) => {
 	} else t2 = $[13];
 	return t2;
 };
+/** Places the hint against its trigger. */
 var TooltipPositioner = (t0) => {
 	const $ = c(6);
 	let props;
@@ -81,6 +83,7 @@ var TooltipPositioner = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
+/** The hint's surface. */
 var TooltipPopup = (t0) => {
 	const $ = c(8);
 	let className;
@@ -154,12 +157,9 @@ var TooltipRoot = (t0) => {
 	return t5;
 };
 /**
-* A hint on a trigger, which is supplied as `children`. Mount `Tooltip.Provider`
-* once near the app root, so that moving between triggers keeps the hint up
-* instead of waiting out the delay again. Assembled from the parts hanging off
-* it, which stay reachable for a controlled `open`, an `align`, a
-* `collisionPadding`, or a `Handle` shared by a group of triggers. There is no
-* `Arrow`: a tooltip is an unarrowed popup with its own `box-shadow`.
+* A hint on the trigger given as `children`, wired to describe it. Mount
+* `Tooltip.Provider` once near the app root; the parts hanging off it build a
+* tooltip by hand.
 *
 * @example
 * <Tooltip content="Previous page">