themelia-react-ui 2.0.3 → 2.0.5

package/dist/features/global-search.js

@@ -1,26 +1,26 @@
 "use client";
 import { interpolateString as e, useStrings as t } from "../lib/strings.js";
-import { t as n } from "../utils-BRhFDwuU.js";
-import { t as r } from "../buttons-DPZekJFu.js";
-import { c as i } from "../typography-UTnveOEy.js";
+import { t as n } from "../utils-B6kKb8jB.js";
+import { t as r } from "../buttons-BedGfygC.js";
+import { c as i } from "../typography-BQnine1k.js";
 import { t as a } from "../focus-recipes-B653VaLq.js";
-import { t as o } from "../structure-BmisBK-3.js";
+import { t as o } from "../structure-DuxKl954.js";
 import { i as s, n as c } from "../tone-recipes-BPsRAvhu.js";
 import { a as l, n as u } from "../surface-recipes-BKRVW8Os.js";
-import { a as d, n as f, r as p } from "../popover.recipes-D3j8R8Yp.js";
-import { r as m } from "../overlays-tMkF-VAN.js";
+import { a as d, n as f, r as p } from "../popover.recipes-DdiEp0rd.js";
+import { r as m } from "../overlays-BSgCtM2v.js";
 import { t as h } from "../interaction-recipes-XR9ZpVYL.js";
