@mkbabb/glass-ui 5.0.0 → 6.0.0

package/dist/scroll-progress-rim.js

@@ -22,7 +22,7 @@ var o = [
 			"var(--section-color-3)",
 			"var(--section-color-2)",
 			"var(--section-color-7)"
-		], c = r, l = (e, t, n) => Math.min(n, Math.max(t, e)), u = e(() => c.max > 0 ? c.max : 1), d = e(() => l(c.value, 0, u.value)), f = e(() => d.value / u.value), p = e(() => c.stops?.length ? c.stops : s), m = e(() => {
+		], c = r, l = (e, t, n) => Number.isNaN(e) ? t : Math.min(n, Math.max(t, e)), u = e(() => Number.isFinite(c.max) && c.max > 0 ? c.max : 1), d = e(() => l(c.value, 0, u.value)), f = e(() => d.value / u.value), p = e(() => c.stops?.length ? c.stops : s), m = e(() => {
 			let e = p.value, t = (e) => `calc(var(--scroll-progress-rim-fill, 0%) * ${e.toFixed(4)})`;
 			return e.length === 1 ? `${e[0]} 0%, ${e[0]} ${t(1)}` : e.map((n, r) => `${n} ${t(r / (e.length - 1))}`).join(", ");
 		}), h = e(() => {

package/dist/search.js

@@ -1,13 +1,13 @@
 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 { 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/search/searchVariants.ts
 var B = z("", {
@@ -17,18 +17,42 @@ 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__ */ C({
+}, X = /* @__PURE__ */ r(/* @__PURE__ */ S({
 	__name: "FuzzySearch",
 	props: {
 		state: {},
@@ -36,208 +60,216 @@ 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(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 || 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) => {
+		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());
-		}), 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();
+		}), F(() => u.state.isExpanded.value, (e) => {
+			e && w(() => k.value?.focus());
+		});
+		function X() {
+			C.value?.focus();
 		}
-		f({ focus: A });
-		function z(e) {
+		l({ focus: X });
+		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
+		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: 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
+			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
 				}, [
-					S(M(L), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
-					b("input", {
+					x(M(R), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
+					y("input", {
 						ref_key: "inputRef",
-						ref: m,
-						type: "text",
+						ref: C,
+						type: "search",
+						role: "combobox",
 						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), {
+						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",
 						iconOnly: "",
 						class: "size-(--search-button-size)",
-						title: u.state.isExpanded.value ? "Collapse" : "Expand",
-						onClick: d[3] ||= (e) => u.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: P(() => [u.state.isExpanded.value ? (E(), _(M(I), {
+						default: I(() => [r.state.isExpanded.value ? (E(), g(M(L), {
 							key: 1,
 							class: "size-(--search-icon-size)"
-						})) : (E(), _(M(F), {
+						})) : (E(), g(M(te), {
 							key: 0,
 							class: "size-(--search-icon-size)"
 						}))]),
 						_: 1
-					}, 8, ["title"])) : v("", !0),
-					u.state.query.value ? (E(), _(M(n), {
+					}, 8, ["aria-label", "title"])) : _("", !0),
+					r.state.query.value ? (E(), g(M(n), {
 						key: 1,
 						type: "button",
 						variant: "ghost",
 						iconOnly: "",
 						class: "size-(--search-button-size)",
+						"aria-label": "Clear search",
 						title: "Clear search",
-						onClick: d[4] ||= (e) => u.state.close()
+						onClick: u[4] ||= (e) => r.state.close()
 					}, {
-						default: P(() => [S(M(R), { class: "size-(--search-icon-size)" })]),
+						default: I(() => [x(M(ne), { class: "size-(--search-icon-size)" })]),
 						_: 1
-					})) : v("", !0)
-				], 10, V)]),
+					})) : _("", !0)
+				], 10, re)]),
 				_: 1
-			}), S(M(c), {
+			}), 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: d[5] ||= (e) => e.preventDefault()
+				onOpenAutoFocus: u[5] ||= (e) => e.preventDefault()
 			}, {
-				default: P(() => [b("div", {
+				default: I(() => [y("div", {
+					id: f,
 					ref_key: "inlineListRef",
-					ref: Z
-				}, [(E(!0), y(h, null, O(u.state.results.value, (e, n) => (E(), y("button", {
+					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: 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), {
+					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: P(() => [x(j(X(e)), 1)]),
+					default: I(() => [b(j(Q(e)), 1)]),
 					_: 2
-				}, 1024)) : v("", !0), b("span", W, j(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"]), S(M(r), {
-			open: u.state.isExpanded.value,
-			"onUpdate:open": d[11] ||= (e) => u.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: P(() => [S(M(i), {
-				surface: u.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: d[10] ||= (e) => e.preventDefault()
+				onOpenAutoFocus: u[10] ||= (e) => e.preventDefault()
 			}, {
-				default: P(() => [
-					b("div", G, [
-						S(M(L), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
-						b("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: C,
-							type: "text",
+							ref: k,
+							type: "search",
+							role: "combobox",
 							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)
-						}, null, 40, K),
-						S(M(n), {
+							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",
 							iconOnly: "",
 							class: "size-(--search-button-size)",
+							"aria-label": "Collapse search",
 							title: "Collapse",
-							onClick: d[9] ||= (e) => u.state.toggleExpanded()
+							onClick: u[9] ||= (e) => r.state.toggleExpanded()
 						}, {
-							default: P(() => [S(M(I), { class: "size-(--search-icon-size)" })]),
+							default: I(() => [x(M(L), { class: "size-(--search-icon-size)" })]),
 							_: 1
 						})
 					]),
-					u.state.results.value.length > 0 ? (E(), y("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"
-					}, [(E(!0), y(h, null, O(u.state.results.value, (e, n) => (E(), y("button", {
+					}, [(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: 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": 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: P(() => [x(j(X(e)), 1)]),
+						default: I(() => [b(j(Q(e)), 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)) : _("", !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")
 						]),
-						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")])
+						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,7 +277,8 @@ var B = z("", {
 			_: 1
 		}, 8, ["open"])], 2));
 	}
-}), Z = ["value", "placeholder"], Q = /* @__PURE__ */ C({
+}), [["__scopeId", "data-v-d7b2bca7"]]), Z = ["value", "placeholder"], Q = /* @__PURE__ */ S({
+	inheritAttrs: !1,
 	__name: "SearchBar",
 	props: {
 		modelValue: { default: "" },
@@ -258,21 +291,29 @@ var B = z("", {
 	},
 	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)),
+		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: P(() => [
-				(E(), _(A(t.icon ?? M(L)), { class: "size-(--search-icon-size) text-muted-foreground shrink-0" })),
-				b("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: r[0] ||= (e) => i("update:modelValue", e.target.value)
-				}, null, 40, Z),
+				}), null, 16, Z),
 				k(n.$slots, "default")
 			]),
 			_: 3
@@ -280,4 +321,4 @@ var B = z("", {
 	}
 });
 //#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 { X as FuzzySearch, Q as SearchBar, d as buildIndex, f as clearSearchCache, u as fuzzyMatch, B as searchFieldVariants, l as searchIndex, p as useFuzzySearch };