@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/search.js

@@ -1,15 +1,15 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { c as t, l as n, n as r, t as i } from "./vendor-B2qOlYY3.js";
-import { n as a } from "./badge-Bt14yURi.js";
-import { n as o } from "./button-D1W9PrzI.js";
-import { n as s, t as c } from "./DialogContent-D8U9ZfWS.js";
-import { n as l, r as u, t as d } from "./PopoverContent-BuKyHZSz.js";
-import { t as f } from "./useControlSize-DAZ062x7.js";
-import { t as p } from "./useTextHighlight-Bma3UlKA.js";
-import { a as m, i as h, n as g, r as _, t as v } from "./useFuzzySearch-0fTYOhS4.js";
-import { Fragment as y, computed as b, createBlock as x, createCommentVNode as S, createElementBlock as C, createElementVNode as w, createTextVNode as T, createVNode as E, defineComponent as D, nextTick as O, normalizeClass as k, openBlock as A, ref as j, renderList as M, renderSlot as N, resolveDynamicComponent as P, toDisplayString as F, unref as I, watch as L, withCtx as R } from "vue";
+import { t as e } from "./class-names-5jotTFzp.js";
+import { n as t } from "./badge-C0C-rTBu.js";
+import { n } from "./button-32mg6xA8.js";
+import { t as r } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { c as i, n as a } from "./dialog-BzQxKrUr.js";
+import { t as o } from "./useControlSize-CFfOk8I-.js";
+import { n as s, r as c, t as ee } from "./popover-WMgyRSyN.js";
+import { a as l, i as u, n as d, r as f, t as p } from "./useFuzzySearch-BOgep7RE.js";
+import { Fragment as m, computed as h, createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, defineComponent as S, mergeProps 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, useAttrs as N, useId as P, watch as F, withCtx as I } from "vue";
+import { Maximize2 as te, Minimize2 as L, Search as R, X as ne } from "@lucide/vue";
 import { cva as z } from "class-variance-authority";
