@auronui/vue 1.0.12 → 1.0.14

package/dist/cjs/index.cjs

@@ -13430,12 +13430,10 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}, { immediate: true });
 		(0, _vueuse_core.useResizeObserver)(scrollWrapperEl, () => (0, vue.nextTick)(updateScrollButtons));
 		const containerEl = (0, vue.useTemplateRef)("containerEl");
-		const moreBtnEl = (0, vue.useTemplateRef)("moreBtnEl");
 		const dropdownEl = (0, vue.useTemplateRef)("dropdownEl");
 		const hiddenTabs = (0, vue.ref)([]);
 		const dropdownOpen = (0, vue.ref)(false);
 		const hasOverflow = (0, vue.computed)(() => hiddenTabs.value.length > 0);
-		let moreBtnNaturalWidth = 48;
 		(0, _vueuse_core.onClickOutside)(dropdownEl, () => {
 			dropdownOpen.value = false;
 		});
@@ -13452,7 +13450,19 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				});
 				listEl.offsetWidth;
 			}
-			const containerWidth = containerEl.value.clientWidth;
+			let moreWidth = 0;
+			const moreEl = dropdownEl.value;
+			if (moreEl) {
+				const prevDisplay = moreEl.style.display;
+				moreEl.style.display = "flex";
+				moreEl.offsetWidth;
+				moreWidth = moreEl.offsetWidth;
+				moreEl.style.display = prevDisplay;
+			}
+			const cs = getComputedStyle(containerEl.value);
+			const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+			const gap = parseFloat(cs.columnGap) || 0;
+			const contentWidth = containerEl.value.clientWidth - padX;
 			const tabWidths = allTabs.map((t) => t.offsetWidth);
 			const totalWidth = tabWidths.reduce((sum, w) => sum + w, 0);
 			if (listEl) {
@@ -13462,11 +13472,11 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					t.style.width = "";
 				});
 			}
-			if (totalWidth <= containerWidth) {
+			if (totalWidth <= contentWidth) {
 				hiddenTabs.value = [];
 				return;
 			}
-			const available = containerWidth - moreBtnNaturalWidth;
+			const available = contentWidth - moreWidth - gap - 1;
 			let accumulated = 0;
 			const newHidden = [];
 			const visibleEls = [];
@@ -13508,13 +13518,6 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}
 		(0, _vueuse_core.useResizeObserver)(containerEl, () => (0, vue.nextTick)(computeOverflow));
 		(0, vue.onMounted)(() => {
-			const btnEl = moreBtnEl.value?.$el;
-			if (btnEl) {
-				btnEl.style.display = "flex";
-				btnEl.offsetWidth;
-				moreBtnNaturalWidth = btnEl.offsetWidth;
-				btnEl.style.display = "";
-			}
 			(0, vue.nextTick)(computeOverflow);
 		});
 		(0, vue.watch)(() => ctx.currentValue.value, () => {
@@ -13619,8 +13622,6 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				ref: dropdownEl,
 				class: (0, vue.normalizeClass)(["tabs__more", { "tabs__more--visible": hasOverflow.value }])
 			}, [(0, vue.createVNode)(Button_default, {
-				ref_key: "moreBtnEl",
-				ref: moreBtnEl,
 				variant: "secondary",
 				size: "sm",
 				radius: "full",
@@ -15131,186 +15132,31 @@ var ListBoxSection_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/select/Select.context.ts
 var { useProvide: useSelectProvide, useInject: useSelectInject, key: selectContextKey } = createContext("Select");
 //#endregion
-//#region src/components/select/Select.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$37 = [
-	"data-invalid",
-	"data-disabled",
-	"data-readonly",
-	"data-required",
-	"data-has-label",
-	"data-has-helper"
-];
-var _hoisted_2$22 = ["for"];
-var _hoisted_3$13 = {
-	key: 0,
-	"aria-hidden": "true"
-};
-var _hoisted_4$8 = ["id"];
-var _hoisted_5$6 = ["id"];
-//#endregion
-//#region src/components/select/Select.vue
-var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	inheritAttrs: false,
-	__name: "Select",
-	props: {
-		variant: { default: "flat" },
-		size: { default: "md" },
-		color: { default: "default" },
-		labelPlacement: { default: "inside" },
-		fullWidth: {
-			type: Boolean,
-			default: false
-		},
-		isInvalid: {
-			type: Boolean,
-			default: false
-		},
-		isDisabled: {
-			type: Boolean,
-			default: false
-		},
-		isReadonly: {
-			type: Boolean,
-			default: false
-		},
-		isRequired: {
-			type: Boolean,
-			default: false
-		},
-		placeholder: {},
-		name: {},
-		label: {},
-		description: {},
-		errorMessage: {},
-		class: {},
-		modelValue: { default: void 0 },
-		defaultValue: { default: void 0 },
-		multiple: {
-			type: Boolean,
-			default: false
-		},
-		open: {
-			type: Boolean,
-			default: void 0
-		},
-		defaultOpen: {
-			type: Boolean,
-			default: void 0
-		}
-	},
-	emits: ["update:modelValue", "update:open"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const attrs = (0, vue.useAttrs)();
-		const generatedId = (0, vue.useId)();
-		const triggerId = (0, vue.computed)(() => attrs.id ?? generatedId);
-		const hasLabel = (0, vue.computed)(() => !!props.label);
-		const descriptionId = (0, vue.computed)(() => `${triggerId.value}-description`);
-		const errorMessageId = (0, vue.computed)(() => `${triggerId.value}-error`);
-		const showError = (0, vue.computed)(() => props.isInvalid && !!props.errorMessage);
-		const showDescription = (0, vue.computed)(() => !!props.description && !showError.value);
-		const hasHelper = (0, vue.computed)(() => showError.value || showDescription.value);
-		const ariaDescribedBy = (0, vue.computed)(() => {
-			if (showError.value) return errorMessageId.value;
-			if (showDescription.value) return descriptionId.value;
-		});
-		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.selectVariants)({
-			variant: props.variant,
-			size: props.size,
-			color: props.color,
-			fullWidth: props.fullWidth,
-			isInvalid: props.isInvalid,
-			isDisabled: props.isDisabled,
-			isReadonly: props.isReadonly,
-			hasLabel: hasLabel.value,
-			labelPlacement: props.labelPlacement
-		}));
-		const showOutsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement !== "inside");
-		const itemRegistry = (0, vue.reactive)(/* @__PURE__ */ new Map());
-		const registerItem = (value, label) => {
-			itemRegistry.set(value, label);
-		};
-		const itemLabel = (value) => {
-			if (value == null) return "";
-			if (Array.isArray(value)) return value.map((v) => itemRegistry.get(v) ?? v).filter(Boolean).join(", ");
-			return itemRegistry.get(value) ?? value;
-		};
-		function removeValue(value) {
-			emit("update:modelValue", (Array.isArray(props.modelValue) ? props.modelValue : []).filter((v) => v !== value));
+//#region src/utils/hasSlotComponent.ts
+/**
+* Returns true if any vnode in `nodes` has a `type` referentially equal to one
+* of `components`, recursively flattening `Fragment` (v-for / template) children.
+*
+* Dropdown form controls (Select, Autocomplete, ComboBox) use this to detect
+* whether the consumer supplied explicit compound chrome (e.g. SelectTrigger /
+* SelectContent) versus terse `*Item` children or an `items` prop. When chrome
+* is present the control passes the slot through unchanged; otherwise it renders
+* the trigger/value/content internally.
+*/
+function hasSlotComponent(nodes, components) {
+	if (!nodes) return false;
+	for (const node of nodes) {
+		if (components.includes(node.type)) return true;
+		if (node.type === vue.Fragment && Array.isArray(node.children)) {
+			if (hasSlotComponent(node.children, components)) return true;
 		}
-		useSelectProvide({
-			isDisabled: (0, vue.toRef)(props, "isDisabled"),
-			isInvalid: (0, vue.toRef)(props, "isInvalid"),
-			isReadonly: (0, vue.toRef)(props, "isReadonly"),
-			isRequired: (0, vue.toRef)(props, "isRequired"),
-			fullWidth: (0, vue.toRef)(props, "fullWidth"),
-			hasLabel,
-			labelPlacement: (0, vue.toRef)(props, "labelPlacement"),
-			triggerId,
-			label: (0, vue.toRef)(props, "label"),
-			ariaDescribedBy,
-			slots: slotFns,
-			multiple: (0, vue.toRef)(props, "multiple"),
-			registerItem,
-			itemLabel,
-			removeValue
-		});
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
-				"data-invalid": __props.isInvalid || void 0,
-				"data-disabled": __props.isDisabled || void 0,
-				"data-readonly": __props.isReadonly || void 0,
-				"data-required": __props.isRequired || void 0,
-				"data-has-label": hasLabel.value || void 0,
-				"data-has-helper": hasHelper.value || void 0
-			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
-				key: 0,
-				for: triggerId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$13, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$22)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectRoot), {
-				"model-value": props.modelValue,
-				"default-value": props.defaultValue,
-				multiple: props.multiple,
-				open: props.open,
-				"default-open": props.defaultOpen,
-				disabled: props.isDisabled,
-				required: props.isRequired,
-				name: props.name,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event)),
-				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => emit("update:open", $event))
-			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, [
-				"model-value",
-				"default-value",
-				"multiple",
-				"open",
-				"default-open",
-				"disabled",
-				"required",
-				"name"
-			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
-			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				key: 0,
-				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
-			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_4$8)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				key: 1,
-				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$6)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$37);
-		};
 	}