-import { _ as g, g as _ } from "../primitives-BFK08r9M.js";
-import { i as v, n as y, s as b } from "../avatar-DAPlDvhJ.js";
-import { t as x } from "../badge-HpFqoqSY.js";
-import { n as S, t as C } from "../field-affordance-recipes-DZhnIL_Y.js";
-import { a as w, c as T, o as E } from "../text-inputs-f9Ia-aCi.js";
-import { i as ee, r as te, t as ne } from "../tabs-CDocW5D1.js";
-import { s as D } from "../data-display-DT_khPl_.js";
-import * as O from "react";
-import { useEffect as k, useMemo as A, useRef as j, useState as M } from "react";
-import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
-import { ArrowRight as I, Loader2 as L, Search as R } from "lucide-react";
+import { _ as g, g as _ } from "../primitives-ByWgGUgt.js";
+import { i as v, n as y, s as b } from "../avatar-CeZaFmNH.js";
+import { t as x } from "../badge-xIiV_E7f.js";
+import { n as S, t as C } from "../field-affordance-recipes-DWcNcOjh.js";
+import { a as w, c as T, o as E } from "../text-inputs-B1culiSK.js";
+import { i as D, r as O, t as k } from "../tabs-e7ko9S2o.js";
+import { s as A } from "../data-display-BdgCAw8T.js";
+import * as j from "react";
+import { useEffect as M, useMemo as N, useRef as P, useState as F } from "react";
+import { Fragment as ee, jsx as I, jsxs as L } from "react/jsx-runtime";
+import { ArrowRight as te, Loader2 as ne, Search as R } from "lucide-react";
 //#region src/components/features/global-search/global-search.strings.ts
 var z = {
 	dialogTitle: "Search",
@@ -41,29 +41,29 @@ var z = {
 //#endregion
 //#region src/components/features/global-search/hooks/use-global-search.ts
 function B({ results: e, query: t, onResultSelect: n, onClose: r }) {
-	let [i, a] = M("all"), [o, s] = M(0);
-	k(() => {
+	let [i, a] = F("all"), [o, s] = F(0);
+	M(() => {
 		a("all"), s(0);
 	}, [t]);
-	let c = A(() => {
+	let c = N(() => {
 		let t = {};
 		for (let n of e) (t[n.group] ??= []).push(n);
 		return t;
-	}, [e]), l = A(() => {
+	}, [e]), l = N(() => {
 		let t = { all: e.length };
 		for (let [e, n] of Object.entries(c)) t[e] = n.length;
 		return t;
-	}, [e.length, c]), u = A(() => {
+	}, [e.length, c]), u = N(() => {
 		if (i === "all") return c;
 		let e = c[i];
 		return e ? { [i]: e } : {};
-	}, [c, i]), d = A(() => i === "all" ? e.slice() : c[i] ?? [], [
+	}, [c, i]), d = N(() => i === "all" ? e.slice() : c[i] ?? [], [
 		i,
 		c,
 		e
-	]), f = j(o);
+	]), f = P(o);
 	f.current = o;
-	let p = j(d);
+	let p = P(d);
 	return p.current = d, {
 		grouped: c,
 		tabCounts: l,
@@ -96,10 +96,10 @@ function B({ results: e, query: t, onResultSelect: n, onClose: r }) {
 //#endregion
 //#region src/components/features/global-search/partials/global-search-empty-state.tsx
 function V({ title: e, hint: t }) {
-	return /* @__PURE__ */ P(D, {
+	return /* @__PURE__ */ I(A, {
 		title: e,
 		description: t,
-		media: /* @__PURE__ */ P(R, {
+		media: /* @__PURE__ */ I(R, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		}),
@@ -111,12 +111,12 @@ function V({ title: e, hint: t }) {
 //#endregion
 //#region src/components/features/global-search/partials/global-search-footer.tsx
 function H({ keys: e, label: t }) {
-	return /* @__PURE__ */ F("span", {
+	return /* @__PURE__ */ L("span", {
 		className: "global-search-footer--shortcut inline-flex items-center gap-space-xs",
-		children: [/* @__PURE__ */ P("kbd", {
+		children: [/* @__PURE__ */ I("kbd", {
 			className: u,
 			children: e
-		}), /* @__PURE__ */ P(i, {
+		}), /* @__PURE__ */ I(i, {
 			tag: "span",
 			size: "xs",
 			type: "secondary",
@@ -125,27 +125,27 @@ function H({ keys: e, label: t }) {
 	});
 }
 function U({ navigateLabel: e, openLabel: t, closeLabel: r, trailing: i, className: a }) {
-	return /* @__PURE__ */ P("div", {
+	return /* @__PURE__ */ I("div", {
 		className: n("global-search-footer--component", p.menuRegion, l.anchored.footer, a),
-		children: /* @__PURE__ */ F("div", {
-			className: "global-search-footer--body flex flex-col items-stretch gap-space-xs px-row-x @sm/global-search:flex-row @sm/global-search:items-center @sm/global-search:justify-between",
-			children: [/* @__PURE__ */ F("span", {
+		children: /* @__PURE__ */ L("div", {
+			className: n("global-search-footer--body flex flex-col items-stretch gap-space-xs", p.menuCopyInset, "@sm/global-search:flex-row @sm/global-search:items-center @sm/global-search:justify-between"),
+			children: [/* @__PURE__ */ L("span", {
 				className: "global-search-footer--shortcuts flex flex-wrap items-center gap-x-space-lg gap-y-space-xs",
 				children: [
-					/* @__PURE__ */ P(H, {
+					/* @__PURE__ */ I(H, {
 						keys: "↑↓",
 						label: e
 					}),
-					/* @__PURE__ */ P(H, {
+					/* @__PURE__ */ I(H, {
 						keys: "↵",
 						label: t
 					}),
-					/* @__PURE__ */ P(H, {
+					/* @__PURE__ */ I(H, {
 						keys: "esc",
 						label: r
 					})
 				]
-			}), i ? /* @__PURE__ */ P("span", {
+			}), i ? /* @__PURE__ */ I("span", {
 				className: "global-search-footer--trailing shrink-0 self-end whitespace-nowrap @sm/global-search:self-auto",
 				children: i
 			}) : null]
@@ -155,14 +155,14 @@ function U({ navigateLabel: e, openLabel: t, closeLabel: r, trailing: i, classNa
 //#endregion
 //#region src/components/features/global-search/partials/global-search-group-heading.tsx
 function W({ label: e, icon: t, action: n }) {
-	return /* @__PURE__ */ F("div", {
+	return /* @__PURE__ */ L("div", {
 		className: "global-search-group--heading flex items-center justify-between gap-space-sm px-row-x pt-space-md pb-space-xs",
-		children: [/* @__PURE__ */ F("span", {
+		children: [/* @__PURE__ */ L("span", {
 			className: "inline-flex min-w-0 items-center gap-space-sm",
-			children: [!!t && /* @__PURE__ */ P(t, {
+			children: [!!t && /* @__PURE__ */ I(t, {
 				className: "size-icon-sm shrink-0 text-muted-foreground",
 				"aria-hidden": "true"
-			}), /* @__PURE__ */ P(i, {
+			}), /* @__PURE__ */ I(i, {
 				tag: "span",
 				size: "xs",
 				type: "secondary",
@@ -177,25 +177,25 @@ function W({ label: e, icon: t, action: n }) {
 //#endregion
 //#region src/components/features/global-search/partials/global-search-idle-state.tsx
 function G({ sections: e, fallbackIcons: t }) {
-	return /* @__PURE__ */ P("div", {
+	return /* @__PURE__ */ I("div", {
 		className: n("global-search-idle-state--component", d.compact),
-		children: e.map((e, r) => /* @__PURE__ */ F("div", {
+		children: e.map((e, r) => /* @__PURE__ */ L("div", {
 			className: "global-search-idle-state--section",
-			children: [/* @__PURE__ */ P(W, {
+			children: [/* @__PURE__ */ I(W, {
 				label: e.label,
 				icon: e.icon ?? (r === 0 ? t?.recent : t?.suggestions)
-			}), /* @__PURE__ */ P("ul", {
+			}), /* @__PURE__ */ I("ul", {
 				className: "m-0 flex list-none flex-col p-0",
 				children: e.items.map((e) => {
 					let t = e.icon ?? R;
-					return /* @__PURE__ */ P("li", { children: /* @__PURE__ */ F("button", {
+					return /* @__PURE__ */ I("li", { children: /* @__PURE__ */ L("button", {
 						type: "button",
 						onClick: e.onSelect,
 						className: n(`${h.nativeButtonReset} flex w-full cursor-pointer items-center justify-start text-inherit outline-none ${a.inset} text-left transition-colors`, f(), h.rowHover),
-						children: [/* @__PURE__ */ P(t, {
+						children: [/* @__PURE__ */ I(t, {
 							className: "size-icon shrink-0 text-muted-foreground",
 							"aria-hidden": "true"
-						}), /* @__PURE__ */ P(i, {
+						}), /* @__PURE__ */ I(i, {
 							tag: "span",
 							type: "inherit",
 							weight: "medium",
@@ -211,40 +211,47 @@ function G({ sections: e, fallbackIcons: t }) {
 }
 //#endregion
 //#region src/components/features/global-search/partials/global-search-input.tsx
-var K = O.forwardRef(function({ value: e, onValueChange: t, onKeyDown: r, placeholder: i, clearLabel: a = "Clear search", loading: o = !1, autoFocus: s = !1 }, c) {
-	let l = O.useRef(null);
-	return O.useImperativeHandle(c, () => l.current), O.useEffect(() => {
-		s && l.current?.focus();
-	}, [s]), /* @__PURE__ */ P("div", {
+var K = j.forwardRef(function({ value: e, onValueChange: t, onKeyDown: r, placeholder: i, clearLabel: a = "Clear search", loading: o = !1, autoFocus: s = !1, expanded: c, controls: l, activeDescendant: u }, d) {
+	let f = j.useRef(null);
+	return j.useImperativeHandle(d, () => f.current), j.useEffect(() => {
+		s && f.current?.focus();
+	}, [s]), /* @__PURE__ */ I("div", {
 		"data-component": "global-search-input",
 		"data-slot": "global-search-input",
-		className: "global-search-input--component px-surface-xs pt-surface-xs pb-space-xs",
-		children: /* @__PURE__ */ F(w, { children: [
-			/* @__PURE__ */ P(E, { children: /* @__PURE__ */ P(R, { "aria-hidden": "true" }) }),
-			/* @__PURE__ */ P(T, {
-				ref: l,
+		className: n("global-search-input--component pt-surface-xs pb-space-xs", p.menuInline),
+		children: /* @__PURE__ */ L(w, { children: [
+			/* @__PURE__ */ I(E, { children: /* @__PURE__ */ I(R, { "aria-hidden": "true" }) }),
+			/* @__PURE__ */ I(T, {
+				ref: f,
 				type: "text",
 				value: e,
 				onChange: (e) => t(e.target.value),
 				onKeyDown: r,
 				placeholder: i,
 				"aria-label": i,
+				...c === void 0 ? {} : {
+					role: "combobox",
+					"aria-autocomplete": "list",
+					"aria-expanded": c,
+					"aria-controls": c ? l : void 0,
+					"aria-activedescendant": c ? u : void 0
+				},
 				autoComplete: "off",
 				spellCheck: !1
 			}),
-			(o || !!e) && /* @__PURE__ */ P(E, {
+			(o || !!e) && /* @__PURE__ */ I(E, {
 				align: "inline-end",
-				children: o ? /* @__PURE__ */ P(L, {
+				children: o ? /* @__PURE__ */ I(ne, {
 					className: "animate-spin",
 					"aria-hidden": "true"
-				}) : /* @__PURE__ */ P("button", {
+				}) : /* @__PURE__ */ I("button", {
 					type: "button",
 					onClick: () => {
-						t(""), l.current?.focus();
+						t(""), f.current?.focus();
 					},
 					"aria-label": a,
 					className: n(S.target, S.focus, S.clear),
-					children: /* @__PURE__ */ P(C, {
+					children: /* @__PURE__ */ I(C, {
 						className: S.icon,
 						"aria-hidden": "true"
 					})
@@ -266,57 +273,63 @@ function Y(e, t) {
 	let n = (t ?? "").trim();
 	if (!n) return e;
 	let r = e.toLowerCase(), i = n.toLowerCase(), a = r.indexOf(i);
-	return a < 0 ? e : /* @__PURE__ */ F(N, { children: [
+	return a < 0 ? e : /* @__PURE__ */ L(ee, { children: [
 		e.slice(0, a),
-		/* @__PURE__ */ P("mark", {
+		/* @__PURE__ */ I("mark", {
 			className: c.match,
 			children: e.slice(a, a + n.length)
 		}),
 		e.slice(a + n.length)
 	] });
 }
-function X({ result: e, active: t = !1, query: r = "", onSelect: s, onMouseEnter: c, className: l }) {
-	let u = e.thumbnail?.icon, d = J, p = re;
-	return /* @__PURE__ */ F("button", {
+function X({ result: e, active: t = !1, query: r = "", onSelect: s, onMouseEnter: c, optionId: l, className: u }) {
+	let d = e.thumbnail?.icon, p = J, m = re, S = (e) => (e ?? "neutral") === "neutral" && (t ? "bg-card" : "group-hover/row:bg-card");
+	return /* @__PURE__ */ L("button", {
 		type: "button",
 		"data-component": "global-search-result-row",
 		"data-slot": "global-search-result-row",
+		...l ? {
+			id: l,
+			role: "option",
+			"aria-selected": t,
+			tabIndex: -1
+		} : {},
 		onMouseEnter: c,
 		onClick: s,
-		className: n(`${h.nativeButtonReset} group/row relative flex w-full cursor-pointer items-center justify-start text-inherit outline-none ${a.inset} text-left transition-colors`, f(), "global-search-result-row--component", t ? h.rowSelected : h.rowHover, l),
+		className: n(`${h.nativeButtonReset} group/row relative flex w-full cursor-pointer items-center justify-start text-inherit outline-none ${a.inset} text-left transition-colors`, f(), "global-search-result-row--component", t ? h.rowSelected : h.rowHover, u),
 		children: [
-			/* @__PURE__ */ P("div", {
+			/* @__PURE__ */ I("div", {
 				className: "flex shrink-0 items-center",
-				children: e.avatar ? /* @__PURE__ */ F(y, {
-					className: n("size-avatar-sm", p[e.avatar.tone ?? "neutral"]),
-					children: [e.avatar.src && /* @__PURE__ */ P(b, {
+				children: e.avatar ? /* @__PURE__ */ L(y, {
+					className: n("size-avatar-sm", m[e.avatar.tone ?? "neutral"], S(e.avatar.tone)),
+					children: [e.avatar.src && /* @__PURE__ */ I(b, {
 						src: e.avatar.src,
 						alt: e.title
-					}), /* @__PURE__ */ P(v, {
-						className: n("text-xs font-semibold", p[e.avatar.tone ?? "neutral"]),
+					}), /* @__PURE__ */ I(v, {
+						className: n("text-xs font-semibold", m[e.avatar.tone ?? "neutral"], S(e.avatar.tone)),
 						children: e.avatar.initials
 					})]
-				}) : u ? /* @__PURE__ */ P("span", {
-					className: n("inline-flex size-avatar-sm items-center justify-center rounded-inner", d[e.thumbnail?.tone ?? "neutral"]),
-					children: /* @__PURE__ */ P(u, {
+				}) : d ? /* @__PURE__ */ I("span", {
+					className: n("inline-flex size-avatar-sm items-center justify-center rounded-radius", p[e.thumbnail?.tone ?? "neutral"], S(e.thumbnail?.tone)),
+					children: /* @__PURE__ */ I(d, {
 						className: "size-icon-sm",
 						"aria-hidden": "true"
 					})
 				}) : null
 			}),
-			/* @__PURE__ */ F(o, {
+			/* @__PURE__ */ L(o, {
 				gap: "dense",
 				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ F("div", {
+				children: [/* @__PURE__ */ L("div", {
 					className: "flex min-w-0 items-center gap-space-sm",
-					children: [/* @__PURE__ */ P(i, {
+					children: [/* @__PURE__ */ I(i, {
 						tag: "span",
 						type: "inherit",
 						weight: "medium",
 						lineHeight: "tight",
 						className: "truncate",
 						children: Y(e.title, r)
-					}), !!e.badge && /* @__PURE__ */ P(x, {
+					}), !!e.badge && /* @__PURE__ */ I(x, {
 						tone: e.badge.tone === "destructive" ? "destructive" : e.badge.tone,
 						children: e.badge.label
 					})]
@@ -324,7 +337,7 @@ function X({ result: e, active: t = !1, query: r = "", onSelect: s, onMouseEnter
 					let t = [];
 					return e.subtitle && t.push({
 						key: "subtitle",
-						node: /* @__PURE__ */ P(i, {
+						node: /* @__PURE__ */ I(i, {
 							tag: "span",
 							size: "xs",
 							type: "secondary",
@@ -335,12 +348,12 @@ function X({ result: e, active: t = !1, query: r = "", onSelect: s, onMouseEnter
 						let a = e.icon;
 						t.push({
 							key: `m-${r}`,
-							node: /* @__PURE__ */ F(i, {
+							node: /* @__PURE__ */ L(i, {
 								tag: "span",
 								size: "xs",
 								type: "secondary",
 								className: n("inline-flex min-w-0 items-center gap-space-xs break-words", e.mono && "font-mono tabular-nums"),
-								children: [!!a && /* @__PURE__ */ P(a, {
+								children: [!!a && /* @__PURE__ */ I(a, {
 									className: "size-icon-sm shrink-0",
 									"aria-hidden": "true"
 								}), e.label]
@@ -348,14 +361,14 @@ function X({ result: e, active: t = !1, query: r = "", onSelect: s, onMouseEnter
 						});
 					}), e.timestamp && t.push({
 						key: "ts",
-						node: /* @__PURE__ */ P(_, {
+						node: /* @__PURE__ */ I(_, {
 							size: "xs",
 							className: "tabular-nums",
 							children: e.timestamp
 						})
 					}), e.tags?.forEach((e) => t.push({
 						key: `t-${e}`,
-						node: /* @__PURE__ */ P(i, {
+						node: /* @__PURE__ */ I(i, {
 							tag: "span",
 							size: "xs",
 							type: "secondary",
@@ -364,22 +377,22 @@ function X({ result: e, active: t = !1, query: r = "", onSelect: s, onMouseEnter
 						})
 					})), e.rightValue && t.push({
 						key: "rv",
-						node: /* @__PURE__ */ F(g, {
+						node: /* @__PURE__ */ L(g, {
 							type: "inherit",
 							weight: "medium",
 							className: "inline-flex flex-wrap items-baseline gap-space-xs tabular-nums",
-							children: [e.rightValue, !!e.rightLabel && /* @__PURE__ */ P(i, {
+							children: [e.rightValue, !!e.rightLabel && /* @__PURE__ */ I(i, {
 								tag: "span",
 								size: "inherit",
 								type: "secondary",
 								children: e.rightLabel.toLowerCase()
 							})]
 						})
-					}), t.length === 0 ? null : /* @__PURE__ */ P("div", {
+					}), t.length === 0 ? null : /* @__PURE__ */ I("div", {
 						className: "flex min-w-0 flex-wrap items-baseline gap-x-space-sm gap-y-dense break-words",
-						children: t.map((e, t) => /* @__PURE__ */ F("span", {
+						children: t.map((e, t) => /* @__PURE__ */ L("span", {
 							className: n("inline-flex min-w-0 max-w-full items-baseline gap-space-sm", e.key === "rv" && "@xl/global-search:hidden"),
-							children: [t > 0 && /* @__PURE__ */ P(i, {
+							children: [t > 0 && /* @__PURE__ */ I(i, {
 								tag: "span",
 								size: "xs",
 								type: "secondary",
@@ -391,18 +404,18 @@ function X({ result: e, active: t = !1, query: r = "", onSelect: s, onMouseEnter
 					});
 				})()]
 			}),
-			!!(e.rightValue || e.rightLabel) && /* @__PURE__ */ P("div", {
+			!!(e.rightValue || e.rightLabel) && /* @__PURE__ */ I("div", {
 				className: "hidden shrink-0 items-center self-stretch @xl/global-search:flex",
-				children: /* @__PURE__ */ F(o, {
+				children: /* @__PURE__ */ L(o, {
 					gap: "dense",
 					align: "end",
 					className: "text-right leading-tight",
-					children: [!!e.rightValue && /* @__PURE__ */ P(g, {
+					children: [!!e.rightValue && /* @__PURE__ */ I(g, {
 						type: "inherit",
 						weight: "semibold",
 						className: "whitespace-nowrap tabular-nums",
 						children: e.rightValue
-					}), !!e.rightLabel && /* @__PURE__ */ P(i, {
+					}), !!e.rightLabel && /* @__PURE__ */ I(i, {
 						tag: "span",
 						size: "xs",
 						type: "secondary",
@@ -411,7 +424,7 @@ function X({ result: e, active: t = !1, query: r = "", onSelect: s, onMouseEnter
 					})]
 				})
 			}),
-			/* @__PURE__ */ P(I, {
+			/* @__PURE__ */ I(te, {
 				"aria-hidden": "true",
 				className: n("size-icon shrink-0 transition-opacity", t ? "text-inherit opacity-100" : "text-muted-foreground opacity-0 group-hover/row:opacity-100")
 			})
@@ -421,25 +434,25 @@ function X({ result: e, active: t = !1, query: r = "", onSelect: s, onMouseEnter
 //#endregion
 //#region src/components/features/global-search/partials/global-search-tabs.tsx
 function Z({ value: e, onValueChange: t, tabs: r, counts: a }) {
-	return /* @__PURE__ */ P("div", {
+	return /* @__PURE__ */ I("div", {
 		className: n("global-search-tabs--component", l.anchored.header),
-		children: /* @__PURE__ */ P("div", {
-			className: "global-search-tabs--scroller overflow-x-auto px-surface-xs pt-space-xs pb-space-md [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-			children: /* @__PURE__ */ P(ne, {
+		children: /* @__PURE__ */ I("div", {
+			className: n("global-search-tabs--scroller overflow-x-auto pt-space-xs pb-space-md [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", p.menuInline),
+			children: /* @__PURE__ */ I(k, {
 				value: e,
 				onValueChange: (e) => t(e),
 				className: "min-w-max",
-				children: /* @__PURE__ */ P(te, {
+				children: /* @__PURE__ */ I(O, {
 					className: "global-search-tabs--list h-action-sm w-max min-w-max",
 					children: r.map((e) => {
 						let t = a[e.value] ?? 0;
-						return /* @__PURE__ */ F(ee, {
+						return /* @__PURE__ */ L(D, {
 							value: e.value,
 							className: "global-search-tabs--trigger shrink-0 gap-space-sm px-control-sm text-foreground",
-							children: [/* @__PURE__ */ P(i, {
+							children: [/* @__PURE__ */ I(i, {
 								tag: "span",
 								children: e.label
-							}), /* @__PURE__ */ P(x, {
+							}), /* @__PURE__ */ I(x, {
 								size: "sm",
 								tone: "secondary",
 								className: "global-search-tabs--count tabular-nums",
@@ -460,7 +473,7 @@ function Q({ results: a = [], query: o, onQueryChange: s, onResultSelect: c, onC
 		query: o,
 		onResultSelect: c,
 		onClose: l
-	}), x = !u && o.trim().length > 1 && a.length === 0, S = !u && o.trim().length <= 1, C = O.useMemo(() => {
+	}), x = !u && o.trim().length > 1 && a.length === 0, S = !u && o.trim().length <= 1, C = j.useId(), w = !u && a.length > 0, T = new Map(b.flat.map((e, t) => [e.id, t])), E = (e) => `${C}-option-${e}`, D = Object.keys(b.visibleGrouped), O = (e) => `${C}-group-${e}`, k = w && b.flat[b.activeIdx] ? E(b.activeIdx) : void 0, A = j.useMemo(() => {
 		if (_) return _;
 		let e = Object.keys(b.grouped);
 		return [{
@@ -476,81 +489,97 @@ function Q({ results: a = [], query: o, onQueryChange: s, onResultSelect: c, onC
 		y.tabAll,
 		p
 	]);
-	return /* @__PURE__ */ F("div", {
+	return /* @__PURE__ */ L("div", {
 		"data-component": "global-search",
 		"data-slot": "global-search",
-		className: n("global-search--component", "@container/global-search overflow-hidden rounded-radius border border-border bg-card text-card-foreground shadow-xl", v),
+		className: n("global-search--component", "@container/global-search overflow-hidden rounded-surface border border-border bg-card text-card-foreground shadow-xl", v),
 		children: [
-			g?.input ?? /* @__PURE__ */ P(K, {
+			g?.input ?? /* @__PURE__ */ I(K, {
 				value: o,
 				onValueChange: s,
 				onKeyDown: b.onKeyDown,
 				placeholder: y.placeholder,
 				clearLabel: y.clear,
 				loading: u,
-				autoFocus: m
+				autoFocus: m,
+				expanded: w,
+				controls: D.map((e, t) => O(t)).join(" "),
+				activeDescendant: k
 			}),
-			!u && a.length > 0 && (g?.tabs ?? /* @__PURE__ */ P(Z, {
+			!u && a.length > 0 && (g?.tabs ?? /* @__PURE__ */ I(Z, {
 				value: b.activeTab,
 				onValueChange: b.setActiveTab,
-				tabs: C,
+				tabs: A,
 				counts: b.tabCounts
 			})),
-			/* @__PURE__ */ F("div", {
+			/* @__PURE__ */ L("div", {
 				className: "global-search--viewport max-h-130 overflow-y-auto",
 				children: [
-					!!S && (g?.idle ?? (f && f.length > 0 ? /* @__PURE__ */ P(G, { sections: f }) : null)),
-					!!u && (g?.loading ?? /* @__PURE__ */ P("div", {
+					!!S && (g?.idle ?? (f && f.length > 0 ? /* @__PURE__ */ I(G, { sections: f }) : null)),
+					!!u && (g?.loading ?? /* @__PURE__ */ I("div", {
 						className: "global-search--loading flex items-center justify-center px-row-x py-space-xl",
 						role: "status",
-						children: /* @__PURE__ */ P(i, {
+						children: /* @__PURE__ */ I(i, {
 							type: "secondary",
 							children: y.loading
 						})
 					})),
-					!!x && (g?.empty ?? /* @__PURE__ */ P(V, {
+					!!x && (g?.empty ?? /* @__PURE__ */ I(V, {
 						title: e(y.emptyTitle, { query: o }),
 						hint: y.emptyHint
 					})),
-					!u && a.length > 0 && /* @__PURE__ */ P("div", {
+					!u && a.length > 0 && /* @__PURE__ */ I("div", {
 						className: n("global-search--results", d.compact),
-						children: Object.entries(b.visibleGrouped).map(([e, t]) => /* @__PURE__ */ F("div", {
+						children: Object.entries(b.visibleGrouped).map(([e, t], n) => /* @__PURE__ */ L("div", {
 							className: "global-search--group",
-							children: [/* @__PURE__ */ P(W, {
+							children: [/* @__PURE__ */ I(W, {
 								label: p?.[e] ?? e,
-								action: b.activeTab === "all" && t.length > 0 ? /* @__PURE__ */ P(r, {
+								action: b.activeTab === "all" && t.length > 0 ? /* @__PURE__ */ I(r, {
 									type: "button",
 									size: "sm",
 									onClick: () => b.setActiveTab(e),
 									className: "shrink-0",
 									children: y.seeAll
 								}) : null
-							}), /* @__PURE__ */ P("ul", {
+							}), /* @__PURE__ */ I("ul", {
+								id: O(n),
+								role: "listbox",
+								"aria-label": p?.[e] ?? e,
 								className: "m-0 flex list-none flex-col p-0",
 								children: t.map((e) => {
-									let t = b.flat[b.activeIdx]?.id === e.id, n = {
+									let t = b.flat[b.activeIdx]?.id === e.id, n = E(T.get(e.id) ?? -1), r = {
 										isActive: t,
 										query: o,
-										onSelect: () => c?.(e)
-									}, r = g?.renderResult ? g.renderResult(e, n) : /* @__PURE__ */ P(X, {
-										result: e,
-										active: t,
-										query: o,
-										onSelect: n.onSelect,
-										onMouseEnter: () => b.setActiveById(e.id)
-									});
-									return /* @__PURE__ */ P("li", { children: r }, e.id);
+										onSelect: () => c?.(e),
+										optionId: n
+									};
+									return g?.renderResult ? /* @__PURE__ */ I("li", {
+										id: n,
+										role: "option",
+										"aria-selected": t,
+										children: g.renderResult(e, r)
+									}, e.id) : /* @__PURE__ */ I("li", {
+										role: "none",
+										children: /* @__PURE__ */ I(X, {
+											result: e,
+											active: t,
+											query: o,
+											onSelect: r.onSelect,
+											onMouseEnter: () => b.setActiveById(e.id),
+											optionId: n
+										})
+									}, e.id);
 								})
 							})]
 						}, e))
 					})
 				]
 			}),
-			g?.footer ?? /* @__PURE__ */ P(U, {
+			g?.footer ?? /* @__PURE__ */ I(U, {
 				navigateLabel: y.footerNavigate,
 				openLabel: y.footerOpen,
 				closeLabel: y.footerClose,
-				trailing: !S && !x && a.length > 0 ? /* @__PURE__ */ P(i, {
+				trailing: !S && !x && a.length > 0 ? /* @__PURE__ */ I(i, {
 					tag: "span",
 					size: "xs",
 					type: "secondary",
@@ -564,8 +593,8 @@ function Q({ results: a = [], query: o, onQueryChange: s, onResultSelect: c, onC
 //#endregion
 //#region src/components/features/global-search/global-search-dialog.tsx
 function $({ open: e, onOpenChange: r, contentClassName: i, className: a, strings: o, autoFocus: s = !0, ...c }) {
-	let l = t(z, o), u = A(() => () => r(!1), [r]);
-	return /* @__PURE__ */ P(m, {
+	let l = t(z, o), u = N(() => () => r(!1), [r]);
+	return /* @__PURE__ */ I(m, {
 		open: e,
 		onOpenChange: r,
 		title: l.dialogTitle,
@@ -575,7 +604,7 @@ function $({ open: e, onOpenChange: r, contentClassName: i, className: a, string
 		showConfirm: !1,
 		className: n("global-search-dialog--component", "w-full max-w-2xl overflow-visible border-0 bg-transparent p-0 shadow-none sm:max-w-2xl", "top-24 translate-y-0", i),
 		contentClassName: "p-0",
-		children: /* @__PURE__ */ P(Q, {
+		children: /* @__PURE__ */ I(Q, {
 			...c,
 			strings: o,
 			autoFocus: s,