@commenda/pathfinder 0.1.0 → 0.2.0

package/dist/components/phone-input/CountryPicker.js

@@ -31,7 +31,7 @@ function h({ value: a, onChange: o, allowedCountries: p, disabled: h, label: g }
 		disabled: h,
 		children: [/* @__PURE__ */ l(u.Trigger, {
 			"aria-label": `${g} country: ${y(a)}`,
-			className: "pf:flex pf:h-[26px] pf:shrink-0 pf:items-center pf:gap-sm pf:px-md pf:border-0 pf:border-e pf:border-solid pf:border-soft-pearl-400 pf:bg-transparent pf:text-inherit pf:font-body pf:text-label-13 pf:rounded-s-sm pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:cursor-not-allowed",
+			className: "pf:flex pf:h-[26px] pf:shrink-0 pf:items-center pf:gap-sm pf:px-md pf:border-0 pf:border-e pf:border-solid pf:border-soft-pearl-400 pf:bg-transparent pf:text-inherit pf:font-body pf:text-label-13 pf:rounded-s-sm pf:cursor-pointer pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:cursor-not-allowed",
 			children: [
 				/* @__PURE__ */ c(m, { country: a }),
 				/* @__PURE__ */ l("span", { children: ["+", f(a)] }),
@@ -43,33 +43,36 @@ function h({ value: a, onChange: o, allowedCountries: p, disabled: h, label: g }
 			className: "pf:z-[60]",
 			children: /* @__PURE__ */ l(u.Popup, {
 				"aria-label": `${g} country`,
-				className: `${i} pf:w-[280px]`,
+				className: `${i} pf:[&]:w-[360px]`,
 				children: [
 					/* @__PURE__ */ l("div", {
-						className: "pf:flex pf:h-[36px] pf:items-center pf:gap-md pf:px-lg pf:border-b pf:border-solid pf:border-soft-pearl-300",
-						children: [/* @__PURE__ */ c(t, { size: 16 }), /* @__PURE__ */ c(u.Input, {
+						className: "pf:box-border pf:flex pf:h-[36px] pf:items-center pf:gap-md pf:px-lg pf:border-b pf:border-solid pf:border-soft-pearl-300",
+						children: [/* @__PURE__ */ c("span", {
+							className: "pf:flex pf:shrink-0",
+							children: /* @__PURE__ */ c(t, { size: 16 })
+						}), /* @__PURE__ */ c(u.Input, {
 							"aria-label": "Search countries",
 							placeholder: "Search country or dial code",
 							className: "pf:min-w-0 pf:w-full pf:h-full pf:p-0 pf:border-0 pf:bg-transparent pf:font-body pf:text-label-13 pf:outline-none"
 						})]
 					}),
 					/* @__PURE__ */ c(u.Empty, {
-						className: "pf:p-lg pf:text-copy-12",
+						className: "pf:p-lg pf:empty:p-0 pf:text-copy-12",
 						children: "No countries found."
 					}),
 					/* @__PURE__ */ c(u.List, {
-						className: "pf:max-h-[256px] pf:overflow-auto pf:p-sm",
+						className: "pf:box-border pf:max-h-[256px] pf:overflow-auto pf:p-sm pf:empty:p-0",
 						children: (t) => /* @__PURE__ */ l(u.Item, {
 							value: t,
 							className: r,
 							children: [
 								/* @__PURE__ */ c(m, { country: t }),
 								/* @__PURE__ */ c("span", {
-									className: "pf:flex-1",
+									className: "pf:min-w-0 pf:flex-1",
 									children: _.of(t) ?? t
 								}),
 								/* @__PURE__ */ l("span", {
-									className: "pf:text-soft-pearl-800",
+									className: "pf:shrink-0 pf:text-soft-pearl-800",
 									children: ["+", f(t)]
 								}),
 								/* @__PURE__ */ c(u.ItemIndicator, { children: /* @__PURE__ */ c(e, { size: 16 }) })

package/dist/components/popover/Popover.js

@@ -9,7 +9,7 @@ import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { Popover as c } from "@base-ui/react/popover";
 import { PreviewCard as l } from "@base-ui/react/preview-card";
 //#region src/components/popover/Popover.tsx
-var u = "pf:box-border pf:flex pf:flex-col pf:w-[320px] pf:max-w-[calc(100vw-16px)] pf:max-h-[var(--available-height)] pf:min-w-0 pf:overflow-hidden pf:rounded-[10px] pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background pf:shadow-menu pf:font-body pf:text-copy-13 pf:text-soft-pearl-1000 pf:origin-[var(--transform-origin)] pf:outline-none", d = "pf:transition-[transform,opacity] pf:duration-150 pf:ease-(--pf-easing-out) pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0 pf:data-[side=bottom]:[--pf-popover-closed-transform:translateY(-8px)_scale(0.95)] pf:data-[side=top]:[--pf-popover-closed-transform:translateY(8px)_scale(0.95)] pf:data-[side=left]:[--pf-popover-closed-transform:translateX(8px)_scale(0.95)] pf:data-[side=right]:[--pf-popover-closed-transform:translateX(-8px)_scale(0.95)] pf:motion-safe:data-[starting-style]:[transform:var(--pf-popover-closed-transform)] pf:motion-safe:data-[ending-style]:[transform:var(--pf-popover-closed-transform)]";
+var u = "pf:box-border pf:flex pf:flex-col pf:w-[320px] pf:max-w-[calc(100vw-16px)] pf:max-h-[var(--available-height)] pf:min-w-0 pf:overflow-hidden pf:rounded-[10px] pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background pf:shadow-menu pf:font-body pf:text-copy-13 pf:text-soft-pearl-1000 pf:origin-[var(--transform-origin)] pf:outline-none", d = "pf:transition-[transform,opacity] pf:duration-160 pf:data-[ending-style]:duration-100 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:data-[side=bottom]:[--pf-popover-closed-transform:translateY(-4px)_scale(0.98)] pf:data-[side=top]:[--pf-popover-closed-transform:translateY(4px)_scale(0.98)] pf:data-[side=left]:[--pf-popover-closed-transform:translateX(4px)_scale(0.98)] pf:data-[side=right]:[--pf-popover-closed-transform:translateX(-4px)_scale(0.98)] pf:motion-safe:data-[starting-style]:[transform:var(--pf-popover-closed-transform)] pf:motion-safe:data-[ending-style]:[transform:var(--pf-popover-closed-transform)]";
 function f(f) {
 	let { trigger: p, title: m, description: h, positionConfig: g, children: _, className: v } = f, y = n(f), b = i(), x = a(null);
 	return f.mode === "preview" ? /* @__PURE__ */ s(l.Root, {
@@ -75,7 +75,7 @@ function f(f) {
 					closeConfig: f.closeConfig,
 					compact: !0,
 					heading: /* @__PURE__ */ o(c.Title, {
-						className: "pf:m-0 pf:pt-sm pf:text-label-13 pf:font-medium pf:wrap-anywhere",
+						className: "pf:m-0 pf:text-label-13 pf:font-medium pf:wrap-anywhere",
 						children: m
 					}),
 					description: h && /* @__PURE__ */ o(c.Description, {

package/dist/components/question-card/QuestionOptions.js

@@ -28,7 +28,7 @@ var f = "pf:flex pf:flex-col pf:min-w-0", p = "pf:flex pf:w-full pf:items-center
 				value: e.id,
 				disabled: v || e.disabled,
 				"aria-label": e.label,
-				className: a(p, "pf:border-0 pf:bg-transparent pf:cursor-pointer"),
+				className: a(p, "pf:border-0 pf:cursor-pointer", g.includes(e.id) ? "pf:bg-blue-700 pf:text-background pf:data-checked:hover:bg-blue-800" : "pf:bg-transparent pf:text-soft-pearl-1000"),
 				onClick: () => {
 					!v && !e.disabled && (b(e.id), t && C(!1));
 				},
@@ -38,7 +38,7 @@ var f = "pf:flex pf:flex-col pf:min-w-0", p = "pf:flex pf:w-full pf:items-center
 				children: [
 					/* @__PURE__ */ c("span", {
 						"aria-hidden": "true",
-						className: a("pf:flex pf:size-[24px] pf:shrink-0 pf:items-center pf:justify-center pf:rounded-[6px] pf:text-label-13", g.includes(e.id) ? "pf:bg-blue-700 pf:text-white" : "pf:bg-soft-pearl-300 pf:text-soft-pearl-800"),
+						className: a("pf:flex pf:size-[24px] pf:shrink-0 pf:items-center pf:justify-center pf:rounded-[6px] pf:text-label-13", g.includes(e.id) ? "pf:bg-blue-700 pf:text-background" : "pf:bg-soft-pearl-300 pf:text-soft-pearl-800"),
 						children: h.indexOf(e) + 1
 					}),
 					e.icon && /* @__PURE__ */ c("span", {
@@ -52,7 +52,7 @@ var f = "pf:flex pf:flex-col pf:min-w-0", p = "pf:flex pf:w-full pf:items-center
 							className: "pf:block pf:text-label-13-strong",
 							children: e.label
 						}), e.description && /* @__PURE__ */ c("span", {
-							className: "pf:block pf:text-copy-13 pf:text-soft-pearl-800",
+							className: a("pf:block pf:text-copy-13", g.includes(e.id) ? "pf:text-background" : "pf:text-soft-pearl-800"),
 							children: e.description
 						})]
 					})

package/dist/components/radio-group/RadioGroup.js

@@ -1,70 +1,79 @@
 "use client";
 import { getChoiceClassNames as e, getChoiceMarkClassNames as t } from "../choices/choice-class-names.js";
-import { ChoiceLeading as n } from "../choices/ChoiceLeading.js";
-import { ChoiceText as r } from "../choices/ChoiceText.js";
-import i from "clsx";
-import { forwardRef as a, useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Radio as l } from "@base-ui/react/radio";
-import { RadioGroup as u } from "@base-ui/react/radio-group";
+import { choiceMotionProps as n, choicePressClass as r } from "../choices/choice-motion.js";
+import { ChoiceLeading as i } from "../choices/ChoiceLeading.js";
+import { ChoiceText as a } from "../choices/ChoiceText.js";
+import o from "clsx";
+import { forwardRef as s, useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Radio as d } from "@base-ui/react/radio";
+import { RadioGroup as f } from "@base-ui/react/radio-group";
 //#region src/components/radio-group/RadioGroup.tsx
-var d = a(function({ label: a, hideLabel: d, description: f, options: p, variant: m = "default", orientation: h = "vertical", className: g, disabled: _, onValueChange: v, "aria-describedby": y, ...b }, x) {
-	let S = o();
-	return /* @__PURE__ */ c("div", {
-		className: i("pf-radio-field pf:flex pf:flex-col pf:gap-md pf:max-w-full", g),
+var p = s(function({ label: s, hideLabel: p, description: m, options: h, variant: g = "default", orientation: _ = "vertical", className: v, disabled: y, onValueChange: b, "aria-describedby": x, ...S }, C) {
+	let w = c();
+	return /* @__PURE__ */ u("div", {
+		className: o("pf-radio-field pf:flex pf:flex-col pf:gap-md pf:max-w-full", v),
 		children: [
-			/* @__PURE__ */ s("span", {
-				id: `${S}-label`,
-				className: d ? "pf:sr-only" : "pf-radio-group-label pf:text-soft-pearl-1000 pf:font-body pf:text-label-13 pf:font-medium",
-				children: a
+			/* @__PURE__ */ l("span", {
+				id: `${w}-label`,
+				className: p ? "pf:sr-only" : "pf-radio-group-label pf:text-soft-pearl-1000 pf:font-body pf:text-label-13 pf:font-medium",
+				children: s
 			}),
-			f && /* @__PURE__ */ s("span", {
-				id: `${S}-description`,
+			m && /* @__PURE__ */ l("span", {
+				id: `${w}-description`,
 				className: "pf:flex pf:flex-col pf:text-soft-pearl-800 pf:font-body pf:text-copy-12 pf:font-normal pf:wrap-anywhere pf:empty:hidden pf:group-data-disabled/choice:text-inherit",
-				children: f
+				children: m
 			}),
-			/* @__PURE__ */ s(u, {
-				...b,
-				ref: x,
-				disabled: _,
+			/* @__PURE__ */ l(f, {
+				...S,
+				onKeyDownCapture: (e) => {
+					for (let t of e.currentTarget.querySelectorAll("[data-motion]")) t.removeAttribute("data-motion");
+					S.onKeyDownCapture?.(e);
+				},
+				ref: C,
+				disabled: y,
 				onValueChange: (e) => {
-					e !== null && v?.(e);
+					e !== null && b?.(e);
 				},
-				"aria-labelledby": `${S}-label`,
-				"aria-describedby": [y, f ? `${S}-description` : void 0].filter(Boolean).join(" ") || void 0,
-				className: i("pf-radio-group pf:flex pf:min-w-0", h === "horizontal" ? "pf:flex-row pf:flex-wrap" : "pf:flex-col", m === "card" ? "pf:items-stretch pf:gap-lg" : "pf:items-start", m === "default" && (h === "horizontal" ? "pf:gap-xl" : "pf:gap-md")),
-				"data-orientation": h,
-				"data-variant": m,
-				children: p.map((a, o) => {
-					let u = `${S}-${String(o)}-description`, d = _ || a.disabled ? a.disabledReason : void 0;
-					return /* @__PURE__ */ c(l.Root, {
-						value: a.value,
-						disabled: a.disabled,
-						"aria-label": a.label,
-						"aria-describedby": a.description || d || a.details?.length ? u : void 0,
-						className: i("pf-choice pf-radio", e(m), m === "card" && h === "horizontal" && "pf:flex-[1_1_240px]"),
-						"data-variant": m,
+				"aria-labelledby": `${w}-label`,
+				"aria-describedby": [x, m ? `${w}-description` : void 0].filter(Boolean).join(" ") || void 0,
+				className: o("pf-radio-group pf:flex pf:min-w-0", _ === "horizontal" ? "pf:flex-row pf:flex-wrap" : "pf:flex-col", g === "card" ? "pf:items-stretch pf:gap-lg" : "pf:items-start", g === "default" && (_ === "horizontal" ? "pf:gap-xl" : "pf:gap-md")),
+				"data-orientation": _,
+				"data-variant": g,
+				children: h.map((s, c) => {
+					let f = `${w}-${String(c)}-description`, p = y || s.disabled ? s.disabledReason : void 0;
+					return /* @__PURE__ */ u(d.Root, {
+						...n,
+						value: s.value,
+						disabled: s.disabled,
+						"aria-label": s.label,
+						"aria-describedby": s.description || p || s.details?.length ? f : void 0,
+						className: o("pf-choice pf-radio", e(g), g === "card" && _ === "horizontal" && "pf:flex-[1_1_240px]"),
+						"data-variant": g,
 						children: [
-							/* @__PURE__ */ s("span", {
-								className: i("pf-choice-mark", t(m, !0)),
+							/* @__PURE__ */ l("span", {
+								className: o("pf-choice-mark", t(g, !0), r),
 								"aria-hidden": "true",
-								children: /* @__PURE__ */ s(l.Indicator, { className: "pf-radio-dot pf:size-[6px] pf:rounded-full pf:bg-current" })
+								children: /* @__PURE__ */ l(d.Indicator, {
+									keepMounted: !0,
+									className: "pf-radio-dot pf:size-[6px] pf:rounded-full pf:bg-current pf:data-unchecked:opacity-0 pf:data-unchecked:scale-[0.7] pf:transition-none pf:motion-safe:group-data-[motion=pointer]/choice:transition-[transform,opacity] pf:duration-150 pf:ease-[cubic-bezier(0.23,1,0.32,1)]"
+								})
 							}),
-							/* @__PURE__ */ s(n, { children: a.leading }),
-							/* @__PURE__ */ s(r, {
-								label: a.label,
-								description: a.description,
-								descriptionId: u,
-								details: a.details,
-								disabledReason: d
+							/* @__PURE__ */ l(i, { children: s.leading }),
+							/* @__PURE__ */ l(a, {
+								label: s.label,
+								description: s.description,
+								descriptionId: f,
+								details: s.details,
+								disabledReason: p
 							})
 						]
-					}, a.value);
+					}, s.value);
 				})
 			})
 		]
 	});
 });
-d.displayName = "PathfinderRadioGroup";
+p.displayName = "PathfinderRadioGroup";
 //#endregion
-export { d as RadioGroup };
+export { p as RadioGroup };

package/dist/components/search/Search.js

@@ -10,97 +10,97 @@ import { forwardRef as l, useEffect as u, useRef as d, useState as f } from "rea
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/search/Search.tsx
 var h = l(function(l, h) {
-	let g = s(l), [_, v] = f(!1), y = d(null), b = d(!1), { label: x, hideLabel: S, labelConfig: C, description: w, errorConfig: T, sourceConfig: E, disableConfig: D, value: O, defaultValue: k, onValueChange: A, variant: j = "fixed", loadingConfig: M, shortcutConfig: N, onSearch: P, className: F, onBlur: I, onKeyDown: L, ...R } = l, z = () => {
-		b.current = !0, v(!1);
+	let g = s(l), [_, v] = f(!1), [y, b] = f(!1), x = d(null), S = d(!1), { label: C, hideLabel: w, labelConfig: T, description: E, errorConfig: D, sourceConfig: O, disableConfig: k, value: A, defaultValue: j, onValueChange: M, variant: N = "fixed", loadingConfig: P, shortcutConfig: F, onSearch: I, className: L, onBlur: R, onKeyDown: z, ...B } = l, V = () => {
+		S.current = !0, v(!1);
 	};
 	u(() => {
-		_ ? g.controlRef.current?.focus() : b.current &&= (y.current?.focus(), !1);
+		_ ? g.controlRef.current?.focus() : S.current &&= (x.current?.focus(), !1);
 	}, [_, g.controlRef]);
-	let B = N?.key, V = N?.scopeId;
+	let H = F?.key, U = F?.scopeId;
 	u(() => {
-		if (!B || !V || D?.isDisabled) return;
-		let e = document.getElementById(V), t = (e) => {
-			if (e.defaultPrevented || e.isComposing || e.ctrlKey || e.altKey || e.metaKey || e.key !== B) return;
+		if (!H || !U || k?.isDisabled) return;
+		let e = document.getElementById(U), t = (e) => {
+			if (e.defaultPrevented || e.isComposing || e.ctrlKey || e.altKey || e.metaKey || e.key !== H) return;
 			let t = e.target;
-			t instanceof HTMLElement && t.closest("input,textarea,select,[contenteditable=\"true\"]") || (e.preventDefault(), j === "expandable" ? v(!0) : g.controlRef.current?.focus());
+			t instanceof HTMLElement && t.closest("input,textarea,select,[contenteditable=\"true\"]") || (e.preventDefault(), b(!1), N === "expandable" ? v(!0) : g.controlRef.current?.focus());
 		};
 		return e?.addEventListener("keydown", t), () => {
 			e?.removeEventListener("keydown", t);
 		};
 	}, [
-		B,
-		V,
-		D?.isDisabled,
-		j,
+		H,
+		U,
+		k?.isDisabled,
+		N,
 		g.controlRef
 	]);
-	let [H, U] = f(!1);
+	let [W, G] = f(!1);
 	u(() => {
-		if (!M?.isLoading) {
-			U(!1);
+		if (!P?.isLoading) {
+			G(!1);
 			return;
 		}
 		let e = setTimeout(() => {
-			U(!0);
+			G(!0);
 		}, 150);
 		return () => {
 			clearTimeout(e);
 		};
-	}, [M?.isLoading]);
-	let W = /* @__PURE__ */ p(i, {
+	}, [P?.isLoading]);
+	let K = /* @__PURE__ */ p(i, {
 		field: l,
 		id: g.id,
 		supportId: g.supportId,
 		error: g.error,
-		className: c(j === "expandable" ? "pf:w-full" : j === "global" ? "pf:w-full pf:max-w-[720px]" : "pf:w-full", F),
+		className: c(N === "expandable" ? "pf:w-full" : N === "global" ? "pf:w-full pf:max-w-[720px]" : "pf:w-full", L),
 		children: /* @__PURE__ */ m("div", {
-			className: c(o, "pf:gap-xs pf:px-md", j === "global" ? "pf:min-h-[40px] pf:rounded-full" : "pf:min-h-[28px]"),
+			className: c(o, "pf:gap-xs pf:px-md", N === "global" ? "pf:min-h-[40px] pf:rounded-full" : "pf:min-h-[28px]"),
 			"data-invalid": g.error ? "" : void 0,
-			"data-disabled": D?.isDisabled ? "" : void 0,
+			"data-disabled": k?.isDisabled ? "" : void 0,
 			children: [
 				/* @__PURE__ */ p("span", {
 					"aria-hidden": "true",
 					className: "pf:flex pf:size-[16px] pf:shrink-0 pf:items-center pf:justify-center pf:text-soft-pearl-800",
-					children: M?.isLoading && H ? /* @__PURE__ */ p(e, { size: 16 }) : /* @__PURE__ */ p(n, {
+					children: P?.isLoading && W ? /* @__PURE__ */ p(e, { size: 16 }) : /* @__PURE__ */ p(n, {
 						size: 16,
 						tone: "inherit"
 					})
 				}),
 				/* @__PURE__ */ p("input", {
-					...R,
+					...B,
 					ref: (e) => {
 						g.controlRef.current = e, typeof h == "function" ? h(e) : h && (h.current = e);
 					},
 					id: g.id,
 					type: "search",
 					value: g.value,
-					disabled: D?.isDisabled,
-					"aria-invalid": g.error ? !0 : R["aria-invalid"],
+					disabled: k?.isDisabled,
+					"aria-invalid": g.error ? !0 : B["aria-invalid"],
 					"aria-describedby": g.describedBy,
-					"aria-busy": M?.isLoading,
+					"aria-busy": P?.isLoading,
 					onChange: (e) => {
 						g.change(e.target.value);
 					},
 					onBlur: (e) => {
-						g.blur(), I?.(e);
+						g.blur(), R?.(e);
 					},
 					onKeyDown: (e) => {
-						L?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && (e.key === "Enter" && P && (e.preventDefault(), P(g.value)), e.key === "Escape" && (e.preventDefault(), g.value && !l.readOnly ? g.change("") : j === "expandable" ? z() : g.controlRef.current?.blur()));
+						z?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && (e.key === "Enter" && I && (e.preventDefault(), I(g.value)), e.key === "Escape" && (b(!1), e.preventDefault(), g.value && !l.readOnly ? g.change("") : N === "expandable" ? V() : g.controlRef.current?.blur()));
 					},
-					className: c(a, "pf:border-0 pf:p-0 pf:text-label-13 pf:[&::-webkit-search-cancel-button]:appearance-none", j === "global" ? "pf:min-h-[38px]" : "pf:min-h-[26px]")
+					className: c(a, "pf:border-0 pf:p-0 pf:text-label-13 pf:[&::-webkit-search-cancel-button]:appearance-none", N === "global" ? "pf:min-h-[38px]" : "pf:min-h-[26px]")
 				}),
-				N && !g.value && /* @__PURE__ */ p("kbd", {
+				F && !g.value && /* @__PURE__ */ p("kbd", {
 					className: "pf:shrink-0 pf:font-body pf:text-label-12 pf:text-soft-pearl-800",
-					children: N.label
+					children: F.label
 				}),
-				(!!g.value || j === "expandable") && !l.readOnly && /* @__PURE__ */ p("button", {
+				(!!g.value || N === "expandable") && !l.readOnly && /* @__PURE__ */ p("button", {
 					type: "button",
 					"aria-label": `Clear ${l.label ?? l["aria-label"]}`,
-					disabled: D?.isDisabled,
-					onClick: () => {
-						g.change(""), j === "expandable" ? z() : g.controlRef.current?.focus();
+					disabled: k?.isDisabled,
+					onClick: (e) => {
+						b(e.detail > 0), g.change(""), N === "expandable" ? V() : g.controlRef.current?.focus();
 					},
-					className: "pf:flex pf:size-[16px] pf:shrink-0 pf:items-center pf:justify-center pf:border-0 pf:bg-transparent pf:p-0 pf:text-soft-pearl-800 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700",
+					className: "pf:cursor-pointer pf:disabled:cursor-default pf:flex pf:size-[16px] pf:shrink-0 pf:items-center pf:justify-center pf:border-0 pf:bg-transparent pf:p-0 pf:text-soft-pearl-800 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700",
 					children: /* @__PURE__ */ p(r, {
 						size: 12,
 						tone: "inherit"
@@ -109,31 +109,35 @@ var h = l(function(l, h) {
 				/* @__PURE__ */ p("span", {
 					role: "status",
 					className: "pf:sr-only",
-					children: M?.isLoading ? M.label ?? "Searching" : ""
+					children: P?.isLoading ? P.label ?? "Searching" : ""
 				})
 			]
 		})
 	});
-	return j === "expandable" ? /* @__PURE__ */ m("div", {
-		className: c("pf:relative pf:max-w-full pf:overflow-hidden pf:transition-[width] pf:duration-200 pf:ease-(--pf-easing-out) pf:motion-reduce:transition-none", _ ? "pf:w-[220px]" : "pf:w-[28px]", F),
+	return N === "expandable" ? /* @__PURE__ */ m("div", {
+		className: c("pf:relative pf:min-w-0 pf:max-w-full pf:min-h-[28px]", y && "pf:motion-safe:transition-[width] pf:motion-safe:duration-180 pf:motion-safe:ease-[cubic-bezier(0.23,1,0.32,1)]", _ ? "pf:w-[220px]" : "pf:w-[28px]", L),
 		children: [/* @__PURE__ */ p("div", {
-			hidden: !_,
-			children: W
+			"aria-hidden": !_,
+			ref: (e) => {
+				e?.toggleAttribute("inert", !_);
+			},
+			className: c("pf:w-full pf:max-w-[calc(100vw-48px)]", y && "pf:motion-safe:transition-opacity pf:motion-safe:duration-180 pf:motion-safe:ease-[cubic-bezier(0.23,1,0.32,1)]", _ ? "pf:opacity-100" : "pf:absolute pf:inset-0 pf:pointer-events-none pf:invisible pf:opacity-0 pf:duration-120!"),
+			children: K
 		}), !_ && /* @__PURE__ */ p(t, {
-			ref: y,
+			ref: x,
 			label: l.label ?? l["aria-label"],
 			size: "sm",
-			disabled: D?.isDisabled,
-			disabledReason: D?.reason,
-			onClick: () => {
-				v(!0);
+			disabled: k?.isDisabled,
+			disabledReason: k?.reason,
+			onClick: (e) => {
+				b(e.detail > 0), v(!0);
 			},
 			children: /* @__PURE__ */ p(n, {
 				size: 16,
 				tone: "inherit"
 			})
 		})]
-	}) : W;
+	}) : K;
 });
 //#endregion
 export { h as Search };

package/dist/components/segmented-control/SegmentedControl.js

@@ -10,7 +10,7 @@ import { Radio as l } from "@base-ui/react/radio";
 import { RadioGroup as u } from "@base-ui/react/radio-group";
 //#region src/components/segmented-control/SegmentedControl.tsx
 var d = ({ label: d, options: f, size: p = "md", className: m, disabled: h, disabledReason: g, onValueChange: _, "aria-describedby": v, ...y }) => {
-	let { rootRef: b, indicator: x } = r(), S = a(), C = h ? g : void 0;
+	let { rootRef: b, indicatorRef: x } = r(), S = a(), C = h ? g : void 0;
 	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ c(u, {
 		ref: b,
 		...y,
@@ -19,11 +19,12 @@ var d = ({ label: d, options: f, size: p = "md", className: m, disabled: h, disa
 		"aria-label": d,
 		"aria-describedby": [v, C ? S : void 0].filter(Boolean).join(" ") || void 0,
 		"data-size": p,
-		className: i(i("pf-segmented-control pf:relative pf:isolate pf:inline-flex pf:box-border pf:max-w-full pf:items-stretch pf:gap-xxs pf:p-xxs", "pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:rounded-md pf:bg-soft-pearl-200"), m),
-		children: [x && /* @__PURE__ */ s("span", {
+		className: i(i("pf-segmented-control pf:group/segments pf:relative pf:isolate pf:inline-flex pf:box-border pf:max-w-full pf:items-stretch pf:gap-xxs pf:p-xxs", "pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:rounded-md pf:bg-soft-pearl-200"), m),
+		children: [/* @__PURE__ */ s("span", {
+			ref: x,
+			hidden: !0,
 			"aria-hidden": "true",
-			style: x,
-			className: "pf:absolute pf:left-0 pf:top-0 pf:-z-[1] pf:pointer-events-none pf:rounded-sm pf:bg-background pf:shadow-control pf:transition-[transform,width,height] pf:duration-200 pf:ease-(--pf-easing-out) pf:motion-reduce:transition-none"
+			className: "pf:absolute pf:left-0 pf:top-0 pf:origin-top-left pf:-z-[1] pf:pointer-events-none pf:rounded-sm pf:bg-background pf:shadow-control"
 		}), f.map((r) => /* @__PURE__ */ s(t, {
 			label: r.disabled && r.disabledReason ? `${r.label}: ${r.disabledReason}` : r.iconOnly ? r.label : void 0,
 			children: /* @__PURE__ */ c(l.Root, {
@@ -31,7 +32,7 @@ var d = ({ label: d, options: f, size: p = "md", className: m, disabled: h, disa
 				disabled: r.disabled,
 				"aria-label": r.label,
 				"aria-description": r.disabled ? r.disabledReason : void 0,
-				className: i(i("pf-segment pf:box-border pf:inline-flex pf:items-center pf:justify-center pf:gap-sm pf:min-w-0 pf:py-xs", "pf:border-0 pf:rounded-sm pf:bg-transparent pf:text-soft-pearl-800 pf:font-body pf:text-[length:var(--pf-text-label-13)]", "pf:leading-[16px] pf:font-medium pf:cursor-pointer pf:wrap-anywhere pf:[&>span]:min-w-0", "pf:not-data-disabled:not-data-checked:hover:bg-soft-pearl-300 ", "pf:data-checked:not-data-disabled:text-soft-pearl-1000", !x && "pf:data-checked:bg-background pf:data-checked:shadow-control", "pf:focus-visible:z-[1] pf:data-disabled:text-soft-pearl-600 pf:data-disabled:cursor-not-allowed"), e, p === "sm" ? "pf:min-h-[24px] pf:px-md" : "pf:min-h-[28px] pf:px-lg"),
+				className: i(i("pf-segment pf:box-border pf:inline-flex pf:items-center pf:justify-center pf:gap-sm pf:min-w-0 pf:py-xs", "pf:border-0 pf:rounded-sm pf:bg-transparent pf:text-soft-pearl-800 pf:font-body pf:text-[length:var(--pf-text-label-13)]", "pf:leading-[16px] pf:font-medium pf:cursor-pointer pf:wrap-anywhere pf:[&>span]:min-w-0", "pf:not-data-disabled:not-data-checked:hover:bg-soft-pearl-300 ", "pf:data-checked:not-data-disabled:text-soft-pearl-1000", "pf:group-not-data-indicator/segments:data-checked:bg-background pf:group-not-data-indicator/segments:data-checked:shadow-control", "pf:focus-visible:z-[1] pf:data-disabled:text-soft-pearl-600 pf:data-disabled:cursor-not-allowed"), e, p === "sm" ? "pf:min-h-[24px] pf:px-md" : "pf:min-h-[28px] pf:px-lg"),
 				children: [r.leadingIcon && /* @__PURE__ */ s(n, {
 					size: 16,
 					children: r.leadingIcon

package/dist/components/selection/ChoiceField.js

@@ -69,7 +69,7 @@ function l({ config: l, field: u, multiple: d, resolved: f, open: p, anchorRef:
 					onClick: () => {
 						_(), u.triggerRef.current?.focus();
 					},
-					className: "pf:absolute pf:end-[28px] pf:top-1/2 pf:-translate-y-1/2 pf:flex pf:size-[16px] pf:items-center pf:justify-center pf:border-0 pf:bg-transparent pf:p-0 pf:text-soft-pearl-800 pf:rounded-xs pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:opacity-50",
+					className: "pf:absolute pf:end-[28px] pf:top-1/2 pf:-translate-y-1/2 pf:flex pf:size-[16px] pf:items-center pf:justify-center pf:border-0 pf:bg-transparent pf:p-0 pf:text-soft-pearl-800 pf:rounded-xs pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:opacity-50 pf:cursor-pointer pf:disabled:cursor-default",
 					children: /* @__PURE__ */ s(e, {
 						size: 16,
 						tone: "inherit"

package/dist/components/selection/ChoiceList.js

@@ -53,7 +53,8 @@ function u({ options: u, selected: d, config: f, highlighted: p, atLimit: m, onL
 	}, r.value);
 	return /* @__PURE__ */ a(s.List, {
 		ref: _,
-		className: "pf:overflow-y-auto pf:overscroll-contain pf:p-sm pf:flex pf:flex-col pf:gap-xxs",
+		"data-empty": u.length === 0 ? "" : void 0,
+		className: "pf:overflow-y-auto pf:overscroll-contain pf:p-sm pf:data-empty:p-0 pf:flex pf:flex-col pf:gap-xxs",
 		style: { maxHeight: f.listConfig?.maxHeight ?? 320 },
 		onScroll: (e) => {
 			let t = e.currentTarget;