@auronui/vue 1.0.10 → 1.0.12

package/dist/cjs/index.cjs

@@ -373,7 +373,7 @@ function createContext(contextName) {
 }
 //#endregion
 //#region src/components/spinner/Spinner.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$59 = ["aria-label"];
+var _hoisted_1$61 = ["aria-label"];
 var _hoisted_2$32 = {
 	"data-slot": "spinner-icon",
 	viewBox: "0 0 24 24",
@@ -381,9 +381,9 @@ var _hoisted_2$32 = {
 	width: "100%",
 	height: "100%"
 };
-var _hoisted_3$21 = { fill: "none" };
-var _hoisted_4$14 = ["fill"];
-var _hoisted_5$10 = ["fill"];
+var _hoisted_3$20 = { fill: "none" };
+var _hoisted_4$13 = ["fill"];
+var _hoisted_5$9 = ["fill"];
 //#endregion
 //#region src/components/spinner/Spinner.vue
 var Spinner_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -435,25 +435,25 @@ var Spinner_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				offset: "100%",
 				"stop-color": "currentColor",
 				"stop-opacity": "0.55"
-			}, null, -1)])])]), (0, vue.createElementVNode)("g", _hoisted_3$21, [
+			}, null, -1)])])]), (0, vue.createElementVNode)("g", _hoisted_3$20, [
 				_cache[2] || (_cache[2] = (0, vue.createElementVNode)("path", { d: "m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }, null, -1)),
 				(0, vue.createElementVNode)("path", {
 					d: "M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021",
 					fill: `url(#${gradId1})`,
 					transform: "translate(1.5 1.625)"
-				}, null, 8, _hoisted_4$14),
+				}, null, 8, _hoisted_4$13),
 				(0, vue.createElementVNode)("path", {
 					d: "M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118",
 					fill: `url(#${gradId2})`,
 					transform: "translate(1.5 1.625)"
-				}, null, 8, _hoisted_5$10)
-			])]))], 10, _hoisted_1$59);
+				}, null, 8, _hoisted_5$9)
+			])]))], 10, _hoisted_1$61);
 		};
 	}
 });
 //#endregion
 //#region src/components/separator/Separator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$58 = { class: "separator__content" };
+var _hoisted_1$60 = { class: "separator__content" };
 //#endregion
 //#region src/components/separator/Separator.vue
 var Separator_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -487,7 +487,7 @@ var Separator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-orientation": "horizontal"
 			}, [
 				_cache[0] || (_cache[0] = (0, vue.createElementVNode)("div", { class: "separator__line" }, null, -1)),
-				(0, vue.createElementVNode)("div", _hoisted_1$58, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				(0, vue.createElementVNode)("div", _hoisted_1$60, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_cache[1] || (_cache[1] = (0, vue.createElementVNode)("div", { class: "separator__line" }, null, -1))
 			], 2));
 		};
@@ -539,7 +539,7 @@ var Text_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/label/Label.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$57 = ["for"];
+var _hoisted_1$59 = ["for"];
 //#endregion
 //#region src/components/label/Label.vue
 var Label_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -571,13 +571,13 @@ var Label_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 				class: (0, vue.normalizeClass)(classes.value),
 				for: props.for
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$57);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$59);
 		};
 	}
 });
 //#endregion
 //#region src/components/description/Description.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$56 = ["id"];
+var _hoisted_1$58 = ["id"];
 //#endregion
 //#region src/components/description/Description.vue
 var Description_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -593,7 +593,7 @@ var Description_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("p", {
 				id: props.id,
 				class: (0, vue.normalizeClass)(classes.value)
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$56);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$58);
 		};
 	}
 });
@@ -661,7 +661,7 @@ var Badge_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/chip/Chip.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$55 = ["aria-label"];
+var _hoisted_1$57 = ["aria-label"];
 //#endregion
 //#region src/components/chip/Chip.vue
 var Chip_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -734,7 +734,7 @@ var Chip_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					y1: "6",
 					x2: "18",
 					y2: "18"
-				})], -1)])], 10, _hoisted_1$55)) : (0, vue.createCommentVNode)("", true)
+				})], -1)])], 10, _hoisted_1$57)) : (0, vue.createCommentVNode)("", true)
 			], 2);
 		};
 	}
@@ -767,7 +767,7 @@ var Surface_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useCardProvide, useInject: useCardInject, key: cardContextKey } = createContext("Card");
 //#endregion
 //#region src/components/card/Card.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$54 = [
+var _hoisted_1$56 = [
 	"role",
 	"tabindex",
 	"aria-disabled",
@@ -843,7 +843,7 @@ var Card_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-disabled": __props.isDisabled || void 0,
 				onClick,
 				onKeydown
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 42, _hoisted_1$54);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 42, _hoisted_1$56);
 		};
 	}
 });
@@ -1068,7 +1068,7 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/button/ButtonGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$53 = ["data-orientation"];
+var _hoisted_1$55 = ["data-orientation"];
 //#endregion
 //#region src/components/button/ButtonGroup.vue
 var ButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1133,7 +1133,7 @@ var ButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
 				"data-orientation": props.orientation,
 				role: "group"
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$53);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$55);
 		};
 	}
 });
@@ -1205,7 +1205,7 @@ var CloseButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useToggleButtonGroupProvide, useInject: useToggleButtonGroupInject, key: toggleButtonGroupContextKey } = createContext("ToggleButtonGroup");
 //#endregion
 //#region src/components/button/ToggleButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$52 = ["disabled", "data-orientation"];
+var _hoisted_1$54 = ["disabled", "data-orientation"];
 //#endregion
 //#region src/components/button/ToggleButton.vue
 var ToggleButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1276,7 +1276,7 @@ var ToggleButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					disabled: isDisabled.value || void 0,
 					"data-orientation": (0, vue.unref)(groupCtx).orientation.value,
 					type: "button"
-				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$52)]),
+				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$54)]),
 				_: 3
 			}, 8, [
 				"disabled",
@@ -1288,7 +1288,7 @@ var ToggleButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/button/ToggleButtonGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$51 = ["data-orientation"];
+var _hoisted_1$53 = ["data-orientation"];
 //#endregion
 //#region src/components/button/ToggleButtonGroup.vue
 var ToggleButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1355,7 +1355,7 @@ var ToggleButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
 				"data-orientation": props.orientation,
 				role: "group"
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$51);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$53);
 		};
 	}
 });
@@ -1454,6 +1454,7 @@ function useFormInject() {
 //#endregion
 //#region src/components/form/validation.ts
 var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var URL_REGEX = /^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w\-./?%&=]*)?$/i;
 function isEmpty(value) {
 	if (value === void 0 || value === null || value === "" || value === false) return true;
 	if (Array.isArray(value) && value.length === 0) return true;
@@ -1483,20 +1484,35 @@ function resolvePatternRule(rule) {
 	};
 	return rule;
 }