-});
+	return false;
+}
 //#endregion
 //#region src/components/select/SelectTrigger.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$36 = ["for"];
-var _hoisted_2$21 = {
+var _hoisted_1$37 = ["for"];
+var _hoisted_2$22 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -15345,7 +15191,7 @@ var SelectTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						for: (0, vue.unref)(ctx).triggerId.value,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.label())
-					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$21, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$36)) : (0, vue.createCommentVNode)("", true),
+					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$22, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$37)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.startContent()),
@@ -15386,7 +15232,7 @@ var SelectTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/select/SelectOverflowChips.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$35 = {
+var _hoisted_1$36 = {
 	ref: "container",
 	style: {
 		"display": "flex",
@@ -15444,7 +15290,7 @@ var SelectOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		(0, _vueuse_core.useResizeObserver)(containerEl, reflow);
 		(0, vue.watch)(() => props.values.join("\0"), () => reflow(), { flush: "post" });
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$35, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$36, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
 					key: val,
 					"data-chip-item": "",
@@ -15486,7 +15332,7 @@ var SelectValue_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					key: 0,
 					values: modelValue,
 					"get-label": (0, vue.unref)(ctx).itemLabel
-				}, null, 8, ["values", "get-label"])) : (0, vue.unref)(ctx).multiple.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64)) : selectedLabel && selectedLabel.length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).itemLabel(Array.isArray(modelValue) ? modelValue : modelValue.toString())), 1)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 4 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64))]),
+				}, null, 8, ["values", "get-label"])) : (0, vue.unref)(ctx).multiple.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64)) : selectedLabel && selectedLabel.length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).itemLabel(modelValue)), 1)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 4 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64))]),
 				_: 1
 			}, 8, ["class", "placeholder"]);
 		};
