vectis-ui 0.1.0 → 0.8.0

package/dist/components/VCombobox/VCombobox.vue_vue_type_script_setup_true_lang.js

@@ -1,41 +1,51 @@
 import { useMessages as e } from "../../i18n/state.js";
-import t from "../VIcon/VIcon.js";
-import n from "../VPopover/VPopover.js";
-import r from "../VSpinner/VSpinner.js";
-import { expand_more as i } from "../VIcon/icons/expand_more.js";
-import { useRootAttrs as a } from "../../composables/useRootAttrs.js";
-import { toggleValue as ee } from "../../utils/array.js";
-import te from "../VInput/VInput.js";
-import { useTimer as ne } from "../../composables/useTimer.js";
-import re from "../VChip/VChip.js";
-import ie from "./VComboboxOption.js";
-import ae from "./VComboboxGroup.js";
-import oe from "./VComboboxSeparator.js";
-import { useInfiniteScroll as se } from "./infiniteScroll.js";
-import { chipScaleFor as ce } from "../../utils/chip.js";
-import { normalizeText as le } from "../../utils/text.js";
-import { useFocusoutDismiss as ue } from "../../composables/useFocusoutDismiss.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as de, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, nextTick as fe, normalizeClass as pe, normalizeStyle as me, openBlock as _, reactive as he, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useId as ge, useModel as _e, watch as C, watchEffect as ve, withCtx as w } from "vue";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import n from "../VIcon/VIcon.js";
+import r from "../VPopover/VPopover.js";
+import { useControlShape as i } from "../../composables/useControlShape.js";
+import a from "../VSpinner/VSpinner.js";
+import { expand_more as o } from "../VIcon/icons/expand_more.js";
+import { useRootAttrs as ee } from "../../composables/useRootAttrs.js";
+import { toggleValue as te } from "../../utils/array.js";
+import { iconStartListener as ne } from "../../composables/useIconClickHandlers.js";
+import { canClear as re } from "../../composables/useClearable.js";
+import { inputGroupKey as ie } from "../VInput/context.js";
+import ae from "../VInput/VInput.js";
+import { useTimer as oe } from "../../composables/useTimer.js";
+import se from "../VChip/VChip.js";
+import ce from "./VComboboxOption.js";
+import le from "./VComboboxGroup.js";
+import ue from "./VComboboxSeparator.js";
+import { useInfiniteScroll as de } from "./infiniteScroll.js";
+import { chipScaleFor as fe } from "../../utils/chip.js";
+import { createNormalizedCache as pe, normalizeText as me } from "../../utils/text.js";
+import { useFocusoutDismiss as he } from "../../composables/useFocusoutDismiss.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as ge, createTextVNode as p, createVNode as m, defineComponent as _e, inject as ve, mergeModels as h, mergeProps as g, nextTick as ye, normalizeClass as be, normalizeStyle as xe, openBlock as _, reactive as Se, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useId as Ce, useModel as we, watch as C, watchEffect as Te, withCtx as w } from "vue";
 //#region src/components/VCombobox/VCombobox.vue?vue&type=script&setup=true&lang.ts