-async function runValidation(value, rules, validate) {
+function resolveStringRule(rule) {
+	if (typeof rule === "string") return {
+		value: rule,
+		message: void 0
+	};
+	return rule;
+}
+async function runValidation(value, rules, validate, context) {
 	if (!rules && !validate) return void 0;
 	if (rules?.required !== void 0) {
 		const { enabled, message } = resolveSimpleRule(rules.required);
 		if (enabled && isEmpty(value)) return message ?? "This field is required";
 	}
 	if (isEmpty(value)) {
-		if (validate) return await validate(value);
+		if (validate) return await validate(value, context);
 		return;
 	}
 	if (rules?.email !== void 0) {
 		const { enabled, message } = resolveSimpleRule(rules.email);
 		if (enabled && !EMAIL_REGEX.test(String(value))) return message ?? "Enter a valid email address";
 	}
+	if (rules?.url !== void 0) {
+		const { enabled, message } = resolveSimpleRule(rules.url);
+		if (enabled && !URL_REGEX.test(String(value))) return message ?? "Enter a valid URL";
+	}
+	if (rules?.integer !== void 0) {
+		const { enabled, message } = resolveSimpleRule(rules.integer);
+		if (enabled && !Number.isInteger(Number(value))) return message ?? "Must be a whole number";
+	}
 	if (rules?.pattern !== void 0) {
 		const { value: regex, message } = resolvePatternRule(rules.pattern);
 		if (!regex.test(String(value))) return message ?? "Invalid format";
@@ -1517,7 +1533,11 @@ async function runValidation(value, rules, validate) {
 		const { value: maxVal, message } = resolveNumericRule(rules.max);
 		if (Number(value) > maxVal) return message ?? `Must be at most ${maxVal}`;
 	}
-	if (validate) return await validate(value);
+	if (rules?.matches !== void 0) {
+		const { value: fieldName, message } = resolveStringRule(rules.matches);
+		if (value !== context?.values[fieldName]) return message ?? `Must match ${fieldName}`;
+	}
+	if (validate) return await validate(value, context);
 }
 //#endregion
 //#region src/components/form/Form.vue
@@ -1531,31 +1551,75 @@ var Form_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		class: { default: void 0 }
 	},
-	emits: ["submit", "invalid"],
-	setup(__props, { emit: __emit }) {
+	emits: [
+		"submit",
+		"invalid",
+		"reset"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const errors = (0, vue.ref)({});
 		const isSubmitting = (0, vue.ref)(false);
+		const isSubmitted = (0, vue.ref)(false);
+		const submitCount = (0, vue.ref)(0);
 		const fields = /* @__PURE__ */ new Map();
+		const fieldCount = (0, vue.ref)(0);
 		function registerField(reg) {
 			fields.set(reg.name, reg);
+			fieldCount.value++;
 		}
 		function unregisterField(name) {
 			fields.delete(name);
+			fieldCount.value--;
 			const next = { ...errors.value };
 			delete next[name];
 			errors.value = next;
 		}
+		const isValid = (0, vue.computed)(() => {
+			fieldCount.value;
+			return Object.keys(errors.value).length === 0;
+		});
+		const isDirty = (0, vue.computed)(() => {
+			fieldCount.value;
+			for (const field of fields.values()) if (field.dirty.value) return true;
+			return false;
+		});
+		const isTouched = (0, vue.computed)(() => {
+			fieldCount.value;
+			for (const field of fields.values()) if (field.touched.value) return true;
+			return false;
+		});
+		function getAllValues() {
+			const values = {};
+			for (const [name, field] of fields.entries()) values[name] = field.getValue();
+			return values;
+		}
 		async function triggerFieldValidation(name) {
 			const field = fields.get(name);
 			if (!field) return;
-			const error = await runValidation(field.getValue(), field.rules, field.validate);
+			const error = await runValidation(field.getValue(), field.rules, field.validate, { values: getAllValues() });
 			const next = { ...errors.value };
 			if (error) next[name] = error;
 			else delete next[name];
 			errors.value = next;
 		}
+		async function trigger(name) {
+			if (name) {
+				await triggerFieldValidation(name);
+				return !errors.value[name];
+			}
+			const results = await Promise.all([...fields.entries()].map(async ([fieldName, field]) => {
+				return {
+					name: fieldName,
+					error: await runValidation(field.getValue(), field.rules, field.validate, { values: getAllValues() })
+				};
+			}));
+			const next = {};
+			for (const { name: fieldName, error } of results) if (error) next[fieldName] = error;
+			errors.value = next;
+			return Object.keys(next).length === 0;
+		}
 		function setErrors(newErrors) {
 			errors.value = {
 				...errors.value,
@@ -1563,12 +1627,43 @@ var Form_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			};
 			isSubmitting.value = false;
 		}
+		function setError(name, message) {
+			errors.value = {
+				...errors.value,
+				[name]: message
+			};
+		}
+		function clearErrors(name) {
+			if (name) {
+				const next = { ...errors.value };
+				delete next[name];
+				errors.value = next;
+			} else errors.value = {};
+		}
+		function getValues() {
+			return getAllValues();
+		}
+		function setValue(name, value) {
+			const field = fields.get(name);
+			if (field) field.setValue(value);
+		}
+		function reset() {
+			for (const field of fields.values()) field.reset();
+			errors.value = {};
+			isSubmitting.value = false;
+			isSubmitted.value = false;
+			submitCount.value = 0;
+			emit("reset");
+		}
 		async function handleSubmit() {
 			isSubmitting.value = true;
+			submitCount.value++;
+			const values = getAllValues();
+			const context = { values };
 			const results = await Promise.all([...fields.entries()].map(async ([name, field]) => {
 				return {
 					name,
-					error: await runValidation(field.getValue(), field.rules, field.validate)
+					error: await runValidation(field.getValue(), field.rules, field.validate, context)
 				};
 			}));
 			const nextErrors = {};
@@ -1576,12 +1671,13 @@ var Form_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (Object.keys(nextErrors).length > 0) {
 				errors.value = nextErrors;
 				isSubmitting.value = false;
+				isSubmitted.value = true;
 				emit("invalid", nextErrors);
 				return;
 			}
 			errors.value = {};
-			const values = {};
-			for (const [name, field] of fields.entries()) values[name] = field.getValue();
+			isSubmitted.value = true;
+			isSubmitting.value = false;
 			emit("submit", {
 				values,
 				setErrors
@@ -1590,12 +1686,39 @@ var Form_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		(0, vue.provide)(formContextKey, {
 			errors,
 			isSubmitting,
+			isSubmitted,
+			submitCount,
 			isDisabled: (0, vue.computed)(() => props.isDisabled),
+			isValid,
+			isDirty,
+			isTouched,
 			validationMode: (0, vue.computed)(() => props.validationMode),
 			registerField,
 			unregisterField,
 			triggerFieldValidation,
-			setErrors
+			setErrors,
+			setError,
+			clearErrors,
+			getValues,
+			setValue,
+			trigger,
+			reset
+		});
+		__expose({
+			errors,
+			isSubmitting,
+			isSubmitted,
+			submitCount,
+			isValid,
+			isDirty,
+			isTouched,
+			getValues,
+			setValue,
+			setErrors,
+			setError,
+			clearErrors,
+			trigger,
+			reset
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("form", {
@@ -1604,8 +1727,20 @@ var Form_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				onSubmit: (0, vue.withModifiers)(handleSubmit, ["prevent"])
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {
 				isSubmitting: isSubmitting.value,
+				isSubmitted: isSubmitted.value,
+				submitCount: submitCount.value,
 				isDisabled: props.isDisabled,
-				errors: errors.value
+				isValid: isValid.value,
+				isDirty: isDirty.value,
+				isTouched: isTouched.value,
+				errors: errors.value,
+				getValues,
+				setValue,
+				setErrors,
+				setError,
+				clearErrors,
+				trigger,
+				reset
 			})], 34);
 		};
 	}
@@ -1617,6 +1752,7 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "FormField",
 	props: /* @__PURE__ */ (0, vue.mergeModels)({
 		name: {},
+		defaultValue: {},
 		rules: {},
 		validate: { type: Function },
 		validationMode: {}
@@ -1630,6 +1766,8 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const modelValue = (0, vue.useModel)(__props, "modelValue");
 		const ctx = useFormInject();
 		const localError = (0, vue.ref)(void 0);
+		const touched = (0, vue.ref)(false);
+		const dirty = (0, vue.ref)(props.defaultValue !== void 0 && modelValue.value !== props.defaultValue);
 		const fieldError = (0, vue.computed)(() => ctx ? ctx.errors.value[props.name] : localError.value);
 		const hasBeenInvalid = (0, vue.ref)(false);
 		(0, vue.watch)(fieldError, (error) => {
@@ -1638,10 +1776,27 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const isInvalid = (0, vue.computed)(() => !!fieldError.value);
 		const isDisabled = (0, vue.computed)(() => ctx?.isDisabled.value ?? false);
 		const validationMode = (0, vue.computed)(() => props.validationMode ?? ctx?.validationMode.value ?? "on-submit");
+		(0, vue.watch)(modelValue, (val) => {
+			dirty.value = val !== props.defaultValue;
+		});
+		function resetField() {
+			modelValue.value = props.defaultValue;
+			localError.value = void 0;
+			touched.value = false;
+			dirty.value = false;
+			hasBeenInvalid.value = false;
+		}
 		(0, vue.onMounted)(() => {
 			ctx?.registerField({
 				name: props.name,
 				getValue: () => modelValue.value,
+				getDefaultValue: () => props.defaultValue,
+				setValue: (val) => {
+					modelValue.value = val;
+				},
+				reset: resetField,
+				touched,
+				dirty,
 				rules: props.rules,
 				validate: props.validate
 			});
@@ -1650,7 +1805,8 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			ctx?.unregisterField(props.name);
 		});
 		async function triggerValidation(val) {
-			const error = await runValidation(val, props.rules, props.validate);
+			const context = ctx ? { values: ctx.getValues() } : void 0;
+			const error = await runValidation(val, props.rules, props.validate, context);
 			if (ctx) {
 				const next = { ...ctx.errors.value };
 				if (error) next[props.name] = error;
@@ -1663,6 +1819,7 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (validationMode.value === "on-change" || hasBeenInvalid.value) await triggerValidation(val);
 		}
 		async function handleBlur() {
+			touched.value = true;
 			if (validationMode.value === "on-blur") await triggerValidation(modelValue.value);
 		}
 		const fieldProps = (0, vue.computed)(() => ({
@@ -1675,13 +1832,19 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			onBlur: handleBlur
 		}));
 		return (_ctx, _cache) => {
-			return (0, vue.renderSlot)(_ctx.$slots, "default", { fieldProps: fieldProps.value });
+			return (0, vue.renderSlot)(_ctx.$slots, "default", {
+				fieldProps: fieldProps.value,
+				touched: touched.value,
+				dirty: dirty.value,
+				error: fieldError.value,
+				isInvalid: isInvalid.value
+			});
 		};
 	}
 });
 //#endregion
 //#region src/components/input/Input.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$50 = [
+var _hoisted_1$52 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -1690,13 +1853,13 @@ var _hoisted_1$50 = [
 	"data-has-helper"
 ];
 var _hoisted_2$31 = ["for"];
-var _hoisted_3$20 = {
+var _hoisted_3$19 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_4$13 = ["data-filled"];
-var _hoisted_5$9 = ["for"];
-var _hoisted_6$7 = {
+var _hoisted_4$12 = ["data-filled"];
+var _hoisted_5$8 = ["for"];
+var _hoisted_6$6 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -1851,7 +2014,7 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				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$20, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$31)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createElementVNode)("div", {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$19, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$31)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createElementVNode)("div", {
 				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
 				"data-filled": hasLabel.value ? isFilled.value || void 0 : void 0
 			}, [
@@ -1859,7 +2022,7 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					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_6$7, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_5$9)) : (0, vue.createCommentVNode)("", true),
+				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6$6, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_5$8)) : (0, vue.createCommentVNode)("", true),
 				_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 1,
 					class: (0, vue.normalizeClass)(slotFns.value.startContent())
@@ -1935,7 +2098,7 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					cy: "12",
 					r: "3"
 				}, null, -1)])]))], 10, _hoisted_8$1)) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_4$13), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+			], 10, _hoisted_4$12), 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", {