@@ -15568,14 +15414,14 @@ var SelectItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		if (props.textValue !== void 0) ctx.registerItem(props.value, props.textValue);
 		(0, vue.onMounted)(() => {
 			const el = textRef.value?.$el;
-			const label = props.textValue ?? el?.textContent?.trim() ?? props.value;
+			const label = props.textValue ?? el?.textContent?.trim() ?? String(props.value);
 			ctx.registerItem(props.value, label);
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SelectItem), {
 				value: props.value,
 				disabled: props.isDisabled,
-				"text-value": props.textValue ?? props.value,
+				"text-value": props.textValue ?? String(props.value),
 				class: "list-box-item list-box-item--default",
 				"data-slot": "list-box-item"
 			}, {
@@ -15619,51 +15465,251 @@ var SelectItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region src/components/dropdown/Dropdown.context.ts
-var { useProvide: useDropdownProvide, useInject: useDropdownInject, key: dropdownContextKey } = createContext("Dropdown");
+//#region src/components/select/Select.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$35 = [
+	"data-invalid",
+	"data-disabled",
+	"data-readonly",
+	"data-required",
+	"data-has-label",
+	"data-has-helper"
+];
+var _hoisted_2$21 = ["for"];
+var _hoisted_3$13 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+var _hoisted_4$8 = ["id"];
+var _hoisted_5$6 = ["id"];
 //#endregion
-//#region src/components/dropdown/Dropdown.vue
-var Dropdown_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "Dropdown",
+//#region src/components/select/Select.vue
+var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "Select",
 	props: {
-		isOpen: {
+		variant: { default: "flat" },
+		size: { default: "md" },
+		color: { default: "default" },
+		labelPlacement: { default: "inside" },
+		fullWidth: {
 			type: Boolean,
-			default: void 0
+			default: false
 		},
-		defaultOpen: {
+		isInvalid: {
 			type: Boolean,
-			default: void 0
+			default: false
 		},
-		modal: {
+		isDisabled: {
 			type: Boolean,
-			default: true
+			default: false
 		},
-		variant: { default: void 0 },
-		color: { default: void 0 },
-		size: { default: void 0 },
-		closeOnSelect: {
+		isReadonly: {
 			type: Boolean,
-			default: true
+			default: false
 		},
-		disableAnimation: {
+		isRequired: {
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		placeholder: {},
+		name: {},
+		label: {},
+		description: {},
+		errorMessage: {},
+		class: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		items: { default: () => [] }
 	},
-	emits: ["update:isOpen"],
+	emits: ["update:modelValue", "update:open"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		useDropdownProvide({
-			variant: (0, vue.toRef)(props, "variant"),
-			color: (0, vue.toRef)(props, "color"),
-			size: (0, vue.toRef)(props, "size"),
-			closeOnSelect: (0, vue.toRef)(props, "closeOnSelect"),
-			disableAnimation: (0, vue.toRef)(props, "disableAnimation")
-		});
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.DropdownMenuRoot), {
+		const attrs = (0, vue.useAttrs)();
+		const generatedId = (0, vue.useId)();
+		const triggerId = (0, vue.computed)(() => attrs.id ?? generatedId);
+		const hasLabel = (0, vue.computed)(() => !!props.label);
+		const slots = (0, vue.useSlots)();
+		const usesCustomChrome = (0, vue.computed)(() => hasSlotComponent(slots.default?.(), [SelectTrigger_default, SelectContent_default]));
+		const descriptionId = (0, vue.computed)(() => `${triggerId.value}-description`);
+		const errorMessageId = (0, vue.computed)(() => `${triggerId.value}-error`);
+		const showError = (0, vue.computed)(() => props.isInvalid && !!props.errorMessage);
+		const showDescription = (0, vue.computed)(() => !!props.description && !showError.value);
+		const hasHelper = (0, vue.computed)(() => showError.value || showDescription.value);
+		const ariaDescribedBy = (0, vue.computed)(() => {
+			if (showError.value) return errorMessageId.value;
+			if (showDescription.value) return descriptionId.value;
+		});
+		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.selectVariants)({
+			variant: props.variant,
+			size: props.size,
+			color: props.color,
+			fullWidth: props.fullWidth,
+			isInvalid: props.isInvalid,
+			isDisabled: props.isDisabled,
+			isReadonly: props.isReadonly,
+			hasLabel: hasLabel.value,
+			labelPlacement: props.labelPlacement
+		}));
+		const showOutsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement !== "inside");
+		const itemRegistry = (0, vue.reactive)(/* @__PURE__ */ new Map());
+		const registerItem = (value, label) => {
+			itemRegistry.set(value, label);
+		};
+		const itemLabel = (value) => {
+			if (value == null) return "";
+			if (Array.isArray(value)) return value.map((v) => String(itemRegistry.get(v) ?? v)).filter((s) => s.length > 0).join(", ");
+			return itemRegistry.get(value) ?? String(value);
+		};
+		function removeValue(value) {
+			emit("update:modelValue", (Array.isArray(props.modelValue) ? props.modelValue : []).filter((v) => v !== value));
+		}
+		useSelectProvide({
+			isDisabled: (0, vue.toRef)(props, "isDisabled"),
+			isInvalid: (0, vue.toRef)(props, "isInvalid"),
+			isReadonly: (0, vue.toRef)(props, "isReadonly"),
+			isRequired: (0, vue.toRef)(props, "isRequired"),
+			fullWidth: (0, vue.toRef)(props, "fullWidth"),
+			hasLabel,
+			labelPlacement: (0, vue.toRef)(props, "labelPlacement"),
+			triggerId,
+			label: (0, vue.toRef)(props, "label"),
+			ariaDescribedBy,
+			slots: slotFns,
+			multiple: (0, vue.toRef)(props, "multiple"),
+			registerItem,
+			itemLabel,
+			removeValue
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				"data-invalid": __props.isInvalid || void 0,
+				"data-disabled": __props.isDisabled || void 0,
+				"data-readonly": __props.isReadonly || void 0,
+				"data-required": __props.isRequired || void 0,
+				"data-has-label": hasLabel.value || void 0,
+				"data-has-helper": hasHelper.value || void 0
+			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
+				key: 0,
+				for: triggerId.value,
+				class: (0, vue.normalizeClass)(slotFns.value.label())
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$13, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$21)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectRoot), {
+				"model-value": props.modelValue,
+				"default-value": props.defaultValue,
+				multiple: props.multiple,
+				open: props.open,
+				"default-open": props.defaultOpen,
+				disabled: props.isDisabled,
+				required: props.isRequired,
+				name: props.name,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event)),
+				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => emit("update:open", $event))
+			}, {
+				default: (0, vue.withCtx)(() => [usesCustomChrome.value ? (0, vue.renderSlot)(_ctx.$slots, "default", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createVNode)(SelectTrigger_default, null, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(SelectValue_default, { placeholder: props.placeholder }, null, 8, ["placeholder"])]),
+					_: 1
+				}), (0, vue.createVNode)(SelectContent_default, null, {
+					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(props.items, (item) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)(SelectItem_default, {
+							key: item.value,
+							value: item.value,
+							"text-value": item.textValue ?? item.label,
+							"is-disabled": item.isDisabled
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "item", { item }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? String(item.value)), 1)])]),
+							_: 2
+						}, 1032, [
+							"value",
+							"text-value",
+							"is-disabled"
+						]);
+					}), 128)), (0, vue.renderSlot)(_ctx.$slots, "default")]),
+					_: 3
+				})], 64))]),
+				_: 3
+			}, 8, [
+				"model-value",
+				"default-value",
+				"multiple",
+				"open",
+				"default-open",
+				"disabled",
+				"required",
+				"name"
+			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				id: errorMessageId.value,
+				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
+			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_4$8)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 1,
+				id: descriptionId.value,
+				class: (0, vue.normalizeClass)(slotFns.value.description())
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$6)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$35);
+		};
+	}
+});
+//#endregion
+//#region src/components/dropdown/Dropdown.context.ts
+var { useProvide: useDropdownProvide, useInject: useDropdownInject, key: dropdownContextKey } = createContext("Dropdown");
+//#endregion
+//#region src/components/dropdown/Dropdown.vue
+var Dropdown_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "Dropdown",
+	props: {
+		isOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		modal: {
+			type: Boolean,
+			default: true
+		},
+		variant: { default: void 0 },
+		color: { default: void 0 },
+		size: { default: void 0 },
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		disableAnimation: {
+			type: Boolean,
+			default: false
+		},
+		class: { default: void 0 }
+	},
+	emits: ["update:isOpen"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		useDropdownProvide({
+			variant: (0, vue.toRef)(props, "variant"),
+			color: (0, vue.toRef)(props, "color"),
+			size: (0, vue.toRef)(props, "size"),
+			closeOnSelect: (0, vue.toRef)(props, "closeOnSelect"),
+			disableAnimation: (0, vue.toRef)(props, "disableAnimation")
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.DropdownMenuRoot), {
 				open: props.isOpen,
 				"default-open": props.defaultOpen,
 				modal: props.modal,
@@ -16108,176 +16154,14 @@ var DropdownSubContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/combo-box/ComboBox.context.ts
 var { useProvide: useComboBoxProvide, useInject: useComboBoxInject, key: comboBoxContextKey } = createContext("ComboBox");
 //#endregion
-//#region src/components/combo-box/ComboBox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$33 = ["aria-invalid"];
-var _hoisted_2$19 = ["id"];
-var _hoisted_3$11 = {
-	key: 0,
-	"aria-hidden": "true"
-};
-var _hoisted_4$6 = {
-	key: 1,
-	"data-slot": "helper-wrapper"
-};
-var _hoisted_5$5 = {
-	key: 0,
-	"data-slot": "error-message",
-	"aria-live": "polite"
-};
-var _hoisted_6$4 = {
-	key: 1,
-	"data-slot": "description"
-};
-//#endregion
-//#region src/components/combo-box/ComboBox.vue
-var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "ComboBox",
+//#region src/components/combo-box/ComboBoxInput.vue
+var ComboBoxInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ComboBoxInput",
 	props: {
-		modelValue: { default: void 0 },
-		defaultValue: { default: void 0 },
-		open: {
-			type: Boolean,
-			default: void 0
-		},
-		defaultOpen: {
-			type: Boolean,
-			default: void 0
-		},
-		items: { default: () => [] },
-		label: { default: void 0 },
 		placeholder: { default: void 0 },
-		description: { default: void 0 },
-		errorMessage: { default: void 0 },
-		isInvalid: {
-			type: Boolean,
-			default: false
-		},
-		isDisabled: {
-			type: Boolean,
-			default: false
-		},
-		isRequired: {
-			type: Boolean,
-			default: false
-		},
-		allowsCustomValue: {
-			type: Boolean,
-			default: false
-		},
-		fullWidth: {
-			type: Boolean,
-			default: false
-		},
-		filterFunction: {
-			type: Function,
-			default: void 0
-		},
 		class: { default: void 0 }
 	},
-	emits: ["update:modelValue", "update:open"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const labelId = (0, vue.useId)();
-		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.comboBoxVariants)({ fullWidth: props.fullWidth }));
-		const effectiveFilter = (0, vue.computed)(() => {
-			if (props.filterFunction) return props.filterFunction;
-			return (itemText, searchTerm) => itemText.toLowerCase().includes(searchTerm.toLowerCase());
-		});
-		const slotItemRegistry = (0, vue.ref)(/* @__PURE__ */ new Map());
-		function registerItem(value, label) {
-			const next = new Map(slotItemRegistry.value);
-			next.set(value, label);
-			slotItemRegistry.value = next;
-		}
-		function unregisterItem(value) {
-			const next = new Map(slotItemRegistry.value);
-			next.delete(value);
-			slotItemRegistry.value = next;
-		}
-		function labelFor(value) {
-			if (!value) return "";
-			const item = props.items.find((i) => i.value === value);
-			if (item) return item.label ?? item.textValue ?? value;
-			return slotItemRegistry.value.get(value) ?? value;
-		}
-		function valueFor(label) {
-			if (!label) return "";
-			const item = props.items.find((i) => (i.label ?? i.textValue ?? i.value) === label);
-			if (item) return item.value;
-			for (const [value, lbl] of slotItemRegistry.value) if (lbl === label) return value;
-			return label;
-		}
-		const internalValue = (0, vue.ref)(labelFor(props.modelValue));
-		const displayValue = (0, vue.computed)(() => (val) => val);
-		(0, vue.watch)(() => props.modelValue, (val) => {
-			const next = labelFor(val);
-			if (internalValue.value !== next) internalValue.value = next;
-		});
-		function handleModelValueUpdate(emitted) {
-			internalValue.value = emitted;
-			emit("update:modelValue", valueFor(emitted));
-		}
-		(0, vue.watch)(slotItemRegistry, () => {
-			const next = labelFor(props.modelValue);
-			if (next !== internalValue.value && valueFor(internalValue.value) === (props.modelValue ?? "")) internalValue.value = next;
-		});
-		useComboBoxProvide({
-			isDisabled: (0, vue.toRef)(props, "isDisabled"),
-			isInvalid: (0, vue.toRef)(props, "isInvalid"),
-			fullWidth: (0, vue.toRef)(props, "fullWidth"),
-			slots: slotFns,
-			displayValue,
-			registerItem,
-			unregisterItem
-		});
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
-				"aria-invalid": props.isInvalid || void 0,
-				"data-slot": "combo-box"
-			}, [
-				props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
-					key: 0,
-					id: (0, vue.unref)(labelId),
-					"data-slot": "label"
-				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.label) + " ", 1), props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$11, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$19)) : (0, vue.createCommentVNode)("", true),
-				(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxRoot), {
-					modelValue: internalValue.value,
-					"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => internalValue.value = $event), _cache[1] || (_cache[1] = ($event) => handleModelValueUpdate($event))],
-					"default-value": props.defaultValue ? labelFor(props.defaultValue) : void 0,
-					open: props.open,
-					"default-open": props.defaultOpen,
-					disabled: props.isDisabled,
-					required: props.isRequired,
-					"filter-function": effectiveFilter.value,
-					"onUpdate:open": _cache[2] || (_cache[2] = ($event) => emit("update:open", $event))
-				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-					_: 3
-				}, 8, [
-					"modelValue",
-					"default-value",
-					"open",
-					"default-open",
-					"disabled",
-					"required",
-					"filter-function"
-				]),
-				props.description || props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$6, [props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_5$5, (0, vue.toDisplayString)(props.errorMessage), 1)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_6$4, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$33);
-		};
-	}
-});
-//#endregion
-//#region src/components/combo-box/ComboBoxInput.vue
-var ComboBoxInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "ComboBoxInput",
-	props: {
-		placeholder: { default: void 0 },
-		class: { default: void 0 }
-	},
-	setup(__props) {
+	setup(__props) {
 		const props = __props;
 		const ctx = useComboBoxInject();
 		return (_ctx, _cache) => {
@@ -16518,64 +16402,51 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region src/components/combo-box/ComboBoxEmpty.vue
-var ComboBoxEmpty_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "ComboBoxEmpty",
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ComboboxEmpty), {
-				class: "py-3 text-center text-sm text-default-400",
-				"data-slot": "empty-content"
-			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-				_: 3
-			});
-		};
-	}
-});
-//#endregion
-//#region src/components/autocomplete/Autocomplete.context.ts
-var { useProvide: useAutocompleteProvide, useInject: useAutocompleteInject, key: autocompleteContextKey } = createContext("Autocomplete");
-//#endregion
-//#region src/components/autocomplete/Autocomplete.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$32 = [
-	"data-invalid",
-	"data-disabled",
-	"data-readonly",
-	"data-required",
-	"data-has-label",
-	"data-has-helper"
-];
-var _hoisted_2$18 = ["for"];
-var _hoisted_3$10 = {
+//#region src/components/combo-box/ComboBox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$33 = ["aria-invalid"];
+var _hoisted_2$19 = ["id"];
+var _hoisted_3$11 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_4$5 = ["id"];
-var _hoisted_5$4 = ["id"];
+var _hoisted_4$6 = {
+	key: 1,
+	"data-slot": "helper-wrapper"
+};
+var _hoisted_5$5 = {
+	key: 0,
+	"data-slot": "error-message",
+	"aria-live": "polite"
+};
+var _hoisted_6$4 = {
+	key: 1,
+	"data-slot": "description"
+};
 //#endregion
-//#region src/components/autocomplete/Autocomplete.vue
-var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	inheritAttrs: false,
-	__name: "Autocomplete",
+//#region src/components/combo-box/ComboBox.vue
+var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ComboBox",
 	props: {
-		variant: { default: "flat" },
-		size: { default: "md" },
-		color: { default: "default" },
-		labelPlacement: { default: "inside" },
-		fullWidth: {
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
+		open: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
-		isInvalid: {
+		defaultOpen: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
-		isDisabled: {
+		items: { default: () => [] },
+		label: { default: void 0 },
+		placeholder: { default: void 0 },
+		description: { default: void 0 },
+		errorMessage: { default: void 0 },
+		isInvalid: {
 			type: Boolean,
 			default: false
 		},
-		isReadonly: {
+		isDisabled: {
 			type: Boolean,
 			default: false
 		},
@@ -16583,54 +16454,32 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		placeholder: {},
-		name: {},
-		label: {},
-		description: {},
-		errorMessage: {},
-		class: {},
-		modelValue: { default: void 0 },
-		defaultValue: { default: void 0 },
-		multiple: {
+		allowsCustomValue: {
 			type: Boolean,
 			default: false
 		},
-		multipleOverflow: { default: "wrap" },
-		open: {
-			type: Boolean,
-			default: void 0
-		},
-		defaultOpen: {
+		fullWidth: {
 			type: Boolean,
-			default: void 0
+			default: false
 		},
-		items: { default: () => [] },
-		loadItems: {
+		filterFunction: {
 			type: Function,
 			default: void 0
 		},
-		debounceMs: { default: 200 },
-		filterOnOpen: {
-			type: Boolean,
-			default: false
-		},
-		truncateItems: {
-			type: Boolean,
-			default: true
-		}
+		class: { default: void 0 }
 	},
-	emits: [
-		"update:modelValue",
-		"update:open",
-		"create"
-	],
+	emits: ["update:modelValue", "update:open"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const attrs = (0, vue.useAttrs)();
-		const generatedId = (0, vue.useId)();
-		const inputId = (0, vue.computed)(() => attrs.id ?? generatedId);
-		const hasLabel = (0, vue.computed)(() => !!props.label);
+		const labelId = (0, vue.useId)();
+		const slots = (0, vue.useSlots)();
+		const usesCustomChrome = (0, vue.computed)(() => hasSlotComponent(slots.default?.(), [ComboBoxInput_default, ComboBoxContent_default]));
+		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.comboBoxVariants)({ fullWidth: props.fullWidth }));
+		const effectiveFilter = (0, vue.computed)(() => {
+			if (props.filterFunction) return props.filterFunction;
+			return (itemText, searchTerm) => itemText.toLowerCase().includes(searchTerm.toLowerCase());
+		});
 		const slotItemRegistry = (0, vue.ref)(/* @__PURE__ */ new Map());
 		function registerItem(value, label) {
 			const next = new Map(slotItemRegistry.value);
@@ -16642,272 +16491,114 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			next.delete(value);
 			slotItemRegistry.value = next;
 		}
-		const isLoading = (0, vue.ref)(false);
-		const internalItems = (0, vue.ref)([...props.items]);
-		const selectedValues = (0, vue.ref)(props.multiple && Array.isArray(props.modelValue) ? [...props.modelValue] : []);
-		const internalOpen = (0, vue.ref)(props.defaultOpen ?? false);
-		let selectingItem = false;
-		const isOpen = (0, vue.ref)(props.defaultOpen ?? false);
-		const termAtOpen = (0, vue.ref)("");
-		const isUserTyping = (0, vue.ref)(false);
-		const singleOpen = (0, vue.ref)(props.open ?? props.defaultOpen ?? false);
-		let blockReopen = false;
-		let blockReopenTimer;
-		const effectiveIgnoreFilter = (0, vue.computed)(() => {
-			if (props.loadItems) return true;
-			if (!props.filterOnOpen && isOpen.value && !isUserTyping.value) return true;
-			return false;
-		});
 		function labelFor(value) {
-			if (value == null || value === "") return "";
-			const match = internalItems.value.find((i) => i.value === value);
-			if (match) return match.label ?? match.textValue ?? value;
+			if (!value) return "";
+			const item = props.items.find((i) => i.value === value);
+			if (item) return item.label ?? item.textValue ?? value;
 			return slotItemRegistry.value.get(value) ?? value;
 		}
-		function valueFor(displayed) {
-			if (!displayed) return "";
-			const match = internalItems.value.find((i) => (i.label ?? i.textValue ?? i.value) === displayed);
-			if (match) return match.value;
-			for (const [value, label] of slotItemRegistry.value) if (label === displayed) return value;
-			return displayed;
+		function valueFor(label) {
+			if (!label) return "";
+			const item = props.items.find((i) => (i.label ?? i.textValue ?? i.value) === label);
+			if (item) return item.value;
+			for (const [value, lbl] of slotItemRegistry.value) if (lbl === label) return value;
+			return label;
 		}
-		const singleModelValue = (0, vue.computed)(() => props.multiple ? void 0 : props.modelValue);
-		const searchTerm = (0, vue.ref)(labelFor(singleModelValue.value));
-		const isFilled = (0, vue.computed)(() => props.multiple ? selectedValues.value.length > 0 || !!searchTerm.value : !!searchTerm.value);
-		const hasItems = (0, vue.computed)(() => internalItems.value.length > 0);
-		const selectedLabels = (0, vue.computed)(() => selectedValues.value.map((v) => ({
-			value: v,
-			label: labelFor(v) || v
-		})));
-		const descriptionId = (0, vue.computed)(() => `${inputId.value}-description`);
-		const errorMessageId = (0, vue.computed)(() => `${inputId.value}-error`);
-		const showError = (0, vue.computed)(() => props.isInvalid && !!props.errorMessage);
-		const showDescription = (0, vue.computed)(() => !!props.description && !showError.value);
-		const hasHelper = (0, vue.computed)(() => showError.value || showDescription.value);
-		const ariaDescribedBy = (0, vue.computed)(() => {
-			if (showError.value) return errorMessageId.value;
-			if (showDescription.value) return descriptionId.value;
-		});
+		const internalValue = (0, vue.ref)(labelFor(props.modelValue));
+		const displayValue = (0, vue.computed)(() => (val) => val);
 		(0, vue.watch)(() => props.modelValue, (val) => {
-			if (props.multiple) {
-				if (Array.isArray(val)) selectedValues.value = [...val];
-			} else {
-				const next = labelFor(val);
-				if (searchTerm.value !== next) searchTerm.value = next;
-			}
+			const next = labelFor(val);
+			if (internalValue.value !== next) internalValue.value = next;
 		});
-		(0, vue.watch)(() => props.open, (val) => {
-			if (!props.multiple && val !== void 0) singleOpen.value = val;
-		});
-		(0, vue.watch)(searchTerm, (displayed) => {
-			if (props.multiple) {
-				if (isOpen.value && displayed !== termAtOpen.value) isUserTyping.value = true;
-				return;
-			}
-			const next = valueFor(displayed);
-			if (next !== (singleModelValue.value ?? "")) emit("update:modelValue", next);
-			if (isOpen.value && displayed !== termAtOpen.value) isUserTyping.value = true;
-		});
-		function handleOpenChange(val) {
-			if (props.multiple) {
-				isOpen.value = val;
-				internalOpen.value = !val && selectingItem ? true : val;
-				selectingItem = false;
-				if (val) {
-					termAtOpen.value = searchTerm.value;
-					isUserTyping.value = false;
-				} else isUserTyping.value = false;
-				emit("update:open", val);
-				return;
-			}
-			if (val && blockReopen) return;
-			isOpen.value = val;
-			singleOpen.value = val;
-			if (val) {
-				termAtOpen.value = searchTerm.value;
-				isUserTyping.value = false;
-			} else isUserTyping.value = false;
-			emit("update:open", val);
-		}
-		function onMultipleSelect(value) {
-			selectingItem = true;
-			const idx = selectedValues.value.indexOf(value);
-			selectedValues.value = idx === -1 ? [...selectedValues.value, value] : selectedValues.value.filter((_, i) => i !== idx);
-			searchTerm.value = "";
-			isUserTyping.value = false;
-			emit("update:modelValue", selectedValues.value);
-		}
-		function removeValue(value) {
-			selectedValues.value = selectedValues.value.filter((v) => v !== value);
-			emit("update:modelValue", selectedValues.value);
-		}
-		function clearAll() {
-			selectedValues.value = [];
-			emit("update:modelValue", []);
-		}
-		function isSelected(value) {
-			return selectedValues.value.includes(value);
-		}
-		const hasExactMatch = (0, vue.computed)(() => {
-			const term = searchTerm.value.trim().toLowerCase();
-			if (!term) return false;
-			if (internalItems.value.some((i) => (i.label ?? i.textValue ?? i.value).toLowerCase() === term)) return true;
-			for (const label of slotItemRegistry.value.values()) if (label.toLowerCase() === term) return true;
-			return false;
-		});
-		function onCreateValue(value) {
-			const trimmed = value.trim();
-			if (!trimmed) return;
-			if (props.multiple) {
-				if (!selectedValues.value.includes(trimmed)) {
-					selectingItem = true;
-					selectedValues.value = [...selectedValues.value, trimmed];
-					emit("update:modelValue", selectedValues.value);
-				}
-				searchTerm.value = "";
-				isUserTyping.value = false;
-			} else {
-				searchTerm.value = trimmed;
-				emit("update:modelValue", trimmed);
-				isOpen.value = false;
-				singleOpen.value = false;
-				blockReopen = true;
-				clearTimeout(blockReopenTimer);
-				blockReopenTimer = setTimeout(() => {
-					blockReopen = false;
-				}, 300);
-			}
-			emit("create", trimmed);
-		}
-		let debounceTimer;
-		async function runLoadItems(query) {
-			if (!props.loadItems) return;
-			isLoading.value = true;
-			try {
-				internalItems.value = await props.loadItems(query);
-			} finally {
-				isLoading.value = false;
-			}
-		}
-		function scheduleLoad(query) {
-			if (!props.loadItems) return;
-			clearTimeout(debounceTimer);
-			if (props.debounceMs === 0) runLoadItems(query);
-			else debounceTimer = setTimeout(() => void runLoadItems(query), props.debounceMs);
+		function handleModelValueUpdate(emitted) {
+			internalValue.value = emitted;
+			emit("update:modelValue", valueFor(emitted));
 		}
-		(0, vue.onMounted)(() => {
-			if (props.loadItems) runLoadItems(searchTerm.value);
-		});
-		(0, vue.watch)(searchTerm, (q) => {
-			if (props.loadItems) scheduleLoad(q);
-		});
-		(0, vue.watch)(() => props.items, (newItems) => {
-			if (!props.loadItems) internalItems.value = [...newItems];
-		});
-		(0, vue.watch)(internalItems, () => {
-			if (props.multiple) return;
-			const next = labelFor(singleModelValue.value);
-			if (next && searchTerm.value !== next && valueFor(searchTerm.value) === (singleModelValue.value ?? "")) searchTerm.value = next;
-		});
 		(0, vue.watch)(slotItemRegistry, () => {
-			if (props.multiple) return;
-			const next = labelFor(singleModelValue.value);
-			if (next && searchTerm.value !== next && valueFor(searchTerm.value) === (singleModelValue.value ?? "")) searchTerm.value = next;
+			const next = labelFor(props.modelValue);
+			if (next !== internalValue.value && valueFor(internalValue.value) === (props.modelValue ?? "")) internalValue.value = next;
 		});
-		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.autocompleteVariants)({
-			variant: props.variant,
-			size: props.size,
-			color: props.color,
-			fullWidth: props.fullWidth,
-			isInvalid: props.isInvalid,
-			isDisabled: props.isDisabled,
-			isReadonly: props.isReadonly,
-			hasLabel: hasLabel.value,
-			labelPlacement: props.labelPlacement
-		}));
-		const showOutsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement !== "inside");
-		useAutocompleteProvide({
+		useComboBoxProvide({
 			isDisabled: (0, vue.toRef)(props, "isDisabled"),
 			isInvalid: (0, vue.toRef)(props, "isInvalid"),
-			isReadonly: (0, vue.toRef)(props, "isReadonly"),
-			isRequired: (0, vue.toRef)(props, "isRequired"),
-			isLoading,
-			isFilled,
 			fullWidth: (0, vue.toRef)(props, "fullWidth"),
-			hasLabel,
-			labelPlacement: (0, vue.toRef)(props, "labelPlacement"),
-			inputId,
-			label: (0, vue.toRef)(props, "label"),
-			ariaDescribedBy,
-			truncateItems: (0, vue.toRef)(props, "truncateItems"),
-			hasItems,
 			slots: slotFns,
-			multiple: (0, vue.toRef)(props, "multiple"),
-			multipleOverflow: (0, vue.toRef)(props, "multipleOverflow"),
-			selectedValues,
-			selectedLabels,
-			onMultipleSelect,
-			removeValue,
-			clearAll,
-			isSelected,
+			displayValue,
 			registerItem,
-			unregisterItem,
-			searchTerm,
-			hasExactMatch,
-			onCreateValue
+			unregisterItem
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
-				"data-invalid": __props.isInvalid || void 0,
-				"data-disabled": __props.isDisabled || void 0,
-				"data-readonly": __props.isReadonly || void 0,
-				"data-required": __props.isRequired || void 0,
-				"data-has-label": hasLabel.value || void 0,
-				"data-has-helper": hasHelper.value || void 0
-			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
-				key: 0,
-				for: inputId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$10, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$18)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteRoot), {
-				"model-value": searchTerm.value,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
-				open: props.multiple ? internalOpen.value : singleOpen.value,
-				disabled: props.isDisabled,
-				required: props.isRequired,
-				"ignore-filter": effectiveIgnoreFilter.value,
-				"open-on-focus": true,
-				"onUpdate:open": handleOpenChange
+				"aria-invalid": props.isInvalid || void 0,
+				"data-slot": "combo-box"
+			}, [
+				props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
+					key: 0,
+					id: (0, vue.unref)(labelId),
+					"data-slot": "label"
+				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.label) + " ", 1), props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$11, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$19)) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxRoot), {
+					modelValue: internalValue.value,
+					"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => internalValue.value = $event), _cache[1] || (_cache[1] = ($event) => handleModelValueUpdate($event))],
+					"default-value": props.defaultValue ? labelFor(props.defaultValue) : void 0,
+					open: props.open,
+					"default-open": props.defaultOpen,
+					disabled: props.isDisabled,
+					required: props.isRequired,
+					"filter-function": effectiveFilter.value,
+					"onUpdate:open": _cache[2] || (_cache[2] = ($event) => emit("update:open", $event))
+				}, {
+					default: (0, vue.withCtx)(() => [usesCustomChrome.value ? (0, vue.renderSlot)(_ctx.$slots, "default", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createVNode)(ComboBoxInput_default, { placeholder: props.placeholder }, null, 8, ["placeholder"]), (0, vue.createVNode)(ComboBoxContent_default, null, {
+						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(props.items, (item) => {
+							return (0, vue.openBlock)(), (0, vue.createBlock)(ComboBoxItem_default, {
+								key: item.value,
+								value: item.value,
+								"is-disabled": item.isDisabled
+							}, {
+								default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "item", { item }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? item.textValue ?? item.value), 1)])]),
+								_: 2
+							}, 1032, ["value", "is-disabled"]);
+						}), 128))]),
+						_: 3
+					})], 64))]),
+					_: 3
+				}, 8, [
+					"modelValue",
+					"default-value",
+					"open",
+					"default-open",
+					"disabled",
+					"required",
+					"filter-function"
+				]),
+				props.description || props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$6, [props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_5$5, (0, vue.toDisplayString)(props.errorMessage), 1)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_6$4, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true)
+			], 10, _hoisted_1$33);
+		};
+	}
+});
+//#endregion
+//#region src/components/combo-box/ComboBoxEmpty.vue
+var ComboBoxEmpty_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ComboBoxEmpty",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ComboboxEmpty), {
+				class: "py-3 text-center text-sm text-default-400",
+				"data-slot": "empty-content"
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {
-					isLoading: isLoading.value,
-					items: internalItems.value
-				})]),
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, [
-				"model-value",
-				"open",
-				"disabled",
-				"required",
-				"ignore-filter"
-			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
-			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				key: 0,
-				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
-			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_4$5)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				key: 1,
-				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$4)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$32);
+			});
 		};
 	}
 });
 //#endregion
