@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/search.js

@@ -1,34 +1,68 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { n as t } from "./badge-C0C-rTBu.js";
-import { n } from "./button-BXzhydVB.js";
-import { r, t as i } from "./DialogContent-Bl4v10AC.js";
-import { t as a } from "./useControlSize-DJwe-7ZQ.js";
-import { n as o, r as s, t as c } from "./PopoverContent-DOtszFWK.js";
-import { t as l } from "./useTextHighlight-C46Le9u_.js";
-import { a as u, i as d, n as f, r as p, t as m } from "./useFuzzySearch-KslRxiJY.js";
-import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createTextVNode as x, createVNode as S, defineComponent as C, nextTick as w, normalizeClass as T, openBlock as E, ref as D, renderList as O, renderSlot as k, resolveDynamicComponent as A, toDisplayString as j, unref as M, watch as N, withCtx as P } from "vue";
-import { Maximize2 as F, Minimize2 as I, Search as L, X as R } from "@lucide/vue";
-import { cva as z } from "class-variance-authority";
-//#region src/components/search/searchVariants.ts
-var B = z("", {
-	variants: { variant: {
-		inline: "",
-		bare: "border-none bg-transparent p-0 rounded-none",
-		floating: "border-none bg-transparent p-0 rounded-none"
-	} },
-	defaultVariants: { variant: "inline" }
-}), V = ["data-surface"], H = ["placeholder", "value"], U = [
+import { n as e, t } from "./class-names-Cpy5eaBk.js";
+import { n } from "./badge-u65NClWn.js";
+import { t as r } from "./button-Bu9F4uU6.js";
+import { c as i, i as a, n as o, r as s } from "./dialog-TNRDkcE4.js";
+import { t as c } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { n as ee, r as l, t as te } from "./popover-BQGYXZyO.js";
+import { a as u, i as d, n as f, r as p, t as m } from "./useFuzzySearch-CUnZknpm.js";
+import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createTextVNode as x, createVNode as S, defineComponent as C, mergeProps as w, nextTick as T, normalizeClass as E, openBlock as D, ref as O, renderList as k, renderSlot as A, resolveDynamicComponent as j, toDisplayString as M, unref as N, useAttrs as P, useId as F, watch as I, withCtx as L } from "vue";
+import { Maximize2 as ne, Minimize2 as R, Search as z, X as re } from "@lucide/vue";
+//#region src/components/_shared/control-size.ts
+var B = {
+	sm: "[--control-pill-h:var(--control-h-sm)] [--control-pill-text:var(--control-text-sm)]",
+	md: "",
+	lg: "[--control-pill-h:var(--control-h-lg)]"
+}, V = (e = "md") => B[e], H = {
+	inline: "",
+	bare: "border-none bg-transparent p-0 rounded-none",
+	floating: "border-none bg-transparent p-0 rounded-none"
+};
+function U(t = {}) {
+	return e(H[t.variant ?? "inline"], t.class, t.className);
+}
+//#endregion
+//#region src/components/search/FuzzySearch.vue?vue&type=script&setup=true&lang.ts
+var W = {
+	class: "sr-only",
+	role: "status",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+}, G = ["data-surface"], K = [
+	"placeholder",
+	"aria-label",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"value"
+], q = ["aria-label"], J = [
+	"id",
+	"aria-selected",
 	"data-highlighted",
 	"onClick",
 	"onMouseenter"
-], W = { class: "fuzzy-search-label flex-1 min-w-0 truncate text-foreground/85" }, G = { class: "flex items-center gap-2 border-b border-border/50 [--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block)" }, K = ["placeholder", "value"], q = [
+], Y = { class: "fuzzy-search-label flex-1 min-w-0 truncate text-foreground/85" }, ie = {
+	key: 0,
+	class: "fuzzy-search-mark"
+}, ae = { class: "flex items-center gap-2 border-b border-border/50 [--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block)" }, oe = [
+	"placeholder",
+	"aria-label",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"value"
+], se = ["aria-label"], ce = [
+	"id",
+	"aria-selected",
 	"data-highlighted",
 	"onClick",
 	"onMouseenter"
-], J = { class: "fuzzy-search-label flex-1 min-w-0 truncate text-foreground/85" }, Y = {
+], le = { class: "fuzzy-search-label flex-1 min-w-0 truncate text-foreground/85" }, X = {
+	key: 0,
+	class: "fuzzy-search-mark"
+}, ue = {
 	key: 1,
 	class: "px-4 py-8 text-center text-muted-foreground/60"
-}, X = /* @__PURE__ */ C({
+}, Z = /*#__PURE__*/ c(/* @__PURE__ */ C({
 	__name: "FuzzySearch",
 	props: {
 		state: {},
@@ -36,216 +70,243 @@ var B = z("", {
 		size: { default: "md" },
 		surface: { default: "glass" },
 		placeholder: { default: "Search…" },
+		ariaLabel: { default: "Search" },
 		typeLabel: {}
 	},
-	setup(u, { expose: f }) {
-		let p = u, m = D(null), C = D(null), k = g({
-			get: () => p.state.isOpen.value && !p.state.isExpanded.value && p.state.results.value.length > 0,
+	setup(e, { expose: c }) {
+		let u = e, d = F(), f = `${d}-inline-results`, p = `${d}-modal-results`, m = (e, t) => `${e}-${t}`, C = O(null), w = O(null), A = O(null), j = O(null), P = O(""), B = g({
+			get: () => u.state.isOpen.value && !u.state.isExpanded.value && u.state.results.value.length > 0,
 			set: (e) => {
-				e || p.state.close();
+				e || u.state.close();
 			}
 		});
-		N(() => p.state.selectedIndex.value, () => {
-			w(() => document.querySelector(".fuzzy-search-result.is-selected")?.scrollIntoView({ block: "nearest" }));
-		}), N(() => p.state.isOpen.value, (e) => {
-			e && w(() => m.value?.focus());
-		}), N(() => p.state.isExpanded.value, (e) => {
-			e && w(() => C.value?.focus());
-		}), N([
-			() => p.state.query.value,
-			() => p.state.results.value,
-			() => p.state.isExpanded.value,
-			k
-		], () => {
-			te(p.state.isExpanded.value ? Q.value : k.value ? Z.value : null);
-		}, { flush: "post" });
-		function A() {
-			m.value?.focus();
+		I(() => u.state.selectedIndex.value, () => {
+			T(() => (u.state.isExpanded.value ? j.value : A.value)?.querySelector(".fuzzy-search-result.is-selected")?.scrollIntoView({ block: "nearest" }));
+		}), I(() => u.state.isOpen.value, (e) => {
+			e && T(() => C.value?.focus());
+		}), I(() => u.state.isExpanded.value, (e) => {
+			e && T(() => w.value?.focus());
+		}), I([() => u.state.query.value.trim(), () => u.state.results.value], ([e, t]) => {
+			if (!e) P.value = "";
+			else {
+				let n = t.length === 0 ? "No results" : `${t.length} ${t.length === 1 ? "result" : "results"}`;
+				P.value = `${n} for “${e}”`;
+			}
+		}, { immediate: !0 });
+		function H() {
+			C.value?.focus();
 		}
-		f({ focus: A });
-		function z(e) {
+		c({ focus: H });
+		function Z(e) {
 			return e.item.label || e.item.text.slice(0, 120);
 		}
-		function X(e) {
-			return p.typeLabel ? p.typeLabel(e.item) : e.item.type ?? "";
-		}
-		let Z = D(null), Q = D(null), $ = l("glass-search-mark");
-		function ee(e, t) {
-			let n = t.toLowerCase().trim().split(/\s+/).filter(Boolean);
-			if (n.length === 0) return [];
-			let r = e.toLowerCase(), i = /* @__PURE__ */ new Set();
-			for (let e of n) {
-				let t = d(e, r);
-				if (t) for (let e of t.matches) i.add(e);
-			}
-			let a = [];
-			for (let e of [...i].sort((e, t) => e - t)) {
-				let t = a[a.length - 1];
-				t && t.end === e ? t.end = e + 1 : a.push({
-					start: e,
-					end: e + 1
-				});
-			}
-			return a;
+		function Q(e) {
+			return u.typeLabel ? u.typeLabel(e.item) : e.item.type ?? "";
 		}
-		function te(e) {
-			if (!e) {
-				$.clear();
-				return;
+		function $(e) {
+			let t = Z(e), n = new Set(e.matchIndices), r = [], i = 0, a = n.has(0);
+			for (let e = 1; e <= t.length; e++) {
+				let o = e < t.length && n.has(e);
+				(e === t.length || o !== a) && (r.push({
+					text: t.slice(i, e),
+					matched: a
+				}), i = e, a = o);
 			}
-			w(() => $.setFromMatches(e, p.state.query.value, ee));
+			return r;
 		}
-		return (l, d) => (E(), y("div", { class: T(["fuzzy-search relative", `fuzzy-search--${u.variant}`]) }, [S(M(s), {
-			open: k.value,
-			"onUpdate:open": d[6] ||= (e) => k.value = e
-		}, {
-			default: P(() => [S(M(o), { "as-child": "" }, {
-				default: P(() => [b("div", {
-					class: T(["input-bar", M(e)(M(a)(u.size), M(B)({ variant: u.variant }))]),
-					"data-surface": u.surface
-				}, [
-					S(M(L), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
-					b("input", {
-						ref_key: "inputRef",
-						ref: m,
-						type: "text",
-						class: "input-bar-field",
-						placeholder: u.placeholder,
-						value: u.state.query.value,
-						onInput: d[0] ||= (e) => u.state.query.value = e.target.value,
-						onKeydown: d[1] ||= (...e) => u.state.onKeydown && u.state.onKeydown(...e),
-						onFocus: d[2] ||= (e) => u.state.isOpen.value = !0
-					}, null, 40, H),
-					u.state.query.value && u.state.results.value.length > 0 ? (E(), _(M(n), {
-						key: 0,
-						type: "button",
-						variant: "ghost",
-						iconOnly: "",
-						class: "size-(--search-button-size)",
-						title: u.state.isExpanded.value ? "Collapse" : "Expand",
-						onClick: d[3] ||= (e) => u.state.toggleExpanded()
-					}, {
-						default: P(() => [u.state.isExpanded.value ? (E(), _(M(I), {
-							key: 1,
-							class: "size-(--search-icon-size)"
-						})) : (E(), _(M(F), {
-							key: 0,
-							class: "size-(--search-icon-size)"
-						}))]),
-						_: 1
-					}, 8, ["title"])) : v("", !0),
-					u.state.query.value ? (E(), _(M(n), {
-						key: 1,
-						type: "button",
-						variant: "ghost",
-						iconOnly: "",
-						class: "size-(--search-button-size)",
-						title: "Clear search",
-						onClick: d[4] ||= (e) => u.state.close()
-					}, {
-						default: P(() => [S(M(R), { class: "size-(--search-icon-size)" })]),
-						_: 1
-					})) : v("", !0)
-				], 10, V)]),
-				_: 1
-			}), S(M(c), {
-				align: "start",
-				"side-offset": 4,
-				portal: !1,
-				class: "w-(--reka-popover-trigger-width) max-h-[50vh] overflow-y-auto overscroll-contain p-1",
-				onOpenAutoFocus: d[5] ||= (e) => e.preventDefault()
+		return (c, u) => (D(), y("div", { class: E(["fuzzy-search relative", `fuzzy-search--${e.variant}`]) }, [
+			b("span", W, M(P.value), 1),
+			S(N(l), {
+				open: B.value,
+				"onUpdate:open": u[6] ||= (e) => B.value = e
 			}, {
-				default: P(() => [b("div", {
-					ref_key: "inlineListRef",
-					ref: Z
-				}, [(E(!0), y(h, null, O(u.state.results.value, (e, n) => (E(), y("button", {
-					key: `${e.item.id}-${e.item.type}-${n}`,
-					type: "button",
-					class: T(["fuzzy-search-result glass-menu-row interactive-item flex w-full items-baseline gap-1.5 px-2 py-1.5 text-left text-(length:--search-result-text)", { "is-selected": n === u.state.selectedIndex.value }]),
-					"data-highlighted": n === u.state.selectedIndex.value ? "" : void 0,
-					onClick: (t) => u.state.selectResult(e),
-					onMouseenter: (e) => u.state.selectedIndex.value = n
-				}, [X(e) ? (E(), _(M(t), {
-					key: 0,
-					variant: "secondary",
-					class: "shrink-0 text-(length:--search-result-text-secondary) font-bold uppercase tracking-wider"
-				}, {
-					default: P(() => [x(j(X(e)), 1)]),
-					_: 2
-				}, 1024)) : v("", !0), b("span", W, j(z(e)), 1)], 42, U))), 128))], 512)]),
-				_: 1
-			})]),
-			_: 1
-		}, 8, ["open"]), S(M(r), {
-			open: u.state.isExpanded.value,
-			"onUpdate:open": d[11] ||= (e) => u.state.isExpanded.value = e
-		}, {
-			default: P(() => [S(M(i), {
-				surface: u.surface,
-				class: "max-w-(--search-modal-width) max-h-[70vh] [--overlay-pad-inline:0] [--overlay-pad-block:0] [--search-modal-width:36rem] overflow-hidden flex flex-col gap-0",
-				onOpenAutoFocus: d[10] ||= (e) => e.preventDefault()
-			}, {
-				default: P(() => [
-					b("div", G, [
-						S(M(L), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
+				default: L(() => [S(N(ee), { "as-child": "" }, {
+					default: L(() => [b("div", {
+						class: E(["input-bar", N(t)(N(V)(e.size), N(U)({ variant: e.variant }))]),
+						"data-surface": e.surface
+					}, [
+						S(N(z), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
 						b("input", {
-							ref_key: "modalInputRef",
+							ref_key: "inputRef",
 							ref: C,
-							type: "text",
-							class: "input-bar-field flex-1 text-(length:--search-result-text)",
-							placeholder: u.placeholder,
-							value: u.state.query.value,
-							onInput: d[7] ||= (e) => u.state.query.value = e.target.value,
-							onKeydown: d[8] ||= (...e) => u.state.onKeydown && u.state.onKeydown(...e)
+							type: "search",
+							role: "combobox",
+							class: "input-bar-field",
+							placeholder: e.placeholder,
+							"aria-label": e.ariaLabel,
+							"aria-autocomplete": "list",
+							"aria-expanded": B.value,
+							"aria-controls": B.value ? f : void 0,
+							"aria-activedescendant": B.value ? m(f, e.state.selectedIndex.value) : void 0,
+							value: e.state.query.value,
+							onInput: u[0] ||= (t) => e.state.query.value = t.target.value,
+							onKeydown: u[1] ||= (...t) => e.state.onKeydown && e.state.onKeydown(...t),
+							onFocus: u[2] ||= (t) => e.state.isOpen.value = !0
 						}, null, 40, K),
-						S(M(n), {
+						e.state.query.value && e.state.results.value.length > 0 ? (D(), _(N(r), {
+							key: 0,
 							type: "button",
-							variant: "ghost",
+							emphasis: "quiet",
 							iconOnly: "",
 							class: "size-(--search-button-size)",
-							title: "Collapse",
-							onClick: d[9] ||= (e) => u.state.toggleExpanded()
+							"aria-label": e.state.isExpanded.value ? "Collapse search" : "Expand search",
+							title: e.state.isExpanded.value ? "Collapse" : "Expand",
+							onClick: u[3] ||= (t) => e.state.toggleExpanded()
 						}, {
-							default: P(() => [S(M(I), { class: "size-(--search-icon-size)" })]),
+							default: L(() => [e.state.isExpanded.value ? (D(), _(N(R), {
+								key: 1,
+								class: "size-(--search-icon-size)"
+							})) : (D(), _(N(ne), {
+								key: 0,
+								class: "size-(--search-icon-size)"
+							}))]),
 							_: 1
-						})
-					]),
-					u.state.results.value.length > 0 ? (E(), y("div", {
-						key: 0,
-						ref_key: "modalListRef",
-						ref: Q,
-						class: "flex-1 min-h-0 overflow-y-auto overscroll-contain p-1.5"
-					}, [(E(!0), y(h, null, O(u.state.results.value, (e, n) => (E(), y("button", {
-						key: `modal-${e.item.id}-${e.item.type}-${n}`,
+						}, 8, ["aria-label", "title"])) : v("", !0),
+						e.state.query.value ? (D(), _(N(r), {
+							key: 1,
+							type: "button",
+							emphasis: "quiet",
+							iconOnly: "",
+							class: "size-(--search-button-size)",
+							"aria-label": "Clear search",
+							title: "Clear search",
+							onClick: u[4] ||= (t) => e.state.close()
+						}, {
+							default: L(() => [S(N(re), { class: "size-(--search-icon-size)" })]),
+							_: 1
+						})) : v("", !0)
+					], 10, G)]),
+					_: 1
+				}), S(N(te), {
+					align: "start",
+					"side-offset": 4,
+					portal: !1,
+					class: "w-(--reka-popover-trigger-width) max-h-[50vh] overflow-y-auto overscroll-contain p-1",
+					onOpenAutoFocus: u[5] ||= (e) => e.preventDefault()
+				}, {
+					default: L(() => [b("div", {
+						id: f,
+						ref_key: "inlineListRef",
+						ref: A,
+						role: "listbox",
+						"aria-label": `${e.ariaLabel} results`
+					}, [(D(!0), y(h, null, k(e.state.results.value, (t, r) => (D(), y("button", {
+						id: m(f, r),
+						key: `${t.item.id}-${t.item.type}-${r}`,
 						type: "button",
-						class: T(["fuzzy-search-result glass-menu-row interactive-item flex w-full items-baseline gap-1.5 px-2.5 py-2 text-left text-(length:--search-result-text)", { "is-selected": n === u.state.selectedIndex.value }]),
-						"data-highlighted": n === u.state.selectedIndex.value ? "" : void 0,
-						onClick: (t) => u.state.selectResult(e),
-						onMouseenter: (e) => u.state.selectedIndex.value = n
-					}, [X(e) ? (E(), _(M(t), {
+						role: "option",
+						tabindex: "-1",
+						"aria-selected": r === e.state.selectedIndex.value,
+						class: E(["fuzzy-search-result glass-menu-row interactive-item flex w-full items-baseline gap-1.5 px-2 py-1.5 text-left text-(length:--search-result-text)", { "is-selected": r === e.state.selectedIndex.value }]),
+						"data-highlighted": r === e.state.selectedIndex.value ? "" : void 0,
+						onClick: (n) => e.state.selectResult(t),
+						onMouseenter: (t) => e.state.selectedIndex.value = r
+					}, [Q(t) ? (D(), _(N(n), {
 						key: 0,
 						variant: "secondary",
 						class: "shrink-0 text-(length:--search-result-text-secondary) font-bold uppercase tracking-wider"
 					}, {
-						default: P(() => [x(j(X(e)), 1)]),
+						default: L(() => [x(M(Q(t)), 1)]),
 						_: 2
-					}, 1024)) : v("", !0), b("span", J, j(z(e)), 1)], 42, q))), 128))], 512)) : (E(), y("div", Y, "No results")),
-					d[12] ||= b("div", { class: "flex items-center gap-4 border-t border-border/50 [--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block) text-mono-caption text-muted-foreground/60" }, [
-						b("span", { class: "flex items-center gap-1" }, [
-							b("kbd", { class: "kbd" }, "↑"),
-							b("kbd", { class: "kbd" }, "↓"),
-							x(" navigate")
+					}, 1024)) : v("", !0), b("span", Y, [(D(!0), y(h, null, k($(t), (e, t) => (D(), y(h, { key: t }, [e.matched ? (D(), y("mark", ie, M(e.text), 1)) : (D(), y(h, { key: 1 }, [x(M(e.text), 1)], 64))], 64))), 128))])], 42, J))), 128))], 8, q)]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"]),
+			S(N(i), {
+				open: e.state.isExpanded.value,
+				"onUpdate:open": u[11] ||= (t) => e.state.isExpanded.value = t
+			}, {
+				default: L(() => [S(N(o), {
+					surface: e.surface,
+					class: "max-w-(--search-modal-width) max-h-[70vh] [--overlay-pad-inline:0] [--overlay-pad-block:0] [--search-modal-width:36rem] overflow-hidden flex flex-col gap-0",
+					onOpenAutoFocus: u[10] ||= (e) => e.preventDefault()
+				}, {
+					default: L(() => [
+						S(N(a), { class: "sr-only" }, {
+							default: L(() => [x(M(e.ariaLabel), 1)]),
+							_: 1
+						}),
+						S(N(s), { class: "sr-only" }, {
+							default: L(() => [...u[12] ||= [x(" Search and choose from the available results. ", -1)]]),
+							_: 1
+						}),
+						b("div", ae, [
+							S(N(z), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
+							b("input", {
+								ref_key: "modalInputRef",
+								ref: w,
+								type: "search",
+								role: "combobox",
+								class: "input-bar-field flex-1 text-(length:--search-result-text)",
+								placeholder: e.placeholder,
+								"aria-label": e.ariaLabel,
+								"aria-autocomplete": "list",
+								"aria-expanded": e.state.isExpanded.value,
+								"aria-controls": e.state.results.value.length ? p : void 0,
+								"aria-activedescendant": e.state.results.value.length ? m(p, e.state.selectedIndex.value) : void 0,
+								value: e.state.query.value,
+								onInput: u[7] ||= (t) => e.state.query.value = t.target.value,
+								onKeydown: u[8] ||= (...t) => e.state.onKeydown && e.state.onKeydown(...t)
+							}, null, 40, oe),
+							S(N(r), {
+								type: "button",
+								emphasis: "quiet",
+								iconOnly: "",
+								class: "size-(--search-button-size)",
+								"aria-label": "Collapse search",
+								title: "Collapse",
+								onClick: u[9] ||= (t) => e.state.toggleExpanded()
+							}, {
+								default: L(() => [S(N(R), { class: "size-(--search-icon-size)" })]),
+								_: 1
+							})
 						]),
-						b("span", { class: "flex items-center gap-1" }, [b("kbd", { class: "kbd" }, "↵"), x(" select")]),
-						b("span", { class: "flex items-center gap-1" }, [b("kbd", { class: "kbd" }, "esc"), x(" close")])
-					], -1)
-				]),
+						e.state.results.value.length > 0 ? (D(), y("div", {
+							key: 0,
+							id: p,
+							ref_key: "modalListRef",
+							ref: j,
+							role: "listbox",
+							"aria-label": `${e.ariaLabel} results`,
+							class: "flex-1 min-h-0 overflow-y-auto overscroll-contain p-1.5"
+						}, [(D(!0), y(h, null, k(e.state.results.value, (t, r) => (D(), y("button", {
+							id: m(p, r),
+							key: `modal-${t.item.id}-${t.item.type}-${r}`,
+							type: "button",
+							role: "option",
+							tabindex: "-1",
+							"aria-selected": r === e.state.selectedIndex.value,
+							class: E(["fuzzy-search-result glass-menu-row interactive-item flex w-full items-baseline gap-1.5 px-2.5 py-2 text-left text-(length:--search-result-text)", { "is-selected": r === e.state.selectedIndex.value }]),
+							"data-highlighted": r === e.state.selectedIndex.value ? "" : void 0,
+							onClick: (n) => e.state.selectResult(t),
+							onMouseenter: (t) => e.state.selectedIndex.value = r
+						}, [Q(t) ? (D(), _(N(n), {
+							key: 0,
+							variant: "secondary",
+							class: "shrink-0 text-(length:--search-result-text-secondary) font-bold uppercase tracking-wider"
+						}, {
+							default: L(() => [x(M(Q(t)), 1)]),
+							_: 2
+						}, 1024)) : v("", !0), b("span", le, [(D(!0), y(h, null, k($(t), (e, t) => (D(), y(h, { key: t }, [e.matched ? (D(), y("mark", X, M(e.text), 1)) : (D(), y(h, { key: 1 }, [x(M(e.text), 1)], 64))], 64))), 128))])], 42, ce))), 128))], 8, se)) : (D(), y("div", ue, "No results")),
+						u[13] ||= b("div", { class: "flex items-center gap-4 border-t border-border/50 [--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block) text-mono-caption text-muted-foreground/60" }, [
+							b("span", { class: "flex items-center gap-1" }, [
+								b("kbd", { class: "kbd" }, "↑"),
+								b("kbd", { class: "kbd" }, "↓"),
+								x(" navigate")
+							]),
+							b("span", { class: "flex items-center gap-1" }, [b("kbd", { class: "kbd" }, "↵"), x(" select")]),
+							b("span", { class: "flex items-center gap-1" }, [b("kbd", { class: "kbd" }, "esc"), x(" close")])
+						], -1)
+					]),
+					_: 1
+				}, 8, ["surface"])]),
 				_: 1
-			}, 8, ["surface"])]),
-			_: 1
-		}, 8, ["open"])], 2));
+			}, 8, ["open"])
+		], 2));
 	}
-}), Z = ["value", "placeholder"], Q = /* @__PURE__ */ C({
+}), [["__scopeId", "data-v-7a2d273a"]]), Q = ["value", "placeholder"], $ = /* @__PURE__ */ C({
+	inheritAttrs: !1,
 	__name: "SearchBar",
 	props: {
 		modelValue: { default: "" },
@@ -257,27 +318,35 @@ var B = z("", {
 		variant: { default: "inline" }
 	},
 	emits: ["update:modelValue"],
-	setup(t, { expose: n, emit: r }) {
-		let i = r, o = D(null);
-		return n({ inputRef: o }), (n, r) => (E(), _(A(t.tag), {
-			class: T(M(e)("input-bar", M(a)(t.size), M(B)({ variant: t.variant }), n.$attrs.class)),
-			"data-surface": t.surface
+	setup(e, { expose: n, emit: r }) {
+		let i = r, a = P(), o = g(() => {
+			let { class: e, ...t } = a;
+			return t;
+		}), s = O(null);
+		return n({ inputRef: s }), (n, r) => (D(), _(j(e.tag), {
+			class: E(N(t)("input-bar", N(V)(e.size), N(U)({ variant: e.variant }), n.$attrs.class)),
+			"data-surface": e.surface
 		}, {
-			default: P(() => [
-				(E(), _(A(t.icon ?? M(L)), { class: "size-(--search-icon-size) text-muted-foreground shrink-0" })),
-				b("input", {
+			default: L(() => [
+				(D(), _(j(e.icon ?? N(z)), {
+					class: "size-(--search-icon-size) text-muted-foreground shrink-0",
+					"aria-hidden": "true"
+				})),
+				b("input", w({
 					ref_key: "inputRef",
-					ref: o,
-					value: t.modelValue,
-					placeholder: t.placeholder,
+					ref: s,
+					type: "search"
+				}, o.value, {
+					value: e.modelValue,
+					placeholder: e.placeholder,
 					class: "input-bar-field",
 					onInput: r[0] ||= (e) => i("update:modelValue", e.target.value)
-				}, null, 40, Z),
-				k(n.$slots, "default")
+				}), null, 16, Q),
+				A(n.$slots, "default")
 			]),
 			_: 3
 		}, 8, ["class", "data-surface"]));
 	}
 });
 //#endregion
-export { X as FuzzySearch, Q as SearchBar, f as buildIndex, p as clearSearchCache, d as fuzzyMatch, B as searchFieldVariants, u as searchIndex, m as useFuzzySearch };
+export { Z as FuzzySearch, $ as SearchBar, f as buildIndex, p as clearSearchCache, d as fuzzyMatch, U as searchFieldVariants, u as searchIndex, m as useFuzzySearch };