@@ -1946,13 +2109,13 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)(slotFns.value.description())
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_12)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$50);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_12)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$52);
 		};
 	}
 });
 //#endregion
 //#region src/components/textarea/Textarea.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$49 = [
+var _hoisted_1$51 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -1961,13 +2124,13 @@ var _hoisted_1$49 = [
 	"data-has-helper"
 ];
 var _hoisted_2$30 = ["for"];
-var _hoisted_3$19 = {
+var _hoisted_3$18 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_4$12 = ["data-filled"];
-var _hoisted_5$8 = ["for"];
-var _hoisted_6$6 = {
+var _hoisted_4$11 = ["data-filled"];
+var _hoisted_5$7 = ["for"];
+var _hoisted_6$5 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -2091,7 +2254,7 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				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$19, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$30)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createElementVNode)("div", {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$18, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$30)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createElementVNode)("div", {
 				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
 				"data-filled": hasLabel.value ? isFilled.value || void 0 : void 0
 			}, [
@@ -2099,7 +2262,7 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					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_6$6, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_5$8)) : (0, vue.createCommentVNode)("", true),
+				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6$5, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_5$7)) : (0, vue.createCommentVNode)("", true),
 				_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 1,
 					class: (0, vue.normalizeClass)(slotFns.value.startContent())
@@ -2158,7 +2321,7 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						y2: "15"
 					})
 				], -1)])], 2)) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_4$12), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+			], 10, _hoisted_4$11), 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", {
@@ -2169,13 +2332,13 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)(slotFns.value.description())
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_9)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$49);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_9)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$51);
 		};
 	}
 });
 //#endregion
 //#region src/components/number-field/NumberField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$48 = ["for"];
+var _hoisted_1$50 = ["for"];
 //#endregion
 //#region src/components/number-field/NumberField.vue
 var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2255,7 +2418,7 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					for: resolvedInputId.value,
 					class: (0, vue.normalizeClass)(isLabelVisible.value ? void 0 : "sr-only"),
 					"data-slot": "label"
-				}, (0, vue.toDisplayString)(props.label || props.ariaLabel), 11, _hoisted_1$48)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", {
+				}, (0, vue.toDisplayString)(props.label || props.ariaLabel), 11, _hoisted_1$50)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", {
 					class: (0, vue.normalizeClass)(slotFns.value.group()),
 					"data-slot": "group"
 				}, [
@@ -2318,7 +2481,7 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/fieldset/Fieldset.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$47 = ["disabled"];
+var _hoisted_1$49 = ["disabled"];
 //#endregion
 //#region src/components/fieldset/Fieldset.vue
 var Fieldset_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2346,7 +2509,7 @@ var Fieldset_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [props.legend ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("legend", {
 				key: 0,
 				class: (0, vue.normalizeClass)((0, vue.unref)(styles).legend())
-			}, (0, vue.toDisplayString)(props.legend), 3)) : (0, vue.createCommentVNode)("", true), (0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$47);
+			}, (0, vue.toDisplayString)(props.legend), 3)) : (0, vue.createCommentVNode)("", true), (0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$49);
 		};
 	}
 });
@@ -2355,7 +2518,7 @@ var Fieldset_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useCheckboxGroupProvide, useInject: useCheckboxGroupInject, key: checkboxGroupContextKey } = createContext("CheckboxGroup");
 //#endregion
 //#region src/components/checkbox/Checkbox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$46 = {
+var _hoisted_1$48 = {
 	key: 0,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "12",
@@ -2442,7 +2605,7 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"onUpdate:modelValue": handleUpdate
 			}), {
 				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.control()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.CheckboxIndicator), { class: (0, vue.normalizeClass)(slotFns.value.indicator()) }, {
-					default: (0, vue.withCtx)(() => [props.isIndeterminate ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$46, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("line", {
+					default: (0, vue.withCtx)(() => [props.isIndeterminate ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$48, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("line", {
 						x1: "5",
 						y1: "12",
 						x2: "19",
@@ -2463,9 +2626,9 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/checkbox/CheckboxGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$45 = ["aria-labelledby", "data-orientation"];
+var _hoisted_1$47 = ["aria-labelledby", "data-orientation"];
 var _hoisted_2$28 = { class: "checkbox-group__wrapper" };
-var _hoisted_3$18 = {
+var _hoisted_3$17 = {
 	key: 1,
 	class: "checkbox-group__description"
 };
@@ -2520,8 +2683,8 @@ var CheckboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					class: "checkbox-group__label"
 				}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createElementVNode)("div", _hoisted_2$28, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$18, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$45);
+				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$17, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
+			], 10, _hoisted_1$47);
 		};
 	}
 });
@@ -2572,7 +2735,7 @@ var Radio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/radio/RadioGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$44 = { class: "radio-group__wrapper" };
+var _hoisted_1$46 = { class: "radio-group__wrapper" };
 var _hoisted_2$27 = {
 	key: 1,
 	class: "radio-group__description"
@@ -2622,7 +2785,7 @@ var RadioGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						id: labelId,
 						class: "radio-group__label"
 					}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
-					(0, vue.createElementVNode)("div", _hoisted_1$44, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					(0, vue.createElementVNode)("div", _hoisted_1$46, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$27, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
 				]),
 				_: 3
@@ -2714,7 +2877,7 @@ var Switch_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/switch/SwitchGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$43 = ["aria-labelledby", "data-orientation"];
+var _hoisted_1$45 = ["aria-labelledby", "data-orientation"];
 var _hoisted_2$26 = {
 	key: 1,
 	class: "switch-group__description"
@@ -2771,7 +2934,7 @@ var SwitchGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(groupSlots.value.items()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
 				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$26, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$43);
+			], 10, _hoisted_1$45);
 		};
 	}
 });