+//#region src/components/autocomplete/Autocomplete.context.ts
+var { useProvide: useAutocompleteProvide, useInject: useAutocompleteInject, key: autocompleteContextKey } = createContext("Autocomplete");
+//#endregion
 //#region src/components/autocomplete/AutocompleteOverflowChips.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$31 = {
+var _hoisted_1$32 = {
 	ref: "container",
 	style: {
 		"display": "flex",
@@ -16966,7 +16657,7 @@ var AutocompleteOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)
 		(0, _vueuse_core.useResizeObserver)(containerEl, reflow);
 		(0, vue.watch)(() => props.values.join("\0"), () => reflow(), { flush: "post" });
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$31, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$32, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
 					key: val,
 					"data-chip-item": "",
@@ -16991,8 +16682,8 @@ var AutocompleteOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)
 });
 //#endregion
 //#region src/components/autocomplete/AutocompleteInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$30 = ["for"];
-var _hoisted_2$17 = {
+var _hoisted_1$31 = ["for"];
+var _hoisted_2$18 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -17028,7 +16719,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						for: (0, vue.unref)(ctx).inputId.value,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.label())
-					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$17, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$30)) : (0, vue.createCommentVNode)("", true),
+					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$18, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$31)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.startContent()),
@@ -17154,7 +16845,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/autocomplete/AutocompleteContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$29 = [
+var _hoisted_1$30 = [
 	"inert",
 	"aria-disabled",
 	"data-disabled"
@@ -17254,7 +16945,7 @@ var AutocompleteContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									_: 3
 								})) : (0, vue.createCommentVNode)("", true)]),
 								_: 3
