vectis-ui 0.14.0 → 0.16.0

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

@@ -24,7 +24,6 @@ import { computed as a, createBlock as o, createCommentVNode as s, createElement
 //#region src/components/VCombobox/VCombobox.vue?vue&type=script&setup=true&lang.ts
 var Ee = [
 	"data-size",
-	"data-compact",
 	"data-multiple",
 	"data-collapsed",
 	"data-open"
@@ -67,10 +66,6 @@ var Ee = [
 		},
 		labelPosition: { default: "top" },
 		size: { default: "md" },
-		compact: {
-			type: Boolean,
-			default: !1
-		},
 		placeholder: { default: void 0 },
 		disabled: {
 			type: Boolean,
@@ -123,153 +118,143 @@ var Ee = [
 		"click:icon-start"
 	], ["update:modelValue"]),
 	setup(i, { expose: f, emit: m }) {
-		let S = i, C = e(), w = a(() => S.emptyText ?? C.value.combobox.empty), Ae = a(() => S.clearLabel ?? C.value.combobox.clear), T = a(() => S.loadingText ?? C.value.common.loading), E = m, { size: D, compact: O, disabled: k } = t(S, ye(ae, null)), A = a(() => pe(D.value, O.value)), j = Te(i, "modelValue"), { rootClass: je, rootStyle: Me, forwardedAttrs: Ne } = r(), Pe = re((e) => E("click:icon-start", e)), Fe = a(() => ({
-			...Ne.value,
-			...Pe
-		})), M = _(null), N = _(null), P = we(), F = _(!1), I = _(""), L = _(!1), R = _(!1), z = a(() => ge(j.value, S.multiple)), Ie = ee(), Le = (e) => Ie(e, e.label), B = a(() => R.value ? I.value.trim() : ""), V = _(null), H = _(null), { allOptions: U, visible: W, optionOf: Re, labelOf: G, remember: ze, activeIndex: K, optionId: Be, highlightFirst: q, highlightSelected: Ve, move: J, hover: He, blocks: Ue, measureRow: We } = _e({
+		let S = i, C = e(), w = a(() => S.emptyText ?? C.value.combobox.empty), Ae = a(() => S.clearLabel ?? C.value.combobox.clear), T = a(() => S.loadingText ?? C.value.common.loading), E = m, je = ye(ae, null), { size: D, disabled: O } = t(S, je), k = a(() => pe(D.value)), A = Te(i, "modelValue"), { rootClass: Me, rootStyle: Ne, forwardedAttrs: Pe } = r(), Fe = re((e) => E("click:icon-start", e)), Ie = a(() => ({
+			...Pe.value,
+			...Fe
+		})), j = _(null), M = _(null), N = we(), P = _(!1), F = _(""), I = _(!1), L = _(!1), R = a(() => ge(A.value, S.multiple)), Le = ee(), Re = (e) => Le(e, e.label), z = a(() => L.value ? F.value.trim() : ""), B = _(null), V = _(null), { allOptions: H, visible: U, optionOf: ze, labelOf: W, remember: Be, activeIndex: G, optionId: Ve, highlightFirst: K, highlightSelected: He, move: q, hover: Ue, blocks: We, measureRow: Ge } = _e({
 			items: () => S.options,
 			filter: (e) => {
 				let t = S.filter;
 				if (t === !1) return e;
-				let n = V.value ?? B.value;
+				let n = B.value ?? z.value;
 				if (!n) return e;
 				if (typeof t == "function") return e.filter((e) => t(e, n));
 				let r = te(n);
-				return e.filter((e) => Le(e).includes(r));
+				return e.filter((e) => Re(e).includes(r));
 			},
-			selected: () => z.value,
-			open: () => F.value,
-			id: P,
-			panelEl: () => H.value?.el ?? null,
+			selected: () => R.value,
+			open: () => P.value,
+			id: N,
+			panelEl: () => V.value?.el ?? null,
 			virtual: () => S.virtual,
 			hasMore: () => S.hasMore,
-			size: () => D.value,
-			compact: () => O.value
-		}), Ge = a(() => !F.value || W.value.length > 0 ? "" : S.loading ? T.value : w.value), { request: Y, cancel: Ke } = ve({
+			size: () => D.value
+		}), Ke = a(() => !P.value || U.value.length > 0 ? "" : S.loading ? T.value : w.value), { request: J, cancel: qe } = ve({
 			delay: () => S.searchDebounce,
-			active: () => F.value,
+			active: () => P.value,
 			report: (e) => E("search", e)
 		});
-		b(B, (e) => {
-			F.value && (q(), Ze.restart(), Y(e));
+		b(z, (e) => {
+			P.value && (K(), Xe.restart(), J(e));
 		});
-		function X() {
-			let e = S.multiple ? void 0 : z.value[0];
-			return e === void 0 ? "" : G(e);
+		function Y() {
+			let e = S.multiple ? void 0 : R.value[0];
+			return e === void 0 ? "" : W(e);
 		}
-		I.value = X(), b([U, z], () => {
-			S.multiple || F.value || R.value || (I.value = X());
+		F.value = Y(), b([H, R], () => {
+			S.multiple || P.value || L.value || (F.value = Y());
 		}, { flush: "post" });
-		let qe = a(() => S.multiple && S.display === "text"), Je = a(() => S.multiple && z.value.length > 0 && (!L.value || qe.value && S.readonly)), Ye = a(() => ie(S, k.value, z.value.length > 0 || I.value.length > 0));
-		function Z() {
-			k.value || S.readonly || F.value || (V.value = null, F.value = !0, Ve(), Y(B.value, !0));
+		let X = a(() => S.multiple && S.display === "text"), Z = a(() => S.multiple && R.value.length > 0 && (!I.value || X.value && S.readonly)), Je = a(() => ie(S, O.value, R.value.length > 0 || F.value.length > 0));
+		function Q() {
+			O.value || S.readonly || P.value || (B.value = null, P.value = !0, He(), J(z.value, !0));
 		}
-		let Xe = _(null), Ze = he({
-			sentinelEl: Xe,
+		let Ye = _(null), Xe = he({
+			sentinelEl: Ye,
 			root: (e) => e.closest("[role=\"listbox\"]"),
-			canLoad: () => F.value && S.hasMore && !S.loading,
-			loaded: () => U.value,
+			canLoad: () => P.value && S.hasMore && !S.loading,
+			loaded: () => H.value,
 			onLoadMore: () => E("load-more")
 		});
-		function Q(e = X()) {
-			F.value && (Ke(), Ze.reset(), V.value = B.value, F.value = !1, K.value = -1, R.value = !1, I.value = e);
+		function $(e = Y()) {
+			P.value && (qe(), Xe.reset(), B.value = z.value, P.value = !1, G.value = -1, L.value = !1, F.value = e);
 		}
-		b(() => S.readonly || k.value, (e) => {
-			e && Q();
+		b(() => S.readonly || O.value, (e) => {
+			e && $();
 		});
-		let Qe = me(M, () => Q());
+		let Ze = me(j, () => $());
+		function Qe() {
+			L.value = !0, Q();
+		}
 		function $e() {
-			R.value = !0, Z();
+			!S.multiple && F.value && M.value?.select();
 		}
 		function et() {
-			!S.multiple && I.value && N.value?.select();
+			I.value = !0, $e();
 		}
-		function tt() {
-			L.value = !0, et();
+		let tt = (e) => e.target instanceof Element && e.target.closest(".v-combobox-chevron, .v-combobox-spinner") !== null;
+		function nt(e) {
+			tt(e) && e.preventDefault();
 		}
-		let nt = (e) => e.target instanceof Element && e.target.closest(".v-combobox-chevron, .v-combobox-spinner") !== null;
 		function rt(e) {
-			nt(e) && e.preventDefault();
+			O.value || (M.value?.focus(), P.value && tt(e) ? $() : (Q(), $e()));
 		}
 		function it(e) {
-			if (!k.value) {
-				if (N.value?.focus(), F.value && nt(e)) {
-					Q();
-					return;
-				}
-				Z(), et();
-			}
+			e.disabled || S.readonly || O.value || (Be(e), S.multiple ? (L.value = !1, A.value = ne(R.value, e.value), F.value = "", M.value?.focus()) : (A.value = e.value, $(e.label)));
 		}
 		function at(e) {
-			e.disabled || S.readonly || k.value || (ze(e), S.multiple ? (R.value = !1, j.value = ne(z.value, e.value), I.value = "", N.value?.focus()) : (j.value = e.value, Q(e.label)));
-		}
-		function $(e) {
-			!S.multiple || S.readonly || k.value || (j.value = z.value.filter((t) => t !== e), N.value?.focus());
+			!S.multiple || S.readonly || O.value || (A.value = R.value.filter((t) => t !== e), M.value?.focus());
 		}
 		function ot() {
-			j.value = S.multiple ? [] : "", R.value = !1, F.value ? q() : K.value = -1, E("clear");
+			A.value = S.multiple ? [] : "", L.value = !1, P.value ? K() : G.value = -1, E("clear");
 		}
 		function st(e) {
 			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), F.value ? J(1) : Z();
+					e.preventDefault(), P.value ? q(1) : Q();
 					break;
 				case "ArrowUp":
-					e.preventDefault(), F.value ? J(-1) : Z();
+					e.preventDefault(), P.value ? q(-1) : Q();
 					break;
 				case "Enter":
-					if (F.value && K.value >= 0) {
+					if (P.value && G.value >= 0) {
 						e.preventDefault();
-						let t = W.value[K.value];
-						t && at(t);
+						let t = U.value[G.value];
+						t && it(t);
 					}
 					break;
 				case "Escape":
-					F.value && (e.preventDefault(), Q());
+					P.value && (e.preventDefault(), $());
 					break;
 				case "Tab":
-					Q();
-					break;
-				case "Backspace":
-					if (S.multiple && !I.value) {
-						let e = z.value.at(-1);
-						e !== void 0 && $(e);
-					}
+					$();
 					break;
+				case "Backspace": if (S.multiple && !F.value) {
+					let e = R.value.at(-1);
+					e !== void 0 && at(e);
+				}
 			}
 		}
 		return f({
-			focus: (e) => N.value?.focus(e),
-			select: () => N.value?.select(),
-			el: a(() => N.value?.el ?? null)
+			focus: (e) => M.value?.focus(e),
+			select: () => M.value?.select(),
+			el: a(() => M.value?.el ?? null)
 		}), (e, t) => (g(), c("div", {
 			ref_key: "rootEl",
-			ref: M,
-			class: xe(["v-combobox", y(je)]),
-			style: Se([{ "--chip-height": A.value.height }, y(Me)]),
+			ref: j,
+			class: xe(["v-combobox", y(Me)]),
+			style: Se([{ "--chip-height": k.value.height }, y(Ne)]),
 			"data-size": y(D),
-			"data-compact": y(O) ? "" : void 0,
 			"data-multiple": i.multiple ? "" : void 0,
-			"data-collapsed": Je.value ? "" : void 0,
-			"data-open": F.value ? "" : void 0,
-			onFocusout: t[3] ||= (...e) => y(Qe) && y(Qe)(...e)
+			"data-collapsed": Z.value ? "" : void 0,
+			"data-open": P.value ? "" : void 0,
+			onFocusout: t[3] ||= (...e) => y(Ze) && y(Ze)(...e)
 		}, [
 			l("div", {
 				class: "v-combobox-control",
-				onMousedown: rt,
-				onClick: it
+				onMousedown: nt,
+				onClick: rt
 			}, [d(oe, be({
 				ref_key: "inputRef",
-				ref: N,
-				modelValue: I.value,
-				"onUpdate:modelValue": t[0] ||= (e) => I.value = e,
-				class: ["v-input-end-pinned", { "v-input-chips": i.multiple && !qe.value }],
+				ref: M,
+				modelValue: F.value,
+				"onUpdate:modelValue": t[0] ||= (e) => F.value = e,
+				class: ["v-input-end-pinned", { "v-input-chips": i.multiple && !X.value }],
 				role: "combobox",
 				"aria-haspopup": "listbox",
 				"aria-autocomplete": "list",
-				"aria-expanded": F.value,
-				"aria-controls": y(P)
-			}, Fe.value, {
+				"aria-expanded": P.value,
+				"aria-controls": y(N)
+			}, Ie.value, {
 				label: i.label,
 				hint: i.hint,
 				error: i.error,
@@ -277,21 +262,20 @@ var Ee = [
 				"hide-label": i.hideLabel,
 				"label-position": i.labelPosition,
 				size: y(D),
-				compact: y(O),
 				invalid: i.invalid,
-				disabled: y(k),
+				disabled: y(O),
 				readonly: i.readonly,
 				"icon-start": i.iconStart,
 				"icon-start-label": i.iconStartLabel,
 				clearable: i.clearable,
-				"clear-visible": Ye.value,
+				"clear-visible": Je.value,
 				"clear-label": Ae.value,
-				placeholder: z.value.length === 0 ? i.placeholder : void 0,
-				"aria-activedescendant": F.value && y(K) >= 0 ? y(Be)(y(K)) : void 0,
-				onInput: $e,
+				placeholder: R.value.length === 0 ? i.placeholder : void 0,
+				"aria-activedescendant": P.value && y(G) >= 0 ? y(Ve)(y(G)) : void 0,
+				onInput: Qe,
 				onKeydown: st,
-				onFocus: tt,
-				onBlur: t[1] ||= (e) => L.value = !1,
+				onFocus: et,
+				onBlur: t[1] ||= (e) => I.value = !1,
 				onClear: ot
 			}), u({
 				end: x(() => [i.loading ? (g(), o(n, {
@@ -302,24 +286,24 @@ var Ee = [
 					key: 1,
 					class: "v-combobox-chevron",
 					icon: i.expandIcon,
-					open: F.value
+					open: P.value
 				}, null, 8, ["icon", "open"]))]),
 				_: 2
 			}, [i.multiple || e.$slots.start ? {
 				name: "start",
 				fn: x(() => [i.multiple ? (g(), o(fe, {
 					key: 0,
-					values: z.value,
+					values: R.value,
 					display: i.display,
 					max: i.max,
-					collapsed: Je.value,
+					collapsed: Z.value,
 					"overflow-text": i.overflowText,
-					scale: A.value,
+					scale: k.value,
 					removable: !i.readonly,
-					disabled: y(k),
-					"label-of": y(G),
-					"option-of": y(Re),
-					onRemove: $
+					disabled: y(O),
+					"label-of": y(W),
+					"option-of": y(ze),
+					onRemove: at
 				}, u({ _: 2 }, [e.$slots.chip ? {
 					name: "chip",
 					fn: x((t) => [v(e.$slots, "chip", h(p(t)))]),
@@ -357,7 +341,6 @@ var Ee = [
 				"hide-label",
 				"label-position",
 				"size",
-				"compact",
 				"invalid",
 				"disabled",
 				"readonly",
@@ -370,32 +353,31 @@ var Ee = [
 				"aria-activedescendant"
 			])], 32),
 			d(de, {
-				id: y(P),
+				id: y(N),
 				ref_key: "panelRef",
-				ref: H,
-				open: F.value,
-				"onUpdate:open": t[2] ||= (e) => F.value = e,
+				ref: V,
+				open: P.value,
+				"onUpdate:open": t[2] ||= (e) => P.value = e,
 				anchor: "--combobox-anchor",
 				placement: i.placement,
 				class: "v-combobox-panel",
 				size: y(D),
-				compact: y(O),
 				multiple: i.multiple,
 				virtual: i.virtual,
-				blocks: y(Ue),
-				measure: y(We),
-				onSelect: at,
-				onHighlight: y(He)
+				blocks: y(We),
+				measure: y(Ge),
+				onSelect: it,
+				onHighlight: y(Ue)
 			}, u({
-				default: x(() => [i.loading && y(W).length === 0 ? (g(), c("div", De, [v(e.$slots, "loading", {}, () => [d(n, { label: T.value }, null, 8, ["label"]), l("span", null, Ce(T.value), 1)])])) : y(W).length === 0 ? (g(), c("div", Oe, [v(e.$slots, "empty", { query: B.value }, () => [d(se, {
+				default: x(() => [i.loading && y(U).length === 0 ? (g(), c("div", De, [v(e.$slots, "loading", {}, () => [d(n, { label: T.value }, null, 8, ["label"]), l("span", null, Ce(T.value), 1)])])) : y(U).length === 0 ? (g(), c("div", Oe, [v(e.$slots, "empty", { query: z.value }, () => [d(se, {
 					size: "sm",
 					class: "v-combobox-empty",
-					icon: B.value ? y(le) : y(ce),
+					icon: z.value ? y(le) : y(ce),
 					title: w.value
 				}, null, 8, ["icon", "title"])])])) : s("", !0), i.hasMore ? (g(), c("div", {
 					key: 2,
 					ref_key: "sentinelEl",
-					ref: Xe,
+					ref: Ye,
 					class: "v-combobox-more",
 					"aria-hidden": "true"
 				}, [i.loading ? (g(), o(n, {
@@ -412,14 +394,13 @@ var Ee = [
 				"open",
 				"placement",
 				"size",
-				"compact",
 				"multiple",
 				"virtual",
 				"blocks",
 				"measure",
 				"onHighlight"
 			]),
-			l("span", ke, Ce(Ge.value), 1)
+			l("span", ke, Ce(Ke.value), 1)
 		], 46, Ee));
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"VCombobox.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VCombobox/VCombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * Keep DOM focus on the field and move aria-activedescendant through options. JavaScript\n * supplies filtering, selection and keyboard navigation unavailable to native text inputs.\n */\n\nimport { computed, inject, ref, useId, watch } from 'vue'\n\nimport VEmptyState from '../VEmptyState/VEmptyState.vue'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport { inbox as inboxIcon } from '../VIcon/icons/inbox'\nimport { search_off as searchOffIcon } from '../VIcon/icons/search_off'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport VListboxChevron from '../VListbox/VListboxChevron.vue'\nimport VListboxPanel from '../VListbox/VListboxPanel.vue'\nimport VListboxValues from '../VListbox/VListboxValues.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\nimport { toggleValue } from '../../utils/array'\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxOverflowSlotProps,\n  ListboxSeparator,\n} from '../../types'\nimport { inputGroupKey } from '../VInput/context'\n\nimport { chipScaleFor } from '../../utils/chip'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFocusoutDismiss } from '../../composables/useFocusoutDismiss'\nimport { useInfiniteScroll } from '../../composables/useInfiniteScroll'\nimport { selectionOf, useListbox } from '../../composables/useListbox'\n\nimport { canClear } from '../../composables/useClearable'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\n\nimport { useDebouncedSearch } from '../../composables/useDebouncedSearch'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport type ComboboxOption = ListboxOption\n\n/**\n * A named block of options, the equivalent of the grouping a native list offers. A\n * group none of whose options survive the search disappears entirely, its name\n * included.\n */\nexport type ComboboxGroup = ListboxGroup\n\n/**\n * A rule drawn between two blocks of options. It is purely decorative, and a separator the\n * search leaves stranded (at the top, at the bottom, or against another one) is simply not\n * drawn.\n */\nexport type ComboboxSeparator = ListboxSeparator\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type ComboboxItem = ListboxItem\n\n/**\n * How the list is narrowed as one types: by the component itself, not at all (when the\n * options already arrive filtered by a server), or by a rule of your own.\n */\nexport type ComboboxFilter = boolean | ((option: ComboboxOption, query: string) => boolean)\n\n/** Where the list opens relative to the field. */\nexport type ComboboxPlacement =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type ComboboxSize = 'sm' | 'md' | 'lg'\n\n/**\n * How the chosen values are shown in a multiple field: one chip each, or their labels\n * joined by commas.\n */\nexport type ComboboxDisplay = 'chip' | 'text'\n\n/** What the `#option` slot receives. */\nexport type ComboboxOptionSlotProps = ListboxOptionSlotProps\n\n/** What the `#chip` slot receives. */\nexport type ComboboxChipSlotProps = ListboxChipSlotProps\n\n/** What the `#overflow` slot receives. */\nexport type ComboboxOverflowSlotProps = ListboxOverflowSlotProps\n\n/** What the `#empty` slot receives. */\nexport interface ComboboxEmptySlotProps {\n  query: string\n}\n\ninterface ComboboxProps {\n  /**\n   * What the list offers. An entry may be an option, a named block of options, or a\n   * separator; a plain list of options remains perfectly valid.\n   */\n  options: ComboboxItem[]\n  /**\n   * Allows several values to be chosen, which makes the value a list and shows what has\n   * been chosen inside the field, as chips or as text depending on `display`.\n   */\n  multiple?: boolean\n  /**\n   * How the chosen values are shown when several can be chosen: one dismissible chip each, or\n   * their labels joined by commas on a single line, cut short with an ellipsis when they run\n   * out of room.\n   */\n  display?: ComboboxDisplay\n  /**\n   * How many chosen values to show before the rest are summed up as \"+X\", as chips or as text\n   * alike. Left out, or set to 0, every value is shown.\n   */\n  max?: number\n  /**\n   * Rephrases the \"+X\" standing for the values beyond `max`, \"+5 products\" for instance.\n   * It receives the number of values being hidden.\n   */\n  overflowText?: (count: number) => string\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the field for assistive technology,\n   * so it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the field is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: ComboboxSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /** What the field says while nothing is chosen and nothing has been typed. */\n  placeholder?: string\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what has been chosen without letting it be changed: nothing can be typed, the list\n   * never opens, the chips lose their crosses and no clear cross is offered.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start, before the chips when several values can\n   * be chosen. It is decorative by default and becomes a real button as soon as a\n   * `@click:icon-start` listener is attached, in which case it needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * The chevron at the end of the field, which turns as the list opens: an icon name, or an\n   * explicit render.\n   */\n  expandIcon?: IconSource\n  /** Offers a cross that empties both the selection and the search. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The title of the empty state the panel shows when the search matches nothing. It is also\n   * what a screen reader hears, even when the `#empty` slot draws something else: set both\n   * together.\n   */\n  emptyText?: string\n  /** How the list is narrowed as one types. */\n  filter?: ComboboxFilter\n  /**\n   * How long to wait before telling the source what is being searched for, in\n   * milliseconds. Zero tells it at once, which suits a source that is not a network\n   * request.\n   */\n  searchDebounce?: number\n  /**\n   * Says that something is being loaded. Either way the field replaces its chevron with a\n   * spinner.\n   */\n  loading?: boolean\n  /**\n   * What is said while loading, and what the spinner is announced as. A screen reader hears\n   * it even when the `#loading` slot draws something else: set both together.\n   */\n  loadingText?: string\n  /**\n   * Says that there are more pages to come, which makes the component ask for the next one as\n   * the end of the list comes into view.\n   */\n  hasMore?: boolean\n  /**\n   * Renders only the rows near the visible part of the panel, for lists of thousands of options.\n   * Rows are measured as they render, so a custom `#option` may vary in height. Options are then\n   * announced with their position in the list.\n   */\n  virtual?: boolean\n  /** Where the list opens relative to the field. */\n  placement?: ComboboxPlacement\n}\n\nconst props = withDefaults(defineProps<ComboboxProps>(), {\n  multiple: false,\n  display: 'chip',\n  max: undefined,\n  overflowText: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: 'md',\n  compact: false,\n  placeholder: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  expandIcon: () => expandMoreIcon,\n  clearable: false,\n  clearLabel: undefined,\n  emptyText: undefined,\n  filter: true,\n  searchDebounce: 250,\n  loading: false,\n  loadingText: undefined,\n  hasMore: false,\n  virtual: false,\n  placement: 'bottom-start',\n})\n\nconst m = useMessages()\nconst resolvedEmptyText = computed(() => props.emptyText ?? m.value.combobox.empty)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.combobox.clear)\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.common.loading)\n\nconst emit = defineEmits<{\n  /** What is being searched for, to be sent to the source. */\n  search: [query: string]\n  /** The end of the list has come into view: send the next page. */\n  'load-more': []\n  /** The clear cross emptied the selection and the search. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after the chips standing for the chosen\n   * values rather than in their place.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the ones the field owns: the clear\n   * cross and the chevron.\n   */\n  'value-end'?(): unknown\n  /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */\n  option?(props: ComboboxOptionSlotProps): unknown\n  /** Replaces the chip standing for one chosen value. */\n  chip?(props: ComboboxChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: ComboboxOverflowSlotProps): unknown\n  /** What the panel shows when nothing matches. It receives the term that was searched. */\n  empty?(props: ComboboxEmptySlotProps): unknown\n  /** What the panel shows while loading its first options. */\n  loading?(): unknown\n}>()\n\n// Everything below reads the RESOLVED values and never the props: the chips, the panel and the\n// field would otherwise come out at three different scales inside the same row.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The size, the density and the HEIGHT of the chips sitting inside the field, worked out\n// once in `utils/chip.ts` and shared with VFileInput. The height is set inline below\n// rather than restated as a table of CSS rules: it is the height the field forces on its\n// input, and deriving both from the same pair is what stops them drifting apart.\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/** The chosen option's `value`, or the list of them when `multiple` is set. */\nconst model = defineModel<ItemValue | ItemValue[]>({ default: '' })\n\n// `class` and `style` stay on the wrapper, where a consumer expects to style the component;\n// everything else; a name above all; goes down to the text field, which is the element\n// assistive technology treats as the combobox.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\n\n/** What reaches the field: the consumer's own attributes, plus that listener. */\nconst fieldAttrs = computed(() => ({ ...forwardedAttrs.value, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\n// One generated identifier serves twice: as the panel's own id, which the field points\n// at, and as the prefix of every option's id. The two strings can never collide, one\n// being a prefix of longer ones.\nconst optionsId = useId()\n\nconst open = ref(false)\nconst query = ref('')\nconst focused = ref(false)\n// The text in the field serves two purposes at once: it SHOWS the chosen label when a single\n// value is picked, and it is what one searches with. This flag tells the two apart; while it is\n// false the text is merely a label and narrows nothing, so reopening the panel offers the whole\n// list again.\nconst typed = ref(false)\n\nconst selectedValues = computed(() => selectionOf(model.value, props.multiple))\n\n/*\n * Reading the label on every call is what keeps the filter reactive: flattening the options\n * only ever touches the containers, so a label changed in place would go unnoticed by anything\n * keyed on the list.\n */\nconst normalizedOf = createNormalizedCache<ComboboxOption>()\nconst normalizedLabelOf = (option: ComboboxOption) => normalizedOf(option, option.label)\n\n// ONE search term, read both by the local filter and by what is sent to the source: the\n// list on screen and the request in flight therefore cannot describe different searches.\n// With nothing typed the term is empty, so a label merely being displayed never narrows\n// the list.\nconst searchTerm = computed(() => (typed.value ? query.value.trim() : ''))\n\n// Closing empties `searchTerm` (the typing flag drops) in the same tick as it hides the panel,\n// but the panel fades out rather than vanishing. Filtered on the live term, the list would\n// spring back to every option during that fade, and the panel grow under the pointer that just\n// chose.\nconst closedTerm = ref<string | null>(null)\n\nconst panelRef = ref<InstanceType<typeof VListboxPanel> | null>(null)\n\nconst {\n  allOptions,\n  visible: filtered,\n  optionOf,\n  labelOf,\n  remember,\n  activeIndex,\n  optionId,\n  highlightFirst,\n  highlightSelected,\n  move,\n  hover,\n  blocks,\n  measureRow,\n} = useListbox({\n  items: () => props.options,\n  filter: (list) => {\n    const matcher = props.filter\n    if (matcher === false) return list\n    const q = closedTerm.value ?? searchTerm.value\n    if (!q) return list\n    if (typeof matcher === 'function') return list.filter((o) => matcher(o, q))\n    const needle = normalizeText(q)\n    return list.filter((o) => normalizedLabelOf(o).includes(needle))\n  },\n  selected: () => selectedValues.value,\n  open: () => open.value,\n  id: optionsId,\n  panelEl: () => panelRef.value?.el ?? null,\n  virtual: () => props.virtual,\n  hasMore: () => props.hasMore,\n  size: () => resolvedSize.value,\n  compact: () => resolvedCompact.value,\n})\n\n// @a11y\n/**\n * What is announced about the state of the panel; that nothing matches, or that something is\n * loading.\n */\nconst stateAnnouncement = computed(() => {\n  if (!open.value || filtered.value.length > 0) return ''\n  return props.loading ? resolvedLoadingText.value : resolvedEmptyText.value\n})\n\nconst { request: emitSearch, cancel: cancelSearch } = useDebouncedSearch({\n  delay: () => props.searchDebounce,\n  active: () => open.value,\n  report: (term) => emit('search', term),\n})\n\nwatch(searchTerm, (term) => {\n  if (!open.value) return\n  // A new search means a new list, so the highlight cannot survive it: with an outside source\n  // the options are replaced wholesale, and the old position would name a completely unrelated\n  // option. It is moved to the first available option rather than dropped altogether, and that\n  // matters when the filtering is left to the source: the visible list keeps the very same\n  // reference until the answer arrives, so the watcher below would never fire and Enter would\n  // do nothing in the meantime.\n  highlightFirst()\n  // The page asked for under the previous term will never arrive, and the first page of the new\n  // one may be exactly as long as the list it replaces; which the paging would not recognise as\n  // an arrival.\n  infiniteScroll.restart()\n  emitSearch(term)\n})\n\n// With a single value, the field shows its label as ordinary text whenever it is not being\n// edited. Read through `selectedValues`, which knows that a number is a value even at zero: a\n// test on the string type would leave a numeric value unlabelled.\nfunction singleLabel() {\n  const value = props.multiple ? undefined : selectedValues.value[0]\n  return value === undefined ? '' : labelOf(value)\n}\n\nquery.value = singleLabel()\n\n// Refresh copied selection labels when options arrive or the parent updates the value.\n// Post-flush timing reads the accepted model after rendering.\nwatch(\n  [allOptions, selectedValues],\n  () => {\n    if (props.multiple || open.value || typed.value) return\n    query.value = singleLabel()\n  },\n  { flush: 'post' },\n)\n\n/** The chosen values are spelled out as one line of text rather than drawn as chips. */\nconst textDisplay = computed(() => props.multiple && props.display === 'text')\n\n// A read-only TEXT display keeps it folded under the focus too: nothing can be typed, and the\n// input's share of the row would only cut the line of values short for nothing.\nconst collapsed = computed(\n  () =>\n    props.multiple &&\n    selectedValues.value.length > 0 &&\n    (!focused.value || (textDisplay.value && props.readonly)),\n)\n\n// The field cannot work that out for itself, since the chips live outside its value, so the\n// answer is given to it explicitly, and the room for the cross is reserved accordingly.\nconst clearVisible = computed(() =>\n  canClear(\n    props,\n    resolvedDisabled.value,\n    selectedValues.value.length > 0 || query.value.length > 0,\n  ),\n)\n\n// The single cut-off point of a frozen field: every route into the list; a click on the\n// control, the focus, a keystroke, typing; ends up here, so `readonly` is refused once rather\n// than guarded in each handler.\nfunction openPanel() {\n  if (resolvedDisabled.value || props.readonly || open.value) return\n  closedTerm.value = null\n  open.value = true\n  highlightSelected()\n  // Told to the source after the panel is marked open; the delayed emission checks that flag\n  // before firing; which lets an outside source load its first page as the panel appears.\n  emitSearch(searchTerm.value, true)\n}\n\n// Asking for the next page as the end of the list is reached. The observer itself, its\n// re-arming after each page and the lock that stops it firing twice all live in\n// `useInfiniteScroll`; it is declared here so that closing the panel can reset it.\nconst sentinelEl = ref<HTMLElement | null>(null)\n\nconst infiniteScroll = useInfiniteScroll({\n  sentinelEl,\n  // Found by its ARIA role, which is public API, rather than by an internal class.\n  root: (sentinel) => sentinel.closest('[role=\"listbox\"]'),\n  canLoad: () => open.value && props.hasMore && !props.loading,\n  loaded: () => allOptions.value,\n  onLoadMore: () => emit('load-more'),\n})\n\n/**\n * Closes the list. The field then shows `label`: the chosen value's, unless the caller passes the\n * label of the option it has just chosen, which the value read back may not yet carry.\n */\nfunction closePanel(label = singleLabel()) {\n  if (!open.value) return\n  cancelSearch()\n  // A page that never arrived; a request that failed; must not leave the paging frozen for\n  // good, so the lock is released here.\n  infiniteScroll.reset()\n  closedTerm.value = searchTerm.value\n  open.value = false\n  activeIndex.value = -1\n  typed.value = false\n  query.value = label\n}\n\nwatch(\n  () => props.readonly || resolvedDisabled.value,\n  (frozen) => {\n    if (frozen) closePanel()\n  },\n)\n\n/**\n * Closes as soon as the focus leaves the component; the panel included, which is a descendant\n * of it even while floating above the page.\n */\nconst onFocusout = useFocusoutDismiss(rootEl, () => closePanel())\n\n/** The reader is typing: the text becomes a search, and the panel opens. */\nfunction onInput() {\n  typed.value = true\n  openPanel()\n}\n\n/**\n * With a single value chosen, the label shown in the field is selected on focus, so that typing\n * replaces it rather than appending to it; and until something IS typed, the whole list stays\n * on offer.\n */\nfunction selectQuery() {\n  if (!props.multiple && query.value) inputRef.value?.select()\n}\n\nfunction onFocus() {\n  focused.value = true\n  selectQuery()\n}\n\n/** Whether a pointer event landed on the chevron, or on the spinner standing in its place. */\nconst onChevron = (event: Event) =>\n  event.target instanceof Element &&\n  event.target.closest('.v-combobox-chevron, .v-combobox-spinner') !== null\n\n// @core\n/*\n * The chevron is not focusable, so pressing it would hand the focus to the page: the root's\n * `focusout` then closes the panel, and the click that follows reopens it. A click meant to\n * close would flash the list instead.\n */\nfunction onControlMousedown(event: MouseEvent) {\n  if (onChevron(event)) event.preventDefault()\n}\n\n/**\n * A click anywhere on the field focuses it and opens the panel; except on the chevron of an\n * open panel, which closes it.\n */\nfunction onControlClick(event: MouseEvent) {\n  if (resolvedDisabled.value) return\n  inputRef.value?.focus()\n  if (open.value && onChevron(event)) {\n    closePanel()\n    return\n  }\n  openPanel()\n  // Selected again after the click, which has just placed the caret somewhere in the middle of\n  // the label.\n  selectQuery()\n}\n\nfunction select(option: ComboboxOption) {\n  if (option.disabled || props.readonly || resolvedDisabled.value) return\n  // Remembered immediately: the option may vanish from the list; on the next search; before the\n  // parent has even passed the new value back down.\n  remember(option)\n  if (props.multiple) {\n    typed.value = false\n    model.value = toggleValue(selectedValues.value, option.value)\n    query.value = ''\n    inputRef.value?.focus()\n  } else {\n    model.value = option.value\n    closePanel(option.label)\n  }\n}\n\nfunction removeValue(value: ItemValue) {\n  if (!props.multiple || props.readonly || resolvedDisabled.value) return\n  model.value = selectedValues.value.filter((v) => v !== value)\n  inputRef.value?.focus()\n}\n\n/**\n * The clear cross was pressed. The field has already emptied the text it holds; what is left to\n * empty is the selection itself; the single value, or all the chips.\n */\nfunction onClear() {\n  model.value = props.multiple ? [] : ''\n  typed.value = false\n  // The list may still be open (a pointer press on the cross does not close it): the\n  // highlight is moved to the first option rather than dropped, or Enter would do nothing.\n  if (open.value) highlightFirst()\n  else activeIndex.value = -1\n  emit('clear')\n}\n\n// @keyboard @a11y\n// Naming the current option and never the focus itself, which stays in the field throughout;\n// Backspace on an empty field takes back the last chip, the usual gesture in a field holding\n// several values.\nfunction onKeydown(event: KeyboardEvent) {\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      if (open.value) move(1)\n      else openPanel()\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      if (open.value) move(-1)\n      else openPanel()\n      break\n    case 'Enter':\n      if (open.value && activeIndex.value >= 0) {\n        event.preventDefault()\n        const option = filtered.value[activeIndex.value]\n        if (option) select(option)\n      }\n      break\n    case 'Escape':\n      // Consumed only when it closes the list, so a surrounding VDialog stays open; on a\n      // closed list it is left to go on and close the dialog.\n      if (open.value) {\n        event.preventDefault()\n        closePanel()\n      }\n      break\n    case 'Tab':\n      closePanel()\n      break\n    case 'Backspace':\n      if (props.multiple && !query.value) {\n        const last = selectedValues.value.at(-1)\n        if (last !== undefined) removeValue(last)\n      }\n      break\n  }\n}\n\ndefineExpose({\n  /** Moves the focus to the search field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects what has been typed in the search field. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>` behind the field, for what neither of the two above covers. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-combobox\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-multiple=\"multiple ? '' : undefined\"\n    :data-collapsed=\"collapsed ? '' : undefined\"\n    :data-open=\"open ? '' : undefined\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-combobox-control\" @mousedown=\"onControlMousedown\" @click=\"onControlClick\">\n      <!--\n        The two arrangements VInput offers a field holding chips: its end controls lifted out of\n        the flow, always; the chevron and the cross stay put whether or not the input has folded\n        away; and the chips wrapping, when there are chips at all. A text display keeps the\n        field on one line and needs only the first.\n      -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"query\"\n        class=\"v-input-end-pinned\"\n        :class=\"{ 'v-input-chips': multiple && !textDisplay }\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-autocomplete=\"list\"\n        :aria-expanded=\"open\"\n        :aria-controls=\"optionsId\"\n        v-bind=\"fieldAttrs\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :invalid=\"invalid\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :placeholder=\"selectedValues.length === 0 ? placeholder : undefined\"\n        :aria-activedescendant=\"open && activeIndex >= 0 ? optionId(activeIndex) : undefined\"\n        @input=\"onInput\"\n        @keydown=\"onKeydown\"\n        @focus=\"onFocus\"\n        @blur=\"focused = false\"\n        @clear=\"onClear\"\n      >\n        <template v-if=\"multiple || $slots.start\" #start>\n          <VListboxValues\n            v-if=\"multiple\"\n            :values=\"selectedValues\"\n            :display=\"display\"\n            :max=\"max\"\n            :collapsed=\"collapsed\"\n            :overflow-text=\"overflowText\"\n            :scale=\"chipScale\"\n            :removable=\"!readonly\"\n            :disabled=\"resolvedDisabled\"\n            :label-of=\"labelOf\"\n            :option-of=\"optionOf\"\n            @remove=\"removeValue\"\n          >\n            <template v-if=\"$slots.chip\" #chip=\"chipProps\">\n              <slot name=\"chip\" v-bind=\"chipProps\" />\n            </template>\n            <template v-if=\"$slots.overflow\" #overflow=\"overflowProps\">\n              <slot name=\"overflow\" v-bind=\"overflowProps\" />\n            </template>\n          </VListboxValues>\n          <slot name=\"start\" />\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n\n        <!--\n          The chevron sits at the end of the field and turns as the panel opens; the clear cross\n          is rendered by the field itself, to its left. While loading, the spinner takes EXACTLY\n          the chevron's place; the field gives a spinner among its direct children the size of\n          an icon; so nothing shifts.\n        -->\n        <template #end>\n          <VSpinner v-if=\"loading\" class=\"v-combobox-spinner v-input-icon-end\" aria-hidden=\"true\" />\n          <VListboxChevron v-else class=\"v-combobox-chevron\" :icon=\"expandIcon\" :open=\"open\" />\n        </template>\n      </VInput>\n    </div>\n\n    <VListboxPanel\n      :id=\"optionsId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      anchor=\"--combobox-anchor\"\n      :placement=\"placement\"\n      class=\"v-combobox-panel\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :multiple=\"multiple\"\n      :virtual=\"virtual\"\n      :blocks=\"blocks\"\n      :measure=\"measureRow\"\n      @select=\"select\"\n      @highlight=\"hover\"\n    >\n      <template v-if=\"$slots.option\" #option=\"slotProps\">\n        <slot name=\"option\" v-bind=\"slotProps\" />\n      </template>\n\n      <!--\n        The order matters: loading is checked before emptiness, so that a panel waiting for an\n        answer never claims there is no result. Both are hidden from screen readers, and that is\n        not an oversight.\n      -->\n      <div v-if=\"loading && filtered.length === 0\" class=\"v-combobox-state\" aria-hidden=\"true\">\n        <slot name=\"loading\">\n          <VSpinner :label=\"resolvedLoadingText\" />\n          <span>{{ resolvedLoadingText }}</span>\n        </slot>\n      </div>\n      <div v-else-if=\"filtered.length === 0\" class=\"v-combobox-state\" aria-hidden=\"true\">\n        <slot name=\"empty\" :query=\"searchTerm\">\n          <VEmptyState\n            size=\"sm\"\n            class=\"v-combobox-empty\"\n            :icon=\"searchTerm ? searchOffIcon : inboxIcon\"\n            :title=\"resolvedEmptyText\"\n          />\n        </slot>\n      </div>\n\n      <!--\n        It has to stay a SINGLE element: rendering the spinner conditionally in its place would\n        destroy the marker and silently cancel the observation, and no further page would ever\n        be asked for.\n      -->\n      <div v-if=\"hasMore\" ref=\"sentinelEl\" class=\"v-combobox-more\" aria-hidden=\"true\">\n        <VSpinner v-if=\"loading\" :label=\"resolvedLoadingText\" />\n      </div>\n    </VListboxPanel>\n\n    <!-- The spoken counterpart of the two panel states above. It sits OUTSIDE the\n         listbox, being exactly the kind of content a listbox may not contain. -->\n    <span class=\"v-visually-hidden\" role=\"status\">{{ stateAnnouncement }}</span>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-combobox {\n    /*\n     * It is declared on the root because that is the common ancestor of the field and the\n     * panel; a panel drawn above the page remains a descendant of it in the document.\n     */\n    anchor-scope: --combobox-anchor;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-combobox-control {\n    display: block;\n  }\n\n  /*\n   * The anchor is the FIELD's box and not this wrapper's, which also holds the label and the\n   * hint: anchored to the wrapper, the panel opens a hint's height below the field, and a\n   * label's height above it once there is no room below and `flip-block` turns it over. Against\n   * the field it covers whichever of the two it lands on, which a panel belonging to a control\n   * is supposed to do.\n   */\n  .v-combobox-control .v-input-field {\n    anchor-name: --combobox-anchor;\n  }\n\n  .v-combobox-panel {\n    max-block-size: var(--vectis-control-size-combobox-list-max-block);\n  }\n\n  /*\n   * The chevron and the clear cross are pinned to the end of the field by VInput's\n   * `.v-input-end-pinned`, which also reserves their room. The chevron and the spinner take\n   * turns in the same place and occupy the same box; the field gives a spinner among its direct\n   * children the size of an icon; so swapping one for the other shifts nothing.\n   */\n  .v-combobox-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * It remains in the page and remains focusable; clicking the field or tabbing into it brings\n   * it straight back, the folded state ending as soon as it has the focus.\n   */\n  .v-combobox[data-collapsed] .v-input-control {\n    position: absolute;\n    width: 0;\n    height: 0;\n    padding: 0;\n  }\n\n  /*\n   * Under the focus the two share the row, and the line is capped at half of it so that a long\n   * selection cannot squeeze what is being typed down to nothing. Folded, the input is out of\n   * the flow and the line takes the whole field.\n   */\n  .v-combobox:not([data-collapsed]) .v-listbox-text {\n    max-inline-size: 50%;\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width, and that width travels\n   * up through the field to the root. In a grid track or a flex row sized `auto`, the component\n   * then widens its container to fit every label instead of cutting them short, and the\n   * ellipsis never shows.\n   */\n  .v-combobox:has(.v-listbox-text) {\n    min-inline-size: 0;\n  }\n\n  /* The rows saying \"nothing matches\" or \"loading\" are built like an option: they read\n     the same inherited dimensions from the panel, and the spinner follows through the\n     same block's icon context. They refuse to shrink, the panel being a bounded column\n     that would otherwise squash them. */\n  .v-combobox-state {\n    display: flex;\n    flex: none;\n    align-items: center;\n    gap: var(--control-gap);\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    font-size: var(--control-font-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * The default empty state spans the panel. `[data-size]` lifts the selector above VEmptyState's\n   * own size rules, whose sheet may load after this one.\n   */\n  .v-combobox-state > .v-combobox-empty[data-size] {\n    flex: 1;\n    padding-block: var(--vectis-space-3);\n    padding-inline: 0;\n  }\n\n  /*\n   * The foot of the list: the marker watched for the end, and the place the next-page spinner\n   * appears. It is given a real height on purpose; a box of no height at all makes the crossing\n   * it is watched for unreliable.\n   */\n  .v-combobox-more {\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    min-height: var(--vectis-control-height-xs);\n    color: var(--vectis-color-text-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-combobox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VCombobox.vue_vue_type_script_setup_true_lang.js","names":["$slots","expandMoreIcon","_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_createVNode","VInput","_mergeProps","_createSlots","_withCtx","_createBlock","VSpinner","VListboxChevron","VListboxValues","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode","VListboxPanel","_toDisplayString","VEmptyState","searchOffIcon","inboxIcon","VSpinner_default","VInput_default","VEmptyState_default","VListboxChevron_default","VListboxPanel_default","VListboxValues_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","VCombobox_vue_vue_type_script_setup_true_lang_default","expand_more","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","m","useMessages","resolvedEmptyText","computed","resolvedClearLabel","resolvedLoadingText","emit","group","inject","inputGroupKey","resolvedSize","resolvedDisabled","useControlShape","chipScale","chipScaleFor","model","useModel","useRootAttrs","iconStartClick","iconStartListener","event","fieldAttrs","forwardedAttrs","rootEl","ref","inputRef","optionsId","useId","open","query","focused","typed","selectedValues","selectionOf","normalizedOf","createNormalizedCache","normalizedLabelOf","option","searchTerm","closedTerm","panelRef","filtered","useListbox","matcher","list","q","o","needle","normalizeText","stateAnnouncement","emitSearch","cancelSearch","useDebouncedSearch","term","highlightFirst","infiniteScroll","singleLabel","value","labelOf","watch","allOptions","textDisplay","collapsed","clearVisible","canClear","openPanel","highlightSelected","sentinelEl","useInfiniteScroll","sentinel","closePanel","label","frozen","onFocusout","useFocusoutDismiss","onInput","selectQuery","onFocus","onChevron","onControlMousedown","onControlClick","select","remember","toggleValue","removeValue","v","onClear","onKeydown","move","activeIndex","last","options","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","_cache","args","createElementVNode","createVNode","mergeProps","$event","optionId","createSlots","withCtx","createBlock","_ctx","optionOf","renderSlot","normalizeProps","guardReactiveProps","chipProps","overflowProps","createCommentVNode","blocks","measureRow","hover","toDisplayString","search_off","inbox","slotProps"],"sources":["../../../src/components/VCombobox/VCombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * Keep DOM focus on the field and move aria-activedescendant through options. JavaScript\n * supplies filtering, selection and keyboard navigation unavailable to native text inputs.\n */\n\nimport { computed, inject, ref, useId, watch } from 'vue'\n\nimport VEmptyState from '../VEmptyState/VEmptyState.vue'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport { inbox as inboxIcon } from '../VIcon/icons/inbox'\nimport { search_off as searchOffIcon } from '../VIcon/icons/search_off'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport VListboxChevron from '../VListbox/VListboxChevron.vue'\nimport VListboxPanel from '../VListbox/VListboxPanel.vue'\nimport VListboxValues from '../VListbox/VListboxValues.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\nimport { toggleValue } from '../../utils/array'\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxOverflowSlotProps,\n  ListboxSeparator,\n} from '../../types'\nimport { inputGroupKey } from '../VInput/context'\n\nimport { chipScaleFor } from '../../utils/chip'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFocusoutDismiss } from '../../composables/useFocusoutDismiss'\nimport { useInfiniteScroll } from '../../composables/useInfiniteScroll'\nimport { selectionOf, useListbox } from '../../composables/useListbox'\n\nimport { canClear } from '../../composables/useClearable'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\n\nimport { useDebouncedSearch } from '../../composables/useDebouncedSearch'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport type ComboboxOption = ListboxOption\n\n/**\n * A named block of options, the equivalent of the grouping a native list offers. A\n * group none of whose options survive the search disappears entirely, its name\n * included.\n */\nexport type ComboboxGroup = ListboxGroup\n\n/**\n * A rule drawn between two blocks of options. It is purely decorative, and a separator the\n * search leaves stranded (at the top, at the bottom, or against another one) is simply not\n * drawn.\n */\nexport type ComboboxSeparator = ListboxSeparator\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type ComboboxItem = ListboxItem\n\n/**\n * How the list is narrowed as one types: by the component itself, not at all (when the\n * options already arrive filtered by a server), or by a rule of your own.\n */\nexport type ComboboxFilter = boolean | ((option: ComboboxOption, query: string) => boolean)\n\n/** Where the list opens relative to the field. */\nexport type ComboboxPlacement =\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type ComboboxSize = 'sm' | 'md' | 'lg'\n\n/**\n * How the chosen values are shown in a multiple field: one chip each, or their labels\n * joined by commas.\n */\nexport type ComboboxDisplay = 'chip' | 'text'\n\n/** What the `#option` slot receives. */\nexport type ComboboxOptionSlotProps = ListboxOptionSlotProps\n\n/** What the `#chip` slot receives. */\nexport type ComboboxChipSlotProps = ListboxChipSlotProps\n\n/** What the `#overflow` slot receives. */\nexport type ComboboxOverflowSlotProps = ListboxOverflowSlotProps\n\n/** What the `#empty` slot receives. */\nexport interface ComboboxEmptySlotProps {\n  query: string\n}\n\ninterface ComboboxProps {\n  /**\n   * What the list offers. An entry may be an option, a named block of options, or a\n   * separator; a plain list of options remains perfectly valid.\n   */\n  options: ComboboxItem[]\n  /**\n   * Allows several values to be chosen, which makes the value a list and shows what has\n   * been chosen inside the field, as chips or as text depending on `display`.\n   */\n  multiple?: boolean\n  /**\n   * How the chosen values are shown when several can be chosen: one dismissible chip each, or\n   * their labels joined by commas on a single line, cut short with an ellipsis when they run\n   * out of room.\n   */\n  display?: ComboboxDisplay\n  /**\n   * How many chosen values to show before the rest are summed up as \"+X\", as chips or as text\n   * alike. Left out, or set to 0, every value is shown.\n   */\n  max?: number\n  /**\n   * Rephrases the \"+X\" standing for the values beyond `max`, \"+5 products\" for instance.\n   * It receives the number of values being hidden.\n   */\n  overflowText?: (count: number) => string\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the field for assistive technology,\n   * so it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the field is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: ComboboxSize\n  /** What the field says while nothing is chosen and nothing has been typed. */\n  placeholder?: string\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what has been chosen without letting it be changed: nothing can be typed, the list\n   * never opens, the chips lose their crosses and no clear cross is offered.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start, before the chips when several values can\n   * be chosen. It is decorative by default and becomes a real button as soon as a\n   * `@click:icon-start` listener is attached, in which case it needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * The chevron at the end of the field, which turns as the list opens: an icon name, or an\n   * explicit render.\n   */\n  expandIcon?: IconSource\n  /** Offers a cross that empties both the selection and the search. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The title of the empty state the panel shows when the search matches nothing. It is also\n   * what a screen reader hears, even when the `#empty` slot draws something else: set both\n   * together.\n   */\n  emptyText?: string\n  /** How the list is narrowed as one types. */\n  filter?: ComboboxFilter\n  /**\n   * How long to wait before telling the source what is being searched for, in\n   * milliseconds. Zero tells it at once, which suits a source that is not a network\n   * request.\n   */\n  searchDebounce?: number\n  /**\n   * Says that something is being loaded. Either way the field replaces its chevron with a\n   * spinner.\n   */\n  loading?: boolean\n  /**\n   * What is said while loading, and what the spinner is announced as. A screen reader hears\n   * it even when the `#loading` slot draws something else: set both together.\n   */\n  loadingText?: string\n  /**\n   * Says that there are more pages to come, which makes the component ask for the next one as\n   * the end of the list comes into view.\n   */\n  hasMore?: boolean\n  /**\n   * Renders only the rows near the visible part of the panel, for lists of thousands of options.\n   * Rows are measured as they render, so a custom `#option` may vary in height. Options are then\n   * announced with their position in the list.\n   */\n  virtual?: boolean\n  /** Where the list opens relative to the field. */\n  placement?: ComboboxPlacement\n}\n\nconst props = withDefaults(defineProps<ComboboxProps>(), {\n  multiple: false,\n  display: 'chip',\n  max: undefined,\n  overflowText: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: 'md',\n  placeholder: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  expandIcon: () => expandMoreIcon,\n  clearable: false,\n  clearLabel: undefined,\n  emptyText: undefined,\n  filter: true,\n  searchDebounce: 250,\n  loading: false,\n  loadingText: undefined,\n  hasMore: false,\n  virtual: false,\n  placement: 'bottom-start',\n})\n\nconst m = useMessages()\nconst resolvedEmptyText = computed(() => props.emptyText ?? m.value.combobox.empty)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.combobox.clear)\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.common.loading)\n\nconst emit = defineEmits<{\n  /** What is being searched for, to be sent to the source. */\n  search: [query: string]\n  /** The end of the list has come into view: send the next page. */\n  'load-more': []\n  /** The clear cross emptied the selection and the search. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after the chips standing for the chosen\n   * values rather than in their place.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the ones the field owns: the clear\n   * cross and the chevron.\n   */\n  'value-end'?(): unknown\n  /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */\n  option?(props: ComboboxOptionSlotProps): unknown\n  /** Replaces the chip standing for one chosen value. */\n  chip?(props: ComboboxChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: ComboboxOverflowSlotProps): unknown\n  /** What the panel shows when nothing matches. It receives the term that was searched. */\n  empty?(props: ComboboxEmptySlotProps): unknown\n  /** What the panel shows while loading its first options. */\n  loading?(): unknown\n}>()\n\n// Everything below reads the RESOLVED values and never the props: the chips, the panel and the\n// field would otherwise come out at three different scales inside the same row.\nconst group = inject(inputGroupKey, null)\nconst { size: resolvedSize, disabled: resolvedDisabled } = useControlShape(props, group)\n\n// The size and the HEIGHT of the chips sitting inside the field, worked out\n// once in `utils/chip.ts` and shared with VFileInput. The height is set inline below\n// rather than restated as a table of CSS rules: it is the height the field forces on its\n// input, and deriving both from the same size is what stops them drifting apart.\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value))\n\n/** The chosen option's `value`, or the list of them when `multiple` is set. */\nconst model = defineModel<ItemValue | ItemValue[]>({ default: '' })\n\n// `class` and `style` stay on the wrapper, where a consumer expects to style the component;\n// everything else; a name above all; goes down to the text field, which is the element\n// assistive technology treats as the combobox.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\n\n/** What reaches the field: the consumer's own attributes, plus that listener. */\nconst fieldAttrs = computed(() => ({ ...forwardedAttrs.value, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\n// One generated identifier serves twice: as the panel's own id, which the field points\n// at, and as the prefix of every option's id. The two strings can never collide, one\n// being a prefix of longer ones.\nconst optionsId = useId()\n\nconst open = ref(false)\nconst query = ref('')\nconst focused = ref(false)\n// The text in the field serves two purposes at once: it SHOWS the chosen label when a single\n// value is picked, and it is what one searches with. This flag tells the two apart; while it is\n// false the text is merely a label and narrows nothing, so reopening the panel offers the whole\n// list again.\nconst typed = ref(false)\n\nconst selectedValues = computed(() => selectionOf(model.value, props.multiple))\n\n/*\n * Reading the label on every call is what keeps the filter reactive: flattening the options\n * only ever touches the containers, so a label changed in place would go unnoticed by anything\n * keyed on the list.\n */\nconst normalizedOf = createNormalizedCache<ComboboxOption>()\nconst normalizedLabelOf = (option: ComboboxOption) => normalizedOf(option, option.label)\n\n// ONE search term, read both by the local filter and by what is sent to the source: the\n// list on screen and the request in flight therefore cannot describe different searches.\n// With nothing typed the term is empty, so a label merely being displayed never narrows\n// the list.\nconst searchTerm = computed(() => (typed.value ? query.value.trim() : ''))\n\n// Closing empties `searchTerm` (the typing flag drops) in the same tick as it hides the panel,\n// but the panel fades out rather than vanishing. Filtered on the live term, the list would\n// spring back to every option during that fade, and the panel grow under the pointer that just\n// chose.\nconst closedTerm = ref<string | null>(null)\n\nconst panelRef = ref<InstanceType<typeof VListboxPanel> | null>(null)\n\nconst {\n  allOptions,\n  visible: filtered,\n  optionOf,\n  labelOf,\n  remember,\n  activeIndex,\n  optionId,\n  highlightFirst,\n  highlightSelected,\n  move,\n  hover,\n  blocks,\n  measureRow,\n} = useListbox({\n  items: () => props.options,\n  filter: (list) => {\n    const matcher = props.filter\n    if (matcher === false) return list\n    const q = closedTerm.value ?? searchTerm.value\n    if (!q) return list\n    if (typeof matcher === 'function') return list.filter((o) => matcher(o, q))\n    const needle = normalizeText(q)\n    return list.filter((o) => normalizedLabelOf(o).includes(needle))\n  },\n  selected: () => selectedValues.value,\n  open: () => open.value,\n  id: optionsId,\n  panelEl: () => panelRef.value?.el ?? null,\n  virtual: () => props.virtual,\n  hasMore: () => props.hasMore,\n  size: () => resolvedSize.value,\n})\n\n// @a11y\n/**\n * What is announced about the state of the panel; that nothing matches, or that something is\n * loading.\n */\nconst stateAnnouncement = computed(() => {\n  if (!open.value || filtered.value.length > 0) return ''\n  return props.loading ? resolvedLoadingText.value : resolvedEmptyText.value\n})\n\nconst { request: emitSearch, cancel: cancelSearch } = useDebouncedSearch({\n  delay: () => props.searchDebounce,\n  active: () => open.value,\n  report: (term) => emit('search', term),\n})\n\nwatch(searchTerm, (term) => {\n  if (!open.value) return\n  // A new search means a new list, so the highlight cannot survive it: with an outside source\n  // the options are replaced wholesale, and the old position would name a completely unrelated\n  // option. It is moved to the first available option rather than dropped altogether, and that\n  // matters when the filtering is left to the source: the visible list keeps the very same\n  // reference until the answer arrives, so the watcher below would never fire and Enter would\n  // do nothing in the meantime.\n  highlightFirst()\n  // The page asked for under the previous term will never arrive, and the first page of the new\n  // one may be exactly as long as the list it replaces; which the paging would not recognise as\n  // an arrival.\n  infiniteScroll.restart()\n  emitSearch(term)\n})\n\n// With a single value, the field shows its label as ordinary text whenever it is not being\n// edited. Read through `selectedValues`, which knows that a number is a value even at zero: a\n// test on the string type would leave a numeric value unlabelled.\nfunction singleLabel() {\n  const value = props.multiple ? undefined : selectedValues.value[0]\n  return value === undefined ? '' : labelOf(value)\n}\n\nquery.value = singleLabel()\n\n// Refresh copied selection labels when options arrive or the parent updates the value.\n// Post-flush timing reads the accepted model after rendering.\nwatch(\n  [allOptions, selectedValues],\n  () => {\n    if (props.multiple || open.value || typed.value) return\n    query.value = singleLabel()\n  },\n  { flush: 'post' },\n)\n\n/** The chosen values are spelled out as one line of text rather than drawn as chips. */\nconst textDisplay = computed(() => props.multiple && props.display === 'text')\n\n// A read-only TEXT display keeps it folded under the focus too: nothing can be typed, and the\n// input's share of the row would only cut the line of values short for nothing.\nconst collapsed = computed(\n  () =>\n    props.multiple &&\n    selectedValues.value.length > 0 &&\n    (!focused.value || (textDisplay.value && props.readonly)),\n)\n\n// The field cannot work that out for itself, since the chips live outside its value, so the\n// answer is given to it explicitly, and the room for the cross is reserved accordingly.\nconst clearVisible = computed(() =>\n  canClear(\n    props,\n    resolvedDisabled.value,\n    selectedValues.value.length > 0 || query.value.length > 0,\n  ),\n)\n\n// The single cut-off point of a frozen field: every route into the list; a click on the\n// control, the focus, a keystroke, typing; ends up here, so `readonly` is refused once rather\n// than guarded in each handler.\nfunction openPanel() {\n  if (resolvedDisabled.value || props.readonly || open.value) return\n  closedTerm.value = null\n  open.value = true\n  highlightSelected()\n  // Told to the source after the panel is marked open; the delayed emission checks that flag\n  // before firing; which lets an outside source load its first page as the panel appears.\n  emitSearch(searchTerm.value, true)\n}\n\n// Asking for the next page as the end of the list is reached. The observer itself, its\n// re-arming after each page and the lock that stops it firing twice all live in\n// `useInfiniteScroll`; it is declared here so that closing the panel can reset it.\nconst sentinelEl = ref<HTMLElement | null>(null)\n\nconst infiniteScroll = useInfiniteScroll({\n  sentinelEl,\n  // Found by its ARIA role, which is public API, rather than by an internal class.\n  root: (sentinel) => sentinel.closest('[role=\"listbox\"]'),\n  canLoad: () => open.value && props.hasMore && !props.loading,\n  loaded: () => allOptions.value,\n  onLoadMore: () => emit('load-more'),\n})\n\n/**\n * Closes the list. The field then shows `label`: the chosen value's, unless the caller passes the\n * label of the option it has just chosen, which the value read back may not yet carry.\n */\nfunction closePanel(label = singleLabel()) {\n  if (!open.value) return\n  cancelSearch()\n  // A page that never arrived; a request that failed; must not leave the paging frozen for\n  // good, so the lock is released here.\n  infiniteScroll.reset()\n  closedTerm.value = searchTerm.value\n  open.value = false\n  activeIndex.value = -1\n  typed.value = false\n  query.value = label\n}\n\nwatch(\n  () => props.readonly || resolvedDisabled.value,\n  (frozen) => {\n    if (frozen) closePanel()\n  },\n)\n\n/**\n * Closes as soon as the focus leaves the component; the panel included, which is a descendant\n * of it even while floating above the page.\n */\nconst onFocusout = useFocusoutDismiss(rootEl, () => closePanel())\n\n/** The reader is typing: the text becomes a search, and the panel opens. */\nfunction onInput() {\n  typed.value = true\n  openPanel()\n}\n\n/**\n * With a single value chosen, the label shown in the field is selected on focus, so that typing\n * replaces it rather than appending to it; and until something IS typed, the whole list stays\n * on offer.\n */\nfunction selectQuery() {\n  if (!props.multiple && query.value) inputRef.value?.select()\n}\n\nfunction onFocus() {\n  focused.value = true\n  selectQuery()\n}\n\n/** Whether a pointer event landed on the chevron, or on the spinner standing in its place. */\nconst onChevron = (event: Event) =>\n  event.target instanceof Element &&\n  event.target.closest('.v-combobox-chevron, .v-combobox-spinner') !== null\n\n// @core\n/*\n * The chevron is not focusable, so pressing it would hand the focus to the page: the root's\n * `focusout` then closes the panel, and the click that follows reopens it. A click meant to\n * close would flash the list instead.\n */\nfunction onControlMousedown(event: MouseEvent) {\n  if (onChevron(event)) event.preventDefault()\n}\n\n/**\n * A click anywhere on the field focuses it and opens the panel; except on the chevron of an\n * open panel, which closes it.\n */\nfunction onControlClick(event: MouseEvent) {\n  if (resolvedDisabled.value) return\n  inputRef.value?.focus()\n  if (open.value && onChevron(event)) {\n    closePanel()\n    return\n  }\n  openPanel()\n  // Selected again after the click, which has just placed the caret somewhere in the middle of\n  // the label.\n  selectQuery()\n}\n\nfunction select(option: ComboboxOption) {\n  if (option.disabled || props.readonly || resolvedDisabled.value) return\n  // Remembered immediately: the option may vanish from the list; on the next search; before the\n  // parent has even passed the new value back down.\n  remember(option)\n  if (props.multiple) {\n    typed.value = false\n    model.value = toggleValue(selectedValues.value, option.value)\n    query.value = ''\n    inputRef.value?.focus()\n  } else {\n    model.value = option.value\n    closePanel(option.label)\n  }\n}\n\nfunction removeValue(value: ItemValue) {\n  if (!props.multiple || props.readonly || resolvedDisabled.value) return\n  model.value = selectedValues.value.filter((v) => v !== value)\n  inputRef.value?.focus()\n}\n\n/**\n * The clear cross was pressed. The field has already emptied the text it holds; what is left to\n * empty is the selection itself; the single value, or all the chips.\n */\nfunction onClear() {\n  model.value = props.multiple ? [] : ''\n  typed.value = false\n  // The list may still be open (a pointer press on the cross does not close it): the\n  // highlight is moved to the first option rather than dropped, or Enter would do nothing.\n  if (open.value) highlightFirst()\n  else activeIndex.value = -1\n  emit('clear')\n}\n\n// @keyboard @a11y\n// Naming the current option and never the focus itself, which stays in the field throughout;\n// Backspace on an empty field takes back the last chip, the usual gesture in a field holding\n// several values.\nfunction onKeydown(event: KeyboardEvent) {\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      if (open.value) move(1)\n      else openPanel()\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      if (open.value) move(-1)\n      else openPanel()\n      break\n    case 'Enter':\n      if (open.value && activeIndex.value >= 0) {\n        event.preventDefault()\n        const option = filtered.value[activeIndex.value]\n        if (option) select(option)\n      }\n      break\n    case 'Escape':\n      // Consumed only when it closes the list, so a surrounding VDialog stays open; on a\n      // closed list it is left to go on and close the dialog.\n      if (open.value) {\n        event.preventDefault()\n        closePanel()\n      }\n      break\n    case 'Tab':\n      closePanel()\n      break\n    case 'Backspace':\n      if (props.multiple && !query.value) {\n        const last = selectedValues.value.at(-1)\n        if (last !== undefined) removeValue(last)\n      }\n      break\n  }\n}\n\ndefineExpose({\n  /** Moves the focus to the search field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects what has been typed in the search field. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>` behind the field, for what neither of the two above covers. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-combobox\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-multiple=\"multiple ? '' : undefined\"\n    :data-collapsed=\"collapsed ? '' : undefined\"\n    :data-open=\"open ? '' : undefined\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-combobox-control\" @mousedown=\"onControlMousedown\" @click=\"onControlClick\">\n      <!--\n        The two arrangements VInput offers a field holding chips: its end controls lifted out of\n        the flow, always; the chevron and the cross stay put whether or not the input has folded\n        away; and the chips wrapping, when there are chips at all. A text display keeps the\n        field on one line and needs only the first.\n      -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"query\"\n        class=\"v-input-end-pinned\"\n        :class=\"{ 'v-input-chips': multiple && !textDisplay }\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-autocomplete=\"list\"\n        :aria-expanded=\"open\"\n        :aria-controls=\"optionsId\"\n        v-bind=\"fieldAttrs\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :size=\"resolvedSize\"\n        :invalid=\"invalid\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :placeholder=\"selectedValues.length === 0 ? placeholder : undefined\"\n        :aria-activedescendant=\"open && activeIndex >= 0 ? optionId(activeIndex) : undefined\"\n        @input=\"onInput\"\n        @keydown=\"onKeydown\"\n        @focus=\"onFocus\"\n        @blur=\"focused = false\"\n        @clear=\"onClear\"\n      >\n        <template v-if=\"multiple || $slots.start\" #start>\n          <VListboxValues\n            v-if=\"multiple\"\n            :values=\"selectedValues\"\n            :display=\"display\"\n            :max=\"max\"\n            :collapsed=\"collapsed\"\n            :overflow-text=\"overflowText\"\n            :scale=\"chipScale\"\n            :removable=\"!readonly\"\n            :disabled=\"resolvedDisabled\"\n            :label-of=\"labelOf\"\n            :option-of=\"optionOf\"\n            @remove=\"removeValue\"\n          >\n            <template v-if=\"$slots.chip\" #chip=\"chipProps\">\n              <slot name=\"chip\" v-bind=\"chipProps\" />\n            </template>\n            <template v-if=\"$slots.overflow\" #overflow=\"overflowProps\">\n              <slot name=\"overflow\" v-bind=\"overflowProps\" />\n            </template>\n          </VListboxValues>\n          <slot name=\"start\" />\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n\n        <!--\n          The chevron sits at the end of the field and turns as the panel opens; the clear cross\n          is rendered by the field itself, to its left. While loading, the spinner takes EXACTLY\n          the chevron's place; the field gives a spinner among its direct children the size of\n          an icon; so nothing shifts.\n        -->\n        <template #end>\n          <VSpinner v-if=\"loading\" class=\"v-combobox-spinner v-input-icon-end\" aria-hidden=\"true\" />\n          <VListboxChevron v-else class=\"v-combobox-chevron\" :icon=\"expandIcon\" :open=\"open\" />\n        </template>\n      </VInput>\n    </div>\n\n    <VListboxPanel\n      :id=\"optionsId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      anchor=\"--combobox-anchor\"\n      :placement=\"placement\"\n      class=\"v-combobox-panel\"\n      :size=\"resolvedSize\"\n      :multiple=\"multiple\"\n      :virtual=\"virtual\"\n      :blocks=\"blocks\"\n      :measure=\"measureRow\"\n      @select=\"select\"\n      @highlight=\"hover\"\n    >\n      <template v-if=\"$slots.option\" #option=\"slotProps\">\n        <slot name=\"option\" v-bind=\"slotProps\" />\n      </template>\n\n      <!--\n        The order matters: loading is checked before emptiness, so that a panel waiting for an\n        answer never claims there is no result. Both are hidden from screen readers, and that is\n        not an oversight.\n      -->\n      <div v-if=\"loading && filtered.length === 0\" class=\"v-combobox-state\" aria-hidden=\"true\">\n        <slot name=\"loading\">\n          <VSpinner :label=\"resolvedLoadingText\" />\n          <span>{{ resolvedLoadingText }}</span>\n        </slot>\n      </div>\n      <div v-else-if=\"filtered.length === 0\" class=\"v-combobox-state\" aria-hidden=\"true\">\n        <slot name=\"empty\" :query=\"searchTerm\">\n          <VEmptyState\n            size=\"sm\"\n            class=\"v-combobox-empty\"\n            :icon=\"searchTerm ? searchOffIcon : inboxIcon\"\n            :title=\"resolvedEmptyText\"\n          />\n        </slot>\n      </div>\n\n      <!--\n        It has to stay a SINGLE element: rendering the spinner conditionally in its place would\n        destroy the marker and silently cancel the observation, and no further page would ever\n        be asked for.\n      -->\n      <div v-if=\"hasMore\" ref=\"sentinelEl\" class=\"v-combobox-more\" aria-hidden=\"true\">\n        <VSpinner v-if=\"loading\" :label=\"resolvedLoadingText\" />\n      </div>\n    </VListboxPanel>\n\n    <!-- The spoken counterpart of the two panel states above. It sits OUTSIDE the\n         listbox, being exactly the kind of content a listbox may not contain. -->\n    <span class=\"v-visually-hidden\" role=\"status\">{{ stateAnnouncement }}</span>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-combobox {\n    /*\n     * It is declared on the root because that is the common ancestor of the field and the\n     * panel; a panel drawn above the page remains a descendant of it in the document.\n     */\n    anchor-scope: --combobox-anchor;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-combobox-control {\n    display: block;\n  }\n\n  /*\n   * The anchor is the FIELD's box and not this wrapper's, which also holds the label and the\n   * hint: anchored to the wrapper, the panel opens a hint's height below the field, and a\n   * label's height above it once there is no room below and `flip-block` turns it over. Against\n   * the field it covers whichever of the two it lands on, which a panel belonging to a control\n   * is supposed to do.\n   */\n  .v-combobox-control .v-input-field {\n    anchor-name: --combobox-anchor;\n  }\n\n  .v-combobox-panel {\n    max-block-size: var(--vectis-control-size-combobox-list-max-block);\n  }\n\n  /*\n   * The chevron and the clear cross are pinned to the end of the field by VInput's\n   * `.v-input-end-pinned`, which also reserves their room. The chevron and the spinner take\n   * turns in the same place and occupy the same box; the field gives a spinner among its direct\n   * children the size of an icon; so swapping one for the other shifts nothing.\n   */\n  .v-combobox-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * It remains in the page and remains focusable; clicking the field or tabbing into it brings\n   * it straight back, the folded state ending as soon as it has the focus.\n   */\n  .v-combobox[data-collapsed] .v-input-control {\n    position: absolute;\n    width: 0;\n    height: 0;\n    padding: 0;\n  }\n\n  /*\n   * Under the focus the two share the row, and the line is capped at half of it so that a long\n   * selection cannot squeeze what is being typed down to nothing. Folded, the input is out of\n   * the flow and the line takes the whole field.\n   */\n  .v-combobox:not([data-collapsed]) .v-listbox-text {\n    max-inline-size: 50%;\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width, and that width travels\n   * up through the field to the root. In a grid track or a flex row sized `auto`, the component\n   * then widens its container to fit every label instead of cutting them short, and the\n   * ellipsis never shows.\n   */\n  .v-combobox:has(.v-listbox-text) {\n    min-inline-size: 0;\n  }\n\n  /* The rows saying \"nothing matches\" or \"loading\" are built like an option: they read\n     the same inherited dimensions from the panel, and the spinner follows through the\n     same block's icon context. They refuse to shrink, the panel being a bounded column\n     that would otherwise squash them. */\n  .v-combobox-state {\n    display: flex;\n    flex: none;\n    align-items: center;\n    gap: var(--control-gap);\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    font-size: var(--control-font-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * The default empty state spans the panel. `[data-size]` lifts the selector above VEmptyState's\n   * own size rules, whose sheet may load after this one.\n   */\n  .v-combobox-state > .v-combobox-empty[data-size] {\n    flex: 1;\n    padding-block: var(--vectis-space-3);\n    padding-inline: 0;\n  }\n\n  /*\n   * The foot of the list: the marker watched for the end, and the place the next-page spinner\n   * appears. It is given a real height on purpose; a box of no height at all makes the crossing\n   * it is watched for unreliable.\n   */\n  .v-combobox-more {\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    min-height: var(--vectis-control-height-xs);\n    color: var(--vectis-color-text-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-combobox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}