@@ -12583,7 +12746,7 @@ var AlertDialogOverlay_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/alert-dialog/AlertDialogContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$42 = ["data-placement"];
+var _hoisted_1$44 = ["data-placement"];
 //#endregion
 //#region src/components/alert-dialog/AlertDialogContent.vue
 var AlertDialogContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -12618,7 +12781,7 @@ var AlertDialogContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
-				}, 8, ["class", "data-placement"])], 10, _hoisted_1$42)]),
+				}, 8, ["class", "data-placement"])], 10, _hoisted_1$44)]),
 				_: 3
 			});
 		};
@@ -12768,7 +12931,7 @@ var AlertDialogDescription_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/alert-dialog/AlertDialogIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$41 = {
+var _hoisted_1$43 = {
 	key: 0,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -12788,7 +12951,7 @@ var _hoisted_2$25 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_3$17 = {
+var _hoisted_3$16 = {
 	key: 2,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -12798,7 +12961,7 @@ var _hoisted_3$17 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_4$11 = {
+var _hoisted_4$10 = {
 	key: 3,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -12830,7 +12993,7 @@ var AlertDialogIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).icon({ status: resolvedStatus() }), props.class)),
 				"aria-hidden": "true"
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [resolvedStatus() === "danger" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$41, [..._cache[0] || (_cache[0] = [
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [resolvedStatus() === "danger" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$43, [..._cache[0] || (_cache[0] = [
 				(0, vue.createElementVNode)("circle", {
 					cx: "12",
 					cy: "12",
@@ -12842,11 +13005,11 @@ var AlertDialogIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				(0, vue.createElementVNode)("path", { d: "M12 3.5 2.8 19.5a1.2 1.2 0 0 0 1 1.8h16.4a1.2 1.2 0 0 0 1-1.8L12 3.5Z" }, null, -1),
 				(0, vue.createElementVNode)("path", { d: "M12 10v4" }, null, -1),
 				(0, vue.createElementVNode)("path", { d: "M12 17.5h.01" }, null, -1)
-			])])) : resolvedStatus() === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$17, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("circle", {
+			])])) : resolvedStatus() === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$16, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9"
-			}, null, -1), (0, vue.createElementVNode)("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" }, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_4$11, [..._cache[3] || (_cache[3] = [
+			}, null, -1), (0, vue.createElementVNode)("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" }, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_4$10, [..._cache[3] || (_cache[3] = [
 				(0, vue.createElementVNode)("circle", {
 					cx: "12",
 					cy: "12",
@@ -13218,7 +13381,7 @@ var Tabs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/tabs/TabList.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$40 = {
+var _hoisted_1$42 = {
 	key: 0,
 	class: "tabs__overflow-menu",
 	role: "menu"
@@ -13480,7 +13643,7 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"stroke-linejoin": "round"
 				})], -1))]),
 				_: 1
-			}, 8, ["aria-expanded"]), dropdownOpen.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$40, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(hiddenTabs.value, (tab) => {
+			}, 8, ["aria-expanded"]), dropdownOpen.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$42, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(hiddenTabs.value, (tab) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(Button_default, {
 					key: tab.value,
 					variant: "ghost",
@@ -13831,7 +13994,7 @@ var Collapsible_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/collapsible/CollapsibleTrigger.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$39 = ["data-state"];
+var _hoisted_1$41 = ["data-state"];
 //#endregion
 //#region src/components/collapsible/CollapsibleTrigger.vue
 var CollapsibleTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -13858,7 +14021,7 @@ var CollapsibleTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"stroke-linejoin": "round",
 					"aria-hidden": "true",
 					focusable: "false"
-				}, [(0, vue.createElementVNode)("polyline", { points: "6 9 12 15 18 9" })], -1)])], 10, _hoisted_1$39)]),
+				}, [(0, vue.createElementVNode)("polyline", { points: "6 9 12 15 18 9" })], -1)])], 10, _hoisted_1$41)]),
 				_: 3
 			}, 8, ["class"]);
 		};
@@ -14004,9 +14167,9 @@ var Breadcrumbs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/breadcrumbs/BreadcrumbItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$38 = ["aria-current"];
+var _hoisted_1$40 = ["aria-current"];
 var _hoisted_2$24 = ["href"];
-var _hoisted_3$16 = {
+var _hoisted_3$15 = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
 	viewBox: "0 0 24 24",
@@ -14048,7 +14211,7 @@ var BreadcrumbItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 2,
 				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.separator()),
 				"aria-hidden": "true"
-			}, [SeparatorRenderer.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(SeparatorRenderer.value), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$16, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("polyline", { points: "9 6 15 12 9 18" }, null, -1)])]))], 2)) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$38);
+			}, [SeparatorRenderer.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(SeparatorRenderer.value), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$15, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("polyline", { points: "9 6 15 12 9 18" }, null, -1)])]))], 2)) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$40);
 		};
 	}
 });