-							})], 10, _hoisted_1$29)]),
+							})], 10, _hoisted_1$30)]),
 							_: 3
 						}, 8, [
 							"data-loading",
@@ -17272,11 +16963,11 @@ var AutocompleteContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/autocomplete/AutocompleteItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$28 = {
+var _hoisted_1$29 = {
 	class: "autocomplete-item__text",
 	"data-slot": "item-text"
 };
-var _hoisted_2$16 = {
+var _hoisted_2$17 = {
 	key: 1,
 	class: "list-box-item__indicator",
 	"data-slot": "list-box-item-indicator"
@@ -17335,7 +17026,7 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.createElementVNode)("span", _hoisted_1$28, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					(0, vue.createElementVNode)("span", _hoisted_1$29, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					!(0, vue.unref)(ctx).multiple.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ComboboxItemIndicator), {
 						key: 0,
 						class: "list-box-item__indicator",
@@ -17355,7 +17046,7 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"aria-hidden": "true"
 						}, [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					})) : isChecked.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$16, [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
+					})) : isChecked.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$17, [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						width: "12",
 						height: "12",
@@ -17382,6 +17073,390 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
+//#region src/components/autocomplete/Autocomplete.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$28 = [
+	"data-invalid",
+	"data-disabled",
+	"data-readonly",
+	"data-required",
+	"data-has-label",
+	"data-has-helper"
+];
+var _hoisted_2$16 = ["for"];
+var _hoisted_3$10 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+var _hoisted_4$5 = ["id"];
+var _hoisted_5$4 = ["id"];
+//#endregion
+//#region src/components/autocomplete/Autocomplete.vue
+var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "Autocomplete",
+	props: {
+		variant: { default: "flat" },
+		size: { default: "md" },
+		color: { default: "default" },
+		labelPlacement: { default: "inside" },
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		isInvalid: {
+			type: Boolean,
+			default: false
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		isReadonly: {
+			type: Boolean,
+			default: false
+		},
+		isRequired: {
+			type: Boolean,
+			default: false
+		},
+		placeholder: {},
+		name: {},
+		label: {},
+		description: {},
+		errorMessage: {},
+		class: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		multipleOverflow: { default: "wrap" },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		items: { default: () => [] },
+		loadItems: {
+			type: Function,
+			default: void 0
+		},
+		debounceMs: { default: 200 },
+		filterOnOpen: {
+			type: Boolean,
+			default: false
+		},
+		truncateItems: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:open",
+		"create"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = (0, vue.useAttrs)();
+		const generatedId = (0, vue.useId)();
+		const inputId = (0, vue.computed)(() => attrs.id ?? generatedId);
+		const hasLabel = (0, vue.computed)(() => !!props.label);
+		const slots = (0, vue.useSlots)();
+		const usesCustomChrome = (0, vue.computed)(() => hasSlotComponent(slots.default?.(), [AutocompleteInput_default, AutocompleteContent_default]));
+		const slotItemRegistry = (0, vue.ref)(/* @__PURE__ */ new Map());
+		function registerItem(value, label) {
+			const next = new Map(slotItemRegistry.value);
+			next.set(value, label);
+			slotItemRegistry.value = next;
+		}
+		function unregisterItem(value) {
+			const next = new Map(slotItemRegistry.value);
+			next.delete(value);
+			slotItemRegistry.value = next;
+		}
+		const isLoading = (0, vue.ref)(false);
+		const internalItems = (0, vue.ref)([...props.items]);
+		const selectedValues = (0, vue.ref)(props.multiple && Array.isArray(props.modelValue) ? [...props.modelValue] : []);
+		const internalOpen = (0, vue.ref)(props.defaultOpen ?? false);
+		let selectingItem = false;
+		const isOpen = (0, vue.ref)(props.defaultOpen ?? false);
+		const termAtOpen = (0, vue.ref)("");
+		const isUserTyping = (0, vue.ref)(false);
+		const singleOpen = (0, vue.ref)(props.open ?? props.defaultOpen ?? false);
+		let blockReopen = false;
+		let blockReopenTimer;
+		const effectiveIgnoreFilter = (0, vue.computed)(() => {
+			if (props.loadItems) return true;
+			if (!props.filterOnOpen && isOpen.value && !isUserTyping.value) return true;
+			return false;
+		});
+		function labelFor(value) {
+			if (value == null || value === "") return "";
+			const match = internalItems.value.find((i) => i.value === value);
+			if (match) return match.label ?? match.textValue ?? value;
+			return slotItemRegistry.value.get(value) ?? value;
+		}
+		function valueFor(displayed) {
+			if (!displayed) return "";
+			const match = internalItems.value.find((i) => (i.label ?? i.textValue ?? i.value) === displayed);
+			if (match) return match.value;
+			for (const [value, label] of slotItemRegistry.value) if (label === displayed) return value;
+			return displayed;
+		}
+		const singleModelValue = (0, vue.computed)(() => props.multiple ? void 0 : props.modelValue);
+		const searchTerm = (0, vue.ref)(labelFor(singleModelValue.value));
+		const isFilled = (0, vue.computed)(() => props.multiple ? selectedValues.value.length > 0 || !!searchTerm.value : !!searchTerm.value);
+		const hasItems = (0, vue.computed)(() => internalItems.value.length > 0);
+		const selectedLabels = (0, vue.computed)(() => selectedValues.value.map((v) => ({
+			value: v,
+			label: labelFor(v) || v
+		})));
+		const descriptionId = (0, vue.computed)(() => `${inputId.value}-description`);
+		const errorMessageId = (0, vue.computed)(() => `${inputId.value}-error`);
+		const showError = (0, vue.computed)(() => props.isInvalid && !!props.errorMessage);
+		const showDescription = (0, vue.computed)(() => !!props.description && !showError.value);
+		const hasHelper = (0, vue.computed)(() => showError.value || showDescription.value);
+		const ariaDescribedBy = (0, vue.computed)(() => {
+			if (showError.value) return errorMessageId.value;
+			if (showDescription.value) return descriptionId.value;
+		});
+		(0, vue.watch)(() => props.modelValue, (val) => {
+			if (props.multiple) {
+				if (Array.isArray(val)) selectedValues.value = [...val];
+			} else {
+				const next = labelFor(val);
+				if (searchTerm.value !== next) searchTerm.value = next;
+			}
+		});
+		(0, vue.watch)(() => props.open, (val) => {
+			if (!props.multiple && val !== void 0) singleOpen.value = val;
+		});
+		(0, vue.watch)(searchTerm, (displayed) => {
+			if (props.multiple) {
+				if (isOpen.value && displayed !== termAtOpen.value) isUserTyping.value = true;
+				return;
+			}
+			const next = valueFor(displayed);
+			if (next !== (singleModelValue.value ?? "")) emit("update:modelValue", next);
+			if (isOpen.value && displayed !== termAtOpen.value) isUserTyping.value = true;
+		});
+		function handleOpenChange(val) {
+			if (props.multiple) {
+				isOpen.value = val;
+				internalOpen.value = !val && selectingItem ? true : val;
+				selectingItem = false;
+				if (val) {
+					termAtOpen.value = searchTerm.value;
+					isUserTyping.value = false;
+				} else isUserTyping.value = false;
+				emit("update:open", val);
+				return;
+			}
+			if (val && blockReopen) return;
+			isOpen.value = val;
+			singleOpen.value = val;
+			if (val) {
+				termAtOpen.value = searchTerm.value;
+				isUserTyping.value = false;
+			} else isUserTyping.value = false;
+			emit("update:open", val);
+		}
+		function onMultipleSelect(value) {
+			selectingItem = true;
+			const idx = selectedValues.value.indexOf(value);
+			selectedValues.value = idx === -1 ? [...selectedValues.value, value] : selectedValues.value.filter((_, i) => i !== idx);
+			searchTerm.value = "";
+			isUserTyping.value = false;
+			emit("update:modelValue", selectedValues.value);
+		}
+		function removeValue(value) {
+			selectedValues.value = selectedValues.value.filter((v) => v !== value);
+			emit("update:modelValue", selectedValues.value);
+		}
+		function clearAll() {
+			selectedValues.value = [];
+			emit("update:modelValue", []);
+		}
+		function isSelected(value) {
+			return selectedValues.value.includes(value);
+		}
+		const hasExactMatch = (0, vue.computed)(() => {
+			const term = searchTerm.value.trim().toLowerCase();
+			if (!term) return false;
+			if (internalItems.value.some((i) => (i.label ?? i.textValue ?? i.value).toLowerCase() === term)) return true;
+			for (const label of slotItemRegistry.value.values()) if (label.toLowerCase() === term) return true;
+			return false;
+		});
+		function onCreateValue(value) {
+			const trimmed = value.trim();
+			if (!trimmed) return;
+			if (props.multiple) {
+				if (!selectedValues.value.includes(trimmed)) {
+					selectingItem = true;
+					selectedValues.value = [...selectedValues.value, trimmed];
+					emit("update:modelValue", selectedValues.value);
+				}
+				searchTerm.value = "";
+				isUserTyping.value = false;
+			} else {
+				searchTerm.value = trimmed;
+				emit("update:modelValue", trimmed);
+				isOpen.value = false;
+				singleOpen.value = false;
+				blockReopen = true;
+				clearTimeout(blockReopenTimer);
+				blockReopenTimer = setTimeout(() => {
+					blockReopen = false;
+				}, 300);
+			}
+			emit("create", trimmed);
+		}
+		let debounceTimer;
+		async function runLoadItems(query) {
+			if (!props.loadItems) return;
+			isLoading.value = true;
+			try {
+				internalItems.value = await props.loadItems(query);
+			} finally {
+				isLoading.value = false;
+			}
+		}
+		function scheduleLoad(query) {
+			if (!props.loadItems) return;
+			clearTimeout(debounceTimer);
+			if (props.debounceMs === 0) runLoadItems(query);
+			else debounceTimer = setTimeout(() => void runLoadItems(query), props.debounceMs);
+		}
+		(0, vue.onMounted)(() => {
+			if (props.loadItems) runLoadItems(searchTerm.value);
+		});
+		(0, vue.watch)(searchTerm, (q) => {
+			if (props.loadItems) scheduleLoad(q);
+		});
+		(0, vue.watch)(() => props.items, (newItems) => {
+			if (!props.loadItems) internalItems.value = [...newItems];
+		});
+		(0, vue.watch)(internalItems, () => {
+			if (props.multiple) return;
+			const next = labelFor(singleModelValue.value);
+			if (next && searchTerm.value !== next && valueFor(searchTerm.value) === (singleModelValue.value ?? "")) searchTerm.value = next;
+		});
+		(0, vue.watch)(slotItemRegistry, () => {
+			if (props.multiple) return;
+			const next = labelFor(singleModelValue.value);
+			if (next && searchTerm.value !== next && valueFor(searchTerm.value) === (singleModelValue.value ?? "")) searchTerm.value = next;
+		});
+		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.autocompleteVariants)({
+			variant: props.variant,
+			size: props.size,
+			color: props.color,
+			fullWidth: props.fullWidth,
+			isInvalid: props.isInvalid,
+			isDisabled: props.isDisabled,
+			isReadonly: props.isReadonly,
+			hasLabel: hasLabel.value,
+			labelPlacement: props.labelPlacement
+		}));
+		const showOutsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement !== "inside");
+		useAutocompleteProvide({
+			isDisabled: (0, vue.toRef)(props, "isDisabled"),
+			isInvalid: (0, vue.toRef)(props, "isInvalid"),
+			isReadonly: (0, vue.toRef)(props, "isReadonly"),
+			isRequired: (0, vue.toRef)(props, "isRequired"),
+			isLoading,
+			isFilled,
+			fullWidth: (0, vue.toRef)(props, "fullWidth"),
+			hasLabel,
+			labelPlacement: (0, vue.toRef)(props, "labelPlacement"),
+			inputId,
+			label: (0, vue.toRef)(props, "label"),
+			ariaDescribedBy,
+			truncateItems: (0, vue.toRef)(props, "truncateItems"),
+			hasItems,
+			slots: slotFns,
+			multiple: (0, vue.toRef)(props, "multiple"),
+			multipleOverflow: (0, vue.toRef)(props, "multipleOverflow"),
+			selectedValues,
+			selectedLabels,
+			onMultipleSelect,
+			removeValue,
+			clearAll,
+			isSelected,
+			registerItem,
+			unregisterItem,
+			searchTerm,
+			hasExactMatch,
+			onCreateValue
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				"data-invalid": __props.isInvalid || void 0,
+				"data-disabled": __props.isDisabled || void 0,
+				"data-readonly": __props.isReadonly || void 0,
+				"data-required": __props.isRequired || void 0,
+				"data-has-label": hasLabel.value || void 0,
+				"data-has-helper": hasHelper.value || void 0
+			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
+				key: 0,
+				for: inputId.value,
+				class: (0, vue.normalizeClass)(slotFns.value.label())
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$10, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$16)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteRoot), {
+				"model-value": searchTerm.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
+				open: props.multiple ? internalOpen.value : singleOpen.value,
+				disabled: props.isDisabled,
+				required: props.isRequired,
+				"ignore-filter": effectiveIgnoreFilter.value,
+				"open-on-focus": true,
+				"onUpdate:open": handleOpenChange
+			}, {
+				default: (0, vue.withCtx)(() => [usesCustomChrome.value ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+					key: 0,
+					isLoading: isLoading.value,
+					items: internalItems.value
+				}) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createVNode)(AutocompleteInput_default, { placeholder: props.placeholder }, null, 8, ["placeholder"]), (0, vue.createVNode)(AutocompleteContent_default, null, {
+					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(internalItems.value, (item) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)(AutocompleteItem_default, {
+							key: item.value,
+							value: item.value,
+							"is-disabled": item.isDisabled
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "item", { item }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? item.textValue ?? item.value), 1)])]),
+							_: 2
+						}, 1032, ["value", "is-disabled"]);
+					}), 128))]),
+					_: 3
+				})], 64))]),
+				_: 3
+			}, 8, [
+				"model-value",
+				"open",
+				"disabled",
+				"required",
+				"ignore-filter"
+			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				id: errorMessageId.value,
+				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
+			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_4$5)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 1,
+				id: descriptionId.value,
+				class: (0, vue.normalizeClass)(slotFns.value.description())
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$4)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$28);
+		};
+	}
+});
+//#endregion
 //#region src/components/autocomplete/AutocompleteCreateItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$27 = {
 	class: "autocomplete-item__text",