vunor 0.3.2 → 0.4.0

package/dist/Combobox.mjs

@@ -1,11 +1,41 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, watch, withCtx, withKeys, withModifiers } from "vue";
+import { i as useRootBinding, n as useForwardToRoot, r as useModelState, t as claimToggle } from "./forward-root-DPGTBptG.js";
+import { Comment, Fragment, camelize, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useModel, watch, withCtx, withKeys, withModifiers } from "vue";
 import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxViewport, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui";
 import { useInputBaseProps, useInputProps } from "vunor";
 import VuIcon from "vunor/Icon";
-import { createReusableTemplate } from "@vueuse/core";
 import VuCheckbox from "vunor/Checkbox";
 import VuInput from "vunor/Input";
 import VuInputBase from "vunor/InputBase";
+//#region src/components/Combobox/reusable-template.ts
+/**
+* Define a template once and render it in several places of the same component.
+*
+* Same contract as VueUse's `createReusableTemplate` (attrs passed to the reuse
+* component become camelCased slot props, and a single-node template inherits
+* them as fallthrough attrs). It is kept local so the built Combobox carries no
+* runtime dependency on `@vueuse/core`. Unlike VueUse, template comments do not
+* count as nodes, so a commented single-node template still inherits attrs (and
+* its `$el` is the element) when compiled in dev mode.
+*
+* Call it inside `<script setup>`: each component instance gets its own pair.
+*/
+function createReusableTemplate() {
+	const render = shallowRef();
+	return [defineComponent({ setup(_, { slots }) {
+		return () => {
+			render.value = slots.default;
+		};
+	} }), defineComponent({ setup(_, { attrs, slots }) {
+		return () => {
+			const bindings = { $slots: slots };
+			for (const [key, value] of Object.entries(attrs)) bindings[camelize(key)] = value;
+			const vnodes = render.value?.(bindings);
+			const nodes = vnodes?.filter((vnode) => vnode.type !== Comment);
+			return nodes?.length === 1 ? nodes[0] : vnodes;
+		};
+	} })];
+}
+//#endregion
 //#region src/components/Combobox/Combobox.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = ["onFocus", "onBlur"];
 const _hoisted_2 = {
@@ -18,209 +48,97 @@ const _hoisted_5 = { class: "i8-icon-wrap" };
 //#endregion
 //#region src/components/Combobox/Combobox.vue
 var Combobox_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
 	__name: "Combobox",
 	props: /* @__PURE__ */ mergeModels({
-		iconBefore: {
-			type: String,
-			required: false
-		},
-		iconAfter: {
-			type: String,
-			required: false
-		},
-		error: {
-			type: [String, Boolean],
-			required: false
-		},
-		hint: {
-			type: String,
-			required: false
-		},
-		groupTemplate: {
-			type: String,
-			required: false
-		},
-		stackLabel: {
-			type: Boolean,
-			required: false
-		},
-		onBeforeClick: {
-			type: Function,
-			required: false
-		},
-		onAfterClick: {
-			type: Function,
-			required: false
-		},
-		onClick: {
-			type: Function,
-			required: false
-		},
-		onBlur: {
-			type: Function,
-			required: false
-		},
-		onFocus: {
-			type: Function,
-			required: false
-		},
-		label: {
-			type: String,
-			required: false
-		},
-		design: {
-			type: String,
-			required: false
-		},
-		iconPrepend: {
-			type: String,
-			required: false
-		},
-		iconAppend: {
-			type: String,
-			required: false
-		},
-		groupItem: {
-			type: Boolean,
-			required: false
-		},
-		autoGrow: {
-			type: Boolean,
-			required: false
-		},
-		loading: {
-			type: Boolean,
-			required: false
-		},
-		noUnderline: {
+		iconBefore: {},
+		iconAfter: {},
+		error: { type: [String, Boolean] },
+		hint: {},
+		groupTemplate: {},
+		stackLabel: { type: Boolean },
+		onBeforeClick: {},
+		onAfterClick: {},
+		onClick: {},
+		onBlur: {},
+		onFocus: {},
+		label: {},
+		design: {},
+		iconPrepend: {},
+		iconAppend: {},
+		groupItem: { type: Boolean },
+		autoGrow: { type: Boolean },
+		loading: { type: Boolean },
+		noUnderline: { type: Boolean },
+		onAppendClick: {},
+		onPrependClick: {},
+		placeholder: {},
+		type: {},
+		rows: {},
+		required: { type: Boolean },
+		maxlength: {},
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		autocomplete: {},
+		disabledValues: {},
+		defaultValue: {},
+		popupClass: {},
+		popupRound: { type: Boolean },
+		valueClass: {},
+		iconClass: {},
+		class: {},
+		items: {},
+		popupPosition: { default: "popper" },
+		side: {},
+		sideOffset: { default: 2 },
+		sticky: {},
+		updatePositionStrategy: {},
+		bodyLock: { type: Boolean },
+		multiple: { type: Boolean },
+		checkboxItems: { type: Boolean },
+		dropdownIcon: { default: "i--chevron-down" },
+		defaultOpen: { type: Boolean },
+		resetSearchTermOnBlur: {
 			type: Boolean,
-			required: false
-		},
-		onAppendClick: {
-			type: Function,
-			required: false
-		},
-		onPrependClick: {
-			type: Function,
-			required: false
-		},
-		placeholder: {
-			type: String,
-			required: false
-		},
-		type: {
-			type: String,
-			required: false
+			default: false
 		},
-		rows: {
-			type: Number,
-			required: false
-		},
-		required: {
+		resetSearchTermOnSelect: {
 			type: Boolean,
-			required: false
-		},
-		maxlength: {
-			type: Number,
-			required: false
+			default: void 0
 		},
-		disabled: {
+		openOnFocus: {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
-		readonly: {
+		openOnClick: {
 			type: Boolean,
-			required: false
-		},
-		autocomplete: {
-			type: String,
-			required: false
-		},
-		disabledValues: {
-			type: Array,
-			required: false
-		},
-		defaultValue: {
-			type: null,
-			required: false
-		},
-		popupClass: {
-			type: [String, Object],
-			required: false
+			default: void 0
 		},
-		popupRound: {
+		ignoreFilter: {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
-		valueClass: {
-			type: [String, Object],
-			required: false
-		},
-		iconClass: {
-			type: [String, Object],
-			required: false
-		},
-		class: {
-			type: [String, Object],
-			required: false
-		},
-		items: {
-			type: [Array, Object],
-			required: true
-		},
-		popupPosition: {
-			type: String,
-			required: false,
-			default: "popper"
-		},
-		side: {
-			type: String,
-			required: false
-		},
-		sideOffset: {
-			type: Number,
-			required: false,
-			default: 2
-		},
-		sticky: {
-			type: String,
-			required: false
-		},
-		updatePositionStrategy: {
-			type: String,
-			required: false
-		},
-		bodyLock: {
+		resetModelValueOnClear: {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
-		multiple: {
+		highlightOnHover: {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
-		checkboxItems: {
+		by: {},
+		dir: {},
+		name: {},
+		align: {}
+	}, {
+		"open": {
 			type: Boolean,
-			required: false
-		},
-		dropdownIcon: {
-			type: String,
-			required: false,
-			default: "i--chevron-down"
-		},
-		align: {
-			type: String,
-			required: false
+			default: void 0
 		},
-		resetSearchTermOnBlur: {
-			type: Boolean,
-			required: false
-		}
-	}, {
-		"open": { type: Boolean },
 		"openModifiers": {},
-		"modelValue": { type: [String, Array] },
+		"modelValue": {},
 		"modelModifiers": {},
-		"searchTerm": { type: String },
+		"searchTerm": {},
 		"searchTermModifiers": {}
 	}),
 	emits: /* @__PURE__ */ mergeModels([
@@ -231,7 +149,8 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 		"appendClick",
 		"blur",
 		"focus",
-		"enter"
+		"enter",
+		"highlight"
 	], [
 		"update:open",
 		"update:modelValue",
@@ -244,16 +163,36 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 		const [DefineItemsTemplate, UseItemsTemplate] = createReusableTemplate();
 		const props = __props;
 		const emit = __emit;
+		const rootProps = useForwardToRoot(ComboboxRoot, props, emit, [
+			"open",
+			"modelValue",
+			"defaultOpen",
+			"multiple",
+			"disabled",
+			"required",
+			"asChild",
+			"as",
+			"update:open",
+			"update:modelValue"
+		]);
+		const inputProps = useInputProps();
+		const shellProps = useInputBaseProps();
 		const forwardProps = computed(() => {
-			if (props.groupItem) return useInputBaseProps()?.value;
-			return useInputProps()?.value;
-		});
-		const shellProps = computed(() => {
-			return useInputBaseProps()?.value;
+			if (props.groupItem) return {
+				...shellProps?.value,
+				onClick: props.onClick
+			};
+			return inputProps?.value;
 		});
 		const modelOpen = useModel(__props, "open");
 		const modelValue = useModel(__props, "modelValue");
 		const searchTerm = useModel(__props, "searchTerm");
+		const isOpen = useModelState(modelOpen, ComboboxRoot, "defaultOpen", props);
+		const value = useModelState(modelValue, ComboboxRoot, "defaultValue", props);
+		const rootOpen = useRootBinding(modelOpen, isOpen);
+		function onComboboxRootOpen(next) {
+			if (!usePopover.value || !next) modelOpen.value = next;
+		}
 		const groups = computed(() => {
 			if (Array.isArray(props.items)) return [{
 				grp: "",
@@ -285,36 +224,35 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 			return r;
 		});
 		function isItemSelected(v) {
-			return Array.isArray(modelValue.value) ? modelValue.value.includes(v) : modelValue.value === v;
+			return Array.isArray(value.value) ? value.value.includes(v) : value.value === v;
 		}
 		const selectedItems = computed(() => {
-			if (modelValue.value && Array.isArray(modelValue.value)) return modelValue.value.map((v) => flatItemsMap.value.get(v)).filter((item) => item !== void 0);
+			if (value.value && Array.isArray(value.value)) return value.value.map((v) => flatItemsMap.value.get(v)).filter((item) => item !== void 0);
 			else {
-				const item = flatItemsMap.value.get(modelValue.value);
+				const item = flatItemsMap.value.get(value.value);
 				if (item) return [item];
 			}
 			return [];
 		});
 		const selectedLabels = computed(() => {
-			if (!modelValue.value && modelValue.value !== 0) return "";
+			if (!value.value && value.value !== 0) return "";
 			return selectedItems.value.filter((item) => !!item).map((item) => item.label || item.value).join(", ");
 		});
 		function isItemDisabled(val) {
 			return props.disabledValues?.includes(val);
 		}
-		const displayValue = computed(() => flatItemsMap.value.get(modelValue.value)?.label || "");
+		const displayValue = computed(() => flatItemsMap.value.get(value.value)?.label || "");
 		const input = computed(() => inputTemplate.value?.$el?.querySelector?.("input"));
-		async function openPopup() {
+		async function openPopup(event) {
+			if (!claimToggle(event)) return;
 			if (!props.readonly && !props.disabled && !usePopover.value) {
-				modelOpen.value = !modelOpen.value;
+				isOpen.value = (props.openOnClick || props.openOnFocus) && !!event?.target && !!input.value?.contains(event.target) ? true : !isOpen.value;
 				await nextTick();
-				if (input.value) {
-					const el = input.value;
-					if (el) {
-						const valueLength = el.value.length;
-						el.focus();
-						el.setSelectionRange(valueLength, valueLength);
-					}
+				const el = input.value;
+				if (el && (isOpen.value || !props.openOnFocus)) {
+					const valueLength = el.value.length;
+					el.focus();
+					el.setSelectionRange(valueLength, valueLength);
 				}
 			}
 		}
@@ -328,10 +266,6 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 			} else target.setSelectionRange(length, length);
 		}
 		const usePopover = computed(() => props.multiple);
-		if (usePopover.value) modelOpen.value = true;
-		watch([usePopover], () => {
-			if (usePopover.value) modelOpen.value = true;
-		});
 		const sideOffsetHack = ref(false);
 		const _sideOffset = computed(() => sideOffsetHack.value ? -1 : props.sideOffset);
 		watch([modelOpen], async () => {
@@ -350,6 +284,7 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 			side: props.side,
 			sideOffset: _sideOffset.value,
 			updatePositionStrategy: props.updatePositionStrategy,
+			sticky: props.sticky,
 			bodyLock: props.bodyLock,
 			align: props.align
 		}));
@@ -361,20 +296,13 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 			if (usePopover.value) return popoverProps.value;
 			return {};
 		});
-		const popupOpen = ref(false);
-		watch(popupOpen, () => {
-			if (popupOpen.value) modelOpen.value = true;
-		});
-		watch(modelOpen, () => {
-			if (usePopover.value) popupOpen.value = !!modelOpen.value;
-		});
 		const inputTemplate = ref();
 		async function focusOnInput() {
 			await nextTick();
 			input.value?.focus({ preventScroll: true });
 		}
 		async function clearValue() {
-			modelValue.value = void 0;
+			modelValue.value = Array.isArray(value.value) ? [] : void 0;
 			await nextTick();
 			input.value?.focus();
 		}
@@ -387,20 +315,71 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 		}
 		function onKeydown(event) {
 			if (props.disabled || props.readonly) return;
-			if (["Enter", "Space"].includes(event.code)) popupOpen.value = true;
-			else if (/Key[a-zA-Z0-9]/.test(event.code)) popupOpen.value = true;
+			if (["Enter", "Space"].includes(event.code) || /Key[a-zA-Z0-9]/.test(event.code)) isOpen.value = true;
 		}
 		function onEnter(event) {
 			emit("enter", event);
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
-				createCommentVNode(" reusabe templates start "),
+				createVNode(unref(DefineInputBaseTemplate), null, {
+					default: withCtx(() => [createVNode(VuInputBase, mergeProps(__props.groupItem && !usePopover.value ? forwardProps.value : unref(shellProps), {
+						onClick: openPopup,
+						active: unref(isOpen),
+						"model-value": usePopover.value ? void 0 : unref(value),
+						type: usePopover.value ? "text" : unref(shellProps)?.type,
+						label: usePopover.value ? "" : unref(shellProps)?.label,
+						placeholder: usePopover.value ? "Search" : unref(shellProps)?.placeholder,
+						design: usePopover.value ? "filled" : unref(shellProps)?.design,
+						"icon-append": usePopover.value ? void 0 : __props.dropdownIcon,
+						"icon-prepend": usePopover.value ? "i--search" : unref(shellProps)?.iconPrepend,
+						class: usePopover.value ? "i8-border-none i8-outline-none" : "i8-combobox",
+						"no-underline": usePopover.value,
+						"data-expanded": usePopover.value ? void 0 : unref(isOpen)
+					}), createSlots({
+						default: withCtx((slotProps) => [createVNode(unref(ComboboxInput), {
+							"as-child": "",
+							modelValue: searchTerm.value,
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
+							"display-value": () => displayValue.value,
+							class: "i8-input"
+						}, {
+							default: withCtx(() => [createElementVNode("input", mergeProps({ class: "i8-input" }, slotProps, {
+								onFocus: slotProps.onFocus,
+								onBlur: slotProps.onBlur,
+								onKeydownCapture: [withKeys(handleHomeEnd, ["home", "end"]), withKeys(onEnter, ["enter"])]
+							}), null, 16, _hoisted_1)]),
+							_: 2
+						}, 1032, ["modelValue", "display-value"])]),
+						_: 2
+					}, [!usePopover.value && !!_ctx.$slots.prepend ? {
+						name: "prepend",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
+						key: "0"
+					} : void 0, !usePopover.value && !!_ctx.$slots.append ? {
+						name: "append",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
+						key: "1"
+					} : void 0]), 1040, [
+						"active",
+						"model-value",
+						"type",
+						"label",
+						"placeholder",
+						"design",
+						"icon-append",
+						"icon-prepend",
+						"class",
+						"no-underline",
+						"data-expanded"
+					])]),
+					_: 3
+				}),
 				createVNode(unref(DefineContentTemplate), null, {
-					default: withCtx(() => [createVNode(unref(ComboboxContent), mergeProps(comboboxContentProps.value, { position: usePopover.value ? "inline" : "popper" }), {
+					default: withCtx(() => [createVNode(unref(ComboboxContent), mergeProps(comboboxContentProps.value, { position: usePopover.value ? "inline" : __props.popupPosition }), {
 						default: withCtx(() => [createVNode(unref(ComboboxViewport), { class: "" }, {
 							default: withCtx(() => [createVNode(unref(ComboboxEmpty), { class: "select-grp-label" }, {
-								default: withCtx(() => [renderSlot(_ctx.$slots, "empty", {}, () => [_cache[10] || (_cache[10] = createElementVNode("span", null, "No Options", -1))])]),
+								default: withCtx(() => [renderSlot(_ctx.$slots, "empty", {}, () => [_cache[3] || (_cache[3] = createElementVNode("span", null, "No Options", -1))])]),
 								_: 3
 							}), (openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, (g, grpIndex) => {
 								return openBlock(), createBlock(unref(ComboboxGroup), { key: grpIndex }, {
@@ -408,14 +387,14 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 										grpIndex > 0 ? (openBlock(), createBlock(unref(ComboboxSeparator), {
 											key: 0,
 											class: "select-separator"
-										})) : createCommentVNode("v-if", true),
+										})) : createCommentVNode("", true),
 										!!g.grp ? (openBlock(), createBlock(unref(ComboboxLabel), {
 											key: 1,
 											class: "select-grp-label"
 										}, {
 											default: withCtx(() => [renderSlot(_ctx.$slots, "group-label", mergeProps({ ref_for: true }, g), () => [createElementVNode("span", null, toDisplayString(g.grp), 1)])]),
 											_: 2
-										}, 1024)) : createCommentVNode("v-if", true),
+										}, 1024)) : createCommentVNode("", true),
 										(openBlock(true), createElementBlock(Fragment, null, renderList(g.items, (item, index) => {
 											return openBlock(), createBlock(unref(ComboboxItem), {
 												key: index,
@@ -450,106 +429,38 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 					_: 3
 				}),
 				createVNode(unref(DefineRootTemplate), null, {
-					default: withCtx((templateProps) => [createVNode(unref(ComboboxRoot), {
-						class: normalizeClass([templateProps.class, "relative w-full h-full"]),
+					default: withCtx(() => [createVNode(unref(ComboboxRoot), mergeProps(unref(rootProps), {
+						class: usePopover.value || __props.groupItem ? void 0 : "relative w-full h-full",
 						modelValue: modelValue.value,
-						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modelValue.value = $event),
-						"reset-search-term-on-blur": __props.resetSearchTermOnBlur,
-						"default-open": usePopover.value,
-						open: modelOpen.value,
-						"onUpdate:open": _cache[3] || (_cache[3] = ($event) => modelOpen.value = $event),
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
+						"default-open": usePopover.value || __props.defaultOpen,
+						open: usePopover.value ? true : unref(rootOpen),
+						"onUpdate:open": onComboboxRootOpen,
 						disabled: __props.disabled,
 						required: __props.required,
 						multiple: __props.multiple,
 						"as-child": usePopover.value || __props.groupItem
-					}, {
-						default: withCtx(() => [
-							createVNode(unref(DefineInputBaseTemplate), null, {
-								default: withCtx(() => [createCommentVNode(" prettier-ignore-attribute v-model "), createVNode(VuInputBase, mergeProps({
-									onClick: openPopup,
-									active: modelOpen.value,
-									modelValue: modelValue.value,
-									"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event)
-								}, shellProps.value, {
-									type: usePopover.value ? "text" : shellProps.value?.type,
-									label: usePopover.value ? "" : shellProps.value?.label,
-									placeholder: usePopover.value ? "Search" : shellProps.value?.placeholder,
-									design: usePopover.value ? "filled" : shellProps.value?.design,
-									"icon-append": usePopover.value ? void 0 : __props.dropdownIcon,
-									"icon-prepend": usePopover.value ? "i--search" : shellProps.value?.iconPrepend,
-									class: usePopover.value ? "i8-border-none i8-outline-none" : "i8-combobox",
-									onAppendClick: openPopup,
-									"no-underline": usePopover.value,
-									"data-expanded": usePopover.value ? void 0 : modelOpen.value
-								}), createSlots({
-									default: withCtx((slotProps) => [createVNode(unref(ComboboxInput), {
-										"as-child": "",
-										modelValue: searchTerm.value,
-										"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
-										"display-value": () => displayValue.value,
-										class: "i8-input"
-									}, {
-										default: withCtx(() => [createElementVNode("input", mergeProps({
-											class: "i8-input",
-											ref_key: "input",
-											ref: input
-										}, slotProps, {
-											onFocus: slotProps.onFocus,
-											onBlur: slotProps.onBlur,
-											onKeydownCapture: [withKeys(handleHomeEnd, ["home", "end"]), withKeys(onEnter, ["enter"])]
-										}), null, 16, _hoisted_1)]),
-										_: 2
-									}, 1032, ["modelValue", "display-value"])]),
-									_: 2
-								}, [!usePopover.value && !!_ctx.$slots.prepend ? {
-									name: "prepend",
-									fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
-									key: "0"
-								} : void 0, !usePopover.value && !!_ctx.$slots.append ? {
-									name: "append",
-									fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
-									key: "1"
-								} : void 0]), 1040, [
-									"active",
-									"modelValue",
-									"type",
-									"label",
-									"placeholder",
-									"design",
-									"icon-append",
-									"icon-prepend",
-									"class",
-									"no-underline",
-									"data-expanded"
-								])]),
-								_: 3
-							}),
-							usePopover.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(UseInputBaseTemplate), {
+					}), {
+						default: withCtx(() => [usePopover.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(UseInputBaseTemplate), {
+							ref_key: "inputTemplate",
+							ref: inputTemplate
+						}, null, 512)])) : (openBlock(), createBlock(unref(ComboboxAnchor), {
+							key: 1,
+							"as-child": ""
+						}, {
+							default: withCtx(() => [createVNode(unref(UseInputBaseTemplate), {
 								ref_key: "inputTemplate",
 								ref: inputTemplate
-							}, null, 512)])) : (openBlock(), createBlock(unref(ComboboxAnchor), {
-								key: 1,
-								"as-child": ""
-							}, {
-								default: withCtx(() => [createVNode(unref(UseInputBaseTemplate), {
-									ref_key: "inputTemplate",
-									ref: inputTemplate
-								}, null, 512)]),
-								_: 1
-							})),
-							usePopover.value ? (openBlock(), createBlock(unref(UseContentTemplate), { key: 2 })) : (openBlock(), createBlock(unref(ComboboxPortal), {
-								key: 3,
-								"as-child": ""
-							}, {
-								default: withCtx(() => [createVNode(unref(UseContentTemplate))]),
-								_: 1
-							}))
-						]),
-						_: 3
-					}, 8, [
+							}, null, 512)]),
+							_: 1
+						})), usePopover.value ? (openBlock(), createBlock(unref(UseContentTemplate), { key: 2 })) : (openBlock(), createBlock(unref(ComboboxPortal), { key: 3 }, {
+							default: withCtx(() => [createVNode(unref(UseContentTemplate))]),
+							_: 1
+						}))]),
+						_: 1
+					}, 16, [
 						"class",
 						"modelValue",
-						"reset-search-term-on-blur",
 						"default-open",
 						"open",
 						"disabled",
@@ -557,12 +468,13 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 						"multiple",
 						"as-child"
 					])]),
-					_: 3
+					_: 1
 				}),
-				createCommentVNode(" reusabe templates end "),
-				__props.readonly || __props.disabled ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createCommentVNode(" prettier-ignore-attribute v-model "), __props.groupItem ? (openBlock(), createBlock(VuInputBase, mergeProps({ key: 0 }, shellProps.value, {
-					modelValue: modelValue.value,
-					"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => modelValue.value = $event),
+				__props.readonly || __props.disabled ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.groupItem ? (openBlock(), createBlock(VuInputBase, mergeProps({ key: 0 }, {
+					..._ctx.$attrs,
+					...forwardProps.value
+				}, {
+					"model-value": unref(value),
 					class: __props.class,
 					"icon-append": props.iconAppend || __props.dropdownIcon
 				}), createSlots({ _: 2 }, [!!_ctx.$slots.prepend ? {
@@ -574,12 +486,14 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
 					key: "1"
 				} : void 0]), 1040, [
-					"modelValue",
+					"model-value",
 					"class",
 					"icon-append"
-				])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" prettier-ignore-attribute v-model "), createVNode(VuInput, mergeProps(forwardProps.value, {
-					modelValue: modelValue.value,
-					"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modelValue.value = $event),
+				])) : (openBlock(), createBlock(VuInput, mergeProps({ key: 1 }, {
+					..._ctx.$attrs,
+					...forwardProps.value
+				}, {
+					"model-value": unref(value),
 					class: __props.class,
 					"icon-append": props.iconAppend || __props.dropdownIcon
 				}), createSlots({ _: 2 }, [
@@ -604,13 +518,14 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 						key: "3"
 					} : void 0
 				]), 1040, [
-					"modelValue",
+					"model-value",
 					"class",
 					"icon-append"
-				])], 2112))], 64)) : usePopover.value ? (openBlock(), createBlock(unref(PopoverRoot), {
+				]))], 64)) : usePopover.value ? (openBlock(), createBlock(unref(PopoverRoot), {
 					key: 1,
-					open: popupOpen.value,
-					"onUpdate:open": _cache[8] || (_cache[8] = ($event) => popupOpen.value = $event),
+					"default-open": __props.defaultOpen,
+					open: unref(rootOpen),
+					"onUpdate:open": _cache[2] || (_cache[2] = (value) => modelOpen.value = value),
 					modal: ""
 				}, {
 					default: withCtx(() => [
@@ -621,12 +536,14 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 							}, () => [createElementVNode("div", mergeProps({ class: "i8-input combobox-multi-input" }, inputAttrs), [createElementVNode("div", _hoisted_3, toDisplayString(selectedLabels.value), 1)], 16)])]),
 							_: 3
 						}),
-						__props.groupItem ? (openBlock(), createBlock(unref(PopoverTrigger), {
-							key: 0,
+						__props.groupItem ? (openBlock(), createBlock(unref(PopoverTrigger), mergeProps({ key: 0 }, {
+							"data-expanded": unref(isOpen),
+							..._ctx.$attrs
+						}, {
 							"as-child": "",
-							"data-expanded": popupOpen.value,
+							"data-vu-trigger": "",
 							class: "i8-combobox"
-						}, {
+						}), {
 							default: withCtx(() => [createVNode(VuInputBase, mergeProps({
 								class: "combobox-embedded-input",
 								tabindex: "0",
@@ -637,9 +554,8 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 								"model-value": selectedLabels.value,
 								readonly: "",
 								"icon-append": __props.dropdownIcon,
-								onAppendClick: _cache[6] || (_cache[6] = ($event) => popupOpen.value = !popupOpen.value),
 								class: __props.class,
-								active: popupOpen.value || focused.value
+								active: unref(isOpen) || focused.value
 							}), createSlots({
 								default: withCtx((inputAttrs) => [createVNode(unref(UseItemsTemplate), { "input-attrs": inputAttrs }, null, 8, ["input-attrs"])]),
 								_: 2
@@ -658,13 +574,19 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 								"active"
 							])]),
 							_: 3
-						}, 8, ["data-expanded"])) : (openBlock(), createBlock(VuInput, mergeProps({ key: 1 }, forwardProps.value, {
+						}, 16)) : (openBlock(), createBlock(VuInput, mergeProps({ key: 1 }, {
+							"data-expanded": unref(isOpen),
+							..._ctx.$attrs,
+							...forwardProps.value
+						}, {
 							"model-value": selectedLabels.value,
 							class: [__props.class, "i8-combobox"],
-							active: popupOpen.value,
-							"data-expanded": popupOpen.value
+							active: unref(isOpen)
 						}), createSlots({
-							default: withCtx((slotProps) => [createVNode(unref(PopoverTrigger), { "as-child": "" }, {
+							default: withCtx((slotProps) => [createVNode(unref(PopoverTrigger), {
+								"as-child": "",
+								"data-vu-trigger": ""
+							}, {
 								default: withCtx(() => [createVNode(VuInputBase, mergeProps({
 									class: "combobox-embedded-input",
 									tabindex: "0",
@@ -674,9 +596,8 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 								}, slotProps, {
 									readonly: "",
 									"icon-append": __props.dropdownIcon,
-									onAppendClick: _cache[7] || (_cache[7] = ($event) => popupOpen.value = !popupOpen.value),
 									"model-value": selectedLabels.value,
-									active: popupOpen.value || focused.value
+									active: unref(isOpen) || focused.value
 								}), createSlots({
 									default: withCtx((inputAttrs) => [createVNode(unref(UseItemsTemplate), { "input-attrs": inputAttrs }, null, 8, ["input-attrs"])]),
 									append: withCtx(({ iconAppend }) => [createElementVNode("div", _hoisted_4, [!!selectedLabels.value && !__props.readonly && !__props.disabled ? (openBlock(), createElementBlock("div", {
@@ -686,7 +607,7 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 									}, [createVNode(VuIcon, {
 										name: "i--clear",
 										class: "combobox-c8-icon"
-									})])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_5, [createVNode(VuIcon, {
+									})])) : createCommentVNode("", true), createElementVNode("div", _hoisted_5, [createVNode(VuIcon, {
 										name: __props.dropdownIcon,
 										class: "combobox-c8-icon"
 									}, null, 8, ["name"])])])]),
@@ -714,8 +635,7 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 						} : void 0]), 1040, [
 							"model-value",
 							"class",
-							"active",
-							"data-expanded"
+							"active"
 						])),
 						createVNode(unref(PopoverPortal), null, {
 							default: withCtx(() => [createVNode(unref(PopoverContent), mergeProps(popoverContentProps.value, {
@@ -732,17 +652,21 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 						})
 					]),
 					_: 3
-				}, 8, ["open"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [__props.groupItem ? (openBlock(), createBlock(unref(UseRootTemplate), {
-					key: 0,
-					class: normalizeClass(__props.class)
-				}, null, 8, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" prettier-ignore-attribute v-model "), createVNode(VuInput, mergeProps(forwardProps.value, {
-					modelValue: modelValue.value,
-					"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => modelValue.value = $event),
+				}, 8, ["default-open", "open"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [__props.groupItem ? (openBlock(), createBlock(unref(UseRootTemplate), mergeProps({ key: 0 }, _ctx.$attrs, { class: __props.class }), null, 16, ["class"])) : (openBlock(), createBlock(VuInput, mergeProps({ key: 1 }, {
+					..._ctx.$attrs,
+					...forwardProps.value
+				}, {
+					"model-value": unref(value),
+					active: unref(isOpen),
 					class: __props.class
 				}), {
 					default: withCtx(() => [createVNode(unref(UseRootTemplate))]),
 					_: 1
-				}, 16, ["modelValue", "class"])], 2112))], 64))
+				}, 16, [
+					"model-value",
+					"active",
+					"class"
+				]))], 64))
 			], 64);
 		};
 	}