@@ -14241,7 +14404,7 @@ var ToolbarToggleItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/alert/Alert.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$37 = {
+var _hoisted_1$39 = {
 	key: 0,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -14261,7 +14424,7 @@ var _hoisted_2$23 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_3$15 = {
+var _hoisted_3$14 = {
 	key: 2,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -14271,7 +14434,7 @@ var _hoisted_3$15 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_4$10 = {
+var _hoisted_4$9 = {
 	key: 3,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -14336,7 +14499,7 @@ var Alert_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						(0, vue.renderSlot)(_ctx.$slots, "icon", {}, () => [(0, vue.createElementVNode)("span", {
 							class: (0, vue.normalizeClass)(styles.value.indicator()),
 							"aria-hidden": "true"
-						}, [__props.severity === "default" || __props.severity === "primary" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$37, [..._cache[0] || (_cache[0] = [
+						}, [__props.severity === "default" || __props.severity === "primary" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$39, [..._cache[0] || (_cache[0] = [
 							(0, vue.createElementVNode)("circle", {
 								cx: "12",
 								cy: "12",
@@ -14348,11 +14511,11 @@ var Alert_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							cx: "12",
 							cy: "12",
 							r: "9"
-						}, null, -1), (0, vue.createElementVNode)("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" }, null, -1)])])) : __props.severity === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$15, [..._cache[2] || (_cache[2] = [
+						}, null, -1), (0, vue.createElementVNode)("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" }, null, -1)])])) : __props.severity === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$14, [..._cache[2] || (_cache[2] = [
 							(0, vue.createElementVNode)("path", { d: "M12 3.5 2.8 19.5a1.2 1.2 0 0 0 1 1.8h16.4a1.2 1.2 0 0 0 1-1.8L12 3.5Z" }, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M12 10v4" }, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M12 17.5h.01" }, null, -1)
-						])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_4$10, [..._cache[3] || (_cache[3] = [
+						])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_4$9, [..._cache[3] || (_cache[3] = [
 							(0, vue.createElementVNode)("circle", {
 								cx: "12",
 								cy: "12",
@@ -14710,7 +14873,7 @@ function useToast() {
 }
 //#endregion
 //#region src/components/toast/ToastViewport.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$36 = { class: "flex shrink-0 items-center gap-1 ml-auto" };
+var _hoisted_1$38 = { class: "flex shrink-0 items-center gap-1 ml-auto" };
 //#endregion
 //#region src/components/toast/ToastViewport.vue
 var ToastViewport_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -14780,7 +14943,7 @@ var ToastViewport_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, 1024), toast.description ? ((0, vue.openBlock)(), (0, vue.createBlock)(ToastDescription_default, { key: 0 }, {
 								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(toast.description), 1)]),
 								_: 2
-							}, 1024)) : (0, vue.createCommentVNode)("", true)], 2), (0, vue.createElementVNode)("div", _hoisted_1$36, [toast.action ? ((0, vue.openBlock)(), (0, vue.createBlock)(ToastAction_default, {
+							}, 1024)) : (0, vue.createCommentVNode)("", true)], 2), (0, vue.createElementVNode)("div", _hoisted_1$38, [toast.action ? ((0, vue.openBlock)(), (0, vue.createBlock)(ToastAction_default, {
 								key: 0,
 								"alt-text": toast.action.label,
 								onClick: toast.action.onClick
@@ -14969,7 +15132,7 @@ var ListBoxSection_default = /* @__PURE__ */ (0, vue.defineComponent)({
 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$35 = [
+var _hoisted_1$37 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -14978,12 +15141,12 @@ var _hoisted_1$35 = [
 	"data-has-helper"
 ];
 var _hoisted_2$22 = ["for"];
-var _hoisted_3$14 = {
+var _hoisted_3$13 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_4$9 = ["id"];
-var _hoisted_5$7 = ["id"];
+var _hoisted_4$8 = ["id"];
+var _hoisted_5$6 = ["id"];
 //#endregion
 //#region src/components/select/Select.vue
 var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -15022,6 +15185,10 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		class: {},
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
 		open: {
 			type: Boolean,
 			default: void 0
@@ -15069,6 +15236,9 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			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));
+		}
 		useSelectProvide({
 			isDisabled: (0, vue.toRef)(props, "isDisabled"),
 			isInvalid: (0, vue.toRef)(props, "isInvalid"),
@@ -15081,8 +15251,10 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			label: (0, vue.toRef)(props, "label"),
 			ariaDescribedBy,
 			slots: slotFns,
+			multiple: (0, vue.toRef)(props, "multiple"),
 			registerItem,
-			itemLabel
+			itemLabel,
+			removeValue
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -15097,9 +15269,10 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				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$14, " *")) : (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), {
+			}, [(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,
@@ -15113,6 +15286,7 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, 8, [
 				"model-value",
 				"default-value",
+				"multiple",
 				"open",
 				"default-open",
 				"disabled",
@@ -15125,17 +15299,17 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				id: errorMessageId.value,
 				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
-			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_4$9)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+			}, (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$7)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$35);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$6)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$37);
 		};
 	}
 });
 //#endregion
 //#region src/components/select/SelectTrigger.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$34 = ["for"];
+var _hoisted_1$36 = ["for"];
 var _hoisted_2$21 = {
 	key: 0,
 	"aria-hidden": "true"
@@ -15171,7 +15345,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$34)) : (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$21, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$36)) : (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()),
@@ -15211,6 +15385,87 @@ 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 = {
+	ref: "container",
+	style: {
+		"display": "flex",
+		"flex-wrap": "nowrap",
+		"align-items": "center",
+		"gap": "4px",
+		"overflow": "hidden",
+		"flex": "1",
+		"min-width": "0"
+	}
+};
+//#endregion
+//#region src/components/select/SelectOverflowChips.vue
+var SelectOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "SelectOverflowChips",
+	props: {
+		values: {},
+		getLabel: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const containerEl = (0, vue.useTemplateRef)("container");
+		const visibleCount = (0, vue.ref)(props.values.length);
+		const overflowCount = (0, vue.computed)(() => Math.max(0, props.values.length - visibleCount.value));
+		let measuring = false;
+		async function reflow() {
+			if (measuring) return;
+			measuring = true;
+			try {
+				const el = containerEl.value;
+				if (!el) return;
+				visibleCount.value = props.values.length;
+				await (0, vue.nextTick)();
+				const chips = [...el.querySelectorAll("[data-chip-item]")];
+				if (!chips.length) return;
+				const containerW = el.offsetWidth;
+				if (!containerW) return;
+				const BADGE_W = 76;
+				let usedW = 0;
+				let n = 0;
+				for (let i = 0; i < chips.length; i++) {
+					const gap = i > 0 ? 4 : 0;
+					const chipW = chips[i].offsetWidth;
+					const budget = i === chips.length - 1 ? containerW : containerW - BADGE_W;
+					if (usedW + gap + chipW > budget) break;
+					usedW += gap + chipW;
+					n++;
+				}
+				visibleCount.value = Math.max(1, n);
+			} finally {
+				measuring = false;
+			}
+		}
+		(0, vue.onMounted)(reflow);
+		(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.createBlock)(Chip_default, {
+					key: val,
+					"data-chip-item": "",
+					size: "sm",
+					style: (0, vue.normalizeStyle)(i >= visibleCount.value ? "display: none" : void 0)
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.getLabel(val)), 1)]),
+					_: 2
+				}, 1032, ["style"]);
+			}), 128)), overflowCount.value > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
+				key: 0,
+				size: "sm",
+				color: "default"
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)(" +" + (0, vue.toDisplayString)(overflowCount.value) + " more ", 1)]),
+				_: 1
+			})) : (0, vue.createCommentVNode)("", true)], 512);
+		};
+	}
+});
+//#endregion
 //#region src/components/select/SelectValue.vue
 var SelectValue_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "SelectValue",
@@ -15227,7 +15482,11 @@ var SelectValue_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				placeholder: props.placeholder,
 				"data-slot": "value"
 			}, {
-				default: (0, vue.withCtx)(({ selectedLabel, modelValue }) => [selectedLabel && selectedLabel.length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(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: 1 }, [(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: 2 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64))]),
+				default: (0, vue.withCtx)(({ selectedLabel, modelValue }) => [(0, vue.unref)(ctx).multiple.value && Array.isArray(modelValue) && modelValue.length > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(SelectOverflowChips_default, {
+					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))]),
 				_: 1
 			}, 8, ["class", "placeholder"]);
 		};
@@ -15475,13 +15734,13 @@ var DropdownMenu_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/dropdown/DropdownItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$33 = { class: "flex flex-1 flex-col" };
+var _hoisted_1$34 = { class: "flex flex-1 flex-col" };
 var _hoisted_2$20 = { "data-slot": "label" };
-var _hoisted_3$13 = {
+var _hoisted_3$12 = {
 	key: 0,
 	"data-slot": "description"
 };
-var _hoisted_4$8 = {
+var _hoisted_4$7 = {
 	key: 0,
 	"data-slot": "shortcut",
 	class: "ml-auto text-xs text-muted font-mono"
@@ -15515,8 +15774,8 @@ var DropdownItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.createElementVNode)("div", _hoisted_1$33, [(0, vue.createElementVNode)("span", _hoisted_2$20, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$13, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
-					props.shortcut ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", _hoisted_4$8, (0, vue.toDisplayString)(props.shortcut), 1)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createElementVNode)("div", _hoisted_1$34, [(0, vue.createElementVNode)("span", _hoisted_2$20, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$12, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
+					props.shortcut ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", _hoisted_4$7, (0, vue.toDisplayString)(props.shortcut), 1)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -15850,22 +16109,22 @@ var DropdownSubContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 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$32 = ["aria-invalid"];
+var _hoisted_1$33 = ["aria-invalid"];
 var _hoisted_2$19 = ["id"];
-var _hoisted_3$12 = {
+var _hoisted_3$11 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_4$7 = {
+var _hoisted_4$6 = {
 	key: 1,
 	"data-slot": "helper-wrapper"
 };
-var _hoisted_5$6 = {
+var _hoisted_5$5 = {
 	key: 0,
 	"data-slot": "error-message",
 	"aria-live": "polite"
 };
-var _hoisted_6$5 = {
+var _hoisted_6$4 = {
 	key: 1,
 	"data-slot": "description"
 };
@@ -15982,7 +16241,7 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					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$12, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$19)) : (0, vue.createCommentVNode)("", true),
+				}, [(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))],
@@ -16005,8 +16264,8 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"required",
 					"filter-function"
 				]),
-				props.description || props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$7, [props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_5$6, (0, vue.toDisplayString)(props.errorMessage), 1)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_6$5, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$32);
+				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);
 		};
 	}
 });
