@commenda/pathfinder 0.1.0 → 0.2.0

package/dist/components/description-list/DescriptionList.js

@@ -33,7 +33,7 @@ function h({ item: h, layout: g, size: _, emptyLabel: v }) {
 		}));
 	}, T = h.value === null || h.value === void 0 || h.value === "";
 	return /* @__PURE__ */ m("div", {
-		className: u("pf:group pf:grid pf:min-w-0 pf:items-start pf:gap-x-xl pf:gap-y-xs pf:rounded-md pf:ps-md pf:pe-xs pf:hover:bg-soft-pearl-200 pf:focus-within:bg-soft-pearl-200", g === "inline" ? "pf:grid-cols-[minmax(0,200px)_minmax(0,1fr)]" : g === "auto" ? "pf:@min-[480px]:grid-cols-[200px_minmax(0,1fr)]" : "pf:grid-cols-1", _ === "compact" ? "pf:py-xs pf:min-h-[28px]" : "pf:py-md pf:min-h-[36px]"),
+		className: u("pf:group pf:grid pf:min-w-0 pf:items-start pf:gap-x-xl pf:gap-y-xs pf:rounded-md pf:ps-md pf:pe-xs pf:[@media(hover:hover)]:hover:bg-soft-pearl-200 pf:motion-safe:transition-colors pf:duration-120 pf:ease-out pf:focus-within:transition-none pf:focus-within:bg-soft-pearl-200", g === "inline" ? "pf:grid-cols-[minmax(0,200px)_minmax(0,1fr)]" : g === "auto" ? "pf:@min-[480px]:grid-cols-[200px_minmax(0,1fr)]" : "pf:grid-cols-1", _ === "compact" ? "pf:py-xs pf:min-h-[28px]" : "pf:py-md pf:min-h-[36px]"),
 		children: [/* @__PURE__ */ m("dt", {
 			className: "pf:min-w-0 pf:text-soft-pearl-800 pf:leading-[20px] pf:wrap-anywhere",
 			children: [/* @__PURE__ */ m("span", {
@@ -63,7 +63,7 @@ function h({ item: h, layout: g, size: _, emptyLabel: v }) {
 					children: x ? T ? v : typeof h.value == "boolean" ? String(h.value) : h.value : h.sensitiveConfig?.mask ?? "••••••••"
 				}),
 				(h.copyConfig || h.editConfig || h.sensitiveConfig || h.sourceConfig || h.editedConfig) && /* @__PURE__ */ m("div", {
-					className: "pf:flex pf:shrink-0 pf:items-center pf:-my-xs pf:opacity-100 pf:[@media(hover:hover)]:opacity-0 pf:group-hover:opacity-100 pf:group-focus-within:opacity-100",
+					className: "pf:flex pf:shrink-0 pf:items-center pf:-my-xs pf:opacity-100 pf:motion-safe:transition-opacity pf:duration-120 pf:ease-out pf:group-focus-within:transition-none pf:[@media(hover:hover)]:opacity-0 pf:group-hover:opacity-100 pf:group-focus-within:opacity-100",
 					children: [
 						h.sensitiveConfig && /* @__PURE__ */ p(n, {
 							size: "sm",

package/dist/components/dialog/ConfirmDialog.js

@@ -21,7 +21,7 @@ function d(d) {
 				ref: y,
 				initialFocus: _?.initialFocusRef ?? (() => y.current?.querySelector("button") ?? y.current),
 				finalFocus: _?.returnFocusRef,
-				className: o(n, "pf:w-[400px] pf:max-w-full pf:max-h-[calc(100dvh-32px)] pf:overflow-y-auto", v.animate && "pf:transition-[opacity,transform] pf:duration-200 pf:ease-(--pf-easing-out) pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0 pf:motion-safe:data-[starting-style]:[transform:translateY(2%)_scale(0.95)] pf:motion-safe:data-[ending-style]:[transform:translateY(2%)_scale(0.95)]"),
+				className: o(n, "pf:w-[400px] pf:max-w-full pf:max-h-[calc(100dvh-32px)] pf:overflow-y-auto", v.animate && "pf:transition-[opacity,transform] pf:duration-180 pf:data-[ending-style]:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0 pf:motion-safe:data-[starting-style]:[transform:scale(0.98)] pf:motion-safe:data-[ending-style]:[transform:scale(0.98)]"),
 				children: /* @__PURE__ */ c(i, {
 					confirm: !0,
 					heading: /* @__PURE__ */ c(u.Title, {

package/dist/components/dialog/Dialog.js

@@ -26,7 +26,7 @@ function d(d) {
 				initialFocus: y?.initialFocusRef ?? (() => S.current?.querySelector("[data-overlay-body] input:not(:disabled), [data-overlay-body] textarea:not(:disabled), [data-overlay-body] button:not(:disabled), [data-overlay-body] a[href]") ?? S.current),
 				finalFocus: y?.returnFocusRef,
 				"aria-busy": x.pending || void 0,
-				className: a(t, u[h], "pf:max-w-full pf:max-h-[calc(100dvh-32px)]", x.animate && "pf:transition-[opacity,transform] pf:duration-200 pf:ease-(--pf-easing-out) pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0 pf:motion-safe:data-[starting-style]:[transform:translateY(2%)_scale(0.95)] pf:motion-safe:data-[ending-style]:[transform:translateY(2%)_scale(0.95)]", b),
+				className: a(t, u[h], "pf:max-w-full pf:max-h-[calc(100dvh-32px)]", x.animate && "pf:transition-[opacity,transform] pf:duration-180 pf:data-[ending-style]:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0 pf:motion-safe:data-[starting-style]:[transform:scale(0.98)] pf:motion-safe:data-[ending-style]:[transform:scale(0.98)]", b),
 				children: /* @__PURE__ */ s(r, {
 					closeConfig: d.closeConfig,
 					heading: /* @__PURE__ */ s(l.Title, {

package/dist/components/distribution-bar/DistributionBar.js

@@ -7,24 +7,34 @@ import { useId as a, useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/distribution-bar/DistributionBar.tsx
 function l({ label: l, segments: u, total: d, headerConfig: f, size: p = "md", legend: m = "inline", formatValue: h = (e) => new Intl.NumberFormat("en").format(e), highlightConfig: g, className: _ }) {
-	let v = a(), [y, b] = o(null), x = g ? g.activeId : y, S = (e) => {
-		g || b(e), g?.onActiveChange(e);
-	}, C = n.prepare(u, d);
-	if (C.invalid) return /* @__PURE__ */ s(t, {
+	let [v, y] = o(!0), b = a(), [x, S] = o(null), C = g ? g.activeId : x, w = (e) => {
+		g || S(e), g?.onActiveChange(e);
+	}, T = n.prepare(u, d);
+	if (T.invalid) return /* @__PURE__ */ s(t, {
 		tone: "error",
 		title: l,
 		description: "Distribution requires unique IDs, finite non-negative values, and a positive total when values are present."
 	});
-	let w = (e) => n.percentage(e, C.base), T = C.visible.filter((e) => e.value > 0), E = (e) => x === null || e === x || e === C.otherId && C.grouped.some((e) => e.id === x);
+	let E = (e) => n.percentage(e, T.base), D = T.visible.filter((e) => e.value > 0), O = (e) => C === null || e === C || e === T.otherId && T.grouped.some((e) => e.id === C);
 	return /* @__PURE__ */ c("figure", {
-		"aria-labelledby": v,
-		className: i("pf:m-0 pf:flex pf:min-w-0 pf:flex-col pf:gap-md pf:font-body pf:text-label-13 pf:text-soft-pearl-1000", _),
+		"aria-labelledby": b,
+		"data-motion": v ? "pointer" : void 0,
+		onPointerDownCapture: () => {
+			y(!0);
+		},
+		onPointerMoveCapture: () => {
+			y(!0);
+		},
+		onKeyDownCapture: () => {
+			y(!1);
+		},
+		className: i("pf:group/distribution pf:m-0 pf:flex pf:min-w-0 pf:flex-col pf:gap-md pf:font-body pf:text-label-13 pf:text-soft-pearl-1000", _),
 		children: [
 			/* @__PURE__ */ c("figcaption", {
 				className: i("pf:flex pf:flex-wrap pf:items-center pf:justify-between pf:gap-md", f === !1 && "pf:sr-only"),
 				children: [
 					/* @__PURE__ */ s("span", {
-						id: v,
+						id: b,
 						className: "pf:min-w-0 pf:font-medium pf:wrap-anywhere",
 						children: l
 					}),
@@ -38,40 +48,40 @@ function l({ label: l, segments: u, total: d, headerConfig: f, size: p = "md", l
 					})
 				]
 			}),
-			C.sum > C.base && /* @__PURE__ */ s(t, {
+			T.sum > T.base && /* @__PURE__ */ s(t, {
 				tone: "warning",
-				description: `Allocation totals ${w(C.sum)}. The bar is scaled to the allocated amount.`
+				description: `Allocation totals ${E(T.sum)}. The bar is scaled to the allocated amount.`
 			}),
 			/* @__PURE__ */ s("div", {
-				className: i("pf:grid pf:w-full pf:min-w-0 pf:gap-xxs pf:rounded-[4px] pf:overflow-hidden pf:bg-soft-pearl-200", p === "sm" ? "pf:h-[6px]" : "pf:h-[8px]"),
-				style: { gridTemplateColumns: [...T.map((e) => `minmax(4px, ${String(e.value)}fr)`), ...C.remainder ? [`minmax(0, ${String(C.remainder)}fr)`] : []].join(" ") },
-				children: T.map((t) => /* @__PURE__ */ s(e, {
-					content: t.id === C.otherId ? C.grouped.map((e) => `${e.label}: ${h(e.value)} (${w(e.value)})`).join("; ") : `${t.label}: ${h(t.value)} (${w(t.value)})`,
+				className: i("pf:grid pf:w-full pf:min-w-0 pf:gap-xxs pf:rounded-[4px] pf:overflow-hidden pf:bg-soft-pearl-200 pf:transition-none pf:motion-safe:group-data-[motion=pointer]/distribution:transition-[grid-template-columns] pf:duration-200 pf:ease-[cubic-bezier(0.23,1,0.32,1)]", p === "sm" ? "pf:h-[6px]" : "pf:h-[8px]"),
+				style: { gridTemplateColumns: [...D.map((e) => `minmax(4px, ${String(e.value)}fr)`), ...T.remainder ? [`minmax(0, ${String(T.remainder)}fr)`] : []].join(" ") },
+				children: D.map((t) => /* @__PURE__ */ s(e, {
+					content: t.id === T.otherId ? T.grouped.map((e) => `${e.label}: ${h(e.value)} (${E(e.value)})`).join("; ") : `${t.label}: ${h(t.value)} (${E(t.value)})`,
 					trigger: /* @__PURE__ */ s("button", {
 						type: "button",
 						tabIndex: -1,
 						"aria-label": `${t.label} segment`,
 						onPointerEnter: () => {
-							S(t.id);
+							w(t.id);
 						},
 						onPointerLeave: () => {
-							S(null);
+							w(null);
 						},
 						onClick: () => {
-							S(x === t.id ? null : t.id);
+							w(C === t.id ? null : t.id);
 						},
-						className: "pf:min-w-0 pf:border-0 pf:p-0 pf:motion-safe:transition-opacity pf:motion-safe:duration-150",
+						className: "pf:min-w-0 pf:border-0 pf:p-0 pf:cursor-pointer pf:transition-none pf:motion-safe:group-data-[motion=pointer]/distribution:transition-opacity pf:duration-120 pf:ease-out",
 						style: {
 							backgroundColor: r[t.color],
-							opacity: E(t.id) ? 1 : .3
+							opacity: O(t.id) ? 1 : .45
 						}
 					})
 				}, t.id))
 			}),
 			/* @__PURE__ */ s("ul", {
 				className: i("pf:m-0 pf:p-0 pf:list-none pf:min-w-0", m === "none" ? "pf:sr-only pf:focus-within:not-sr-only" : m === "list" ? "pf:flex pf:flex-col" : "pf:flex pf:flex-wrap pf:gap-x-xl pf:gap-y-md"),
-				children: C.visible.map((t) => {
-					let n = `${t.label}: ${h(t.value)} (${w(t.value)})`, a = t.id === C.otherId ? `${n}. ${C.grouped.map((e) => `${e.label}: ${h(e.value)} (${w(e.value)})`).join("; ")}` : n;
+				children: T.visible.map((t) => {
+					let n = `${t.label}: ${h(t.value)} (${E(t.value)})`, a = t.id === T.otherId ? `${n}. ${T.grouped.map((e) => `${e.label}: ${h(e.value)} (${E(e.value)})`).join("; ")}` : n;
 					return /* @__PURE__ */ c("li", {
 						className: i("pf:min-w-0", m === "list" && "pf:border-0 pf:border-b-[0.5px] pf:border-solid pf:border-soft-pearl-300"),
 						children: [/* @__PURE__ */ s(e, {
@@ -80,21 +90,21 @@ function l({ label: l, segments: u, total: d, headerConfig: f, size: p = "md", l
 								type: "button",
 								"aria-label": n,
 								onFocus: () => {
-									S(t.id);
+									w(t.id);
 								},
 								onBlur: () => {
-									S(null);
+									w(null);
 								},
 								onPointerEnter: () => {
-									S(t.id);
+									w(t.id);
 								},
 								onPointerLeave: () => {
-									S(null);
+									w(null);
 								},
 								onClick: () => {
-									S(x === t.id ? null : t.id);
+									w(C === t.id ? null : t.id);
 								},
-								className: i("pf:flex pf:w-full pf:min-w-0 pf:items-center pf:gap-sm pf:border-0 pf:rounded-xs pf:bg-transparent pf:p-0 pf:text-start pf:font-body pf:text-label-12 pf:text-soft-pearl-900 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700", m === "list" && "pf:py-sm"),
+								className: i("pf:flex pf:w-full pf:min-w-0 pf:items-center pf:gap-sm pf:border-0 pf:rounded-xs pf:cursor-pointer pf:bg-transparent pf:p-0 pf:text-start pf:font-body pf:text-label-12 pf:text-soft-pearl-900 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700", m === "list" && "pf:py-sm"),
 								children: [
 									/* @__PURE__ */ s("span", {
 										"aria-hidden": "true",
@@ -111,35 +121,35 @@ function l({ label: l, segments: u, total: d, headerConfig: f, size: p = "md", l
 									}),
 									/* @__PURE__ */ s("span", {
 										className: "pf:tabular-nums pf:shrink-0 pf:text-soft-pearl-800",
-										children: w(t.value)
+										children: E(t.value)
 									})
 								]
 							})
-						}), t.id === C.otherId && /* @__PURE__ */ s("ul", {
+						}), t.id === T.otherId && /* @__PURE__ */ s("ul", {
 							className: "pf:sr-only",
-							children: C.grouped.map((e) => /* @__PURE__ */ c("li", { children: [
+							children: T.grouped.map((e) => /* @__PURE__ */ c("li", { children: [
 								/* @__PURE__ */ s("span", { children: e.label }),
 								": ",
 								h(e.value),
 								" (",
-								w(e.value),
+								E(e.value),
 								")"
 							] }, e.id))
 						})]
 					}, t.id);
 				})
 			}),
-			C.remainder > 0 && /* @__PURE__ */ c("p", {
+			T.remainder > 0 && /* @__PURE__ */ c("p", {
 				className: "pf:m-0 pf:text-copy-12 pf:text-soft-pearl-800",
 				children: [
 					"Unallocated: ",
-					h(C.remainder),
+					h(T.remainder),
 					" (",
-					w(C.remainder),
+					E(T.remainder),
 					")"
 				]
 			}),
-			C.sum === 0 && /* @__PURE__ */ s("p", {
+			T.sum === 0 && /* @__PURE__ */ s("p", {
 				role: "status",
 				className: "pf:m-0 pf:text-copy-12 pf:text-soft-pearl-800",
 				children: "No allocation yet."

package/dist/components/drag-handle/DragHandle.d.ts

@@ -11,7 +11,7 @@ export interface DragHandleProps extends Omit<BaseButton.Props, 'className' | 'c
  * Also provide Move up/down/to top; touch owner uses 250ms long press and active-drag scroll prevention.
  * DRAG-GEOMETRY-01: Leading inside row; reserve space, reveal on hover/focus, always show on touch.
  * Desktop glyph 16 in 16x24; touch target 44. Pinned items need a reason.
- * Whole-item tabs/cards do not get handles. ResizeHandle is separate future work.
+ * Whole-item tabs/cards do not get handles. Use ResizeHandle for resizing panes and edges.
  * Full rules: /docs/components/drag-handle.
  */
 export declare const DragHandle: import("react").ForwardRefExoticComponent<Omit<DragHandleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/dropdown/Dropdown.js

@@ -1,40 +1,41 @@
 "use client";
 import { ControlHint as e } from "../controls/ControlHint.js";
-import { MenuContent as t } from "./MenuContent.js";
-import { useId as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Menu as o } from "@base-ui/react/menu";
+import { isPointerMenuEvent as t } from "./menu-motion.js";
+import { MenuContent as n } from "./MenuContent.js";
+import { useId as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Menu as s } from "@base-ui/react/menu";
 //#region src/components/dropdown/Dropdown.tsx
-var s = ({ menu: s, trigger: c, disabled: l = !1, disabledReason: u, open: d, defaultOpen: f, onOpenChange: p, ...m }) => {
-	let h = n(), [g, _] = r(!1), v = l ? u : void 0;
-	return /* @__PURE__ */ a(o.Root, {
-		open: d,
-		defaultOpen: f,
-		disabled: l,
-		onOpenChange: (e, t) => {
-			e && _(!t.event.type.startsWith("key")), p?.(e);
+var c = ({ menu: c, trigger: l, disabled: u = !1, disabledReason: d, open: f, defaultOpen: p, onOpenChange: m, ...h }) => {
+	let g = r(), [_, v] = i(!1), y = u ? d : void 0;
+	return /* @__PURE__ */ o(s.Root, {
+		open: f,
+		defaultOpen: p,
+		disabled: u,
+		onOpenChange: (e, n) => {
+			v(t(n.event)), m?.(e);
 		},
 		children: [
-			/* @__PURE__ */ i(e, {
-				label: v,
-				children: /* @__PURE__ */ i(o.Trigger, {
-					render: c,
-					disabled: l,
-					"aria-describedby": v ? h : void 0
+			/* @__PURE__ */ a(e, {
+				label: y,
+				children: /* @__PURE__ */ a(s.Trigger, {
+					render: l,
+					disabled: u,
+					"aria-describedby": y ? g : void 0
 				})
 			}),
-			v && /* @__PURE__ */ i("span", {
+			y && /* @__PURE__ */ a("span", {
 				className: "pf-control-sr pf:sr-only",
-				id: h,
-				children: v
+				id: g,
+				children: y
 			}),
-			/* @__PURE__ */ i(t, {
-				animate: g,
-				menu: s,
-				...m
+			/* @__PURE__ */ a(n, {
+				animate: _,
+				menu: c,
+				...h
 			})
 		]
 	});
 };
 //#endregion
-export { s as Dropdown };
+export { c as Dropdown };

package/dist/components/dropdown/MenuContent.js

@@ -1,113 +1,138 @@
 "use client";
 import { ControlIcon as e } from "../controls/ControlIcon.js";
-import { NavigationLink as t } from "../controls/NavigationLink.js";
-import { ChevronRightIcon as n } from "../icons/ChevronRightIcon.js";
-import { SearchMdIcon as r } from "../icons/SearchMdIcon.js";
-import { Input as i } from "../input/Input.js";
-import a from "clsx";
-import { Fragment as o, useId as s, useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Menu as f } from "@base-ui/react/menu";
-import { useDirection as p } from "@base-ui/react/direction-provider";
+import { isPointerMenuEvent as t } from "./menu-motion.js";
+import { NavigationLink as n } from "../controls/NavigationLink.js";
+import { hoverHighlightClass as r, useHoverHighlight as i } from "../controls/useHoverHighlight.js";
+import { ChevronRightIcon as a } from "../icons/ChevronRightIcon.js";
+import { SearchMdIcon as o } from "../icons/SearchMdIcon.js";
+import { Input as s } from "../input/Input.js";
+import c from "clsx";
+import { Fragment as l, useId as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Menu as h } from "@base-ui/react/menu";
+import { useDirection as g } from "@base-ui/react/direction-provider";
 //#region src/components/dropdown/MenuContent.tsx
-var m = ({ item: t }) => {
-	let r = p();
-	return /* @__PURE__ */ d(l, { children: [
-		t.leadingIcon && /* @__PURE__ */ u(e, {
+var _ = ({ item: t }) => {
+	let n = g();
+	return /* @__PURE__ */ m(f, { children: [
+		t.leadingIcon && /* @__PURE__ */ p(e, {
 			size: 16,
 			children: t.leadingIcon
 		}),
-		/* @__PURE__ */ d("span", {
+		/* @__PURE__ */ m("span", {
 			className: "pf-menu-text pf:flex pf:flex-col pf:flex-1 pf:min-w-0 pf:wrap-anywhere",
 			children: [
-				/* @__PURE__ */ u("span", { children: t.label }),
-				t.description && /* @__PURE__ */ u("span", {
+				/* @__PURE__ */ p("span", { children: t.label }),
+				t.description && /* @__PURE__ */ p("span", {
 					className: "pf-menu-description pf:text-soft-pearl-800 pf:font-body pf:text-copy-12 pf:font-normal",
 					children: t.description
 				}),
-				t.disabled && t.disabledReason && /* @__PURE__ */ u("span", {
+				t.disabled && t.disabledReason && /* @__PURE__ */ p("span", {
 					className: "pf-menu-description pf:text-soft-pearl-800 pf:font-body pf:text-copy-12 pf:font-normal",
 					children: t.disabledReason
 				})
 			]
 		}),
-		t.trailingText && /* @__PURE__ */ u("span", {
+		t.trailingText && /* @__PURE__ */ p("span", {
 			className: "pf-menu-meta pf:shrink pf:min-w-0 pf:max-w-[40%] pf:wrap-anywhere pf:text-soft-pearl-800 pf:font-body pf:text-[length:var(--pf-text-label-12)] pf:leading-[20px] pf:font-normal",
 			children: t.trailingText
 		}),
-		t.type === "submenu" && /* @__PURE__ */ u("span", {
-			className: a("pf-menu-chevron pf:flex pf:items-center pf:justify-center pf:shrink-0 pf:text-soft-pearl-800", r === "rtl" && "pf:rotate-180"),
-			children: /* @__PURE__ */ u(n, {
+		t.trailingIcon && /* @__PURE__ */ p(e, {
+			size: 16,
+			children: t.trailingIcon
+		}),
+		t.type === "submenu" && /* @__PURE__ */ p("span", {
+			className: c("pf-menu-chevron pf:flex pf:items-center pf:justify-center pf:shrink-0 pf:text-soft-pearl-800", n === "rtl" && "pf:rotate-180"),
+			children: /* @__PURE__ */ p(a, {
 				size: 16,
 				tone: "inherit"
 			})
 		})
 	] });
-}, h = ({ item: e, portalContainer: n }) => {
-	let r = s(), [i, o] = c(!1), p = [e.description, e.disabled ? e.disabledReason : void 0].filter(Boolean).join(". "), h = {
-		className: a("pf-menu-row pf:box-border pf:flex pf:items-center pf:gap-sm pf:min-h-[32px] pf:py-sm pf:ps-md pf:pe-lg", "pf:rounded-sm pf:outline-none pf:cursor-pointer", "pf:[&>.pf-control-icon]:shrink-0 pf:[&>.pf-control-icon]:text-soft-pearl-800", "pf:data-highlighted:bg-soft-pearl-200 pf:data-popup-open:bg-soft-pearl-200", "pf:data-destructive:not-data-disabled:text-red-700", "pf:data-destructive:not-data-disabled:[&>.pf-control-icon]:text-red-700", "pf:data-destructive:data-highlighted:bg-red-100 pf:data-disabled:text-soft-pearl-600", "pf:data-disabled:cursor-not-allowed pf:data-disabled:[&>.pf-control-icon]:text-soft-pearl-600"),
+}, v = ({ item: e, portalContainer: r, motionIndex: i }) => {
+	let a = u(), [o, s] = d(!1), l = [e.description, e.disabled ? e.disabledReason : void 0].filter(Boolean).join(". "), g = {
+		className: c([
+			"pf:delay-0",
+			"pf:delay-[18ms]",
+			"pf:delay-[36ms]",
+			"pf:delay-[54ms]",
+			"pf:delay-[72ms]",
+			"pf:delay-[90ms]"
+		][Math.min(i, 5)], "pf:relative pf-menu-row pf:box-border pf:flex pf:items-center pf:gap-sm pf:min-h-[32px] pf:py-sm pf:ps-md pf:pe-lg", "pf:rounded-sm pf:outline-none pf:cursor-pointer", "pf:[&>.pf-control-icon]:shrink-0 pf:[&>.pf-control-icon]:text-soft-pearl-800", "pf:data-highlighted:bg-soft-pearl-200 pf:data-popup-open:bg-soft-pearl-200", "pf:data-destructive:not-data-disabled:text-red-700", "pf:data-destructive:not-data-disabled:[&>.pf-control-icon]:text-red-700", "pf:data-destructive:data-highlighted:bg-red-100 pf:data-disabled:text-soft-pearl-600", "pf:data-disabled:cursor-not-allowed pf:data-disabled:[&>.pf-control-icon]:text-soft-pearl-600"),
 		disabled: e.disabled,
 		label: e.label,
 		"aria-label": e.label,
-		"aria-describedby": p ? r : void 0
+		"aria-describedby": l ? a : void 0
 	};
-	return /* @__PURE__ */ d(l, { children: [e.type === "submenu" ? /* @__PURE__ */ d(f.SubmenuRoot, {
-		onOpenChange: (e, t) => {
-			e && o(!t.event.type.startsWith("key"));
+	return /* @__PURE__ */ m(f, { children: [e.disabled ? /* @__PURE__ */ p("div", {
+		className: g.className,
+		role: "menuitem",
+		"aria-disabled": "true",
+		"aria-label": e.label,
+		"aria-describedby": g["aria-describedby"],
+		"data-disabled": "",
+		children: /* @__PURE__ */ p(_, { item: e })
+	}) : e.type === "submenu" ? /* @__PURE__ */ m(h.SubmenuRoot, {
+		onOpenChange: (e, n) => {
+			s(t(n.event));
 		},
-		children: [/* @__PURE__ */ u(f.SubmenuTrigger, {
-			...h,
-			children: /* @__PURE__ */ u(m, { item: e })
-		}), /* @__PURE__ */ u(g, {
-			animate: i,
+		children: [/* @__PURE__ */ p(h.SubmenuTrigger, {
+			...g,
+			children: /* @__PURE__ */ p(_, { item: e })
+		}), /* @__PURE__ */ p(y, {
+			animate: o,
 			menu: e.menu,
 			side: "inline-end",
 			align: "start",
-			portalContainer: n
+			portalContainer: r
 		})]
-	}) : e.type === "link" ? /* @__PURE__ */ u(f.Item, {
-		...h,
+	}) : e.type === "link" ? /* @__PURE__ */ p(h.Item, {
+		...g,
 		nativeButton: !1,
-		render: /* @__PURE__ */ u(t, { linkConfig: e.linkConfig }),
-		children: /* @__PURE__ */ u(m, { item: e })
-	}) : /* @__PURE__ */ u(f.Item, {
-		...h,
+		render: /* @__PURE__ */ p(n, { linkConfig: e.linkConfig }),
+		children: /* @__PURE__ */ p(_, { item: e })
+	}) : /* @__PURE__ */ p(h.Item, {
+		...g,
 		"data-destructive": e.destructive || void 0,
 		onClick: e.onClick,
-		children: /* @__PURE__ */ u(m, { item: e })
-	}), p && /* @__PURE__ */ u("span", {
-		id: r,
+		children: /* @__PURE__ */ p(_, { item: e })
+	}), l && /* @__PURE__ */ p("span", {
+		id: a,
 		className: "pf-control-sr pf:sr-only",
-		children: p
+		children: l
 	})] });
-}, g = ({ menu: e, animate: t = !1, finalFocus: n, side: s = "bottom", align: p = "start", sideOffset: m = 4, portalContainer: g }) => {
-	let [_, v] = c(""), y = e.searchConfig?.value ?? _, b = e.loadingConfig?.isLoading ? [] : e.groups.map((t) => ({
+}, y = ({ menu: e, animate: t = !1, finalFocus: n, side: a = "bottom", align: u = "start", sideOffset: g = 4, portalContainer: _ }) => {
+	let y = i(), [b, x] = d(""), S = e.searchConfig?.value ?? b, C = e.loadingConfig?.isLoading ? [] : e.groups.map((t) => ({
 		...t,
-		items: !e.searchConfig || e.searchConfig.filter === "manual" || !y.trim() ? t.items : t.items.filter((e) => `${e.label} ${e.description ?? ""}`.toLocaleLowerCase().includes(y.trim().toLocaleLowerCase()))
+		items: !e.searchConfig || e.searchConfig.filter === "manual" || !S.trim() ? t.items : t.items.filter((e) => `${e.label} ${e.description ?? ""}`.toLocaleLowerCase().includes(S.trim().toLocaleLowerCase()))
 	})).filter((e) => e.items.length);
-	return /* @__PURE__ */ u(f.Portal, {
-		container: g,
-		children: /* @__PURE__ */ u(f.Positioner, {
-			side: s,
-			align: p,
-			sideOffset: m,
+	return /* @__PURE__ */ p(h.Portal, {
+		container: _,
+		children: /* @__PURE__ */ p(h.Positioner, {
+			side: a,
+			align: u,
+			sideOffset: g,
 			collisionPadding: 8,
 			className: "pf-menu-positioner pf:z-50 pf:outline-none",
-			children: /* @__PURE__ */ d(f.Popup, {
+			children: /* @__PURE__ */ m(h.Popup, {
+				...y.props,
 				finalFocus: n,
-				className: a("pf-menu-popup pf:box-border pf:w-[240px] pf:max-w-(--available-width) pf:max-h-(--available-height)", "pf:overflow-y-auto pf:overscroll-contain pf:p-md pf:border-[0.5px] pf:border-solid", "pf:border-soft-pearl-300 pf:rounded-lg pf:bg-background pf:text-soft-pearl-1000", "pf:shadow-[0_1px_1px_#12121205,0_4px_10px_#12121214] pf:font-body pf:font-medium pf:text-[length:var(--pf-text-label-13)]", "pf:leading-[20px] pf:outline-none pf:origin-(--transform-origin)", "pf:data-animate:motion-safe:transition-[opacity,transform] pf:duration-(--pf-duration-fast)", "pf:data-starting-style:opacity-0 pf:data-starting-style:scale-[0.97] pf:data-ending-style:opacity-0", "pf:data-ending-style:scale-[0.97]"),
+				className: c(r, "pf-menu-popup pf:box-border pf:w-[240px] pf:max-w-(--available-width) pf:max-h-(--available-height)", "pf:overflow-y-auto pf:overscroll-contain pf:p-md pf:border-[0.5px] pf:border-solid", "pf:border-soft-pearl-300 pf:rounded-lg pf:bg-background pf:text-soft-pearl-1000", "pf:shadow-[0_1px_1px_#12121205,0_4px_10px_#12121214] pf:font-body pf:font-medium pf:text-[length:var(--pf-text-label-13)]", "pf:leading-[20px] pf:outline-none pf:origin-(--transform-origin)", "pf:motion-safe:data-animate:[&_.pf-menu-row]:transition-[opacity,transform] pf:motion-safe:data-animate:[&_.pf-menu-row]:duration-120 pf:motion-safe:data-animate:[&_.pf-menu-row]:ease-[cubic-bezier(0.23,1,0.32,1)]", "pf:motion-safe:data-animate:data-starting-style:[&_.pf-menu-row]:opacity-0 pf:motion-safe:data-animate:data-starting-style:[&_.pf-menu-row]:[transform:translateY(-3px)]", "pf:motion-safe:data-animate:data-ending-style:[&_.pf-menu-row]:delay-0 pf:motion-safe:data-animate:data-ending-style:[&_.pf-menu-row]:opacity-0", "pf:data-animate:motion-safe:transition-[opacity,transform] pf:duration-180 pf:ease-[cubic-bezier(0.23,1,0.32,1)]", "pf:data-animate:motion-safe:data-starting-style:opacity-0 pf:data-animate:motion-safe:data-starting-style:[transform:scale(0.97)]", "pf:data-animate:motion-safe:data-ending-style:opacity-0 pf:data-animate:motion-safe:data-ending-style:[transform:scale(0.97)] pf:data-ending-style:duration-120"),
 				"data-animate": t || void 0,
 				children: [
-					e.searchConfig && /* @__PURE__ */ u("div", {
+					y.highlight,
+					e.searchConfig && /* @__PURE__ */ p("div", {
 						className: "pf:pb-md",
-						children: /* @__PURE__ */ u(i, {
+						children: /* @__PURE__ */ p(s, {
 							type: "search",
-							leadingIcon: /* @__PURE__ */ u(r, {}),
+							className: "pf:[&_input::-webkit-search-cancel-button]:appearance-none pf:[&_button]:cursor-pointer",
+							actionConfig: S ? { kind: "clear" } : void 0,
+							leadingIcon: /* @__PURE__ */ p(o, {}),
 							label: e.searchConfig.label,
 							hideLabel: !0,
-							value: y,
+							value: S,
 							onValueChange: (t) => {
-								v(t), e.searchConfig?.onValueChange?.(t);
+								x(t), e.searchConfig?.onValueChange?.(t);
 							},
 							onKeyDown: (e) => {
 								if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -118,27 +143,33 @@ var m = ({ item: t }) => {
 							}
 						})
 					}),
-					e.loadingConfig?.isLoading && /* @__PURE__ */ u("div", {
+					e.loadingConfig?.isLoading && /* @__PURE__ */ p("div", {
 						role: "status",
 						className: "pf:px-md pf:py-sm pf:text-copy-12 pf:text-soft-pearl-800",
 						children: e.loadingConfig.label ?? "Loading actions…"
 					}),
-					b.map((e, t) => /* @__PURE__ */ d(o, { children: [t > 0 && /* @__PURE__ */ u(f.Separator, { className: "pf-menu-separator pf:h-[0.5px] pf:bg-soft-pearl-300 pf:my-xs" }), /* @__PURE__ */ d(f.Group, { children: [e.label && /* @__PURE__ */ u(f.GroupLabel, {
+					C.map((e, t) => /* @__PURE__ */ m(l, { children: [t > 0 && /* @__PURE__ */ p(h.Separator, { className: "pf-menu-separator pf:h-[0.5px] pf:bg-soft-pearl-300 pf:my-xs" }), /* @__PURE__ */ m(h.Group, { children: [e.label && /* @__PURE__ */ p(h.GroupLabel, {
 						className: "pf-menu-group-label pf:py-sm pf:px-md pf:text-soft-pearl-800 pf:text-[length:var(--pf-text-label-12)]",
 						children: e.label
-					}), e.items.map((e) => /* @__PURE__ */ u(h, {
+					}), e.items.map((e, n) => /* @__PURE__ */ p(v, {
 						item: e,
-						portalContainer: g
+						motionIndex: C.slice(0, t).reduce((e, t) => e + t.items.length, 0) + n,
+						portalContainer: _
 					}, e.id))] })] }, e.id)),
-					!e.loadingConfig?.isLoading && b.length === 0 && /* @__PURE__ */ u("div", {
+					!e.loadingConfig?.isLoading && C.length === 0 && /* @__PURE__ */ p("div", {
 						className: "pf-menu-empty pf:py-sm pf:px-md pf:text-soft-pearl-800 pf:text-[length:var(--pf-text-label-12)]",
-						children: e.emptyContent ?? (y ? "No matching actions" : "No actions available")
+						children: e.emptyContent ?? (S ? "No matching actions" : "No actions available")
 					}),
-					e.footerContent && /* @__PURE__ */ u("div", {
+					e.footerContent && /* @__PURE__ */ p("div", {
 						className: "pf:border-0 pf:border-t-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:mt-xs pf:pt-md pf:px-md pf:text-copy-12 pf:text-soft-pearl-800",
 						children: e.footerContent
 					}),
-					e.footerConfig && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(f.Separator, { className: "pf:h-[0.5px] pf:bg-soft-pearl-300 pf:my-xs" }), /* @__PURE__ */ u(f.Item, {
+					e.footerConfig && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(h.Separator, { className: "pf:h-[0.5px] pf:bg-soft-pearl-300 pf:my-xs" }), e.footerConfig.disabled ? /* @__PURE__ */ p("div", {
+						role: "menuitem",
+						"aria-disabled": "true",
+						className: "pf:flex pf:min-h-[32px] pf:items-center pf:px-md pf:text-soft-pearl-600 pf:cursor-not-allowed",
+						children: e.footerConfig.label
+					}) : /* @__PURE__ */ p(h.Item, {
 						onClick: e.footerConfig.onAction,
 						disabled: e.footerConfig.disabled,
 						className: "pf:box-border pf:flex pf:w-full pf:min-h-[32px] pf:items-center pf:px-md pf:rounded-sm pf:text-blue-700 pf:data-highlighted:bg-soft-pearl-200 pf:data-disabled:text-soft-pearl-600",
@@ -150,4 +181,4 @@ var m = ({ item: t }) => {
 	});
 };
 //#endregion
-export { g as MenuContent };
+export { y as MenuContent };

package/dist/components/dropdown/dropdown-types.d.ts

@@ -32,6 +32,7 @@ export interface DropdownItemBase {
     leadingIcon?: ReactNode;
     description?: string;
     trailingText?: string;
+    trailingIcon?: ReactNode;
     disabled?: boolean;
     disabledReason?: string;
 }

package/dist/components/dropdown/menu-motion.d.ts

@@ -0,0 +1,2 @@
+/** Native keyboard activation emits a click with zero detail. */
+export declare const isPointerMenuEvent: (event: Event) => boolean;

package/dist/components/dropdown/menu-motion.js

@@ -0,0 +1,4 @@
+//#region src/components/dropdown/menu-motion.ts
+var e = (e) => e.type.startsWith("pointer") || e.type.startsWith("mouse") || e.type === "click" && "detail" in e && Number(e.detail) > 0;
+//#endregion
+export { e as isPointerMenuEvent };

package/dist/components/feedback/FeedbackIcon.d.ts

@@ -1,4 +1,5 @@
 import { type FeedbackTone } from './feedback-tone.js';
-export declare const FeedbackIcon: ({ tone }: {
+export declare const FeedbackIcon: ({ tone, className, }: {
     tone: FeedbackTone;
+    className?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/feedback/FeedbackIcon.js

@@ -12,11 +12,11 @@ var s = {
 	success: t,
 	warning: i,
 	error: e
-}, c = ({ tone: e }) => {
-	let t = s[e];
+}, c = ({ tone: e, className: t }) => {
+	let n = s[e];
 	return /* @__PURE__ */ o("span", {
-		className: a("pf:mt-px pf:inline-flex pf:shrink-0", r[e]),
-		children: /* @__PURE__ */ o(t, {
+		className: a("pf:inline-flex pf:shrink-0", !t && "pf:mt-px", r[e], t),
+		children: /* @__PURE__ */ o(n, {
 			size: 16,
 			tone: "inherit"
 		})

package/dist/components/feedback/FeedbackSurface.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type MouseEvent, type ReactNode } from 'react';
 export interface DismissConfig {
     label?: string;
     onDismiss?: () => void;
@@ -13,10 +13,10 @@ export type FeedbackVisibility = {
     onOpenChange?: (open: boolean) => void;
 };
 type FeedbackSurfaceProps = FeedbackVisibility & {
-    children: (onDismiss: () => void) => ReactNode;
+    children: (onDismiss: (event: MouseEvent<HTMLButtonElement>) => void) => ReactNode;
     dismissConfig?: DismissConfig;
 };
-/** FEEDBACK-DISMISS-01: onOpenChange requests closure; onDismiss follows the 200 ms collapse.
+/** FEEDBACK-DISMISS-01: onOpenChange requests closure; onDismiss follows the accepted dismissal.
  * No automatic timeout. A controlled owner may reject the close request.
  */
 export declare const FeedbackSurface: ({ open: controlledOpen, defaultOpen, onOpenChange, dismissConfig, children, }: FeedbackSurfaceProps) => import("react/jsx-runtime").JSX.Element | null;