@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{PowerSearch-DHoiObLn.js → PowerSearch-BoAMdFaT.js}

@@ -1,26 +1,32 @@
-import { t as _sfc_main$5 } from "./Button-B6Hj_O_s.js";
-import { t as useAnnounce } from "./announce-Cnio10Wk.js";
+import { t as _sfc_main$5 } from "./Button-ONOoHdkg.js";
+import { r as truncateCharacters, t as characterCount } from "./characters-wTnzjkkR.js";
+import { t as useAnnounce } from "./announce-B210eJVf.js";
 import { t as createStaticSource } from "./useAsyncSource-Gk0VtE7_.js";
-import { n as useDismiss } from "./usePositionedLayer-Cru9_00b.js";
-import { a as useAstryxLocale, o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { n as useDismiss } from "./usePositionedLayer-B7cvG-_v.js";
+import { o as useAstryxLocale, s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { i as useLayerGutter } from "./context-M-er0-Rk.js";
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
-import { t as _sfc_main$6 } from "./Tooltip-C4Vaqd3G.js";
-import { t as _sfc_main$7 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$8 } from "./Field-D5gUEGw4.js";
-import { t as _sfc_main$9 } from "./DateInput-u2XKccpK.js";
-import { t as _sfc_main$10 } from "./DateRangeInput-u7LhH6up.js";
-import { t as _sfc_main$11 } from "./DateTimeInput-DHp683jZ.js";
-import { t as _sfc_main$12 } from "./Token-DsntTYhQ.js";
-import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-DwztMNjP.js";
-import { t as _sfc_main$13 } from "./MultiSelector-BeV98x7X.js";
-import { t as _sfc_main$14 } from "./NumberInput-AZ9x3oja.js";
-import { t as _sfc_main$15 } from "./Selector-DuVozKNq.js";
-import { r as useTypeaheadMenu } from "./TypeaheadMenu-DBW6rHeO.js";
-import { t as _sfc_main$16 } from "./TextInput-zFT1_qgI.js";
-import { t as _sfc_main$17 } from "./TimeInput-S8n946tp.js";
-import { t as _sfc_main$18 } from "./Tokenizer-41p035dX.js";
-import { t as _sfc_main$19 } from "./Typeahead-k3xhFxkr.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { t as useResolvedLabelHidden } from "./useResolvedLabelHidden-B2rlWiaI.js";
+import { t as _sfc_main$6 } from "./Tooltip-sAM8i1eO.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$7 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$8 } from "./Field--OEsLBfE.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { t as _sfc_main$9 } from "./DateInput-BjLdmYor.js";
+import { t as _sfc_main$10 } from "./DateRangeInput-Br3wVEfD.js";
+import { t as _sfc_main$11 } from "./DateTimeInput-CAZBwoRe.js";
+import { t as _sfc_main$12 } from "./Token-BfS4vi__.js";
+import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-DGxxKHZb.js";
+import { t as _sfc_main$13 } from "./MultiSelector-DuVatmq5.js";
+import { n as resolveNumberInputCommit, t as _sfc_main$14 } from "./NumberInput-B0vzOg3N.js";
+import { t as _sfc_main$15 } from "./Selector-CPISLzp7.js";
+import { i as useTypeaheadMenu } from "./TypeaheadMenu-BQlMrfqX.js";
+import { t as _sfc_main$16 } from "./TextInput-CI96einV.js";
+import { t as _sfc_main$17 } from "./TimeInput-Bw_lHS4M.js";
+import { t as _sfc_main$18 } from "./Tokenizer-Ci3E5bvP.js";
+import { t as _sfc_main$19 } from "./Typeahead-D4JjvjK4.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import "../styles/layer.css";
 import "../styles/visually-hidden-utility.css";
 import "../styles/typeahead.css";
 import "../styles/power-search.css";
@@ -118,9 +124,7 @@ function createPowerSearchLookup(config) {
 //#endregion
 //#region src/PowerSearch/format.ts
 function truncate(value, maxLength) {
-	const chars = Array.from(value);
-	if (chars.length <= maxLength) return value;
-	return `${chars.slice(0, Math.max(0, maxLength)).join("")}…`;
+	return truncateCharacters(value, maxLength);
 }
 function enumLabel(value, values) {
 	return values.find((item) => item.value === value)?.label ?? value;
@@ -153,7 +157,7 @@ function joinOrCount(labels, maxLength, countLabel) {
 	if (labels.length === 0) return "";
 	if (labels.length === 1) return truncate(labels[0] ?? "", maxLength);
 	const joined = labels.join(", ");
-	if (Array.from(joined).length <= maxLength) return joined;
+	if (characterCount(joined) <= maxLength) return joined;
 	return countLabel(labels.length);
 }
 function formatFilterValue(operatorValue, filterValue, maxLength, messages, locale, timeZone) {
@@ -226,8 +230,11 @@ function resolveOperatorLabel(operator, messages) {
 * 视口放不下 400 时，下限让给视口。只有被 720 压窄时，才改贴打开控件更近的外缘。
 */
 function resolveEditorPlacement(input) {
-	const inset = input.viewportInset ?? 8;
-	const available = Math.max(0, input.viewportWidth - inset * 2);
+	const fallback = input.viewportInset ?? 16;
+	const inlineStart = input.inlineStart ?? fallback;
+	const inlineEnd = input.inlineEnd ?? fallback;
+	const blockInset = input.blockInset ?? fallback;
+	const available = Math.max(0, input.viewportWidth - inlineStart - inlineEnd);
 	const floor = Math.min(400, available);
 	const ceiling = Math.min(720, available);
 	let width = input.outer.width;
@@ -244,13 +251,13 @@ function resolveEditorPlacement(input) {
 		else edge = input.direction === "rtl" ? "right" : "left";
 	}
 	let left = edge === "left" ? input.outer.left : input.outer.right - width;
-	const maxLeft = input.viewportWidth - inset - width;
-	if (left < inset) left = inset;
-	if (left > maxLeft) left = Math.max(inset, maxLeft);
+	const maxLeft = input.viewportWidth - inlineEnd - width;
+	if (left < inlineStart) left = inlineStart;
+	if (left > maxLeft) left = Math.max(inlineStart, maxLeft);
 	const gap = 4;
 	const estimatedHeight = 280;
 	let top = input.anchorBottom + gap;
-	if (top + estimatedHeight > input.viewportHeight - inset && input.anchorTop - gap - estimatedHeight > inset) top = input.anchorTop - gap - estimatedHeight;
+	if (top + estimatedHeight > input.viewportHeight - blockInset && input.anchorTop - gap - estimatedHeight > blockInset) top = input.anchorTop - gap - estimatedHeight;
 	return {
 		width,
 		capped,
@@ -260,6 +267,241 @@ function resolveEditorPlacement(input) {
 	};
 }
 //#endregion
+//#region src/PowerSearch/menuPresentation.ts
+function powerSearchGroupLabel(entries, index) {
+	const group = entries[index]?.item.auxiliaryData?.group;
+	if (group == null || group === "") return void 0;
+	return group !== (index > 0 ? entries[index - 1]?.item.auxiliaryData?.group : void 0) ? group : void 0;
+}
+function powerSearchItemIcon(item, lookup) {
+	const data = item.auxiliaryData;
+	const type = (data?.operatorKey ? lookup.getOperator(data.fieldKey, data.operatorKey) : void 0)?.value.type;
+	if (type === "date_absolute" || type === "date_range" || type === "date_relative") return "calendar";
+	if (type === "time") return "clock";
+	if (type === "enum" || type === "enum_list") return "funnel";
+	return "search";
+}
+//#endregion
+//#region src/PowerSearch/PowerSearchToken.vue
+const _hoisted_1$4 = { class: "astryx-power-search-token-value" };
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+	name: "AstryxPowerSearchToken",
+	__name: "PowerSearchToken",
+	props: {
+		fieldLabel: {},
+		operator: {},
+		filter: {},
+		maxLength: {},
+		messages: {},
+		locale: {},
+		timeZone: {},
+		size: {},
+		disabled: { type: Boolean },
+		removable: { type: Boolean }
+	},
+	emits: ["activate", "remove"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const operatorLabel = computed(() => resolveOperatorLabel(props.operator, props.messages));
+		const tokenLabel = computed(() => `${props.fieldLabel}: ${operatorLabel.value}`);
+		const valueText = computed(() => {
+			const room = Math.max(props.maxLength - characterCount(props.fieldLabel) - characterCount(operatorLabel.value), 10);
+			return formatFilterValue(props.operator.value, props.filter.value, room, props.messages, props.locale, props.timeZone);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$12, {
+				label: tokenLabel.value,
+				size: __props.size,
+				disabled: __props.disabled,
+				removable: __props.removable,
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("activate")),
+				onRemove: _cache[1] || (_cache[1] = ($event) => emit("remove"))
+			}, createSlots({ _: 2 }, [valueText.value ? {
+				name: "end",
+				fn: withCtx(() => [createElementVNode("span", _hoisted_1$4, toDisplayString(valueText.value), 1)]),
+				key: "0"
+			} : void 0]), 1032, [
+				"label",
+				"size",
+				"disabled",
+				"removable"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/PowerSearch/source.ts
+const MAX_BROWSE_ITEMS = 1e3;
+function resolveValueMatches(operator, rawValue) {
+	const kind = operator.value.type;
+	if (kind === "string") return [{
+		displayValue: rawValue,
+		filterValue: {
+			type: "string",
+			value: rawValue
+		},
+		quoted: true
+	}];
+	if (kind === "string_list") return [{
+		displayValue: rawValue,
+		filterValue: {
+			type: "string_list",
+			value: [rawValue]
+		},
+		quoted: true
+	}];
+	if (kind === "enum" || kind === "enum_list") {
+		const lower = rawValue.toLowerCase();
+		return operator.value.values.filter((item) => item.label.toLowerCase().includes(lower)).map((item) => ({
+			displayValue: item.label,
+			filterValue: kind === "enum" ? {
+				type: "enum",
+				value: item.value
+			} : {
+				type: "enum_list",
+				value: [item.value]
+			},
+			quoted: false
+		}));
+	}
+	return [];
+}
+function browseItems(lookup) {
+	const grouped = /* @__PURE__ */ new Map();
+	const ungrouped = [];
+	for (const field of lookup.getVisibleFields()) {
+		const operator = lookup.getDefaultOperator(field.key);
+		const item = {
+			id: field.key,
+			label: field.label,
+			description: field.description,
+			auxiliaryData: {
+				fieldKey: field.key,
+				operatorKey: operator?.key,
+				group: field.group
+			}
+		};
+		if (field.group) {
+			const bucket = grouped.get(field.group) ?? [];
+			bucket.push(item);
+			grouped.set(field.group, bucket);
+		} else ungrouped.push(item);
+	}
+	const ordered = [...ungrouped];
+	for (const items of grouped.values()) ordered.push(...items);
+	return ordered.slice(0, MAX_BROWSE_ITEMS);
+}
+function searchPowerSearchFields(lookup, query, messages, maxTypedResults) {
+	const trimmed = query.trim();
+	if (trimmed === "") return browseItems(lookup);
+	const lower = trimmed.toLowerCase();
+	const results = [];
+	const seen = /* @__PURE__ */ new Set();
+	const labelOf = (operator) => resolveOperatorLabel(operator, messages);
+	for (const field of lookup.getVisibleFields()) {
+		if (field.typeaheadMinQueryLength != null && lower.length < field.typeaheadMinQueryLength) continue;
+		if ((field.label.toLowerCase().includes(lower) || field.typeaheadAliases?.some((alias) => alias.toLowerCase().includes(lower)) === true) && !seen.has(field.key)) {
+			seen.add(field.key);
+			const operator = lookup.getDefaultOperator(field.key);
+			results.push({
+				id: field.key,
+				label: field.label,
+				description: field.description,
+				auxiliaryData: {
+					fieldKey: field.key,
+					operatorKey: operator?.key,
+					group: field.group
+				}
+			});
+		}
+		for (const operator of field.operators) {
+			const combined = `${field.label} ${labelOf(operator)}`.toLowerCase();
+			const id = `${field.key}:${operator.key}`;
+			if (combined.includes(lower) && !seen.has(id)) {
+				seen.add(id);
+				results.push({
+					id,
+					label: `${field.label} ${labelOf(operator)}`,
+					description: field.description,
+					auxiliaryData: {
+						fieldKey: field.key,
+						operatorKey: operator.key,
+						group: field.group
+					}
+				});
+			}
+		}
+	}
+	for (const field of lookup.getVisibleFields()) {
+		if (field.isValueMatchAllowed === false) continue;
+		const fieldLabel = field.label.toLowerCase();
+		let exactOperator = false;
+		for (const operator of field.operators) {
+			const prefix = `${fieldLabel} ${labelOf(operator).toLowerCase()} `;
+			if (!lower.startsWith(prefix) || lower.length <= prefix.length) continue;
+			const matches = resolveValueMatches(operator, trimmed.slice(prefix.length));
+			if (matches.length > 0) exactOperator = true;
+			for (const match of matches) {
+				const id = `${field.key}:${operator.key}:value:${match.displayValue}`;
+				if (seen.has(id)) continue;
+				seen.add(id);
+				const shown = match.quoted ? `"${match.displayValue}"` : match.displayValue;
+				results.push({
+					id,
+					label: `${field.label} ${labelOf(operator)} ${shown}`,
+					auxiliaryData: {
+						fieldKey: field.key,
+						operatorKey: operator.key,
+						filterValue: match.filterValue
+					}
+				});
+			}
+		}
+		const fieldPrefix = `${fieldLabel} `;
+		if (!exactOperator && lower.startsWith(fieldPrefix) && lower.length > fieldPrefix.length) {
+			const remainder = lower.slice(fieldPrefix.length);
+			if (!field.operators.some((operator) => labelOf(operator).toLowerCase().startsWith(remainder))) {
+				const rawValue = trimmed.slice(fieldPrefix.length);
+				for (const operator of field.operators) for (const match of resolveValueMatches(operator, rawValue)) {
+					const id = `${field.key}:${operator.key}:value:${match.displayValue}`;
+					if (seen.has(id)) continue;
+					seen.add(id);
+					const shown = match.quoted ? `"${match.displayValue}"` : match.displayValue;
+					results.push({
+						id,
+						label: `${field.label} ${labelOf(operator)} ${shown}`,
+						auxiliaryData: {
+							fieldKey: field.key,
+							operatorKey: operator.key,
+							filterValue: match.filterValue
+						}
+					});
+				}
+			}
+		}
+	}
+	const contentKey = lookup.config.contentSearchFieldKey;
+	const exact = lookup.getVisibleFields().some((field) => field.label.toLowerCase() === lower || field.operators.some((operator) => `${field.label} ${labelOf(operator)}`.toLowerCase() === lower));
+	if (contentKey && !exact) {
+		const field = lookup.getField(contentKey);
+		const operator = lookup.getDefaultOperator(contentKey);
+		if (field && operator) results.unshift({
+			id: `__content_search__:${trimmed}`,
+			label: `"${trimmed}"`,
+			auxiliaryData: {
+				fieldKey: contentKey,
+				operatorKey: operator.key,
+				filterValue: {
+					type: "string",
+					value: trimmed
+				}
+			}
+		});
+	}
+	return results.slice(0, maxTypedResults);
+}
+//#endregion
 //#region src/PowerSearch/range.ts
 const SECONDS_BY_UNIT = {
 	second: 1,
@@ -353,7 +595,7 @@ function absoluteRange(start, end) {
 }
 //#endregion
 //#region src/PowerSearch/PowerSearchValueField.vue
-const _hoisted_1$4 = {
+const _hoisted_1$3 = {
 	key: 7,
 	class: "astryx-power-search-value__stack"
 };
@@ -363,7 +605,7 @@ const _hoisted_2$3 = {
 };
 const _hoisted_3$3 = ["aria-label"];
 const _hoisted_4$2 = ["disabled", "onClick"];
-const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 	name: "AstryxPowerSearchValueField",
 	__name: "PowerSearchValueField",
 	props: {
@@ -379,6 +621,27 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const text = computed(() => props.messages.value);
+		const locale = useAstryxLocale();
+		const numberDecision = ref(null);
+		function rememberNumberDraft(event) {
+			const target = event.target;
+			const operator = props.operatorValue;
+			if (!(target instanceof HTMLInputElement) || target.getAttribute("role") !== "spinbutton") return;
+			if (operator.type !== "integer" && operator.type !== "float") return;
+			numberDecision.value = resolveNumberInputCommit(target.value, {
+				min: operator.minValue,
+				max: operator.maxValue,
+				isIntegerOnly: operator.type === "integer",
+				locale: locale.value,
+				hasClear: false
+			});
+		}
+		function onNumberKeydown(event) {
+			if (event.key !== "Enter" || event.isComposing) return;
+			const decision = numberDecision.value;
+			numberDecision.value = null;
+			if (decision != null && decision.type !== "commit") event.stopPropagation();
+		}
 		const stringValue = computed(() => props.filterValue?.type === "string" ? props.filterValue.value : "");
 		const numberValue = computed(() => props.filterValue?.type === "integer" || props.filterValue?.type === "float" ? props.filterValue.value : null);
 		const timeValue = computed(() => props.filterValue?.type === "time" ? props.filterValue.value : null);
@@ -592,8 +855,12 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 				"disabled",
 				"creatable",
 				"max-menu-items"
-			])) : __props.operatorValue.type === "integer" || __props.operatorValue.type === "float" ? (openBlock(), createBlock(_sfc_main$14, {
-				key: 3,
+			])) : __props.operatorValue.type === "integer" || __props.operatorValue.type === "float" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- 只听里面数字框冒上来的输入和回车，自己不是控件。 "), createElementVNode("div", {
+				class: "astryx-power-search-value",
+				onFocusin: _cache[3] || (_cache[3] = ($event) => numberDecision.value = null),
+				onInput: rememberNumberDraft,
+				onKeydown: onNumberKeydown
+			}, [createVNode(_sfc_main$14, {
 				label: text.value.value,
 				"is-label-hidden": "",
 				"model-value": numberValue.value,
@@ -616,7 +883,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 				"max",
 				"step",
 				"units"
-			])) : __props.operatorValue.type === "time" ? (openBlock(), createBlock(_sfc_main$17, {
+			])], 32)], 2112)) : __props.operatorValue.type === "time" ? (openBlock(), createBlock(_sfc_main$17, {
 				key: 4,
 				label: text.value.time,
 				"is-label-hidden": "",
@@ -653,7 +920,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 				"label",
 				"model-value",
 				"is-disabled"
-			])) : __props.operatorValue.type === "date_relative" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [relativeOptions.value.length > 0 ? (openBlock(), createBlock(_sfc_main$15, {
+			])) : __props.operatorValue.type === "date_relative" ? (openBlock(), createElementBlock("div", _hoisted_1$3, [relativeOptions.value.length > 0 ? (openBlock(), createBlock(_sfc_main$15, {
 				key: 0,
 				label: text.value.relativeDate,
 				"is-label-hidden": "",
@@ -661,7 +928,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 				"model-value": relativeValue.value,
 				placeholder: text.value.selectPlaceholder,
 				disabled: __props.disabled,
-				"onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => emit("change", {
+				"onUpdate:modelValue": _cache[4] || (_cache[4] = (value) => emit("change", {
 					type: "date_relative",
 					value: String(value ?? "")
 				}, true))
@@ -677,7 +944,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 				"model-value": relativeValue.value,
 				placeholder: text.value.enterValuePlaceholder,
 				disabled: __props.disabled,
-				"onUpdate:modelValue": _cache[4] || (_cache[4] = (value) => emit("change", {
+				"onUpdate:modelValue": _cache[5] || (_cache[5] = (value) => emit("change", {
 					type: "date_relative",
 					value: String(value ?? "")
 				}))
@@ -717,7 +984,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 				"model-value": enumValue.value,
 				placeholder: text.value.selectPlaceholder,
 				disabled: __props.disabled,
-				"onUpdate:modelValue": _cache[5] || (_cache[5] = (value) => emit("change", {
+				"onUpdate:modelValue": _cache[6] || (_cache[6] = (value) => emit("change", {
 					type: "enum",
 					value: String(value ?? "")
 				}, true))
@@ -735,7 +1002,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 				"model-value": enumList.value,
 				placeholder: text.value.selectValuesPlaceholder,
 				disabled: __props.disabled,
-				"onUpdate:modelValue": _cache[6] || (_cache[6] = (value) => emit("change", {
+				"onUpdate:modelValue": _cache[7] || (_cache[7] = (value) => emit("change", {
 					type: "enum_list",
 					value: value.map(String)
 				}))
@@ -785,10 +1052,10 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 });
 //#endregion
 //#region src/PowerSearch/PowerSearchNestedRows.vue
-const _hoisted_1$3 = { class: "astryx-power-search-nested" };
+const _hoisted_1$2 = { class: "astryx-power-search-nested" };
 const _hoisted_2$2 = { class: "astryx-power-search-editor-row" };
 const _hoisted_3$2 = ["aria-label", "onClick"];
-const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 	name: "AstryxPowerSearchNestedRows",
 	__name: "PowerSearchNestedRows",
 	props: {
@@ -879,7 +1146,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		}
 		return (_ctx, _cache) => {
 			const _component_PowerSearchNestedRows = resolveComponent("PowerSearchNestedRows", true);
-			return openBlock(), createElementBlock("div", _hoisted_1$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.modelValue, (row, index) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.modelValue, (row, index) => {
 				return openBlock(), createElementBlock("div", {
 					key: `${row.field}-${index}`,
 					class: "astryx-power-search-nested-row"
@@ -913,7 +1180,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 						"disabled",
 						"onUpdate:modelValue"
 					])) : createCommentVNode("v-if", true),
-					operatorOf(row) && operatorOf(row)?.value.type !== "empty" && operatorOf(row)?.value.type !== "nested" ? (openBlock(), createBlock(_sfc_main$4, {
+					operatorOf(row) && operatorOf(row)?.value.type !== "empty" && operatorOf(row)?.value.type !== "nested" ? (openBlock(), createBlock(_sfc_main$3, {
 						key: `${row.field}:${row.operator ?? ""}`,
 						"operator-value": operatorOf(row).value,
 						"filter-value": row.value,
@@ -969,7 +1236,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 });
 //#endregion
 //#region src/PowerSearch/PowerSearchEditor.vue
-const _hoisted_1$2 = ["aria-label"];
+const _hoisted_1$1 = ["aria-label"];
 const _hoisted_2$1 = { class: "astryx-power-search-editor-row" };
 const _hoisted_3$1 = {
 	key: 0,
@@ -983,7 +1250,7 @@ const _hoisted_5$1 = {
 const _hoisted_6$1 = { key: 1 };
 const _hoisted_7$1 = { class: "astryx-power-search-editor-actions" };
 const focusable = "input:not([disabled]), button:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	name: "AstryxPowerSearchEditor",
 	__name: "PowerSearchEditor",
 	props: {
@@ -1143,7 +1410,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 						ref_key: "valueRoot",
 						ref: valueRoot,
 						class: "astryx-power-search-editor-value"
-					}, [(openBlock(), createBlock(_sfc_main$4, {
+					}, [(openBlock(), createBlock(_sfc_main$3, {
 						key: `${fieldKey.value}:${operatorKey.value}`,
 						"operator-value": operatorValue.value,
 						"filter-value": draft.value,
@@ -1161,7 +1428,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 						"max-menu-items"
 					]))], 512)) : createCommentVNode("v-if", true)
 				]),
-				operatorValue.value?.type === "nested" ? (openBlock(), createElementBlock("div", _hoisted_3$1, [createElementVNode("div", _hoisted_4$1, toDisplayString(text.value.editor.group), 1), createVNode(_sfc_main$3, {
+				operatorValue.value?.type === "nested" ? (openBlock(), createElementBlock("div", _hoisted_3$1, [createElementVNode("div", _hoisted_4$1, toDisplayString(text.value.editor.group), 1), createVNode(_sfc_main$2, {
 					config: __props.config,
 					"model-value": children.value,
 					disabled: __props.readOnly,
@@ -1193,229 +1460,273 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 					"is-disabled": completed.value == null,
 					onClick: save
 				}, null, 8, ["label", "is-disabled"])])])) : createCommentVNode("v-if", true)
-			], 40, _hoisted_1$2)], 2112);
+			], 40, _hoisted_1$1)], 2112);
 		};
 	}
 });
 //#endregion
-//#region src/PowerSearch/PowerSearchToken.vue
-const _hoisted_1$1 = { class: "astryx-power-search-token-value" };
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
-	name: "AstryxPowerSearchToken",
-	__name: "PowerSearchToken",
-	props: {
-		fieldLabel: {},
-		operator: {},
-		filter: {},
-		maxLength: {},
-		messages: {},
-		locale: {},
-		timeZone: {},
-		size: {},
-		disabled: { type: Boolean },
-		removable: { type: Boolean }
-	},
-	emits: ["activate", "remove"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const operatorLabel = computed(() => resolveOperatorLabel(props.operator, props.messages));
-		const tokenLabel = computed(() => `${props.fieldLabel}: ${operatorLabel.value}`);
-		const valueText = computed(() => {
-			const room = Math.max(props.maxLength - props.fieldLabel.length - operatorLabel.value.length, 10);
-			return formatFilterValue(props.operator.value, props.filter.value, room, props.messages, props.locale, props.timeZone);
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$12, {
-				label: tokenLabel.value,
-				size: __props.size,
-				disabled: __props.disabled,
-				removable: __props.removable,
-				onClick: _cache[0] || (_cache[0] = ($event) => emit("activate")),
-				onRemove: _cache[1] || (_cache[1] = ($event) => emit("remove"))
-			}, createSlots({ _: 2 }, [valueText.value ? {
-				name: "end",
-				fn: withCtx(() => [createElementVNode("span", _hoisted_1$1, toDisplayString(valueText.value), 1)]),
-				key: "0"
-			} : void 0]), 1032, [
-				"label",
-				"size",
-				"disabled",
-				"removable"
-			]);
+//#region src/PowerSearch/usePowerSearchActions.ts
+function usePowerSearchActions(options) {
+	const { props, emit, menu, lookup, text, announce } = options;
+	const gutter = useLayerGutter();
+	const internal = ref([]);
+	const filters = computed(() => props.filters ?? internal.value);
+	const session = ref(null);
+	const openingControl = ref(null);
+	const editorOpen = computed(() => session.value != null);
+	const tokenEls = /* @__PURE__ */ new Map();
+	const editorStyle = computed(() => {
+		const place = session.value?.placement;
+		if (place == null) return void 0;
+		return {
+			top: `${place.top}px`,
+			left: `${place.left}px`,
+			width: `${place.width}px`
 		};
+	});
+	const editorComponent = computed(() => {
+		const filter = session.value?.filter;
+		if (filter?.operator == null) return _sfc_main$1;
+		const type = lookup.value.getOperator(filter.field, filter.operator)?.value.type;
+		return (type ? props.components?.[type]?.editor : void 0) ?? _sfc_main$1;
+	});
+	function commit(next, changeType, index) {
+		internal.value = next;
+		emit("update:filters", next);
+		emit("change", next, changeType, index);
 	}
-});
-//#endregion
-//#region src/PowerSearch/source.ts
-const MAX_BROWSE_ITEMS = 1e3;
-function resolveValueMatches(operator, rawValue) {
-	const kind = operator.value.type;
-	if (kind === "string") return [{
-		displayValue: rawValue,
-		filterValue: {
-			type: "string",
-			value: rawValue
-		},
-		quoted: true
-	}];
-	if (kind === "string_list") return [{
-		displayValue: rawValue,
-		filterValue: {
-			type: "string_list",
-			value: [rawValue]
-		},
-		quoted: true
-	}];
-	if (kind === "enum" || kind === "enum_list") {
-		const lower = rawValue.toLowerCase();
-		return operator.value.values.filter((item) => item.label.toLowerCase().includes(lower)).map((item) => ({
-			displayValue: item.label,
-			filterValue: kind === "enum" ? {
-				type: "enum",
-				value: item.value
-			} : {
-				type: "enum_list",
-				value: [item.value]
+	function operatorFor(filter) {
+		return lookup.value.getOperator(filter.field, filter.operator);
+	}
+	function fieldFor(filter) {
+		return lookup.value.getField(filter.field);
+	}
+	function emptyEditorOverridden(components) {
+		return Boolean(components?.empty?.editor || options.hasCustomEditor());
+	}
+	function canEdit(filter) {
+		if (props.disabled || props.readOnly || filter.isReadOnly) return false;
+		const operator = operatorFor(filter);
+		if (operator == null) return false;
+		if (operator.value.type !== "empty") return true;
+		return emptyEditorOverridden(props.components);
+	}
+	function canRemove(filter) {
+		return !props.disabled && !props.readOnly && filter.isReadOnly !== true;
+	}
+	function tokenComponent(filter) {
+		const type = operatorFor(filter)?.value.type;
+		return type ? props.components?.[type]?.token : void 0;
+	}
+	function measure(control) {
+		const outer = options.anchorRef.value;
+		if (outer == null) return null;
+		const target = control ?? outer;
+		const outerRect = outer.getBoundingClientRect();
+		const controlRect = target.getBoundingClientRect();
+		const edges = gutter.value;
+		return resolveEditorPlacement({
+			outer: {
+				left: outerRect.left,
+				right: outerRect.right,
+				width: outerRect.width
 			},
-			quoted: false
-		}));
+			control: {
+				left: controlRect.left,
+				right: controlRect.right,
+				width: controlRect.width
+			},
+			viewportWidth: window.innerWidth,
+			viewportHeight: window.innerHeight,
+			inlineStart: edges.inlineStart,
+			inlineEnd: edges.inlineEnd,
+			blockInset: edges.blockStart,
+			direction: getComputedStyle(outer).direction === "rtl" ? "rtl" : "ltr",
+			anchorTop: controlRect.top,
+			anchorBottom: controlRect.bottom
+		});
 	}
-	return [];
-}
-function browseItems(lookup) {
-	const grouped = /* @__PURE__ */ new Map();
-	const ungrouped = [];
-	for (const field of lookup.getVisibleFields()) {
-		const operator = lookup.getDefaultOperator(field.key);
-		const item = {
-			id: field.key,
-			label: field.label,
-			description: field.description,
-			auxiliaryData: {
-				fieldKey: field.key,
-				operatorKey: operator?.key,
-				group: field.group
-			}
+	function openEditor(mode, filter, index, control) {
+		const placement = measure(control);
+		if (placement == null) return;
+		menu.close();
+		openingControl.value = control;
+		session.value = {
+			mode,
+			index,
+			filter,
+			placement,
+			ready: false,
+			control
 		};
-		if (field.group) {
-			const bucket = grouped.get(field.group) ?? [];
-			bucket.push(item);
-			grouped.set(field.group, bucket);
-		} else ungrouped.push(item);
-	}
-	const ordered = [...ungrouped];
-	for (const items of grouped.values()) ordered.push(...items);
-	return ordered.slice(0, MAX_BROWSE_ITEMS);
-}
-function searchPowerSearchFields(lookup, query, messages, maxTypedResults) {
-	const trimmed = query.trim();
-	if (trimmed === "") return browseItems(lookup);
-	const lower = trimmed.toLowerCase();
-	const results = [];
-	const seen = /* @__PURE__ */ new Set();
-	const labelOf = (operator) => resolveOperatorLabel(operator, messages);
-	for (const field of lookup.getVisibleFields()) {
-		if (field.typeaheadMinQueryLength != null && lower.length < field.typeaheadMinQueryLength) continue;
-		if ((field.label.toLowerCase().includes(lower) || field.typeaheadAliases?.some((alias) => alias.toLowerCase().includes(lower)) === true) && !seen.has(field.key)) {
-			seen.add(field.key);
-			const operator = lookup.getDefaultOperator(field.key);
-			results.push({
-				id: field.key,
-				label: field.label,
-				description: field.description,
-				auxiliaryData: {
-					fieldKey: field.key,
-					operatorKey: operator?.key,
-					group: field.group
-				}
+		nextTick(() => {
+			requestAnimationFrame(() => {
+				if (session.value) session.value = {
+					...session.value,
+					ready: true
+				};
 			});
-		}
-		for (const operator of field.operators) {
-			const combined = `${field.label} ${labelOf(operator)}`.toLowerCase();
-			const id = `${field.key}:${operator.key}`;
-			if (combined.includes(lower) && !seen.has(id)) {
-				seen.add(id);
-				results.push({
-					id,
-					label: `${field.label} ${labelOf(operator)}`,
-					description: field.description,
-					auxiliaryData: {
-						fieldKey: field.key,
-						operatorKey: operator.key,
-						group: field.group
-					}
-				});
-			}
-		}
+		});
 	}
-	for (const field of lookup.getVisibleFields()) {
-		if (field.isValueMatchAllowed === false) continue;
-		const fieldLabel = field.label.toLowerCase();
-		let exactOperator = false;
-		for (const operator of field.operators) {
-			const prefix = `${fieldLabel} ${labelOf(operator).toLowerCase()} `;
-			if (!lower.startsWith(prefix) || lower.length <= prefix.length) continue;
-			const matches = resolveValueMatches(operator, trimmed.slice(prefix.length));
-			if (matches.length > 0) exactOperator = true;
-			for (const match of matches) {
-				const id = `${field.key}:${operator.key}:value:${match.displayValue}`;
-				if (seen.has(id)) continue;
-				seen.add(id);
-				const shown = match.quoted ? `"${match.displayValue}"` : match.displayValue;
-				results.push({
-					id,
-					label: `${field.label} ${labelOf(operator)} ${shown}`,
-					auxiliaryData: {
-						fieldKey: field.key,
-						operatorKey: operator.key,
-						filterValue: match.filterValue
-					}
-				});
+	function closeEditor(restore) {
+		const control = session.value?.control;
+		session.value = null;
+		openingControl.value = null;
+		if (!restore) return;
+		nextTick(() => {
+			if (control instanceof HTMLElement) control.focus();
+			else options.inputRef.value?.focus();
+		});
+	}
+	function focusInput() {
+		nextTick(() => options.inputRef.value?.focus());
+	}
+	function pick(item) {
+		const data = item.auxiliaryData;
+		if (data == null) return;
+		const field = lookup.value.getField(data.fieldKey);
+		const operator = (data.operatorKey ? lookup.value.getOperator(data.fieldKey, data.operatorKey) : void 0) ?? lookup.value.getDefaultOperator(data.fieldKey);
+		if (field == null || operator == null) return;
+		menu.setQuery("");
+		menu.close();
+		if (data.filterValue != null || operator.value.type === "empty") {
+			const value = data.filterValue ?? { type: "empty" };
+			const next = [...filters.value, {
+				field: field.key,
+				operator: operator.key,
+				value
+			}];
+			commit(next, "add", next.length - 1);
+			announce(`${field.label}: ${operator.key}`);
+			focusInput();
+			return;
+		}
+		openEditor("create", {
+			field: field.key,
+			operator: operator.key
+		}, filters.value.length, options.inputRef.value);
+	}
+	function onEditorSave(filter) {
+		const current = session.value;
+		if (current == null) return;
+		if (filter == null) {
+			if (current.mode === "edit") {
+				const dropped = filters.value[current.index];
+				commit(filters.value.filter((_, index) => index !== current.index), "remove", current.index);
+				announce(text.value.removeFilter(dropped ? fieldFor(dropped)?.label ?? dropped.field : ""));
 			}
+			closeEditor(false);
+			focusInput();
+			return;
+		}
+		if (current.mode === "edit") commit(filters.value.map((item, index) => index === current.index ? filter : item), "edit", current.index);
+		else {
+			const next = [...filters.value, filter];
+			commit(next, "add", next.length - 1);
+		}
+		const field = lookup.value.getField(filter.field);
+		announce(field?.label ?? filter.field);
+		closeEditor(false);
+		focusInput();
+	}
+	function removeAt(index) {
+		const filter = filters.value[index];
+		if (filter == null || !canRemove(filter)) return;
+		commit(filters.value.filter((_, itemIndex) => itemIndex !== index), "remove", index);
+		announce(text.value.removeFilter(fieldFor(filter)?.label ?? filter.field));
+		focusInput();
+	}
+	function clearAll(event) {
+		event?.stopPropagation();
+		if (props.disabled || filters.value.length === 0) return;
+		commit([], "remove", 0);
+		announce(text.value.clear);
+		menu.close();
+		options.inputRef.value?.focus();
+	}
+	function activate(index) {
+		const filter = filters.value[index];
+		if (filter == null || props.disabled || props.readOnly || filter.isReadOnly) return;
+		if (operatorFor(filter)?.value.type === "empty" && !emptyEditorOverridden(props.components)) {
+			commit(filters.value.map((item, itemIndex) => itemIndex === index ? {
+				field: item.field,
+				operator: item.operator,
+				value: { type: "empty" },
+				isReadOnly: item.isReadOnly
+			} : item), "edit", index);
+			return;
+		}
+		if (!canEdit(filter)) return;
+		openEditor("edit", filter, index, tokenEls.get(index) ?? null);
+	}
+	function setTokenEl(index, element) {
+		if (element instanceof HTMLElement) tokenEls.set(index, element);
+		else tokenEls.delete(index);
+	}
+	function focusToken(index) {
+		nextTick(() => tokenEls.get(index)?.focus());
+	}
+	function onInput(event) {
+		if (props.disabled || props.readOnly) return;
+		menu.setQuery(event.target.value);
+	}
+	function onInputKeyDown(event) {
+		if (session.value != null) return;
+		const input = options.inputRef.value;
+		if (event.key === "Backspace" && menu.query.value === "" && filters.value.length > 0 && canRemove(filters.value[filters.value.length - 1])) {
+			event.preventDefault();
+			removeAt(filters.value.length - 1);
+			return;
 		}
-		const fieldPrefix = `${fieldLabel} `;
-		if (!exactOperator && lower.startsWith(fieldPrefix) && lower.length > fieldPrefix.length) {
-			const remainder = lower.slice(fieldPrefix.length);
-			if (!field.operators.some((operator) => labelOf(operator).toLowerCase().startsWith(remainder))) {
-				const rawValue = trimmed.slice(fieldPrefix.length);
-				for (const operator of field.operators) for (const match of resolveValueMatches(operator, rawValue)) {
-					const id = `${field.key}:${operator.key}:value:${match.displayValue}`;
-					if (seen.has(id)) continue;
-					seen.add(id);
-					const shown = match.quoted ? `"${match.displayValue}"` : match.displayValue;
-					results.push({
-						id,
-						label: `${field.label} ${labelOf(operator)} ${shown}`,
-						auxiliaryData: {
-							fieldKey: field.key,
-							operatorKey: operator.key,
-							filterValue: match.filterValue
-						}
-					});
-				}
-			}
+		if (event.key === "ArrowLeft" && input && input.selectionStart === 0 && input.selectionEnd === 0 && filters.value.length > 0) {
+			event.preventDefault();
+			focusToken(Math.min(options.visibleCount(), filters.value.length) - 1);
+			return;
 		}
+		if (event.key === "ArrowRight" && input && menu.query.value === "" && input.selectionStart === 0) return;
+		menu.onKeyDown(event);
 	}
-	const contentKey = lookup.config.contentSearchFieldKey;
-	const exact = lookup.getVisibleFields().some((field) => field.label.toLowerCase() === lower || field.operators.some((operator) => `${field.label} ${labelOf(operator)}`.toLowerCase() === lower));
-	if (contentKey && !exact) {
-		const field = lookup.getField(contentKey);
-		const operator = lookup.getDefaultOperator(contentKey);
-		if (field && operator) results.unshift({
-			id: `__content_search__:${trimmed}`,
-			label: `"${trimmed}"`,
-			auxiliaryData: {
-				fieldKey: contentKey,
-				operatorKey: operator.key,
-				filterValue: {
-					type: "string",
-					value: trimmed
-				}
-			}
-		});
+	function onTokenKeyDown(event, index) {
+		const shown = options.visibleCount();
+		if (event.key === "ArrowLeft" && index > 0) {
+			event.preventDefault();
+			focusToken(index - 1);
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			if (index < shown - 1) focusToken(index + 1);
+			else options.inputRef.value?.focus();
+		} else if (event.key === "Escape") options.inputRef.value?.focus();
+		else if ((event.key === "Backspace" || event.key === "Delete") && canRemove(filters.value[index])) {
+			event.preventDefault();
+			removeAt(index);
+			if (index > 0) focusToken(index - 1);
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			activate(index);
+		}
 	}
-	return results.slice(0, maxTypedResults);
+	return {
+		activate,
+		canRemove,
+		clearAll,
+		closeEditor,
+		editorComponent,
+		editorOpen,
+		editorStyle,
+		fieldFor,
+		filters,
+		onEditorSave,
+		onInput,
+		onInputKeyDown,
+		onTokenKeyDown,
+		openingControl,
+		operatorFor,
+		pick,
+		removeAt,
+		session,
+		setTokenEl,
+		tokenComponent
+	};
 }
 //#endregion
 //#region src/PowerSearch/PowerSearch.vue
@@ -1434,12 +1745,14 @@ const _hoisted_4 = {
 	class: "astryx-power-search-more"
 };
 const _hoisted_5 = [
+	"id",
 	"placeholder",
 	"value",
 	"disabled",
 	"readonly",
 	"aria-disabled",
 	"aria-expanded",
+	"aria-controls",
 	"aria-activedescendant",
 	"aria-describedby"
 ];
@@ -1448,42 +1761,47 @@ const _hoisted_6 = {
 	class: "astryx-power-search-count"
 };
 const _hoisted_7 = ["aria-label"];
-const _hoisted_8 = {
+const _hoisted_8 = ["id"];
+const _hoisted_9 = {
 	class: "astryx-visually-hidden",
 	"aria-live": "polite"
 };
-const _hoisted_9 = ["aria-label", "data-placement"];
-const _hoisted_10 = {
+const _hoisted_10 = [
+	"id",
+	"aria-label",
+	"data-placement"
+];
+const _hoisted_11 = {
 	class: "astryx-typeahead-menu",
 	role: "presentation"
 };
-const _hoisted_11 = {
+const _hoisted_12 = {
 	key: 0,
 	class: "astryx-typeahead-state"
 };
-const _hoisted_12 = {
+const _hoisted_13 = {
 	key: 1,
 	class: "astryx-typeahead-options",
 	role: "presentation"
 };
-const _hoisted_13 = {
+const _hoisted_14 = {
 	key: 0,
 	class: "astryx-power-search-menu-group"
 };
-const _hoisted_14 = [
+const _hoisted_15 = [
 	"id",
 	"aria-selected",
 	"data-option-id",
 	"onMouseenter",
 	"onClick"
 ];
-const _hoisted_15 = { class: "astryx-typeahead-option-copy" };
-const _hoisted_16 = { class: "astryx-typeahead-option-label" };
-const _hoisted_17 = {
+const _hoisted_16 = { class: "astryx-typeahead-option-copy" };
+const _hoisted_17 = { class: "astryx-typeahead-option-label" };
+const _hoisted_18 = {
 	key: 0,
 	class: "astryx-typeahead-option-description"
 };
-const _hoisted_18 = ["data-ready"];
+const _hoisted_19 = ["data-ready"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxPowerSearch",
 	inheritAttrs: false,
@@ -1492,6 +1810,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		config: {},
 		filters: {},
 		label: {},
+		isLabelHidden: { type: Boolean },
 		labelHidden: {
 			type: Boolean,
 			default: true
@@ -1530,7 +1849,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		overflow: { default: "none" },
 		resultCount: {},
 		size: { default: "md" },
-		components: {}
+		components: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	},
 	emits: [
 		"update:filters",
@@ -1542,27 +1889,48 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
+		const attrs = useAttrs();
+		const parts = useFieldPartStyling({
+			component: "PowerSearch",
+			props,
+			attrs,
+			reservedAttrs: [
+				"id",
+				"type",
+				"role",
+				"value",
+				"disabled",
+				"readonly",
+				"placeholder",
+				"autocomplete",
+				"aria-expanded",
+				"aria-controls",
+				"aria-autocomplete",
+				"aria-activedescendant",
+				"aria-describedby",
+				"aria-disabled"
+			]
+		});
+		const hideLabel = useResolvedLabelHidden(() => props.isLabelHidden, () => props.labelHidden, true);
 		const messages = useAstryxMessages();
 		const locale = useAstryxLocale();
 		const announce = useAnnounce();
-		const inputId = `astryx-power-search-${useId()}`;
-		const listboxId = `${inputId}-listbox`;
-		const disabledId = `${inputId}-disabled`;
-		const internal = ref([]);
-		const filters = computed(() => props.filters ?? internal.value);
+		const generatedId = `astryx-power-search-${useId()}`;
+		const passedId = computed(() => typeof attrs.id === "string" && attrs.id !== "" ? attrs.id : void 0);
+		const inputId = computed(() => passedId.value ?? generatedId);
+		const listboxId = computed(() => `${inputId.value}-listbox`);
+		const disabledId = computed(() => `${inputId.value}-disabled`);
 		const focused = ref(false);
 		const placeholderHeight = ref(0);
 		const queryMirror = ref("");
 		const anchorRef = useTemplateRef("anchorRef");
 		const listboxRef = useTemplateRef("listboxRef");
+		useScrollbars(listboxRef);
 		const inputRef = useTemplateRef("inputRef");
 		const editorRef = useTemplateRef("editorRef");
-		const tokenEls = /* @__PURE__ */ new Map();
-		const session = ref(null);
-		const openingControl = ref(null);
-		const editorOpen = computed(() => session.value != null);
 		const sawCount = ref(false);
 		const liveText = ref("");
+		const visibleCountOf = { current: () => 0 };
 		const text = computed(() => messages.value.powerSearch);
 		const label = computed(() => props.label ?? text.value.label);
 		const placeholder = computed(() => props.placeholder ?? text.value.placeholder);
@@ -1581,20 +1949,28 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				message: props.statusMessage
 			};
 		});
-		const describedBy = computed(() => {
-			return [focusableDisabled.value ? disabledId : void 0, props.statusMessage ? `${inputId}-status` : void 0].filter(Boolean).join(" ") || void 0;
-		});
+		const externalDescribedBy = computed(() => typeof attrs["aria-describedby"] === "string" ? attrs["aria-describedby"] : void 0);
+		const describedBy = computed(() => [
+			externalDescribedBy.value,
+			focusableDisabled.value ? disabledId.value : void 0,
+			props.statusMessage ? `${inputId.value}-status` : void 0
+		].filter(Boolean).join(" ") || void 0);
 		const source = computed(() => ({ search(query) {
 			const limit = query.trim() === "" ? 1e3 : props.maxSearchResults;
 			return searchPowerSearchFields(lookup.value, query, text.value, limit);
 		} }));
+		const bridge = {
+			pick: (_item) => {},
+			sessionOpen: () => false,
+			closeEditor: (_restore) => {}
+		};
 		const menu = useTypeaheadMenu({
 			source: () => source.value,
 			debounceMs: 0,
 			showOnFocus: () => !props.readOnly,
 			maxItems: () => queryMirror.value.trim() === "" ? 1e3 : props.maxSearchResults,
-			disabled: () => props.disabled || props.readOnly || session.value != null,
-			onSelect: (entry) => pick(entry.item),
+			disabled: () => props.disabled || props.readOnly || bridge.sessionOpen(),
+			onSelect: (entry) => bridge.pick(entry.item),
 			onQueryChange: (query) => {
 				queryMirror.value = query;
 			}
@@ -1605,48 +1981,40 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			isOpen: menu.combobox.isOpen,
 			onDismiss: () => menu.close()
 		});
+		const { activate, canRemove, clearAll, closeEditor, editorComponent, editorOpen, editorStyle, fieldFor, filters, onEditorSave, onInput, onInputKeyDown, onTokenKeyDown, openingControl, operatorFor, pick, removeAt, session, setTokenEl, tokenComponent } = usePowerSearchActions({
+			props,
+			emit,
+			hasCustomEditor: () => slots.editor != null,
+			menu: {
+				query: menu.query,
+				close: () => menu.close(),
+				setQuery: (value) => {
+					menu.query.value = value;
+				},
+				onKeyDown: (event) => menu.onKeyDown(event)
+			},
+			anchorRef,
+			inputRef,
+			lookup,
+			text,
+			announce,
+			visibleCount: () => visibleCountOf.current()
+		});
+		bridge.pick = pick;
+		bridge.sessionOpen = () => session.value != null;
+		bridge.closeEditor = closeEditor;
 		useDismiss({
 			container: editorRef,
 			trigger: openingControl,
 			isEnabled: editorOpen,
-			enableEscape: ref(false),
+			dismissOnEscape: "ignore",
 			onDismiss: () => closeEditor(true)
 		});
 		const tokenCount = computed(() => filters.value.length);
 		const overflowState = useOverflow(tokenCount, { gap: 4 });
 		const visibleCount = computed(() => collapsed.value ? overflowState.visibleCount.value : tokenCount.value);
+		visibleCountOf.current = () => visibleCount.value;
 		const hiddenCount = computed(() => Math.max(0, tokenCount.value - visibleCount.value));
-		const visibleFilters = computed(() => filters.value.slice(0, visibleCount.value));
-		const displayCount = computed(() => {
-			if (props.resultCount == null) return "";
-			return typeof props.resultCount === "number" ? text.value.resultCount(props.resultCount) : props.resultCount;
-		});
-		const menuStyle = computed(() => {
-			const base = anchored.style.value;
-			if (props.menuWidth == null) return base;
-			const width = `${props.menuWidth}px`;
-			return {
-				...base,
-				width,
-				minWidth: width,
-				maxWidth: width
-			};
-		});
-		const editorStyle = computed(() => {
-			const place = session.value?.placement;
-			if (place == null) return void 0;
-			return {
-				top: `${place.top}px`,
-				left: `${place.left}px`,
-				width: `${place.width}px`
-			};
-		});
-		const editorComponent = computed(() => {
-			const filter = session.value?.filter;
-			if (filter?.operator == null) return _sfc_main$2;
-			const type = lookup.value.getOperator(filter.field, filter.operator)?.value.type;
-			return (type ? props.components?.[type]?.editor : void 0) ?? _sfc_main$2;
-		});
 		watch(collapsed, () => {
 			nextTick(() => overflowState.remeasure());
 		});
@@ -1662,166 +2030,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (typeof value === "number") liveText.value = text.value.resultCount(value);
 			else if (typeof value === "string") liveText.value = value;
 		}, { immediate: true });
-		function commit(next, changeType, index) {
-			internal.value = next;
-			emit("update:filters", next);
-			emit("change", next, changeType, index);
-		}
-		function operatorFor(filter) {
-			return lookup.value.getOperator(filter.field, filter.operator);
-		}
-		function fieldFor(filter) {
-			return lookup.value.getField(filter.field);
-		}
-		function canEdit(filter) {
-			if (props.disabled || props.readOnly || filter.isReadOnly) return false;
-			const operator = operatorFor(filter);
-			if (operator == null) return false;
-			if (operator.value.type !== "empty") return true;
-			return Boolean(props.components?.empty?.editor || slots.editor);
-		}
-		function canRemove(filter) {
-			return !props.disabled && !props.readOnly && filter.isReadOnly !== true;
-		}
-		function tokenComponent(filter) {
-			const type = operatorFor(filter)?.value.type;
-			return type ? props.components?.[type]?.token : void 0;
-		}
-		function measure(control) {
-			const outer = anchorRef.value;
-			if (outer == null) return null;
-			const target = control ?? outer;
-			const outerRect = outer.getBoundingClientRect();
-			const controlRect = target.getBoundingClientRect();
-			return resolveEditorPlacement({
-				outer: {
-					left: outerRect.left,
-					right: outerRect.right,
-					width: outerRect.width
-				},
-				control: {
-					left: controlRect.left,
-					right: controlRect.right,
-					width: controlRect.width
-				},
-				viewportWidth: window.innerWidth,
-				viewportHeight: window.innerHeight,
-				direction: getComputedStyle(outer).direction === "rtl" ? "rtl" : "ltr",
-				anchorTop: controlRect.top,
-				anchorBottom: controlRect.bottom
-			});
-		}
-		function openEditor(mode, filter, index, control) {
-			const placement = measure(control);
-			if (placement == null) return;
-			menu.close();
-			openingControl.value = control;
-			session.value = {
-				mode,
-				index,
-				filter,
-				placement,
-				ready: false,
-				control
+		const visibleFilters = computed(() => filters.value.slice(0, visibleCount.value));
+		const displayCount = computed(() => {
+			if (props.resultCount == null) return "";
+			return typeof props.resultCount === "number" ? text.value.resultCount(props.resultCount) : props.resultCount;
+		});
+		const menuStyle = computed(() => {
+			const base = anchored.style.value;
+			if (props.menuWidth == null) return base;
+			const width = `min(${props.menuWidth}px, var(--astryx-layer-max-inline-size, calc(100vw - 32px)))`;
+			return {
+				...base,
+				width,
+				minWidth: width,
+				maxWidth: width
 			};
-			nextTick(() => {
-				requestAnimationFrame(() => {
-					if (session.value) session.value = {
-						...session.value,
-						ready: true
-					};
-				});
-			});
-		}
-		function closeEditor(restore) {
-			const control = session.value?.control;
-			session.value = null;
-			openingControl.value = null;
-			if (!restore) return;
-			nextTick(() => {
-				if (control instanceof HTMLElement) control.focus();
-				else inputRef.value?.focus();
-			});
-		}
-		function pick(item) {
-			const data = item.auxiliaryData;
-			if (data == null) return;
-			const field = lookup.value.getField(data.fieldKey);
-			const operator = (data.operatorKey ? lookup.value.getOperator(data.fieldKey, data.operatorKey) : void 0) ?? lookup.value.getDefaultOperator(data.fieldKey);
-			if (field == null || operator == null) return;
-			menu.query.value = "";
-			menu.close();
-			if (data.filterValue != null || operator.value.type === "empty") {
-				const value = data.filterValue ?? { type: "empty" };
-				const next = [...filters.value, {
-					field: field.key,
-					operator: operator.key,
-					value
-				}];
-				commit(next, "add", next.length - 1);
-				announce(`${field.label}: ${operator.key}`);
-				nextTick(() => inputRef.value?.focus());
-				return;
-			}
-			openEditor("create", {
-				field: field.key,
-				operator: operator.key
-			}, filters.value.length, inputRef.value);
-		}
-		function onEditorSave(filter) {
-			const current = session.value;
-			if (current == null) return;
-			if (filter == null) {
-				if (current.mode === "edit") {
-					const removed = filters.value[current.index];
-					commit(filters.value.filter((_, index) => index !== current.index), "remove", current.index);
-					announce(text.value.removeFilter(removed ? fieldFor(removed)?.label ?? removed.field : ""));
-				}
-				closeEditor(false);
-				nextTick(() => inputRef.value?.focus());
-				return;
-			}
-			if (current.mode === "edit") commit(filters.value.map((item, index) => index === current.index ? filter : item), "edit", current.index);
-			else {
-				const next = [...filters.value, filter];
-				commit(next, "add", next.length - 1);
-			}
-			const field = lookup.value.getField(filter.field);
-			announce(field?.label ?? filter.field);
-			closeEditor(false);
-			nextTick(() => inputRef.value?.focus());
-		}
-		function removeAt(index) {
-			const filter = filters.value[index];
-			if (filter == null || !canRemove(filter)) return;
-			commit(filters.value.filter((_, itemIndex) => itemIndex !== index), "remove", index);
-			announce(text.value.removeFilter(fieldFor(filter)?.label ?? filter.field));
-			nextTick(() => inputRef.value?.focus());
-		}
-		function clearAll(event) {
-			event?.stopPropagation();
-			if (props.disabled || filters.value.length === 0) return;
-			commit([], "remove", 0);
-			announce(text.value.clear);
-			menu.close();
-			inputRef.value?.focus();
-		}
-		function activate(index) {
-			const filter = filters.value[index];
-			if (filter == null || !canEdit(filter)) return;
-			openEditor("edit", filter, index, tokenEls.get(index) ?? null);
-		}
-		function setTokenEl(index, element) {
-			if (element instanceof HTMLElement) tokenEls.set(index, element);
-			else tokenEls.delete(index);
-		}
-		function focusToken(index) {
-			nextTick(() => tokenEls.get(index)?.focus());
-		}
-		function onInput(event) {
-			if (props.disabled || props.readOnly) return;
-			menu.setQuery(event.target.value);
-		}
+		});
 		function onInputFocus(event) {
 			emit("focus", event);
 			if (!props.disabled && !props.readOnly && session.value == null) menu.open();
@@ -1836,40 +2060,6 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			focused.value = false;
 			if (session.value == null) menu.close();
 		}
-		function onInputKeyDown(event) {
-			if (session.value != null) return;
-			const input = inputRef.value;
-			if (event.key === "Backspace" && menu.query.value === "" && filters.value.length > 0 && canRemove(filters.value[filters.value.length - 1])) {
-				event.preventDefault();
-				removeAt(filters.value.length - 1);
-				return;
-			}
-			if (event.key === "ArrowLeft" && input && input.selectionStart === 0 && input.selectionEnd === 0 && filters.value.length > 0) {
-				event.preventDefault();
-				focusToken(Math.min(visibleCount.value, filters.value.length) - 1);
-				return;
-			}
-			if (event.key === "ArrowRight" && input && menu.query.value === "" && input.selectionStart === 0) return;
-			menu.onKeyDown(event);
-		}
-		function onTokenKeyDown(event, index) {
-			if (event.key === "ArrowLeft" && index > 0) {
-				event.preventDefault();
-				focusToken(index - 1);
-			} else if (event.key === "ArrowRight") {
-				event.preventDefault();
-				if (index < visibleCount.value - 1) focusToken(index + 1);
-				else inputRef.value?.focus();
-			} else if (event.key === "Escape") inputRef.value?.focus();
-			else if ((event.key === "Backspace" || event.key === "Delete") && canRemove(filters.value[index])) {
-				event.preventDefault();
-				removeAt(index);
-				if (index > 0) focusToken(index - 1);
-			} else if (event.key === "Enter") {
-				event.preventDefault();
-				activate(index);
-			}
-		}
 		function onFieldClick(event) {
 			if (props.disabled && !focusableDisabled.value) return;
 			const target = event.target;
@@ -1880,21 +2070,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			const entry = menu.entries.value[index];
 			if (entry && !entry.disabled) menu.combobox.activeIndex.value = index;
 		}
-		function groupLabel(index) {
-			const group = menu.entries.value[index]?.item.auxiliaryData?.group;
-			if (group == null || group === "") return void 0;
-			return group !== (index > 0 ? menu.entries.value[index - 1]?.item.auxiliaryData?.group : void 0) ? group : void 0;
-		}
-		function itemIcon(item) {
-			const data = item.auxiliaryData;
-			const type = (data?.operatorKey ? lookup.value.getOperator(data.fieldKey, data.operatorKey) : void 0)?.value.type;
-			if (type === "date_absolute" || type === "date_range" || type === "date_relative") return "calendar";
-			if (type === "time") return "clock";
-			if (type === "enum" || type === "enum_list") return "funnel";
-			return "search";
-		}
 		function optionId(index) {
-			return `${listboxId}-option-${index}`;
+			return `${listboxId.value}-option-${index}`;
 		}
 		onMounted(() => {
 			if (props.autofocus) inputRef.value?.focus();
@@ -1905,10 +2082,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createVNode(_sfc_main$8, {
-				class: normalizeClass(["astryx-power-search", [`size-${__props.size}`, { "is-floating": floating.value }]]),
+				class: normalizeClass(["astryx-power-search", [
+					unref(parts).containerClass.value,
+					`size-${__props.size}`,
+					{ "is-floating": floating.value }
+				]]),
+				style: normalizeStyle(unref(parts).containerStyle.value),
 				label: label.value,
-				"input-id": inputId,
-				"is-label-hidden": __props.labelHidden,
+				"input-id": inputId.value,
+				"is-label-hidden": unref(hideLabel),
 				"is-disabled": __props.disabled && !focusableDisabled.value,
 				status: fieldStatus.value,
 				"status-variant": __props.statusVariant
@@ -1926,11 +2108,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						default: withCtx(() => [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/no-static-element-interactions -- 点空白处把焦点交给输入框。 "), createElementVNode("div", {
 							ref_key: "anchorRef",
 							ref: anchorRef,
-							class: normalizeClass(["astryx-power-search-control", [`status-${__props.status}`, {
-								"is-open": unref(menu).combobox.isOpen.value,
-								"is-disabled": __props.disabled,
-								"is-floating": floating.value
-							}]]),
+							class: normalizeClass(["astryx-power-search-control", [
+								unref(parts).controlClass(),
+								`status-${__props.status}`,
+								{
+									"is-open": unref(menu).combobox.isOpen.value,
+									"is-disabled": __props.disabled,
+									"is-floating": floating.value
+								}
+							]]),
+							style: normalizeStyle(unref(parts).controlStyle()),
 							onClick: onFieldClick,
 							onFocusin: onFocusIn,
 							onFocusout: onFocusOut
@@ -1945,29 +2132,29 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									return openBlock(), createElementBlock("span", {
 										key: `${filter.field}-${filter.operator}-${index}`,
 										ref_for: true,
-										ref: (element) => setTokenEl(index, element),
+										ref: (element) => unref(setTokenEl)(index, element),
 										class: "astryx-power-search-token",
 										tabindex: "-1",
-										onKeydown: ($event) => onTokenKeyDown($event, index)
+										onKeydown: ($event) => unref(onTokenKeyDown)($event, index)
 									}, [renderSlot(_ctx.$slots, "token", {
 										config: __props.config,
 										filter,
-										field: fieldFor(filter),
-										operator: operatorFor(filter),
+										field: unref(fieldFor)(filter),
+										operator: unref(operatorFor)(filter),
 										maxLength: __props.maxTokenLength,
 										disabled: __props.disabled,
-										onClick: () => activate(index),
-										onRemove: () => removeAt(index)
-									}, () => [tokenComponent(filter) ? (openBlock(), createBlock(resolveDynamicComponent(tokenComponent(filter)), {
+										onClick: () => unref(activate)(index),
+										onRemove: () => unref(removeAt)(index)
+									}, () => [unref(tokenComponent)(filter) ? (openBlock(), createBlock(resolveDynamicComponent(unref(tokenComponent)(filter)), {
 										key: 0,
 										config: __props.config,
 										filter,
-										field: fieldFor(filter),
-										operator: operatorFor(filter),
+										field: unref(fieldFor)(filter),
+										operator: unref(operatorFor)(filter),
 										"max-length": __props.maxTokenLength,
 										disabled: __props.disabled,
-										"on-click": () => activate(index),
-										"on-remove": () => removeAt(index)
+										"on-click": () => unref(activate)(index),
+										"on-remove": () => unref(removeAt)(index)
 									}, null, 40, [
 										"config",
 										"filter",
@@ -1977,10 +2164,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 										"disabled",
 										"on-click",
 										"on-remove"
-									])) : fieldFor(filter) && operatorFor(filter) ? (openBlock(), createBlock(_sfc_main$1, {
+									])) : unref(fieldFor)(filter) && unref(operatorFor)(filter) ? (openBlock(), createBlock(_sfc_main$4, {
 										key: 1,
-										"field-label": fieldFor(filter).label,
-										operator: operatorFor(filter),
+										"field-label": unref(fieldFor)(filter).label,
+										operator: unref(operatorFor)(filter),
 										filter,
 										"max-length": __props.maxTokenLength,
 										messages: text.value,
@@ -1988,9 +2175,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 										"time-zone": resolvedTimeZone.value,
 										size: __props.size,
 										disabled: __props.disabled,
-										removable: canRemove(filter),
-										onActivate: ($event) => activate(index),
-										onRemove: ($event) => removeAt(index)
+										removable: unref(canRemove)(filter),
+										onActivate: ($event) => unref(activate)(index),
+										onRemove: ($event) => unref(removeAt)(index)
 									}, null, 8, [
 										"field-label",
 										"operator",
@@ -2012,14 +2199,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								ref: unref(overflowState).measureRef,
 								class: "astryx-power-search-measure",
 								"aria-hidden": "true"
-							}, [(openBlock(true), createElementBlock(Fragment, null, renderList(filters.value, (filter, index) => {
+							}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(filters), (filter, index) => {
 								return openBlock(), createElementBlock("span", {
 									key: `${filter.field}-${index}`,
 									class: "astryx-power-search-token"
-								}, [fieldFor(filter) && operatorFor(filter) ? (openBlock(), createBlock(_sfc_main$1, {
+								}, [unref(fieldFor)(filter) && unref(operatorFor)(filter) ? (openBlock(), createBlock(_sfc_main$4, {
 									key: 0,
-									"field-label": fieldFor(filter).label,
-									operator: operatorFor(filter),
+									"field-label": unref(fieldFor)(filter).label,
+									operator: unref(operatorFor)(filter),
 									filter,
 									"max-length": __props.maxTokenLength,
 									messages: text.value,
@@ -2036,8 +2223,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									"size"
 								])) : createCommentVNode("v-if", true)]);
 							}), 128)), createElementVNode("span", _hoisted_4, toDisplayString(text.value.more(Math.max(hiddenCount.value, 1))), 1)], 512),
-							createElementVNode("input", {
-								id: inputId,
+							createElementVNode("input", mergeProps(unref(parts).forwardedAttrs(), {
+								id: inputId.value,
 								ref_key: "inputRef",
 								ref: inputRef,
 								class: "astryx-power-search-input",
@@ -2045,64 +2232,66 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								role: "combobox",
 								autocomplete: "off",
 								autocapitalize: "off",
-								placeholder: filters.value.length === 0 ? placeholder.value : void 0,
+								placeholder: unref(filters).length === 0 ? placeholder.value : void 0,
 								value: unref(menu).query.value,
 								disabled: __props.disabled && !focusableDisabled.value,
 								readonly: __props.readOnly || focusableDisabled.value || void 0,
 								"aria-disabled": __props.disabled ? "true" : void 0,
 								"aria-expanded": unref(menu).combobox.isOpen.value,
-								"aria-controls": listboxId,
+								"aria-controls": listboxId.value,
 								"aria-autocomplete": "list",
 								"aria-activedescendant": unref(menu).activeId.value ? optionId(unref(menu).combobox.activeIndex.value) : void 0,
 								"aria-describedby": describedBy.value,
-								onInput,
-								onKeydown: onInputKeyDown,
+								onInput: _cache[0] || (_cache[0] = (...args) => unref(onInput) && unref(onInput)(...args)),
+								onKeydown: _cache[1] || (_cache[1] = (...args) => unref(onInputKeyDown) && unref(onInputKeyDown)(...args)),
 								onFocus: onInputFocus,
-								onBlur: _cache[0] || (_cache[0] = ($event) => emit("blur", $event))
-							}, null, 40, _hoisted_5),
+								onBlur: _cache[2] || (_cache[2] = ($event) => emit("blur", $event))
+							}), null, 16, _hoisted_5),
 							slots.endContent ? renderSlot(_ctx.$slots, "endContent", {}, void 0, void 0, 1) : renderSlot(_ctx.$slots, "end", {}, void 0, void 0, 2),
 							displayCount.value ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(displayCount.value), 1)) : createCommentVNode("v-if", true),
-							showsClear.value && filters.value.length > 0 && !__props.disabled && !__props.readOnly ? (openBlock(), createElementBlock("button", {
+							showsClear.value && unref(filters).length > 0 && !__props.disabled && !__props.readOnly ? (openBlock(), createElementBlock("button", {
 								key: 4,
 								type: "button",
 								class: "astryx-power-search-clear",
 								"aria-label": text.value.clear,
-								onClick: clearAll
+								onClick: _cache[3] || (_cache[3] = (...args) => unref(clearAll) && unref(clearAll)(...args))
 							}, [createVNode(_sfc_main$7, {
 								icon: "close",
 								size: "sm"
 							})], 8, _hoisted_7)) : createCommentVNode("v-if", true),
 							focusableDisabled.value ? (openBlock(), createElementBlock("span", {
 								key: 5,
-								id: disabledId,
+								id: disabledId.value,
 								class: "astryx-visually-hidden"
-							}, toDisplayString(disabledMessage.value), 1)) : createCommentVNode("v-if", true)
-						], 34)]),
+							}, toDisplayString(disabledMessage.value), 9, _hoisted_8)) : createCommentVNode("v-if", true)
+						], 38)]),
 						_: 3
 					}, 8, ["content", "is-enabled"]),
-					createElementVNode("span", _hoisted_8, toDisplayString(liveText.value), 1)
+					createElementVNode("span", _hoisted_9, toDisplayString(liveText.value), 1)
 				]),
 				_: 3
 			}, 8, [
 				"class",
+				"style",
 				"label",
+				"input-id",
 				"is-label-hidden",
 				"is-disabled",
 				"status",
 				"status-variant"
 			]), (openBlock(), createBlock(Teleport, { to: "body" }, [withDirectives(createElementVNode("div", {
-				id: listboxId,
+				id: listboxId.value,
 				ref_key: "listboxRef",
 				ref: listboxRef,
-				class: "astryx-typeahead-listbox",
+				class: "astryx-typeahead-listbox astryx-layer",
 				role: "listbox",
 				"aria-label": text.value.results,
 				"data-placement": unref(anchored).position.value.placement,
 				style: normalizeStyle(menuStyle.value),
 				tabindex: "-1"
-			}, [createElementVNode("div", _hoisted_10, [unref(menu).entries.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_11, toDisplayString(text.value.empty), 1)) : (openBlock(), createElementBlock("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(menu).entries.value, (entry, index) => {
+			}, [createElementVNode("div", _hoisted_11, [unref(menu).entries.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(text.value.empty), 1)) : (openBlock(), createElementBlock("div", _hoisted_13, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(menu).entries.value, (entry, index) => {
 				return openBlock(), createElementBlock(Fragment, { key: entry.id }, [
-					groupLabel(index) ? (openBlock(), createElementBlock("div", _hoisted_13, toDisplayString(groupLabel(index)), 1)) : createCommentVNode("v-if", true),
+					unref(powerSearchGroupLabel)(unref(menu).entries.value, index) ? (openBlock(), createElementBlock("div", _hoisted_14, toDisplayString(unref(powerSearchGroupLabel)(unref(menu).entries.value, index)), 1)) : createCommentVNode("v-if", true),
 					createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events -- 选项不进 Tab 序。 "),
 					createElementVNode("div", {
 						id: optionId(index),
@@ -2114,41 +2303,41 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						"aria-selected": index === unref(menu).combobox.activeIndex.value ? "true" : "false",
 						"data-option-id": entry.id,
 						tabindex: "-1",
-						onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+						onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["prevent"])),
 						onMouseenter: ($event) => highlight(index),
-						onClick: ($event) => pick(entry.item)
+						onClick: ($event) => unref(pick)(entry.item)
 					}, [createVNode(_sfc_main$7, {
-						icon: itemIcon(entry.item),
+						icon: unref(powerSearchItemIcon)(entry.item, lookup.value),
 						size: "sm"
-					}, null, 8, ["icon"]), createElementVNode("span", _hoisted_15, [createElementVNode("span", _hoisted_16, toDisplayString(entry.label), 1), entry.description ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(entry.description), 1)) : createCommentVNode("v-if", true)])], 42, _hoisted_14)
+					}, null, 8, ["icon"]), createElementVNode("span", _hoisted_16, [createElementVNode("span", _hoisted_17, toDisplayString(entry.label), 1), entry.description ? (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(entry.description), 1)) : createCommentVNode("v-if", true)])], 42, _hoisted_15)
 				], 64);
-			}), 128))]))])], 12, _hoisted_9), [[vShow, unref(menu).combobox.isOpen.value]]), session.value ? (openBlock(), createElementBlock("div", {
+			}), 128))]))])], 12, _hoisted_10), [[vShow, unref(menu).combobox.isOpen.value]]), unref(session) ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				ref_key: "editorRef",
 				ref: editorRef,
-				class: "astryx-power-search-editor",
-				"data-ready": session.value.ready ? "true" : "false",
-				style: normalizeStyle(editorStyle.value)
+				class: "astryx-power-search-editor astryx-layer",
+				"data-ready": unref(session).ready ? "true" : "false",
+				style: normalizeStyle(unref(editorStyle))
 			}, [renderSlot(_ctx.$slots, "editor", {
 				config: __props.config,
-				filter: session.value.filter,
-				mode: session.value.mode,
+				filter: unref(session).filter,
+				mode: unref(session).mode,
 				saveLabel: resolvedSaveLabel.value,
 				readOnly: __props.readOnly,
 				timeZone: resolvedTimeZone.value,
 				maxMenuItems: __props.maxOperatorMenuItems,
-				onSave: onEditorSave,
-				onCancel: () => closeEditor(true)
-			}, () => [(openBlock(), createBlock(resolveDynamicComponent(editorComponent.value), {
+				onSave: unref(onEditorSave),
+				onCancel: () => unref(closeEditor)(true)
+			}, () => [(openBlock(), createBlock(resolveDynamicComponent(unref(editorComponent)), {
 				config: __props.config,
-				filter: session.value.filter,
-				mode: session.value.mode,
+				filter: unref(session).filter,
+				mode: unref(session).mode,
 				"save-label": resolvedSaveLabel.value,
 				"read-only": __props.readOnly,
 				"time-zone": resolvedTimeZone.value,
 				"max-menu-items": __props.maxOperatorMenuItems,
-				"on-save": onEditorSave,
-				"on-cancel": () => closeEditor(true)
+				"on-save": unref(onEditorSave),
+				"on-cancel": () => unref(closeEditor)(true)
 			}, null, 40, [
 				"config",
 				"filter",
@@ -2157,8 +2346,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"read-only",
 				"time-zone",
 				"max-menu-items",
+				"on-save",
 				"on-cancel"
-			]))])], 12, _hoisted_18)) : createCommentVNode("v-if", true)]))], 64);
+			]))])], 12, _hoisted_19)) : createCommentVNode("v-if", true)]))], 64);
 		};
 	}
 });