@@ -16279,7 +16538,7 @@ var ComboBoxEmpty_default = /* @__PURE__ */ (0, vue.defineComponent)({
 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$31 = [
+var _hoisted_1$32 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -16288,12 +16547,12 @@ var _hoisted_1$31 = [
 	"data-has-helper"
 ];
 var _hoisted_2$18 = ["for"];
-var _hoisted_3$11 = {
+var _hoisted_3$10 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_4$6 = ["id"];
-var _hoisted_5$5 = ["id"];
+var _hoisted_4$5 = ["id"];
+var _hoisted_5$4 = ["id"];
 //#endregion
 //#region src/components/autocomplete/Autocomplete.vue
 var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -16332,6 +16591,11 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		class: {},
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		multipleOverflow: { default: "wrap" },
 		open: {
 			type: Boolean,
 			default: void 0
@@ -16355,7 +16619,11 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: true
 		}
 	},
-	emits: ["update:modelValue", "update:open"],
+	emits: [
+		"update:modelValue",
+		"update:open",
+		"create"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -16376,9 +16644,15 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}
 		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;
@@ -16397,9 +16671,14 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			for (const [value, label] of slotItemRegistry.value) if (label === displayed) return value;
 			return displayed;
 		}
-		const searchTerm = (0, vue.ref)(labelFor(props.modelValue));
-		const isFilled = (0, vue.computed)(() => !!searchTerm.value);
+		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);
@@ -16410,22 +16689,96 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (showDescription.value) return descriptionId.value;
 		});
 		(0, vue.watch)(() => props.modelValue, (val) => {
-			const next = labelFor(val);
-			if (searchTerm.value !== next) searchTerm.value = next;
+			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 !== (props.modelValue ?? "")) emit("update:modelValue", next);
+			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;
@@ -16452,12 +16805,14 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (!props.loadItems) internalItems.value = [...newItems];
 		});
 		(0, vue.watch)(internalItems, () => {
-			const next = labelFor(props.modelValue);
-			if (next && searchTerm.value !== next && valueFor(searchTerm.value) === (props.modelValue ?? "")) searchTerm.value = next;
+			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, () => {
-			const next = labelFor(props.modelValue);
-			if (next && searchTerm.value !== next && valueFor(searchTerm.value) === (props.modelValue ?? "")) searchTerm.value = next;
+			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,
@@ -16487,8 +16842,19 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			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
+			unregisterItem,
+			searchTerm,
+			hasExactMatch,
+			onCreateValue
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -16503,11 +16869,10 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				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$11, " *")) : (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), {
+			}, [(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.open,
-				"default-open": props.defaultOpen,
+				open: props.multiple ? internalOpen.value : singleOpen.value,
 				disabled: props.isDisabled,
 				required: props.isRequired,
 				"ignore-filter": effectiveIgnoreFilter.value,
@@ -16522,7 +16887,6 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, 8, [
 				"model-value",
 				"open",
-				"default-open",
 				"disabled",
 				"required",
 				"ignore-filter"
@@ -16533,11 +16897,95 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				id: errorMessageId.value,
 				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
-			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_4$6)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+			}, (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$5)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$31);
+			}, (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/AutocompleteOverflowChips.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$31 = {
+	ref: "container",
+	style: {
+		"display": "flex",
+		"flex-wrap": "nowrap",
+		"align-items": "center",
+		"gap": "4px",
+		"overflow": "hidden",
+		"flex": "1",
+		"min-width": "0"
+	}
+};
+//#endregion
+//#region src/components/autocomplete/AutocompleteOverflowChips.vue
+var AutocompleteOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "AutocompleteOverflowChips",
+	props: {
+		values: {},
+		getLabel: { type: Function },
+		removeValue: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const containerEl = (0, vue.useTemplateRef)("container");
+		const visibleCount = (0, vue.ref)(props.values.length);
+		const overflowCount = (0, vue.computed)(() => Math.max(0, props.values.length - visibleCount.value));
+		let measuring = false;
+		async function reflow() {
+			if (measuring) return;
+			measuring = true;
+			try {
+				const el = containerEl.value;
+				if (!el) return;
+				visibleCount.value = props.values.length;
+				await (0, vue.nextTick)();
+				const chips = [...el.querySelectorAll("[data-chip-item]")];
+				if (!chips.length) return;
+				const containerW = el.offsetWidth;
+				if (!containerW) return;
+				const BADGE_W = 76;
+				let usedW = 0;
+				let n = 0;
+				for (let i = 0; i < chips.length; i++) {
+					const gap = i > 0 ? 4 : 0;
+					const chipW = chips[i].offsetWidth;
+					const budget = i === chips.length - 1 ? containerW : containerW - BADGE_W;
+					if (usedW + gap + chipW > budget) break;
+					usedW += gap + chipW;
+					n++;
+				}
+				visibleCount.value = Math.max(1, n);
+			} finally {
+				measuring = false;
+			}
+		}
+		(0, vue.onMounted)(reflow);
+		(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.createBlock)(Chip_default, {
+					key: val,
+					"data-chip-item": "",
+					size: "sm",
+					"is-closable": "",
+					style: (0, vue.normalizeStyle)(i >= visibleCount.value ? "display: none" : void 0),
+					onClose: (0, vue.withModifiers)(($event) => __props.removeValue(val), ["stop"])
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.getLabel(val)), 1)]),
+					_: 2
+				}, 1032, ["style", "onClose"]);
+			}), 128)), overflowCount.value > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
+				key: 0,
+				size: "sm",
+				color: "default"
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)(" +" + (0, vue.toDisplayString)(overflowCount.value) + " more ", 1)]),
+				_: 1
+			})) : (0, vue.createCommentVNode)("", true)], 512);
 		};
 	}
 });
@@ -16561,6 +17009,8 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const ctx = useAutocompleteInject();
 		const { focused: isFocused } = (0, _vueuse_core.useFocusWithin)((0, vue.useTemplateRef)("anchor"));
 		const showInsideLabel = (0, vue.computed)(() => ctx.hasLabel.value && ctx.labelPlacement.value === "inside");
+		const effectivePlaceholder = (0, vue.computed)(() => ctx.multiple.value && ctx.selectedValues.value.length > 0 ? void 0 : props.placeholder);
+		const getLabel = (v) => ctx.selectedLabels.value.find((l) => l.value === v)?.label ?? v;
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AutocompleteAnchor), {
 				ref: "anchor",
@@ -16570,6 +17020,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-invalid": (0, vue.unref)(ctx).isInvalid.value || void 0,
 				"data-disabled": (0, vue.unref)(ctx).isDisabled.value || void 0,
 				"data-readonly": (0, vue.unref)(ctx).isReadonly.value || void 0,
+				"data-multiple-overflow": (0, vue.unref)(ctx).multiple.value ? (0, vue.unref)(ctx).multipleOverflow.value : void 0,
 				"data-slot": "trigger"
 			}, {
 				default: (0, vue.withCtx)(() => [
@@ -16583,15 +17034,38 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.startContent()),
 						"data-slot": "start-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.unref)(ctx).multiple.value && (0, vue.unref)(ctx).multipleOverflow.value === "collapse" && (0, vue.unref)(ctx).selectedValues.value.length > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(AutocompleteOverflowChips_default, {
+						key: 2,
+						values: (0, vue.unref)(ctx).selectedValues.value,
+						"get-label": getLabel,
+						"remove-value": (0, vue.unref)(ctx).removeValue
+					}, null, 8, ["values", "remove-value"])) : (0, vue.unref)(ctx).multiple.value && (0, vue.unref)(ctx).multipleOverflow.value === "wrap" ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, (0, vue.renderList)((0, vue.unref)(ctx).selectedLabels.value, (item) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
+							key: item.value,
+							size: "sm",
+							"is-closable": "",
+							"close-aria-label": `Remove ${item.label}`,
+							"data-slot": "selected-chip",
+							onClose: (0, vue.withModifiers)(($event) => (0, vue.unref)(ctx).removeValue(item.value), ["stop"])
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label), 1)]),
+							_: 2
+						}, 1032, ["close-aria-label", "onClose"]);
+					}), 128)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteInput), {
 						id: (0, vue.unref)(ctx).inputId.value,
-						placeholder: props.placeholder,
+						placeholder: effectivePlaceholder.value,
 						disabled: (0, vue.unref)(ctx).isDisabled.value,
 						readonly: (0, vue.unref)(ctx).isReadonly.value,
 						required: (0, vue.unref)(ctx).isRequired.value,
 						"aria-invalid": (0, vue.unref)(ctx).isInvalid.value || void 0,
 						"aria-describedby": (0, vue.unref)(ctx).ariaDescribedBy.value,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.input()),