-//#region src/components/custom/search/searchVariants.ts
+//#region src/components/search/searchVariants.ts
 var B = z("", {
 	variants: { variant: {
 		inline: "",
@@ -17,227 +17,259 @@ var B = z("", {
 		floating: "border-none bg-transparent p-0 rounded-none"
 	} },
 	defaultVariants: { variant: "inline" }
-}), V = ["data-surface"], H = ["placeholder", "value"], U = [
+}), re = ["data-surface"], V = [
+	"placeholder",
+	"aria-label",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"value"
+], H = ["aria-label"], U = [
+	"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 = [
+], W = { class: "fuzzy-search-label flex-1 min-w-0 truncate text-foreground/85" }, G = {
+	key: 0,
+	class: "fuzzy-search-mark"
+}, K = { 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)" }, q = [
+	"placeholder",
+	"aria-label",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"value"
+], J = ["aria-label"], Y = [
+	"id",
+	"aria-selected",
 	"data-highlighted",
 	"onClick",
 	"onMouseenter"
-], J = { class: "fuzzy-search-label flex-1 min-w-0 truncate text-foreground/85" }, Y = {
+], ie = { class: "fuzzy-search-label flex-1 min-w-0 truncate text-foreground/85" }, ae = {
+	key: 0,
+	class: "fuzzy-search-mark"
+}, oe = {
 	key: 1,
 	class: "px-4 py-8 text-center text-muted-foreground/60"
-}, X = /* @__PURE__ */ D({
+}, X = /* @__PURE__ */ r(/* @__PURE__ */ S({
 	__name: "FuzzySearch",
 	props: {
 		state: {},
 		variant: { default: "inline" },
-		size: { default: "default" },
+		size: { default: "md" },
 		surface: { default: "glass" },
 		placeholder: { default: "Search…" },
+		ariaLabel: { default: "Search" },
 		typeLabel: {}
 	},
-	setup(m, { expose: g }) {
-		let _ = m, v = j(null), D = j(null), N = b({
-			get: () => _.state.isOpen.value && !_.state.isExpanded.value && _.state.results.value.length > 0,
+	setup(r, { expose: l }) {
+		let u = r, d = P(), f = `${d}-inline-results`, p = `${d}-modal-results`, S = (e, t) => `${e}-${t}`, C = D(null), k = D(null), A = D(null), N = D(null), z = h({
+			get: () => u.state.isOpen.value && !u.state.isExpanded.value && u.state.results.value.length > 0,
 			set: (e) => {
-				e || _.state.close();
+				e || u.state.close();
 			}
 		});
-		L(() => _.state.selectedIndex.value, () => {
-			O(() => document.querySelector(".fuzzy-search-result.is-selected")?.scrollIntoView({ block: "nearest" }));
-		}), L(() => _.state.isOpen.value, (e) => {
-			e && O(() => v.value?.focus());
-		}), L(() => _.state.isExpanded.value, (e) => {
-			e && O(() => D.value?.focus());
-		}), L([
-			() => _.state.query.value,
-			() => _.state.results.value,
-			() => _.state.isExpanded.value,
-			N
-		], () => {
-			te(_.state.isExpanded.value ? Q.value : N.value ? Z.value : null);
-		}, { flush: "post" });
-		function P() {
-			v.value?.focus();
+		F(() => u.state.selectedIndex.value, () => {
+			w(() => (u.state.isExpanded.value ? N.value : A.value)?.querySelector(".fuzzy-search-result.is-selected")?.scrollIntoView({ block: "nearest" }));
+		}), F(() => u.state.isOpen.value, (e) => {
+			e && w(() => C.value?.focus());
+		}), F(() => u.state.isExpanded.value, (e) => {
+			e && w(() => k.value?.focus());
+		});
+		function X() {
+			C.value?.focus();
 		}
-		g({ focus: P });
-		function z(e) {
+		l({ focus: X });
+		function Z(e) {
 			return e.item.label || e.item.text.slice(0, 120);
 		}
-		function X(e) {
-			return _.typeLabel ? _.typeLabel(e.item) : e.item.type ?? "";
-		}
-		let Z = j(null), Q = j(null), $ = p("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 = h(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);
 			}
-			O(() => $.setFromMatches(e, _.state.query.value, ee));
+			return r;
 		}
-		return (p, h) => (A(), C("div", { class: k(["fuzzy-search relative", `fuzzy-search--${m.variant}`]) }, [E(I(u), {
-			open: N.value,
-			"onUpdate:open": h[6] ||= (e) => N.value = e
+		return (l, u) => (E(), v("div", { class: T(["fuzzy-search relative", `fuzzy-search--${r.variant}`]) }, [x(M(c), {
+			open: z.value,
+			"onUpdate:open": u[6] ||= (e) => z.value = e
 		}, {
-			default: R(() => [E(I(l), { "as-child": "" }, {
-				default: R(() => [w("div", {
-					class: k(["input-bar", I(e)(I(f)(m.size), I(B)({ variant: m.variant }))]),
-					"data-surface": m.surface
+			default: I(() => [x(M(s), { "as-child": "" }, {
+				default: I(() => [y("div", {
+					class: T(["input-bar", M(e)(M(o)(r.size), M(B)({ variant: r.variant }))]),
+					"data-surface": r.surface
 				}, [
-					E(I(r), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
-					w("input", {
+					x(M(R), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
+					y("input", {
 						ref_key: "inputRef",
-						ref: v,
-						type: "text",
+						ref: C,
+						type: "search",
+						role: "combobox",
 						class: "input-bar-field",
-						placeholder: m.placeholder,
-						value: m.state.query.value,
-						onInput: h[0] ||= (e) => m.state.query.value = e.target.value,
-						onKeydown: h[1] ||= (...e) => m.state.onKeydown && m.state.onKeydown(...e),
-						onFocus: h[2] ||= (e) => m.state.isOpen.value = !0
-					}, null, 40, H),
-					m.state.query.value && m.state.results.value.length > 0 ? (A(), x(I(o), {
+						placeholder: r.placeholder,
+						"aria-label": r.ariaLabel,
+						"aria-autocomplete": "list",
+						"aria-expanded": z.value,
+						"aria-controls": z.value ? f : void 0,
+						"aria-activedescendant": z.value ? S(f, r.state.selectedIndex.value) : void 0,
+						value: r.state.query.value,
+						onInput: u[0] ||= (e) => r.state.query.value = e.target.value,
+						onKeydown: u[1] ||= (...e) => r.state.onKeydown && r.state.onKeydown(...e),
+						onFocus: u[2] ||= (e) => r.state.isOpen.value = !0
+					}, null, 40, V),
+					r.state.query.value && r.state.results.value.length > 0 ? (E(), g(M(n), {
 						key: 0,
 						type: "button",
 						variant: "ghost",
-						size: "icon",
+						iconOnly: "",
 						class: "size-(--search-button-size)",
-						title: m.state.isExpanded.value ? "Collapse" : "Expand",
-						onClick: h[3] ||= (e) => m.state.toggleExpanded()
+						"aria-label": r.state.isExpanded.value ? "Collapse search" : "Expand search",
+						title: r.state.isExpanded.value ? "Collapse" : "Expand",
+						onClick: u[3] ||= (e) => r.state.toggleExpanded()
 					}, {
-						default: R(() => [m.state.isExpanded.value ? (A(), x(I(t), {
+						default: I(() => [r.state.isExpanded.value ? (E(), g(M(L), {
 							key: 1,
 							class: "size-(--search-icon-size)"
-						})) : (A(), x(I(n), {
+						})) : (E(), g(M(te), {
 							key: 0,
 							class: "size-(--search-icon-size)"
 						}))]),
 						_: 1
-					}, 8, ["title"])) : S("", !0),
-					m.state.query.value ? (A(), x(I(o), {
+					}, 8, ["aria-label", "title"])) : _("", !0),
+					r.state.query.value ? (E(), g(M(n), {
 						key: 1,
 						type: "button",
 						variant: "ghost",
-						size: "icon",
+						iconOnly: "",
 						class: "size-(--search-button-size)",
+						"aria-label": "Clear search",
 						title: "Clear search",
-						onClick: h[4] ||= (e) => m.state.close()
+						onClick: u[4] ||= (e) => r.state.close()
 					}, {
-						default: R(() => [E(I(i), { class: "size-(--search-icon-size)" })]),
+						default: I(() => [x(M(ne), { class: "size-(--search-icon-size)" })]),
 						_: 1
-					})) : S("", !0)
-				], 10, V)]),
+					})) : _("", !0)
+				], 10, re)]),
 				_: 1
-			}), E(I(d), {
+			}), x(M(ee), {
 				align: "start",
 				"side-offset": 4,
 				portal: !1,
 				class: "w-(--reka-popover-trigger-width) max-h-[50vh] overflow-y-auto overscroll-contain p-1",
-				onOpenAutoFocus: h[5] ||= (e) => e.preventDefault()
+				onOpenAutoFocus: u[5] ||= (e) => e.preventDefault()
 			}, {
-				default: R(() => [w("div", {
+				default: I(() => [y("div", {
+					id: f,
 					ref_key: "inlineListRef",
-					ref: Z
-				}, [(A(!0), C(y, null, M(m.state.results.value, (e, t) => (A(), C("button", {
-					key: `${e.item.id}-${e.item.type}-${t}`,
+					ref: A,
+					role: "listbox",
+					"aria-label": `${r.ariaLabel} results`
+				}, [(E(!0), v(m, null, O(r.state.results.value, (e, n) => (E(), v("button", {
+					id: S(f, n),
+					key: `${e.item.id}-${e.item.type}-${n}`,
 					type: "button",
-					class: k(["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": t === m.state.selectedIndex.value }]),
-					"data-highlighted": t === m.state.selectedIndex.value ? "" : void 0,
-					onClick: (t) => m.state.selectResult(e),
-					onMouseenter: (e) => m.state.selectedIndex.value = t
-				}, [X(e) ? (A(), x(I(a), {
+					role: "option",
+					tabindex: "-1",
+					"aria-selected": n === r.state.selectedIndex.value,
+					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 === r.state.selectedIndex.value }]),
+					"data-highlighted": n === r.state.selectedIndex.value ? "" : void 0,
+					onClick: (t) => r.state.selectResult(e),
+					onMouseenter: (e) => r.state.selectedIndex.value = n
+				}, [Q(e) ? (E(), g(M(t), {
 					key: 0,
 					variant: "secondary",
 					class: "shrink-0 text-(length:--search-result-text-secondary) font-bold uppercase tracking-wider"
 				}, {
-					default: R(() => [T(F(X(e)), 1)]),
+					default: I(() => [b(j(Q(e)), 1)]),
 					_: 2
-				}, 1024)) : S("", !0), w("span", W, F(z(e)), 1)], 42, U))), 128))], 512)]),
+				}, 1024)) : _("", !0), y("span", W, [(E(!0), v(m, null, O($(e), (e, t) => (E(), v(m, { key: t }, [e.matched ? (E(), v("mark", G, j(e.text), 1)) : (E(), v(m, { key: 1 }, [b(j(e.text), 1)], 64))], 64))), 128))])], 42, U))), 128))], 8, H)]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["open"]), E(I(s), {
-			open: m.state.isExpanded.value,
-			"onUpdate:open": h[11] ||= (e) => m.state.isExpanded.value = e
+		}, 8, ["open"]), x(M(i), {
+			open: r.state.isExpanded.value,
+			"onUpdate:open": u[11] ||= (e) => r.state.isExpanded.value = e
 		}, {
-			default: R(() => [E(I(c), {
-				surface: m.surface,
+			default: I(() => [x(M(a), {
+				surface: r.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: h[10] ||= (e) => e.preventDefault()
+				onOpenAutoFocus: u[10] ||= (e) => e.preventDefault()
 			}, {
-				default: R(() => [
-					w("div", G, [
-						E(I(r), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
-						w("input", {
+				default: I(() => [
+					y("div", K, [
+						x(M(R), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
+						y("input", {
 							ref_key: "modalInputRef",
-							ref: D,
-							type: "text",
+							ref: k,
+							type: "search",
+							role: "combobox",
 							class: "input-bar-field flex-1 text-(length:--search-result-text)",
-							placeholder: m.placeholder,
-							value: m.state.query.value,
-							onInput: h[7] ||= (e) => m.state.query.value = e.target.value,
-							onKeydown: h[8] ||= (...e) => m.state.onKeydown && m.state.onKeydown(...e)
-						}, null, 40, K),
-						E(I(o), {
+							placeholder: r.placeholder,
+							"aria-label": r.ariaLabel,
+							"aria-autocomplete": "list",
+							"aria-expanded": r.state.isExpanded.value,
+							"aria-controls": r.state.results.value.length ? p : void 0,
+							"aria-activedescendant": r.state.results.value.length ? S(p, r.state.selectedIndex.value) : void 0,
+							value: r.state.query.value,
+							onInput: u[7] ||= (e) => r.state.query.value = e.target.value,
+							onKeydown: u[8] ||= (...e) => r.state.onKeydown && r.state.onKeydown(...e)
+						}, null, 40, q),
+						x(M(n), {
 							type: "button",
 							variant: "ghost",
-							size: "icon",
+							iconOnly: "",
 							class: "size-(--search-button-size)",
+							"aria-label": "Collapse search",
 							title: "Collapse",
-							onClick: h[9] ||= (e) => m.state.toggleExpanded()
+							onClick: u[9] ||= (e) => r.state.toggleExpanded()
 						}, {
-							default: R(() => [E(I(t), { class: "size-(--search-icon-size)" })]),
+							default: I(() => [x(M(L), { class: "size-(--search-icon-size)" })]),
 							_: 1
 						})
 					]),
-					m.state.results.value.length > 0 ? (A(), C("div", {
+					r.state.results.value.length > 0 ? (E(), v("div", {
 						key: 0,
+						id: p,
 						ref_key: "modalListRef",
-						ref: Q,
+						ref: N,
+						role: "listbox",
+						"aria-label": `${r.ariaLabel} results`,
 						class: "flex-1 min-h-0 overflow-y-auto overscroll-contain p-1.5"
-					}, [(A(!0), C(y, null, M(m.state.results.value, (e, t) => (A(), C("button", {
-						key: `modal-${e.item.id}-${e.item.type}-${t}`,
+					}, [(E(!0), v(m, null, O(r.state.results.value, (e, n) => (E(), v("button", {
+						id: S(p, n),
+						key: `modal-${e.item.id}-${e.item.type}-${n}`,
 						type: "button",
-						class: k(["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": t === m.state.selectedIndex.value }]),
-						"data-highlighted": t === m.state.selectedIndex.value ? "" : void 0,
-						onClick: (t) => m.state.selectResult(e),
-						onMouseenter: (e) => m.state.selectedIndex.value = t
-					}, [X(e) ? (A(), x(I(a), {
+						role: "option",
+						tabindex: "-1",
+						"aria-selected": n === r.state.selectedIndex.value,
+						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 === r.state.selectedIndex.value }]),
+						"data-highlighted": n === r.state.selectedIndex.value ? "" : void 0,
+						onClick: (t) => r.state.selectResult(e),
+						onMouseenter: (e) => r.state.selectedIndex.value = n
+					}, [Q(e) ? (E(), g(M(t), {
 						key: 0,
 						variant: "secondary",
 						class: "shrink-0 text-(length:--search-result-text-secondary) font-bold uppercase tracking-wider"
 					}, {
-						default: R(() => [T(F(X(e)), 1)]),
+						default: I(() => [b(j(Q(e)), 1)]),
 						_: 2
-					}, 1024)) : S("", !0), w("span", J, F(z(e)), 1)], 42, q))), 128))], 512)) : (A(), C("div", Y, "No results")),
-					h[12] ||= w("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" }, [
-						w("span", { class: "flex items-center gap-1" }, [
-							w("kbd", { class: "kbd" }, "↑"),
-							w("kbd", { class: "kbd" }, "↓"),
-							T(" navigate")
+					}, 1024)) : _("", !0), y("span", ie, [(E(!0), v(m, null, O($(e), (e, t) => (E(), v(m, { key: t }, [e.matched ? (E(), v("mark", ae, j(e.text), 1)) : (E(), v(m, { key: 1 }, [b(j(e.text), 1)], 64))], 64))), 128))])], 42, Y))), 128))], 8, J)) : (E(), v("div", oe, "No results")),
+					u[12] ||= y("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" }, [
+						y("span", { class: "flex items-center gap-1" }, [
+							y("kbd", { class: "kbd" }, "↑"),
+							y("kbd", { class: "kbd" }, "↓"),
+							b(" navigate")
 						]),
-						w("span", { class: "flex items-center gap-1" }, [w("kbd", { class: "kbd" }, "↵"), T(" select")]),
-						w("span", { class: "flex items-center gap-1" }, [w("kbd", { class: "kbd" }, "esc"), T(" close")])
+						y("span", { class: "flex items-center gap-1" }, [y("kbd", { class: "kbd" }, "↵"), b(" select")]),
+						y("span", { class: "flex items-center gap-1" }, [y("kbd", { class: "kbd" }, "esc"), b(" close")])
 					], -1)
 				]),
 				_: 1
@@ -245,39 +277,48 @@ var B = z("", {
 			_: 1
 		}, 8, ["open"])], 2));
 	}
-}), Z = ["value", "placeholder"], Q = /* @__PURE__ */ D({
+}), [["__scopeId", "data-v-d7b2bca7"]]), Z = ["value", "placeholder"], Q = /* @__PURE__ */ S({
+	inheritAttrs: !1,
 	__name: "SearchBar",
 	props: {
 		modelValue: { default: "" },
 		placeholder: { default: "Search…" },
 		icon: {},
 		tag: { default: "div" },
-		size: { default: "default" },
+		size: { default: "md" },
 		surface: { default: "glass" },
 		variant: { default: "inline" }
 	},
 	emits: ["update:modelValue"],
-	setup(t, { expose: n, emit: i }) {
-		let a = i, o = j(null);
-		return n({ inputRef: o }), (n, i) => (A(), x(P(t.tag), {
-			class: k(I(e)("input-bar", I(f)(t.size), I(B)({ variant: t.variant }), n.$attrs.class)),
+	setup(t, { expose: n, emit: r }) {
+		let i = r, a = N(), s = h(() => {
+			let { class: e, ...t } = a;
+			return t;
+		}), c = D(null);
+		return n({ inputRef: c }), (n, r) => (E(), g(A(t.tag), {
+			class: T(M(e)("input-bar", M(o)(t.size), M(B)({ variant: t.variant }), n.$attrs.class)),
 			"data-surface": t.surface
 		}, {
-			default: R(() => [
-				(A(), x(P(t.icon ?? I(r)), { class: "size-(--search-icon-size) text-muted-foreground shrink-0" })),
-				w("input", {
+			default: I(() => [
+				(E(), g(A(t.icon ?? M(R)), {
+					class: "size-(--search-icon-size) text-muted-foreground shrink-0",
+					"aria-hidden": "true"
+				})),
+				y("input", C({
 					ref_key: "inputRef",
-					ref: o,
+					ref: c,
+					type: "search"
+				}, s.value, {
 					value: t.modelValue,
 					placeholder: t.placeholder,
 					class: "input-bar-field",
-					onInput: i[0] ||= (e) => a("update:modelValue", e.target.value)
-				}, null, 40, Z),
-				N(n.$slots, "default")
+					onInput: r[0] ||= (e) => i("update:modelValue", e.target.value)
+				}), null, 16, Z),
+				k(n.$slots, "default")
 			]),
 			_: 3
 		}, 8, ["class", "data-surface"]));
 	}
 });
 //#endregion
-export { X as FuzzySearch, Q as SearchBar, g as buildIndex, _ as clearSearchCache, h as fuzzyMatch, B as searchFieldVariants, m as searchIndex, v as useFuzzySearch };
+export { X as FuzzySearch, Q as SearchBar, d as buildIndex, f as clearSearchCache, u as fuzzyMatch, B as searchFieldVariants, l as searchIndex, p as useFuzzySearch };