@cascivo/react 0.17.1 → 1.0.0

package/README.md

@@ -60,7 +60,7 @@ grayscale (`ThemeProvider` warns in dev when that happens).
 In a Server Component file (e.g. `app/layout.tsx`), import the themes once:
 
 ```tsx
-import '@cascivo/themes/all.css'
+import '@cascivo/themes/light-dark.css'
 ```
 
 Component CSS ships **per component** and is pulled in automatically when you
@@ -103,7 +103,8 @@ RSC without any extra wrapper.
 
 ```tsx
 // once, in your entry file — themes are the only global import
-import '@cascivo/themes/all.css' // tokens (once) + base typography + light & dark
+import '@cascivo/themes/light-dark.css' // tokens (once) + base typography + light & dark
+// swap for '@cascivo/themes/all.css' only if you ship a theme picker (all twelve, ~2x)
 
 // anywhere — each component brings its own CSS along
 import { Button, Card, CardContent, Toggle } from '@cascivo/react'
@@ -396,7 +397,7 @@ routing break after adding one of these, check that the import resolves to
 - **SideNav** — Collapsible sidebar navigation with optional icons and one level of grouping
 - **SkipNav** — Skip link that jumps keyboard users past the navigation to the main content
 - **Steps** — Visual progress indicator for multi-step flows with horizontal and vertical orientations
-- **Switcher** — App/product switcher list — lives inside HeaderPanel, renders links with active indicator and optional dividers
+- **Switcher** — Always-visible app/product switcher LIST — every entry is rendered at once, it does not collapse. Lives inside HeaderPanel; renders links with an active indicator and optional dividers. For a collapsed trigger with a menu, use Dropdown.
 - **Tabs** — Switch between related panels of content
 - **Toc** — Table of contents with scroll-spy highlighting of the active section
 

package/dist/action-sheet/action-sheet.js

@@ -62,7 +62,7 @@ function m({ open: m, defaultOpen: h, onOpenChange: g, actions: _, title: v, des
 									onFocus: r.onFocus,
 									onClick: () => A(t),
 									children: t.label
-								}, n);
+								}, t.id ?? n);
 							})]
 						}), b && /* @__PURE__ */ f("div", {
 							className: e.group,

package/dist/breadcrumb/breadcrumb.js

@@ -5,20 +5,20 @@ import { cn as t, getLinkComponent as n, useSignals as r } from "@cascivo/core";
 import { builtin as i, t as a } from "@cascivo/i18n";
 import { jsx as o } from "react/jsx-runtime";
 //#region ../components/src/breadcrumb/breadcrumb.tsx
-function s({ items: s, maxVisible: c, className: l, ariaLabel: u }) {
+function s({ items: s, maxVisible: c, className: l, ariaLabel: u, label: d }) {
 	r();
-	let d = n(), f = u ?? a(i.breadcrumb.nav), p = s, m = s[0];
-	return m !== void 0 && c !== void 0 && s.length > c && (p = [
-		m,
+	let f = n(), p = u ?? d ?? a(i.breadcrumb.nav), m = s, h = s[0];
+	return h !== void 0 && c !== void 0 && s.length > c && (m = [
+		h,
 		{ label: "…" },
 		...s.slice(s.length - (c - 2))
 	]), /* @__PURE__ */ o("nav", {
-		"aria-label": f,
+		"aria-label": p,
 		className: t(e.breadcrumb, l),
-		children: /* @__PURE__ */ o("ol", { children: p.map((e, t) => /* @__PURE__ */ o("li", { children: t === p.length - 1 ? /* @__PURE__ */ o("span", {
+		children: /* @__PURE__ */ o("ol", { children: m.map((e, t) => /* @__PURE__ */ o("li", { children: t === m.length - 1 ? /* @__PURE__ */ o("span", {
 			"aria-current": "page",
 			children: e.label
-		}) : e.href === void 0 ? /* @__PURE__ */ o("span", { children: e.label }) : /* @__PURE__ */ o(d, {
+		}) : e.href === void 0 ? /* @__PURE__ */ o("span", { children: e.label }) : /* @__PURE__ */ o(f, {
 			href: e.href,
 			children: e.label
 		}) }, e.id ?? `${t}-${e.label}`)) })

package/dist/checkbox/checkbox.js

@@ -5,23 +5,24 @@ import { forwardRef as t, useRef as n } from "react";
 import { cn as r, composeRefs as i, useEffectPropSignal as a, useSignalEffect as o } from "@cascivo/core";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region ../components/src/checkbox/checkbox.tsx
-var l = t(function({ label: t, indeterminate: l = !1, className: u, id: d, disabled: f, ...p }, m) {
-	let h = n(null), g = a(l);
+var l = t(function({ label: t, indeterminate: l = !1, ariaLabel: u, className: d, id: f, disabled: p, ...m }, h) {
+	let g = n(null), _ = a(l);
 	o(() => {
-		h.current && (h.current.indeterminate = g.value);
+		g.current && (g.current.indeterminate = _.value);
 	});
-	let _ = d ?? (t ? `cascade-checkbox-${t.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	let v = f ?? (t ? `cascade-checkbox-${t.toLowerCase().replace(/\s+/g, "-")}` : void 0);
 	return /* @__PURE__ */ c("label", {
-		className: r(e.wrapper, u),
-		"data-disabled": f || void 0,
+		className: r(e.wrapper, d),
+		"data-disabled": p || void 0,
 		children: [
 			/* @__PURE__ */ s("input", {
-				ref: i(m, h),
-				id: _,
+				ref: i(h, g),
+				id: v,
 				type: "checkbox",
 				className: e.input,
-				disabled: f,
-				...p
+				disabled: p,
+				...m,
+				"aria-label": m["aria-label"] ?? u
 			}),
 			/* @__PURE__ */ s("span", {
 				className: e.control,

package/dist/color-picker/color-picker.js

@@ -73,86 +73,86 @@ function _({ h: e, s: t, l: n, a: r }) {
 		a: r
 	};
 }
-function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S = !0, label: C, disabled: w, size: T = "md", className: E, labels: D }) {
+function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S = !0, label: C, ariaLabel: w, disabled: T, size: E = "md", className: D, labels: O, id: k, "aria-labelledby": A, "aria-describedby": j, "aria-invalid": M }) {
 	s();
-	let O = t(), [k, A] = i({
+	let N = t(), [P, F] = i({
 		value: v,
 		defaultValue: y ?? "#3b82f6",
 		onChange: b
-	}), j = n(null), M = a(!1), N = g(m(k.value)), P = (e) => {
-		A(h(_(e), S));
-	}, F = (e, t) => {
-		let n = j.current;
+	}), I = n(null), L = a(!1), R = g(m(P.value)), z = (e) => {
+		F(h(_(e), S));
+	}, B = (e, t) => {
+		let n = I.current;
 		if (!n) return;
 		let r = n.getBoundingClientRect(), i = p((e - r.left) / r.width, 0, 1), a = p((t - r.top) / r.height, 0, 1);
-		P({
-			h: N.h,
+		z({
+			h: R.h,
 			s: i * 100,
 			l: (1 - a) * 100,
-			a: N.a
+			a: R.a
 		});
 	};
 	o(() => {
-		if (!M.value) return;
-		let e = (e) => F(e.clientX, e.clientY), t = () => {
-			M.value = !1;
+		if (!L.value) return;
+		let e = (e) => B(e.clientX, e.clientY), t = () => {
+			L.value = !1;
 		};
 		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), () => {
 			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t);
 		};
 	});
-	let I = (e) => {
-		let t = e.shiftKey ? 10 : 2, { s: n, l: r } = N;
+	let V = (e) => {
+		let t = e.shiftKey ? 10 : 2, { s: n, l: r } = R;
 		if (e.key === "ArrowLeft") n -= t;
 		else if (e.key === "ArrowRight") n += t;
 		else if (e.key === "ArrowUp") r += t;
 		else if (e.key === "ArrowDown") r -= t;
 		else return;
-		e.preventDefault(), P({
-			h: N.h,
+		e.preventDefault(), z({
+			h: R.h,
 			s: p(n, 0, 100),
 			l: p(r, 0, 100),
-			a: N.a
+			a: R.a
 		});
-	}, L = (e, t) => {
-		!x || x.length === 0 || A(x[(t + e + x.length) % x.length]);
-	}, R = typeof window < "u" ? window.EyeDropper : void 0, z = () => {
-		R && new R().open().then((e) => A(e.sRGBHex));
-	}, B = {
-		hue: D?.hue ?? l(c.colorPicker.hue),
-		alpha: D?.alpha ?? l(c.colorPicker.alpha),
-		colorArea: D?.colorArea ?? l(c.colorPicker.colorArea),
-		eyedropper: D?.eyedropper ?? l(c.colorPicker.eyedropper)
-	}, V = h(m(k.value), !1), H = `hsl(${N.h} 100% 50%)`;
+	}, H = (e, t) => {
+		!x || x.length === 0 || F(x[(t + e + x.length) % x.length]);
+	}, U = typeof window < "u" ? window.EyeDropper : void 0, W = () => {
+		U && new U().open().then((e) => F(e.sRGBHex));
+	}, G = {
+		hue: O?.hue ?? l(c.colorPicker.hue),
+		alpha: O?.alpha ?? l(c.colorPicker.alpha),
+		colorArea: O?.colorArea ?? l(c.colorPicker.colorArea),
+		eyedropper: O?.eyedropper ?? l(c.colorPicker.eyedropper)
+	}, K = h(m(P.value), !1), q = `hsl(${R.h} 100% 50%)`;
 	return /* @__PURE__ */ f("div", {
-		className: r(e.picker, E),
-		"data-size": T,
-		"data-disabled": w || void 0,
+		className: r(e.picker, D),
+		"data-size": E,
+		"data-disabled": T || void 0,
 		children: [
 			C && /* @__PURE__ */ d("span", {
 				className: e.label,
-				id: `${O}-label`,
+				id: `${N}-label`,
 				children: C
 			}),
 			/* @__PURE__ */ d("div", {
-				ref: j,
+				ref: I,
 				className: e.area,
 				role: "slider",
-				"aria-label": B.colorArea,
-				"aria-valuetext": V,
-				"aria-disabled": w || void 0,
-				tabIndex: w ? -1 : 0,
-				style: { background: H },
+				"aria-label": G.colorArea,
+				"aria-valuetext": K,
+				"aria-disabled": T || void 0,
+				tabIndex: T ? -1 : 0,
+				style: { background: q },
 				onPointerDown: (e) => {
-					w || (e.preventDefault(), M.value = !0, F(e.clientX, e.clientY));
+					T || (e.preventDefault(), L.value = !0, B(e.clientX, e.clientY));
 				},
-				onKeyDown: I,
+				onKeyDown: V,
 				children: /* @__PURE__ */ d("span", {
 					className: e.thumb,
 					style: {
-						insetInlineStart: `${N.s}%`,
-						insetBlockStart: `${100 - N.l}%`,
-						backgroundColor: V
+						insetInlineStart: `${R.s}%`,
+						insetBlockStart: `${100 - R.l}%`,
+						backgroundColor: K
 					}
 				})
 			}),
@@ -161,45 +161,45 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 				children: [
 					/* @__PURE__ */ d("label", {
 						className: e.srOnly,
-						htmlFor: `${O}-hue`,
-						children: B.hue
+						htmlFor: `${N}-hue`,
+						children: G.hue
 					}),
 					/* @__PURE__ */ d("input", {
-						id: `${O}-hue`,
+						id: `${N}-hue`,
 						className: e.hue,
 						type: "range",
 						min: 0,
 						max: 360,
 						step: 1,
-						value: Math.round(N.h),
-						disabled: w,
-						"aria-label": B.hue,
-						onChange: (e) => P({
+						value: Math.round(R.h),
+						disabled: T,
+						"aria-label": G.hue,
+						onChange: (e) => z({
 							h: Number(e.target.value),
-							s: N.s,
-							l: N.l,
-							a: N.a
+							s: R.s,
+							l: R.l,
+							a: R.a
 						})
 					}),
 					S && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("label", {
 						className: e.srOnly,
-						htmlFor: `${O}-alpha`,
-						children: B.alpha
+						htmlFor: `${N}-alpha`,
+						children: G.alpha
 					}), /* @__PURE__ */ d("input", {
-						id: `${O}-alpha`,
+						id: `${N}-alpha`,
 						className: e.alpha,
 						type: "range",
 						min: 0,
 						max: 1,
 						step: .01,
-						value: N.a,
-						disabled: w,
-						"aria-label": B.alpha,
-						style: { "--cascivo-color-picker-solid": V },
-						onChange: (e) => P({
-							h: N.h,
-							s: N.s,
-							l: N.l,
+						value: R.a,
+						disabled: T,
+						"aria-label": G.alpha,
+						style: { "--cascivo-color-picker-solid": K },
+						onChange: (e) => z({
+							h: R.h,
+							s: R.s,
+							l: R.l,
 							a: Number(e.target.value)
 						})
 					})] })
@@ -208,17 +208,17 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 			x && x.length > 0 && /* @__PURE__ */ d("div", {
 				className: e.presets,
 				role: "group",
-				"aria-label": B.colorArea,
+				"aria-label": G.colorArea,
 				children: x.map((t, n) => /* @__PURE__ */ d("button", {
 					type: "button",
 					className: e.preset,
 					style: { backgroundColor: t },
 					"aria-label": t,
-					"aria-pressed": t.toLowerCase() === k.value.toLowerCase(),
-					disabled: w,
-					onClick: () => A(t),
+					"aria-pressed": t.toLowerCase() === P.value.toLowerCase(),
+					disabled: T,
+					onClick: () => F(t),
 					onKeyDown: (e) => {
-						e.key === "ArrowRight" ? (e.preventDefault(), L(1, n)) : e.key === "ArrowLeft" && (e.preventDefault(), L(-1, n));
+						e.key === "ArrowRight" ? (e.preventDefault(), H(1, n)) : e.key === "ArrowLeft" && (e.preventDefault(), H(-1, n));
 					}
 				}, t))
 			}),
@@ -227,23 +227,27 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 				children: [
 					/* @__PURE__ */ d("span", {
 						className: e.preview,
-						style: { backgroundColor: k.value },
+						style: { backgroundColor: P.value },
 						"aria-hidden": "true"
 					}),
 					/* @__PURE__ */ d("input", {
 						className: e.text,
 						type: "text",
-						value: k.value,
-						disabled: w,
-						"aria-label": C ?? B.colorArea,
-						onChange: (e) => A(e.target.value)
+						value: P.value,
+						disabled: T,
+						id: k,
+						"aria-labelledby": A,
+						"aria-describedby": j,
+						"aria-invalid": M,
+						"aria-label": A === void 0 ? w ?? C ?? G.colorArea : void 0,
+						onChange: (e) => F(e.target.value)
 					}),
-					R && /* @__PURE__ */ d("button", {
+					U && /* @__PURE__ */ d("button", {
 						type: "button",
 						className: e.eyedropper,
-						"aria-label": B.eyedropper,
-						disabled: w,
-						onClick: z,
+						"aria-label": G.eyedropper,
+						disabled: T,
+						onClick: W,
 						children: /* @__PURE__ */ d("svg", {
 							width: "16",
 							height: "16",

package/dist/combobox/combobox.js

@@ -2,164 +2,169 @@
 
 import e from "./combobox.module.js";
 import { useId as t, useRef as n } from "react";
-import { cn as r, createMachine as i, focusElement as a, useControllableSignal as o, useMachine as s, useSignal as c, useSignalEffect as l, useSignals as u } from "@cascivo/core";
-import { builtin as d, t as f } from "@cascivo/i18n";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { cn as r, createMachine as i, focusElement as ee, useControllableSignal as a, useMachine as o, useSignal as s, useSignalEffect as c, useSignals as te } from "@cascivo/core";
+import { builtin as l, t as u } from "@cascivo/i18n";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region ../components/src/combobox/combobox.tsx
-var h = i({
+var p = i({
 	initial: "closed",
 	states: {
 		closed: { on: { OPEN: "open" } },
 		open: { on: { CLOSE: "closed" } }
 	}
 });
-function g({ options: i, value: g, defaultValue: _, onValueChange: v, onChange: y, clearable: b = !1, searchable: x = !0, label: S, hint: C, error: w, size: T = "md", disabled: E = !1, labels: D, className: O, id: k }) {
-	u();
-	let [A, j] = s(h), M = t(), N = k ?? `cascade-combobox-${M}`, P = `${M}-listbox`, F = n(null), ee = D?.placeholder ?? f(d.combobox.placeholder), I = D?.empty ?? f(d.combobox.empty), L = D?.clear ?? f(d.combobox.clear), R = D?.search ?? f(d.combobox.search), [z] = o({
-		value: g,
-		defaultValue: _
-	}), B = c(""), V = c(0), H = A.value === "open", U = i.filter((e) => !x || !B.value ? !0 : e.label.toLowerCase().includes(B.value.toLowerCase())), W = i.find((e) => e.value === z.value);
-	l(() => {
-		if (!H) return;
+function m(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function h({ options: i, value: h, defaultValue: g, onValueChange: ne, clearable: _ = !1, searchable: v = !0, label: y, ariaLabel: b, hint: x, error: S, size: re = "md", disabled: C = !1, labels: w, className: T, id: E, "aria-labelledby": D, "aria-describedby": O, "aria-invalid": k }) {
+	te();
+	let [A, j] = o(p), M = t(), N = E ?? `cascade-combobox-${M}`, P = `${M}-listbox`, F = n(null), I = w?.placeholder ?? u(l.combobox.placeholder), L = w?.empty ?? u(l.combobox.empty), R = w?.clear ?? u(l.combobox.clear), z = w?.search ?? u(l.combobox.search), [B] = a({
+		value: h,
+		defaultValue: g
+	}), V = s(""), H = s(0), U = A.value === "open", W = i.filter((e) => !v || !V.value ? !0 : e.label.toLowerCase().includes(V.value.toLowerCase())), G = i.find((e) => e.value === B.value);
+	c(() => {
+		if (!U) return;
 		let e = (e) => {
 			let t = document.getElementById(`${M}-root`);
 			t && !t.contains(e.target) && j("CLOSE");
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	});
-	let G = () => {
-		E || (B.value = "", V.value = 0, j("OPEN"), setTimeout(() => a(F.current), 0));
-	}, K = () => {
-		j("CLOSE"), B.value = "";
-	}, q = v ?? y, J = (e) => {
-		g === void 0 && (z.value = e), q?.(e), K();
-	}, Y = () => {
-		g === void 0 && (z.value = void 0), q?.(void 0);
-	}, X = U.flatMap((e, t) => e.disabled ? [] : [t]), Z = (e) => {
-		if (X.length === 0) return;
-		let t = X[(X.indexOf(V.value) + e + X.length) % X.length];
-		t !== void 0 && (V.value = t);
-	}, Q = (e) => {
-		(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), G());
-	}, te = (e) => {
+	let K = () => {
+		C || (V.value = "", H.value = 0, j("OPEN"), setTimeout(() => ee(F.current), 0));
+	}, q = () => {
+		j("CLOSE"), V.value = "";
+	}, J = ne, Y = (e) => {
+		h === void 0 && (B.value = e), J?.(e), q();
+	}, X = () => {
+		h === void 0 && (B.value = void 0), J?.(void 0);
+	}, Z = W.flatMap((e, t) => e.disabled ? [] : [t]), Q = (e) => {
+		if (Z.length === 0) return;
+		let t = Z[(Z.indexOf(H.value) + e + Z.length) % Z.length];
+		t !== void 0 && (H.value = t);
+	}, ie = (e) => {
+		(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), K());
+	}, ae = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), Z(1);
+				e.preventDefault(), Q(1);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), Z(-1);
+				e.preventDefault(), Q(-1);
 				break;
 			case "Enter": {
 				e.preventDefault();
-				let t = U[V.value];
-				t && !t.disabled && J(t.value);
+				let t = W[H.value];
+				t && !t.disabled && Y(t.value);
 				break;
 			}
 			case "Escape":
-				e.preventDefault(), K();
+				e.preventDefault(), q();
 				break;
 			case "Tab":
-				K();
+				q();
 				break;
 		}
 	}, $ = (e) => `${M}-option-${e}`;
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ f("div", {
 		id: `${M}-root`,
-		className: r(e.wrapper, O),
-		"data-state": w ? "error" : A.value,
-		"data-size": T,
+		className: r(e.wrapper, T),
+		"data-state": S ? "error" : A.value,
+		"data-size": re,
 		children: [
-			S && /* @__PURE__ */ p("label", {
+			y && /* @__PURE__ */ d("label", {
 				className: e.label,
 				htmlFor: N,
-				children: S
+				children: y
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ f("div", {
 				className: e.field,
-				children: [/* @__PURE__ */ m("button", {
+				children: [/* @__PURE__ */ f("button", {
 					id: N,
 					type: "button",
 					role: "combobox",
-					"aria-expanded": H,
+					"aria-expanded": U,
 					"aria-controls": P,
 					"aria-haspopup": "listbox",
-					"aria-activedescendant": H && V.value >= 0 ? $(V.value) : void 0,
-					"aria-invalid": w ? !0 : void 0,
-					"aria-describedby": w ? `${M}-error` : C ? `${M}-hint` : void 0,
+					"aria-labelledby": D,
+					"aria-label": b,
+					"aria-activedescendant": U && H.value >= 0 ? $(H.value) : void 0,
+					"aria-invalid": S ? !0 : k,
+					"aria-describedby": m(S ? `${M}-error` : x ? `${M}-hint` : void 0, O),
 					className: e.trigger,
-					disabled: E,
-					onKeyDown: Q,
-					onClick: H ? K : G,
-					children: [/* @__PURE__ */ p("span", {
-						className: r(e.value, W ? void 0 : e.placeholder),
-						children: W?.label ?? ee
-					}), /* @__PURE__ */ p("span", {
+					disabled: C,
+					onKeyDown: ie,
+					onClick: U ? q : K,
+					children: [/* @__PURE__ */ d("span", {
+						className: r(e.value, G ? void 0 : e.placeholder),
+						children: G?.label ?? I
+					}), /* @__PURE__ */ d("span", {
 						className: e.chevron,
 						"aria-hidden": "true"
 					})]
-				}), b && z.value !== void 0 && /* @__PURE__ */ p("button", {
+				}), _ && B.value !== void 0 && /* @__PURE__ */ d("button", {
 					type: "button",
 					className: e.clear,
-					"aria-label": L,
+					"aria-label": R,
 					onClick: (e) => {
-						e.stopPropagation(), Y();
+						e.stopPropagation(), X();
 					},
 					children: "✕"
 				})]
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ f("div", {
 				role: "listbox",
 				id: P,
 				className: e.listbox,
-				"data-state": H ? "open" : "closed",
-				"aria-label": S,
-				children: [x && H && /* @__PURE__ */ p("div", {
+				"data-state": U ? "open" : "closed",
+				"aria-label": y,
+				children: [v && U && /* @__PURE__ */ d("div", {
 					className: e.searchWrapper,
-					children: /* @__PURE__ */ p("input", {
+					children: /* @__PURE__ */ d("input", {
 						ref: F,
 						type: "text",
 						className: e.search,
-						value: B.value,
+						value: V.value,
 						onChange: (e) => {
-							B.value = e.target.value, V.value = 0;
+							V.value = e.target.value, H.value = 0;
 						},
-						onKeyDown: te,
-						"aria-label": R,
+						onKeyDown: ae,
+						"aria-label": z,
 						autoComplete: "off"
 					})
-				}), U.length === 0 ? /* @__PURE__ */ p("div", {
+				}), W.length === 0 ? /* @__PURE__ */ d("div", {
 					className: e.empty,
-					children: I
-				}) : U.map((t, n) => /* @__PURE__ */ p("div", {
+					children: L
+				}) : W.map((t, n) => /* @__PURE__ */ d("div", {
 					id: $(n),
 					role: "option",
-					"aria-selected": t.value === z.value,
+					"aria-selected": t.value === B.value,
 					"aria-disabled": t.disabled || void 0,
-					"data-state": n === V.value ? "active" : void 0,
+					"data-state": n === H.value ? "active" : void 0,
 					"data-disabled": t.disabled || void 0,
 					className: e.option,
 					onMouseEnter: () => {
-						t.disabled || (V.value = n);
+						t.disabled || (H.value = n);
 					},
 					onClick: () => {
-						t.disabled || J(t.value);
+						t.disabled || Y(t.value);
 					},
 					children: t.label
 				}, t.value))]
 			}),
-			w && /* @__PURE__ */ p("span", {
+			S && /* @__PURE__ */ d("span", {
 				id: `${M}-error`,
 				className: e.error,
 				role: "alert",
-				children: w
+				children: S
 			}),
-			!w && C && /* @__PURE__ */ p("span", {
+			!S && x && /* @__PURE__ */ d("span", {
 				id: `${M}-hint`,
 				className: e.hint,
-				children: C
+				children: x
 			})
 		]
 	});
 }
 //#endregion
-export { g as Combobox };
+export { h as Combobox };