+						style: (0, vue.normalizeStyle)((0, vue.unref)(ctx).multiple.value && (0, vue.unref)(ctx).multipleOverflow.value === "collapse" && (0, vue.unref)(ctx).selectedValues.value.length > 0 ? {
+							flex: "0 0 auto",
+							minWidth: "80px",
+							width: "auto"
+						} : void 0),
 						"data-slot": "input",
 						autocomplete: "off"
 					}, null, 8, [
@@ -16602,15 +17076,17 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"required",
 						"aria-invalid",
 						"aria-describedby",
-						"class"
+						"class",
+						"style"
 					]),
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteCancel), {
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.clearButton()),
 						"data-empty": !(0, vue.unref)(ctx).isFilled.value || (0, vue.unref)(ctx).isReadonly.value || (0, vue.unref)(ctx).isDisabled.value ? "true" : void 0,
 						"data-slot": "clear-button",
-						"aria-label": "Clear"
+						"aria-label": "Clear",
+						onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(ctx).multiple.value ? (0, vue.unref)(ctx).clearAll() : void 0)
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "clearIcon", {}, () => [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("svg", {
+						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "clearIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "10",
 							height: "10",
@@ -16636,19 +17112,19 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						_: 3
 					}, 8, ["class", "data-empty"]),
 					(0, vue.unref)(ctx).isLoading.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
-						key: 2,
+						key: 4,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.indicator()),
 						"data-slot": "autocomplete-loading-indicator",
 						role: "status",
 						"aria-live": "polite",
 						"aria-label": "Loading suggestions"
 					}, [(0, vue.createVNode)(Spinner_default, { size: "sm" })], 2)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AutocompleteTrigger), {
-						key: 3,
+						key: 5,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.indicator()),
 						"data-slot": "autocomplete-default-indicator",
 						"aria-label": "Toggle suggestions"
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "triggerIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
+						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "triggerIcon", {}, () => [_cache[2] || (_cache[2] = (0, vue.createElementVNode)("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "16",
 							height: "16",
@@ -16670,7 +17146,8 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-focused",
 				"data-invalid",
 				"data-disabled",
-				"data-readonly"
+				"data-readonly",
+				"data-multiple-overflow"
 			]);
 		};
 	}
@@ -16799,6 +17276,11 @@ var _hoisted_1$28 = {
 	class: "autocomplete-item__text",
 	"data-slot": "item-text"
 };
+var _hoisted_2$16 = {
+	key: 1,
+	class: "list-box-item__indicator",
+	"data-slot": "list-box-item-indicator"
+};
 //#endregion
 //#region src/components/autocomplete/AutocompleteItem.vue
 var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -16827,25 +17309,35 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (!vnodes) return props.value;
 			return extractText(vnodes).trim() || props.value;
 		});
+		const isChecked = (0, vue.computed)(() => ctx.multiple.value && ctx.isSelected(props.value));
 		(0, vue.onMounted)(() => {
 			ctx.registerItem(props.value, displayText.value);
 		});
 		(0, vue.onUnmounted)(() => {
 			ctx.unregisterItem(props.value);
 		});
+		function handleSelect(event) {
+			if (ctx.multiple.value) {
+				event.preventDefault();
+				ctx.onMultipleSelect(props.value);
+			}
+		}
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AutocompleteItem), {
 				value: displayText.value,
 				"text-value": displayText.value,
 				disabled: props.isDisabled,
 				"data-item-value": props.value,
+				"data-selected": isChecked.value || void 0,
 				class: "list-box-item list-box-item--default",
-				"data-slot": "list-box-item"
+				"data-slot": "list-box-item",
+				onSelect: handleSelect
 			}, {
 				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.createVNode)((0, vue.unref)(reka_ui.ComboboxItemIndicator), {
+					!(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",
 						"data-slot": "list-box-item-indicator"
 					}, {
@@ -16863,7 +17355,19 @@ 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", {
+						xmlns: "http://www.w3.org/2000/svg",
+						width: "12",
+						height: "12",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "3",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"data-slot": "list-box-item-indicator--checkmark",
+						"aria-hidden": "true"
+					}, [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" })], -1))])])) : (0, vue.createCommentVNode)("", true),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -16871,293 +17375,62 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"value",
 				"text-value",
 				"disabled",
-				"data-item-value"
-			]);
-		};
-	}
-});
-//#endregion
-//#region src/components/tag-group/TagGroup.context.ts
-var { useProvide: useTagGroupProvide, useInject: useTagGroupInject, key: tagGroupContextKey } = createContext("TagGroup");
-//#endregion
-//#region src/components/tag-group/TagGroupInput.vue
-var TagGroupInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "TagGroupInput",
-	props: {
-		placeholder: { default: void 0 },
-		class: { default: void 0 }
-	},
-	setup(__props) {
-		const props = __props;
-		const ctx = useTagGroupInject({
-			variant: (0, vue.computed)(() => "default"),
-			size: (0, vue.computed)(() => "md"),
-			isDisabled: (0, vue.computed)(() => false),
-			readOnly: (0, vue.computed)(() => false)
-		});
-		const isDisabled = (0, vue.computed)(() => ctx.isDisabled.value);
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TagsInputInput), {
-				placeholder: __props.placeholder,
-				disabled: isDisabled.value || void 0,
-				class: (0, vue.normalizeClass)(props.class),
-				"data-slot": "input"
-			}, null, 8, [
-				"placeholder",
-				"disabled",
-				"class"
+				"data-item-value",
+				"data-selected"
 			]);
 		};
 	}
 });
 //#endregion
-//#region src/components/tag-group/TagGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$27 = [
-	"data-invalid",
-	"data-required",
-	"data-disabled",
-	"data-readonly"
-];
-var _hoisted_2$16 = ["id"];
-var _hoisted_3$10 = {
-	key: 0,
-	"aria-hidden": "true"
-};
-var _hoisted_4$5 = {
-	key: 1,
-	class: "flex flex-col gap-0.5 px-1",
-	"data-slot": "helper-wrapper"
-};
-var _hoisted_5$4 = {
-	key: 0,
-	class: "text-sm text-danger",
-	"data-slot": "error-message",
-	"aria-live": "polite"
-};
-var _hoisted_6$4 = {
-	key: 1,
-	class: "text-sm text-default-400",
-	"data-slot": "description"
+//#region src/components/autocomplete/AutocompleteCreateItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$27 = {
+	class: "autocomplete-item__text",
+	"data-slot": "item-text"
 };
 //#endregion