-var ye = [
+var Ee = [
 	"data-size",
 	"data-compact",
 	"data-multiple",
 	"data-collapsed",
-	"data-open",
-	"data-can-clear"
-], be = {
+	"data-open"
+], De = {
+	key: 0,
+	class: "v-combobox-text"
+}, Oe = {
+	key: 1,
+	class: "v-combobox-overflow"
+}, ke = {
 	key: 0,
 	class: "v-combobox-state",
 	"aria-hidden": "true"
-}, xe = {
+}, Ae = {
 	key: 1,
 	class: "v-combobox-state",
 	"aria-hidden": "true"
-}, Se = {
+}, je = {
 	class: "v-visually-hidden",
 	role: "status"
-}, T = /*@__PURE__*/ m({
+}, T = /*@__PURE__*/ _e({
 	inheritAttrs: !1,
 	__name: "VCombobox",
 	props: /*@__PURE__*/ h({
@@ -44,6 +54,14 @@ var ye = [
 			type: Boolean,
 			default: !1
 		},
+		display: { default: "chip" },
+		max: { default: void 0 },
+		overflowText: {
+			type: Function,
+			default: void 0
+		},
+		label: { default: void 0 },
+		hint: { default: void 0 },
 		size: { default: "md" },
 		compact: {
 			type: Boolean,
@@ -54,14 +72,22 @@ var ye = [
 			type: Boolean,
 			default: !1
 		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
 		invalid: {
 			type: Boolean,
 			default: !1
 		},
+		iconStart: { default: void 0 },
+		iconStartLabel: { default: void 0 },
+		expandIcon: { default: () => o },
 		clearable: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
+		clearLabel: { default: void 0 },
 		emptyText: { default: void 0 },
 		filter: {
 			type: [Boolean, Function],
@@ -76,350 +102,413 @@ var ye = [
 		hasMore: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		placement: { default: "bottom-start" }
 	}, {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ h(["search", "load-more"], ["update:modelValue"]),
-	setup(m, { emit: h }) {
-		let T = (e) => "options" in e, Ce = (e) => "separator" in e, E = m, D = e(), we = s(() => E.emptyText ?? D.value.combobox.empty), O = s(() => E.loadingText ?? D.value.common.loading), k = h, A = s(() => ce(E.size, E.compact)), j = _e(m, "modelValue"), { rootClass: Te, rootStyle: Ee, forwardedAttrs: De } = a(), Oe = v(null), M = v(null), N = ge(), P = v(!1), F = v(""), I = v(-1), L = v(!1), R = v(!1), z = s(() => E.multiple ? Array.isArray(j.value) ? j.value : [] : typeof j.value == "string" && j.value ? [j.value] : []), B = s(() => E.options.flatMap((e) => Ce(e) ? [] : T(e) ? e.options : [e])), V = he(/* @__PURE__ */ new Map());
-		ve(() => {
-			let e = new Set(z.value);
-			for (let t of B.value) e.has(t.value) && V.set(t.value, t);
-			for (let t of V.keys()) e.has(t) || V.delete(t);
+	emits: /*@__PURE__*/ h([
+		"search",
+		"load-more",
+		"clear",
+		"click:icon-start"
+	], ["update:modelValue"]),
+	setup(o, { expose: _e, emit: h }) {
+		let T = (e) => "options" in e, Me = (e) => "separator" in e, E = o, D = e(), Ne = c(() => E.emptyText ?? D.value.combobox.empty), Pe = c(() => E.clearLabel ?? D.value.combobox.clear), O = c(() => E.loadingText ?? D.value.common.loading), k = h, { size: A, compact: j, disabled: M } = i(E, ve(ie, null)), N = c(() => fe(A.value, j.value)), P = we(o, "modelValue"), { rootClass: Fe, rootStyle: Ie, forwardedAttrs: Le } = ee(), Re = ne((e) => k("click:icon-start", e)), ze = c(() => ({
+			...Le.value,
+			...Re
+		})), Be = v(null), F = v(null), Ve = Ce(), I = v(!1), L = v(""), R = v(-1), z = v(!1), B = v(!1), V = c(() => E.multiple ? Array.isArray(P.value) ? P.value : [] : !Array.isArray(P.value) && P.value !== "" ? [P.value] : []), H = c(() => E.options.flatMap((e) => Me(e) ? [] : T(e) ? e.options : [e])), U = Se(/* @__PURE__ */ new Map());
+		Te(() => {
+			let e = new Set(V.value);
+			for (let t of H.value) e.has(t.value) && U.set(t.value, t);
+			for (let t of U.keys()) e.has(t) || U.delete(t);
 		});
-		let ke = s(() => {
+		let He = c(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of B.value) e.has(t.value) || e.set(t.value, t);
+			for (let t of H.value) e.has(t.value) || e.set(t.value, t);
 			return e;
-		}), H = s(() => new Set(z.value));
-		function Ae(e) {
-			return ke.value.get(e) ?? V.get(e);
-		}
-		function U(e) {
-			return Ae(e)?.label ?? e;
+		}), Ue = c(() => new Set(V.value));
+		function We(e) {
+			return He.value.get(e) ?? U.get(e);
 		}
-		let je = /* @__PURE__ */ new WeakMap();
-		function Me(e) {
-			let t = je.get(e);
-			if (t && t.label === e.label) return t.normalized;
-			let n = le(e.label);
-			return je.set(e, {
-				label: e.label,
-				normalized: n
-			}), n;
+		function W(e) {
+			return We(e)?.label ?? String(e);
 		}
-		let W = s(() => R.value ? F.value.trim() : ""), G = s(() => {
-			let e = E.filter, t = B.value;
+		let Ge = pe(), Ke = (e) => Ge(e, e.label), G = c(() => B.value ? L.value.trim() : ""), K = c(() => {
+			let e = E.filter, t = H.value;
 			if (e === !1) return t;
-			let n = W.value;
+			let n = G.value;
 			if (!n) return t;
 			if (typeof e == "function") return t.filter((t) => e(t, n));
-			let r = le(n);
-			return t.filter((e) => Me(e).includes(r));
-		}), Ne = s(() => !P.value || G.value.length > 0 ? "" : E.loading ? O.value : we.value), Pe = s(() => {
-			let e = /* @__PURE__ */ new Map();
-			G.value.forEach((t, n) => e.set(t.value, n));
-			let t = (t) => {
-				let n = e.get(t.value);
-				return n === void 0 ? null : {
-					kind: "option",
-					key: `option:${t.value}`,
-					option: t,
-					index: n
-				};
-			}, n = [], r = null;
-			for (let [e, i] of E.options.entries()) {
-				if (Ce(i)) {
-					n.length > 0 && (r = `sep:${e}`);
+			let r = me(n);
+			return t.filter((e) => Ke(e).includes(r));
+		}), qe = c(() => !I.value || K.value.length > 0 ? "" : E.loading ? O.value : Ne.value), Je = c(() => {
+			let e = new Set(K.value), t = 0, n = (n, r) => e.has(n) ? {
+				kind: "option",
+				key: `option:${r}`,
+				option: n,
+				index: t++
+			} : null, r = [], i = null;
+			for (let [e, t] of E.options.entries()) {
+				if (Me(t)) {
+					r.length > 0 && (i = `sep:${e}`);
 					continue;
 				}
 				let a;
-				if (T(i)) {
-					let n = i.options.map(t).filter((e) => e !== null);
-					a = n.length > 0 ? {
+				if (T(t)) {
+					let r = t.options.map((t, r) => n(t, `${e}.${r}`)).filter((e) => e !== null);
+					a = r.length > 0 ? {
 						kind: "group",
 						key: `group:${e}`,
-						label: i.label,
-						options: n
+						label: t.label,
+						options: r
 					} : null;
-				} else a = t(i);
-				a && (r !== null && (n.push({
+				} else a = n(t, String(e));
+				a && (i !== null && (r.push({
 					kind: "separator",
-					key: r
-				}), r = null), n.push(a));
+					key: i
+				}), i = null), r.push(a));
 			}
-			return n;
-		}), Fe = ne(), Ie, K = Fe.cancel;
-		function Le(e, t = !1) {
-			K(), e !== Ie && Fe.start(() => {
-				P.value && (Ie = e, k("search", e));
+			return r;
+		}), Ye = oe(), Xe, q = Ye.cancel;
+		function Ze(e, t = !1) {
+			q(), e !== Xe && Ye.start(() => {
+				I.value && (Xe = e, k("search", e));
 			}, t ? 0 : E.searchDebounce);
 		}
-		C(W, (e) => {
-			P.value && (I.value = G.value.findIndex((e) => !e.disabled), Le(e));
-		}), C(G, (e) => {
-			P.value && (I.value < 0 || I.value >= e.length) && (I.value = e.findIndex((e) => !e.disabled));
-		}), !E.multiple && typeof j.value == "string" && j.value && (F.value = U(j.value)), C(B, () => {
-			E.multiple || P.value || R.value || typeof j.value == "string" && j.value && (F.value = U(j.value));
-		}, { flush: "post" });
-		let Re = s(() => E.multiple && !L.value && z.value.length > 0), ze = s(() => E.clearable && !E.disabled && (z.value.length > 0 || F.value.length > 0)), q = (e) => `${N}-option-${e}`;
-		function Be(e) {
-			return {
-				id: q(e.index),
-				icon: e.option.icon,
-				active: e.index === I.value,
-				selected: H.value.has(e.option.value),
-				disabled: e.option.disabled
-			};
+		C(G, (e) => {
+			I.value && (R.value = K.value.findIndex((e) => !e.disabled), Ze(e));
+		}), C(K, (e) => {
+			I.value && (R.value < 0 || R.value >= e.length) && (R.value = e.findIndex((e) => !e.disabled));
+		});
+		function J() {
+			let e = E.multiple ? void 0 : V.value[0];
+			return e === void 0 ? "" : W(e);
 		}
-		function Ve(e) {
+		L.value = J(), C(H, () => {
+			E.multiple || I.value || B.value || V.value.length && (L.value = J());
+		}, { flush: "post" });
+		let Y = c(() => E.multiple && E.display === "text"), Qe = c(() => E.multiple && V.value.length > 0 && (!z.value || Y.value && E.readonly)), X = c(() => Qe.value && E.max ? V.value.slice(0, E.max) : V.value), Z = c(() => V.value.length - X.value.length), $e = c(() => E.overflowText ? E.overflowText(Z.value) : `+${Z.value}`), et = c(() => Y.value ? X.value.map(W).join(", ") : ""), tt = c(() => re(E, M.value, V.value.length > 0 || L.value.length > 0)), nt = (e) => `${Ve}-option-${e}`;
+		function rt(e) {
+			let t = e.index === R.value, n = Ue.value.has(e.option.value);
 			return {
-				option: e.option,
-				index: e.index,
-				active: e.index === I.value,
-				selected: H.value.has(e.option.value)
+				...e,
+				row: {
+					id: nt(e.index),
+					icon: e.option.icon,
+					active: t,
+					selected: n,
+					disabled: e.option.disabled
+				},
+				slot: {
+					option: e.option,
+					index: e.index,
+					active: t,
+					selected: n
+				}
 			};
 		}
-		function He(e) {
-			e.option.disabled || (I.value = e.index);
+		let it = c(() => Je.value.map((e) => e.kind === "option" ? rt(e) : e.kind === "group" ? {
+			...e,
+			options: e.options.map(rt)
+		} : e));
+		function at(e) {
+			e.option.disabled || (R.value = e.index);
 		}
-		C(I, (e) => {
-			e < 0 || fe(() => {
-				document.getElementById(q(e))?.scrollIntoView?.({ block: "nearest" });
+		C(R, (e) => {
+			e < 0 || ye(() => {
+				document.getElementById(nt(e))?.scrollIntoView?.({ block: "nearest" });
 			});
 		});
-		function J() {
-			if (E.disabled || P.value) return;
-			P.value = !0;
-			let e = G.value, t = e.findIndex((e) => !e.disabled && H.value.has(e.value));
-			I.value = t >= 0 ? t : e.findIndex((e) => !e.disabled), Le(W.value, !0);
+		function Q() {
+			if (M.value || E.readonly || I.value) return;
+			I.value = !0;
+			let e = K.value, t = e.findIndex((e) => !e.disabled && Ue.value.has(e.value));
+			R.value = t >= 0 ? t : e.findIndex((e) => !e.disabled), Ze(G.value, !0);
 		}
-		let Ue = v(null), We = se({
-			sentinelEl: Ue,
-			canLoad: () => P.value && E.hasMore && !E.loading,
-			loadedCount: () => B.value.length,
+		let ot = v(null), st = de({
+			sentinelEl: ot,
+			canLoad: () => I.value && E.hasMore && !E.loading,
+			loadedCount: () => H.value.length,
 			onLoadMore: () => k("load-more")
 		});
-		function Y() {
-			P.value && (K(), We.reset(), P.value = !1, I.value = -1, R.value = !1, F.value = !E.multiple && typeof j.value == "string" && j.value ? U(j.value) : "");
+		function $() {
+			I.value && (q(), st.reset(), I.value = !1, R.value = -1, B.value = !1, L.value = J());
 		}
-		let Ge = ue(Oe, Y);
-		function Ke(e) {
+		let ct = he(Be, $);
+		function lt(e) {
 			e.preventDefault();
 		}
-		function qe() {
-			R.value = !0, J();
+		function ut() {
+			B.value = !0, Q();
 		}
-		function X() {
-			!E.multiple && F.value && M.value?.select();
+		function dt() {
+			!E.multiple && L.value && F.value?.select();
 		}
-		function Je() {
-			L.value = !0, X();
+		function ft() {
+			z.value = !0, dt();
 		}
-		function Ye() {
-			E.disabled || (M.value?.focus(), J(), X());
+		let pt = (e) => e.target instanceof Element && e.target.closest(".v-combobox-chevron, .v-combobox-spinner") !== null;
+		function mt(e) {
+			pt(e) && e.preventDefault();
 		}
-		function Z(e) {
-			e.disabled || (V.set(e.value, e), R.value = !1, E.multiple ? (j.value = ee(z.value, e.value), F.value = "", M.value?.focus()) : (j.value = e.value, K(), F.value = e.label, P.value = !1, I.value = -1));
+		function ht(e) {
+			if (!M.value) {
+				if (F.value?.focus(), I.value && pt(e)) {
+					$();
+					return;
+				}
+				Q(), dt();
+			}
+		}
+		function gt(e) {
+			e.disabled || (U.set(e.value, e), B.value = !1, E.multiple ? (P.value = te(V.value, e.value), L.value = "", F.value?.focus()) : (P.value = e.value, q(), L.value = e.label, I.value = !1, R.value = -1));
 		}
-		function Q(e) {
-			E.multiple && (j.value = z.value.filter((t) => t !== e), M.value?.focus());
+		function _t(e) {
+			!E.multiple || E.readonly || (P.value = V.value.filter((t) => t !== e), F.value?.focus());
 		}
-		function Xe() {
-			j.value = E.multiple ? [] : "", R.value = !1, I.value = -1;
+		function vt() {
+			P.value = E.multiple ? [] : "", B.value = !1, R.value = -1, k("clear");
 		}
-		function $(e) {
-			let t = G.value;
+		function yt(e) {
+			let t = K.value;
 			if (t.length === 0) return;
-			let n = I.value;
+			let n = R.value;
 			for (let r = 0; r < t.length && (n = (n + e + t.length) % t.length, t[n]?.disabled); r++);
-			I.value = n;
+			R.value = n;
 		}
-		function Ze(e) {
+		function bt(e) {
 			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), P.value ? $(1) : J();
+					e.preventDefault(), I.value ? yt(1) : Q();
 					break;
 				case "ArrowUp":
-					e.preventDefault(), P.value ? $(-1) : J();
+					e.preventDefault(), I.value ? yt(-1) : Q();
 					break;
 				case "Enter":
-					if (P.value && I.value >= 0) {
+					if (I.value && R.value >= 0) {
 						e.preventDefault();
-						let t = G.value[I.value];
-						t && Z(t);
+						let t = K.value[R.value];
+						t && gt(t);
 					}
 					break;
 				case "Escape":
-					Y();
+					$();
 					break;
 				case "Tab":
-					Y();
+					$();
 					break;
 				case "Backspace":
-					if (E.multiple && !F.value) {
-						let e = z.value.at(-1);
-						e && Q(e);
+					if (E.multiple && !L.value) {
+						let e = V.value.at(-1);
+						e !== void 0 && _t(e);
 					}
 					break;
 			}
 		}
-		return (e, a) => (_(), u("div", {
+		return _e({
+			focus: (e) => F.value?.focus(e),
+			select: () => F.value?.select(),
+			el: c(() => F.value?.el ?? null)
+		}), (e, i) => (_(), d("div", {
 			ref_key: "rootEl",
-			ref: Oe,
-			class: pe(["v-combobox", S(Te)]),
-			style: me([{ "--chip-height": A.value.height }, S(Ee)]),
-			"data-size": m.size,
-			"data-compact": m.compact ? "" : void 0,
-			"data-multiple": m.multiple ? "" : void 0,
-			"data-collapsed": Re.value ? "" : void 0,
-			"data-open": P.value ? "" : void 0,
-			"data-can-clear": ze.value ? "" : void 0,
-			onFocusout: a[3] ||= (...e) => S(Ge) && S(Ge)(...e)
+			ref: Be,
+			class: be(["v-combobox", S(Fe)]),
+			style: xe([{ "--chip-height": N.value.height }, S(Ie)]),
+			"data-size": S(A),
+			"data-compact": S(j) ? "" : void 0,
+			"data-multiple": o.multiple ? "" : void 0,
+			"data-collapsed": Qe.value ? "" : void 0,
+			"data-open": I.value ? "" : void 0,
+			onFocusout: i[3] ||= (...e) => S(ct) && S(ct)(...e)
 		}, [
-			d("div", {
+			f("div", {
 				class: "v-combobox-control",
-				onClick: Ye
-			}, [p(te, g({
+				onMousedown: mt,
+				onClick: ht
+			}, [m(ae, g({
 				ref_key: "inputRef",
-				ref: M,
-				modelValue: F.value,
-				"onUpdate:modelValue": a[0] ||= (e) => F.value = e,
+				ref: F,
+				modelValue: L.value,
+				"onUpdate:modelValue": i[0] ||= (e) => L.value = e,
+				class: ["v-input-end-pinned", { "v-input-chips": o.multiple && !Y.value }],
 				role: "combobox",
 				"aria-haspopup": "listbox",
 				"aria-autocomplete": "list",
-				"aria-expanded": P.value,
-				"aria-controls": S(N)
-			}, S(De), {
-				size: m.size,
-				compact: m.compact,
-				invalid: m.invalid,
-				disabled: m.disabled,
-				clearable: m.clearable,
-				"clear-visible": ze.value,
-				"clear-label": S(D).combobox.clear,
-				placeholder: z.value.length === 0 ? m.placeholder : void 0,
-				"aria-activedescendant": P.value && I.value >= 0 ? q(I.value) : void 0,
-				onInput: qe,
-				onKeydown: Ze,
-				onFocus: Je,
-				onBlur: a[1] ||= (e) => L.value = !1,
-				onClear: Xe
-			}), de({
-				end: w(() => [m.loading ? (_(), c(r, {
+				"aria-expanded": I.value,
+				"aria-controls": S(Ve)
+			}, ze.value, {
+				label: o.label,
+				hint: o.hint,
+				size: S(A),
+				compact: S(j),
+				invalid: o.invalid,
+				disabled: S(M),
+				readonly: o.readonly,
+				"icon-start": o.iconStart,
+				"icon-start-label": o.iconStartLabel,
+				clearable: o.clearable,
+				"clear-visible": tt.value,
+				"clear-label": Pe.value,
+				placeholder: V.value.length === 0 ? o.placeholder : void 0,
+				"aria-activedescendant": I.value && R.value >= 0 ? nt(R.value) : void 0,
+				onInput: ut,
+				onKeydown: bt,
+				onFocus: ft,
+				onBlur: i[1] ||= (e) => z.value = !1,
+				onClear: vt
+			}), ge({
+				end: w(() => [o.loading ? (_(), l(a, {
 					key: 0,
-					class: "v-combobox-spinner",
+					class: "v-combobox-spinner v-input-icon-end",
 					"aria-hidden": "true"
-				})) : (_(), c(t, {
-					key: 1,
-					name: S(i),
-					class: "v-combobox-chevron",
+				})) : (_(), l(n, g({ key: 1 }, S(t)(o.expandIcon), {
+					class: "v-combobox-chevron v-input-icon-end",
 					"aria-hidden": "true"
-				}, null, 8, ["name"]))]),
+				}), null, 16))]),
 				_: 2
-			}, [m.multiple ? {
+			}, [o.multiple || e.$slots.start ? {
 				name: "start",
-				fn: w(() => [(_(!0), u(o, null, y(z.value, (t) => b(e.$slots, "chip", {
-					value: t,
-					option: Ae(t),
-					label: U(t),
-					remove: () => Q(t),
-					size: A.value.size,
-					compact: A.value.compact
-				}, () => [p(re, {
-					tone: "accent",
-					size: A.value.size,
-					compact: A.value.compact,
-					dismissible: "",
-					"dismiss-label": S(D).combobox.remove(U(t)),
-					disabled: m.disabled,
-					onDismiss: (e) => Q(t)
-				}, {
-					default: w(() => [f(x(U(t)), 1)]),
-					_: 2
-				}, 1032, [
-					"size",
-					"compact",
-					"dismiss-label",
-					"disabled",
-					"onDismiss"
-				])], void 0, t)), 128))]),
+				fn: w(() => [
+					et.value ? (_(), d("span", De, x(et.value), 1)) : u("", !0),
+					Y.value && Z.value > 0 ? (_(), d("span", Oe, [b(e.$slots, "overflow", {
+						count: Z.value,
+						size: N.value.size,
+						compact: N.value.compact
+					}, () => [p(x($e.value), 1)])])) : u("", !0),
+					(_(!0), d(s, null, y(o.multiple && !Y.value ? X.value : [], (t) => b(e.$slots, "chip", {
+						value: t,
+						option: We(t),
+						label: W(t),
+						remove: () => _t(t),
+						size: N.value.size,
+						compact: N.value.compact
+					}, () => [m(se, {
+						tone: "accent",
+						size: N.value.size,
+						compact: N.value.compact,
+						dismissible: !o.readonly && !S(M),
+						"dismiss-label": S(D).common.remove(W(t)),
+						disabled: S(M),
+						onDismiss: (e) => _t(t)
+					}, {
+						default: w(() => [p(x(W(t)), 1)]),
+						_: 2
+					}, 1032, [
+						"size",
+						"compact",
+						"dismissible",
+						"dismiss-label",
+						"disabled",
+						"onDismiss"
+					])], void 0, t)), 128)),
+					o.multiple && !Y.value && Z.value > 0 ? b(e.$slots, "overflow", {
+						count: Z.value,
+						size: N.value.size,
+						compact: N.value.compact
+					}, () => [m(se, {
+						class: "v-combobox-overflow-chip",
+						tone: "neutral",
+						size: N.value.size,
+						compact: N.value.compact,
+						disabled: S(M)
+					}, {
+						default: w(() => [p(x($e.value), 1)]),
+						_: 1
+					}, 8, [
+						"size",
+						"compact",
+						"disabled"
+					])], void 0, 2) : u("", !0),
+					b(e.$slots, "start")
+				]),
 				key: "0"
+			} : void 0, e.$slots["value-end"] ? {
+				name: "value-end",
+				fn: w(() => [b(e.$slots, "value-end")]),
+				key: "1"
 			} : void 0]), 1040, [
 				"modelValue",
+				"class",
 				"aria-expanded",
 				"aria-controls",
+				"label",
+				"hint",
 				"size",
 				"compact",
 				"invalid",
 				"disabled",
+				"readonly",
+				"icon-start",
+				"icon-start-label",
 				"clearable",
 				"clear-visible",
 				"clear-label",
 				"placeholder",
 				"aria-activedescendant"
-			])]),
-			p(n, {
-				id: S(N),
-				open: P.value,
-				"onUpdate:open": a[2] ||= (e) => P.value = e,
+			])], 32),
+			m(r, {
+				id: S(Ve),
+				open: I.value,
+				"onUpdate:open": i[2] ||= (e) => I.value = e,
 				mode: "manual",
 				anchor: "--combobox-anchor",
-				placement: "bottom-start",
+				"match-trigger": "",
+				placement: o.placement,
 				role: "listbox",
 				class: "v-combobox-panel v-control",
-				"data-size": m.size,
-				"data-compact": m.compact ? "" : void 0,
-				"aria-multiselectable": m.multiple ? "true" : void 0,
-				onMousedown: Ke
+				"data-size": S(A),
+				"data-compact": S(j) ? "" : void 0,
+				"aria-multiselectable": o.multiple ? "true" : void 0,
+				onMousedown: lt
 			}, {
 				default: w(() => [
-					(_(!0), u(o, null, y(Pe.value, (t) => (_(), u(o, { key: t.key }, [t.kind === "separator" ? (_(), c(oe, { key: 0 })) : t.kind === "group" ? (_(), c(ae, {
+					(_(!0), d(s, null, y(it.value, (t) => (_(), d(s, { key: t.key }, [t.kind === "separator" ? (_(), l(ue, { key: 0 })) : t.kind === "group" ? (_(), l(le, {
 						key: 1,
 						label: t.label
 					}, {
-						default: w(() => [(_(!0), u(o, null, y(t.options, (t) => (_(), c(ie, g({ key: t.key }, { ref_for: !0 }, Be(t), {
-							onSelect: (e) => Z(t.option),
-							onPointermove: (e) => He(t)
+						default: w(() => [(_(!0), d(s, null, y(t.options, (t) => (_(), l(ce, g({ key: t.key }, { ref_for: !0 }, t.row, {
+							onSelect: (e) => gt(t.option),
+							onPointermove: (e) => at(t)
 						}), {
-							default: w(() => [b(e.$slots, "option", g({ ref_for: !0 }, Ve(t)), () => [f(x(t.option.label), 1)])]),
+							default: w(() => [b(e.$slots, "option", g({ ref_for: !0 }, t.slot), () => [p(x(t.option.label), 1)])]),
 							_: 2
 						}, 1040, ["onSelect", "onPointermove"]))), 128))]),
 						_: 2
-					}, 1032, ["label"])) : (_(), c(ie, g({
+					}, 1032, ["label"])) : (_(), l(ce, g({
 						key: 2,
 						ref_for: !0
-					}, Be(t), {
-						onSelect: (e) => Z(t.option),
-						onPointermove: (e) => He(t)
+					}, t.row, {
+						onSelect: (e) => gt(t.option),
+						onPointermove: (e) => at(t)
 					}), {
-						default: w(() => [b(e.$slots, "option", g({ ref_for: !0 }, Ve(t)), () => [f(x(t.option.label), 1)])]),
+						default: w(() => [b(e.$slots, "option", g({ ref_for: !0 }, t.slot), () => [p(x(t.option.label), 1)])]),
 						_: 2
 					}, 1040, ["onSelect", "onPointermove"]))], 64))), 128)),
-					m.loading && G.value.length === 0 ? (_(), u("div", be, [b(e.$slots, "loading", {}, () => [p(r, { label: O.value }, null, 8, ["label"]), d("span", null, x(O.value), 1)])])) : G.value.length === 0 ? (_(), u("div", xe, [b(e.$slots, "empty", { query: W.value }, () => [f(x(we.value), 1)])])) : l("", !0),
-					m.hasMore ? (_(), u("div", {
+					o.loading && K.value.length === 0 ? (_(), d("div", ke, [b(e.$slots, "loading", {}, () => [m(a, { label: O.value }, null, 8, ["label"]), f("span", null, x(O.value), 1)])])) : K.value.length === 0 ? (_(), d("div", Ae, [b(e.$slots, "empty", { query: G.value }, () => [p(x(Ne.value), 1)])])) : u("", !0),
+					o.hasMore ? (_(), d("div", {
 						key: 2,
 						ref_key: "sentinelEl",
-						ref: Ue,
+						ref: ot,
 						class: "v-combobox-more",
 						"aria-hidden": "true"
-					}, [m.loading ? (_(), c(r, {
+					}, [o.loading ? (_(), l(a, {
 						key: 0,
 						label: O.value
-					}, null, 8, ["label"])) : l("", !0)], 512)) : l("", !0)
+					}, null, 8, ["label"])) : u("", !0)], 512)) : u("", !0)
 				]),
 				_: 3
 			}, 8, [
 				"id",
 				"open",
+				"placement",
 				"data-size",
 				"data-compact",
 				"aria-multiselectable"
 			]),
-			d("span", Se, x(Ne.value), 1)
-		], 46, ye));
+			f("span", je, x(qe.value), 1)
+		], 46, Ee));
 	}
 });
 //#endregion