-//#region src/components/tag-group/TagGroup.vue
-var TagGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "TagGroup",
+//#region src/components/autocomplete/AutocompleteCreateItem.vue
+var AutocompleteCreateItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "AutocompleteCreateItem",
 	props: {
-		modelValue: { default: void 0 },
-		defaultValue: { default: () => [] },
-		label: { default: void 0 },
-		placeholder: { default: "Add a tag" },
-		description: { default: void 0 },
-		errorMessage: { default: void 0 },
-		isInvalid: {
-			type: Boolean,
-			default: false
-		},
-		isDisabled: {
-			type: Boolean,
-			default: false
-		},
-		readOnly: {
-			type: Boolean,
-			default: false
-		},
-		isRequired: {
-			type: Boolean,
-			default: false
-		},
-		allowsDuplicates: {
-			type: Boolean,
-			default: false
-		},
-		maxTags: { default: void 0 },
-		delimiter: { default: "," },
-		variant: { default: "default" },
-		size: { default: "md" },
-		class: { default: void 0 }
-	},
-	emits: [
-		"update:modelValue",
-		"add",
-		"remove",
-		"invalid"
-	],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const labelId = (0, vue.useId)();
-		const slotFns = (0, _auronui_styles.tagGroupVariants)();
-		useTagGroupProvide({
-			variant: (0, vue.toRef)(props, "variant"),
-			size: (0, vue.toRef)(props, "size"),
-			isDisabled: (0, vue.toRef)(props, "isDisabled"),
-			readOnly: (0, vue.toRef)(props, "readOnly")
-		});
-		function onUpdateModelValue(value) {
-			emit("update:modelValue", value);
-		}
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(slotFns).base()),
-				"data-invalid": props.isInvalid || void 0,
-				"data-required": props.isRequired || void 0,
-				"data-disabled": props.isDisabled || void 0,
-				"data-readonly": props.readOnly || void 0,
-				"data-slot": "tag-group"
-			}, [
-				props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
-					key: 0,
-					id: (0, vue.unref)(labelId),
-					class: "text-sm font-medium text-default-foreground w-fit",
-					"data-slot": "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)], 8, _hoisted_2$16)) : (0, vue.createCommentVNode)("", true),
-				(0, vue.createVNode)((0, vue.unref)(reka_ui.TagsInputRoot), {
-					"model-value": props.modelValue,
-					"default-value": props.defaultValue,
-					disabled: props.isDisabled,
-					max: props.maxTags ?? 0,
-					delimiter: props.delimiter,
-					duplicate: props.allowsDuplicates,
-					"aria-labelledby": props.label ? (0, vue.unref)(labelId) : void 0,
-					"aria-invalid": props.isInvalid || void 0,
-					"aria-required": props.isRequired || void 0,
-					class: (0, vue.normalizeClass)((0, vue.unref)(slotFns).list()),
-					"onUpdate:modelValue": onUpdateModelValue
-				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), !props.readOnly ? ((0, vue.openBlock)(), (0, vue.createBlock)(TagGroupInput_default, {
-						key: 0,
-						placeholder: props.placeholder
-					}, null, 8, ["placeholder"])) : (0, vue.createCommentVNode)("", true)]),
-					_: 3
-				}, 8, [
-					"model-value",
-					"default-value",
-					"disabled",
-					"max",
-					"delimiter",
-					"duplicate",
-					"aria-labelledby",
-					"aria-invalid",
-					"aria-required",
-					"class"
-				]),
-				props.description || props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$5, [props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_5$4, (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$27);
-		};
-	}
-});
-//#endregion
-//#region src/components/tag/TagText.vue
-var TagText_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "TagText",
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TagsInputItemText), null, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-				_: 3
-			});
-		};
-	}
-});
-//#endregion
-//#region src/components/tag/TagDelete.vue
-var TagDelete_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "TagDelete",
-	emits: ["remove"],
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		const slots = (0, _auronui_styles.tagVariants)();
-		function handleClick() {
-			emit("remove");
-		}
-		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TagsInputItemDelete), {
-				class: (0, vue.normalizeClass)((0, vue.unref)(slots).removeButton()),
-				"aria-label": "Remove tag",
-				onClick: handleClick
-			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("svg", {
-					xmlns: "http://www.w3.org/2000/svg",
-					viewBox: "0 0 24 24",
-					fill: "none",
-					stroke: "currentColor",
-					"stroke-width": "2",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round",
-					"aria-hidden": "true",
-					focusable: "false"
-				}, [(0, vue.createElementVNode)("line", {
-					x1: "18",
-					y1: "6",
-					x2: "6",
-					y2: "18"
-				}), (0, vue.createElementVNode)("line", {
-					x1: "6",
-					y1: "6",
-					x2: "18",
-					y2: "18"
-				})], -1))])]),
-				_: 3
-			}, 8, ["class"]);
-		};
-	}
-});
-//#endregion
-//#region src/components/tag/Tag.vue
-var Tag_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	__name: "Tag",
-	props: {
-		value: {},
-		textValue: { default: void 0 },
-		isDisabled: {
-			type: Boolean,
-			default: void 0
-		},
-		isReadOnly: {
-			type: Boolean,
+		label: {
+			type: [String, Function],
 			default: void 0
 		},
-		variant: { default: void 0 },
-		size: { default: void 0 },
 		class: { default: void 0 }
 	},
-	emits: ["remove"],
-	setup(__props, { emit: __emit }) {
+	setup(__props) {
 		const props = __props;
-		const emit = __emit;
-		const groupCtx = (0, vue.inject)(tagGroupContextKey, null);
-		const resolvedVariant = (0, vue.computed)(() => props.variant ?? groupCtx?.variant.value ?? "default");
-		const resolvedSize = (0, vue.computed)(() => props.size ?? groupCtx?.size.value ?? "md");
-		const resolvedIsDisabled = (0, vue.computed)(() => props.isDisabled ?? groupCtx?.isDisabled.value ?? false);
-		const resolvedReadOnly = (0, vue.computed)(() => props.isReadOnly ?? groupCtx?.readOnly.value ?? false);
-		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tagVariants)({
-			variant: resolvedVariant.value,
-			size: resolvedSize.value
-		}));
-		const showDelete = (0, vue.computed)(() => !resolvedReadOnly.value && !resolvedIsDisabled.value);
-		function onRemove() {
-			emit("remove", props.value);
+		const ctx = useAutocompleteInject();
+		const comboboxCtx = (0, reka_ui.injectComboboxRootContext)();
+		const term = (0, vue.computed)(() => ctx.searchTerm.value.trim());
+		const isVisible = (0, vue.computed)(() => !!term.value && !ctx.hasExactMatch.value);
+		const displayLabel = (0, vue.computed)(() => {
+			if (typeof props.label === "function") return props.label(term.value);
+			return props.label ?? `Create "${term.value}"`;
+		});
+		function handleSelect(event) {
+			event.preventDefault();
+			ctx.onCreateValue(term.value);
+			if (ctx.multiple.value) comboboxCtx.inputElement.value?.focus();
+			else comboboxCtx.onOpenChange(false);
 		}
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TagsInputItem), {
-				value: __props.value,
-				disabled: resolvedIsDisabled.value || void 0,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
-				"data-slot": "tag"
+			return isVisible.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AutocompleteItem), {
+				key: term.value,
+				value: term.value,
+				"text-value": term.value,
+				class: (0, vue.normalizeClass)(["list-box-item list-box-item--default", props.class]),
+				"data-slot": "list-box-item",
+				"data-create-item": "",
+				onSelect: handleSelect
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(TagText_default, null, {
-					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.textValue ?? __props.value), 1)])]),
-					_: 3
-				}), showDelete.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(TagDelete_default, {
-					key: 0,
-					onRemove
-				})) : (0, vue.createCommentVNode)("", true)]),
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { term: term.value }, () => [(0, vue.createElementVNode)("span", _hoisted_1$27, (0, vue.toDisplayString)(displayLabel.value), 1)])]),
 				_: 3
 			}, 8, [
 				"value",
-				"disabled",
+				"text-value",
 				"class"
-			]);
+			])) : (0, vue.createCommentVNode)("", true);
 		};
 	}
 });
@@ -26876,6 +27149,7 @@ exports.AlertTitle = AlertTitle_default;
 exports.AspectRatio = AspectRatio_default;
 exports.Autocomplete = Autocomplete_default;
 exports.AutocompleteContent = AutocompleteContent_default;
+exports.AutocompleteCreateItem = AutocompleteCreateItem_default;
 exports.AutocompleteInput = AutocompleteInput_default;
 exports.AutocompleteItem = AutocompleteItem_default;
 exports.Avatar = Avatar_default;
@@ -27018,11 +27292,7 @@ exports.TableHeader = TableHeader_default;
 exports.TableHeaderCell = TableHeaderCell_default;
 exports.TableRow = TableRow_default;
 exports.Tabs = Tabs_default;
-exports.Tag = Tag_default;
-exports.TagDelete = TagDelete_default;
-exports.TagGroup = TagGroup_default;
-exports.TagGroupInput = TagGroupInput_default;
-exports.TagText = TagText_default;
+exports.Tag = Chip_default;
 exports.Text = Text_default;
 exports.Textarea = Textarea_default;
 exports.TimeField = TimeField_default;
@@ -27067,7 +27337,6 @@ exports.stepperContextKey = stepperContextKey;
 exports.surfaceContextKey = surfaceContextKey;
 exports.switchGroupContextKey = switchGroupContextKey;
 exports.tableContextKey = tableContextKey;
-exports.tagGroupContextKey = tagGroupContextKey;
 exports.treeContextKey = treeContextKey;
 exports.useAutocompleteInject = useAutocompleteInject;
 exports.useAutocompleteProvide = useAutocompleteProvide;
@@ -27095,8 +27364,6 @@ exports.useSwitchGroupProvide = useSwitchGroupProvide;
 exports.useTableInject = useTableInject;
 exports.useTableKeyboardNav = useTableKeyboardNav;
 exports.useTableProvide = useTableProvide;
-exports.useTagGroupInject = useTagGroupInject;
-exports.useTagGroupProvide = useTagGroupProvide;
 exports.useToast = useToast;
 
 //# sourceMappingURL=index.cjs.map