@auronui/vue 1.0.2 → 1.0.4

package/dist/cjs/index.cjs

@@ -373,15 +373,15 @@ function createContext(contextName) {
 }
 //#endregion
 //#region src/components/spinner/Spinner.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$55 = ["aria-label"];
-var _hoisted_2$30 = {
+var _hoisted_1$58 = ["aria-label"];
+var _hoisted_2$32 = {
 	"data-slot": "spinner-icon",
 	viewBox: "0 0 24 24",
 	"aria-hidden": "true",
 	width: "100%",
 	height: "100%"
 };
-var _hoisted_3$20 = { fill: "none" };
+var _hoisted_3$21 = { fill: "none" };
 var _hoisted_4$14 = ["fill"];
 var _hoisted_5$10 = ["fill"];
 //#endregion
@@ -408,7 +408,7 @@ var Spinner_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)(classes.value),
 				role: "status",
 				"aria-label": __props.label
-			}, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$30, [(0, vue.createElementVNode)("defs", null, [(0, vue.createElementVNode)("linearGradient", {
+			}, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$32, [(0, vue.createElementVNode)("defs", null, [(0, vue.createElementVNode)("linearGradient", {
 				id: gradId1,
 				x1: "50%",
 				x2: "50%",
@@ -435,7 +435,7 @@ var Spinner_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				offset: "100%",
 				"stop-color": "currentColor",
 				"stop-opacity": "0.55"
-			}, null, -1)])])]), (0, vue.createElementVNode)("g", _hoisted_3$20, [
+			}, null, -1)])])]), (0, vue.createElementVNode)("g", _hoisted_3$21, [
 				_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",
@@ -447,13 +447,13 @@ var Spinner_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					fill: `url(#${gradId2})`,
 					transform: "translate(1.5 1.625)"
 				}, null, 8, _hoisted_5$10)
-			])]))], 10, _hoisted_1$55);
+			])]))], 10, _hoisted_1$58);
 		};
 	}
 });
 //#endregion
 //#region src/components/separator/Separator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$54 = { class: "separator__content" };
+var _hoisted_1$57 = { 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$54, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				(0, vue.createElementVNode)("div", _hoisted_1$57, [(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$53 = ["for"];
+var _hoisted_1$56 = ["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$53);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$56);
 		};
 	}
 });
 //#endregion
 //#region src/components/description/Description.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$52 = ["id"];
+var _hoisted_1$55 = ["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$52);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$55);
 		};
 	}
 });
@@ -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$51 = ["aria-label"];
+var _hoisted_1$54 = ["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$51)) : (0, vue.createCommentVNode)("", true)
+				})], -1)])], 10, _hoisted_1$54)) : (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$50 = [
+var _hoisted_1$53 = [
 	"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$50);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 42, _hoisted_1$53);
 		};
 	}
 });
@@ -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$49 = ["data-orientation"];
+var _hoisted_1$52 = ["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$49);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$52);
 		};
 	}
 });
@@ -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$48 = ["disabled", "data-orientation"];
+var _hoisted_1$51 = ["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$48)]),
+				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$51)]),
 				_: 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$47 = ["data-orientation"];
+var _hoisted_1$50 = ["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$47);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$50);
 		};
 	}
 });
@@ -1442,8 +1442,246 @@ var Link_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
+//#region src/components/form/form.context.ts
+var { useProvide: useFormProvide, useInject: _useFormInjectStrict, key: formContextKey } = createContext("Form");
+/**
+* Inject Form context. Returns null when called outside a <Form> — callers
+* handle standalone mode themselves.
+*/
+function useFormInject() {
+	return (0, vue.inject)(formContextKey, null);
+}
+//#endregion
+//#region src/components/form/validation.ts
+var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function isEmpty(value) {
+	if (value === void 0 || value === null || value === "" || value === false) return true;
+	if (Array.isArray(value) && value.length === 0) return true;
+	return false;
+}
+function resolveSimpleRule(rule) {
+	if (typeof rule === "string") return {
+		enabled: true,
+		message: rule
+	};
+	return {
+		enabled: rule,
+		message: void 0
+	};
+}
+function resolveNumericRule(rule) {
+	if (typeof rule === "number") return {
+		value: rule,
+		message: void 0
+	};
+	return rule;
+}
+function resolvePatternRule(rule) {
+	if (rule instanceof RegExp) return {
+		value: rule,
+		message: void 0
+	};
+	return rule;
+}
+async function runValidation(value, rules, validate) {
+	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);
+		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?.pattern !== void 0) {
+		const { value: regex, message } = resolvePatternRule(rules.pattern);
+		if (!regex.test(String(value))) return message ?? "Invalid format";
+	}
+	if (rules?.minLength !== void 0) {
+		const { value: min, message } = resolveNumericRule(rules.minLength);
+		if ((Array.isArray(value) ? value.length : String(value).length) < min) return message ?? `Must be at least ${min} characters`;
+	}
+	if (rules?.maxLength !== void 0) {
+		const { value: max, message } = resolveNumericRule(rules.maxLength);
+		if ((Array.isArray(value) ? value.length : String(value).length) > max) return message ?? `Must be at most ${max} characters`;
+	}
+	if (rules?.min !== void 0) {
+		const { value: minVal, message } = resolveNumericRule(rules.min);
+		if (Number(value) < minVal) return message ?? `Must be at least ${minVal}`;
+	}
+	if (rules?.max !== void 0) {
+		const { value: maxVal, message } = resolveNumericRule(rules.max);
+		if (Number(value) > maxVal) return message ?? `Must be at most ${maxVal}`;
+	}
+	if (validate) return await validate(value);
+}
+//#endregion
+//#region src/components/form/Form.vue
+var Form_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "Form",
+	props: {
+		validationMode: { default: "on-submit" },
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		class: { default: void 0 }
+	},
+	emits: ["submit", "invalid"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const errors = (0, vue.ref)({});
+		const isSubmitting = (0, vue.ref)(false);
+		const fields = /* @__PURE__ */ new Map();
+		function registerField(reg) {
+			fields.set(reg.name, reg);
+		}
+		function unregisterField(name) {
+			fields.delete(name);
+			const next = { ...errors.value };
+			delete next[name];
+			errors.value = next;
+		}
+		async function triggerFieldValidation(name) {
+			const field = fields.get(name);
+			if (!field) return;
+			const error = await runValidation(field.getValue(), field.rules, field.validate);
+			const next = { ...errors.value };
+			if (error) next[name] = error;
+			else delete next[name];
+			errors.value = next;
+		}
+		function setErrors(newErrors) {
+			errors.value = {
+				...errors.value,
+				...newErrors
+			};
+			isSubmitting.value = false;
+		}
+		async function handleSubmit() {
+			isSubmitting.value = true;
+			const results = await Promise.all([...fields.entries()].map(async ([name, field]) => {
+				return {
+					name,
+					error: await runValidation(field.getValue(), field.rules, field.validate)
+				};
+			}));
+			const nextErrors = {};
+			for (const { name, error } of results) if (error) nextErrors[name] = error;
+			if (Object.keys(nextErrors).length > 0) {
+				errors.value = nextErrors;
+				isSubmitting.value = false;
+				emit("invalid", nextErrors);
+				return;
+			}
+			errors.value = {};
+			const values = {};
+			for (const [name, field] of fields.entries()) values[name] = field.getValue();
+			emit("submit", {
+				values,
+				setErrors
+			});
+		}
+		(0, vue.provide)(formContextKey, {
+			errors,
+			isSubmitting,
+			isDisabled: (0, vue.computed)(() => props.isDisabled),
+			validationMode: (0, vue.computed)(() => props.validationMode),
+			registerField,
+			unregisterField,
+			triggerFieldValidation,
+			setErrors
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("form", {
+				class: (0, vue.normalizeClass)(props.class),
+				novalidate: "",
+				onSubmit: (0, vue.withModifiers)(handleSubmit, ["prevent"])
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {
+				isSubmitting: isSubmitting.value,
+				isDisabled: props.isDisabled,
+				errors: errors.value
+			})], 34);
+		};
+	}
+});
+//#endregion
+//#region src/components/form/FormField.vue
+var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "FormField",
+	props: /* @__PURE__ */ (0, vue.mergeModels)({
+		name: {},
+		rules: {},
+		validate: { type: Function },
+		validationMode: {}
+	}, {
+		"modelValue": { default: void 0 },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const ctx = useFormInject();
+		const localError = (0, vue.ref)(void 0);
+		const fieldError = (0, vue.computed)(() => ctx ? ctx.errors.value[props.name] : localError.value);
+		const hasBeenInvalid = (0, vue.ref)(false);
+		(0, vue.watch)(fieldError, (error) => {
+			if (error) hasBeenInvalid.value = true;
+		});
+		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.onMounted)(() => {
+			ctx?.registerField({
+				name: props.name,
+				getValue: () => modelValue.value,
+				rules: props.rules,
+				validate: props.validate
+			});
+		});
+		(0, vue.onUnmounted)(() => {
+			ctx?.unregisterField(props.name);
+		});
+		async function triggerValidation(val) {
+			const error = await runValidation(val, props.rules, props.validate);
+			if (ctx) {
+				const next = { ...ctx.errors.value };
+				if (error) next[props.name] = error;
+				else delete next[props.name];
+				ctx.errors.value = next;
+			} else localError.value = error;
+		}
+		async function handleUpdate(val) {
+			modelValue.value = val;
+			if (validationMode.value === "on-change" || hasBeenInvalid.value) await triggerValidation(val);
+		}
+		async function handleBlur() {
+			if (validationMode.value === "on-blur") await triggerValidation(modelValue.value);
+		}
+		const fieldProps = (0, vue.computed)(() => ({
+			name: props.name,
+			modelValue: modelValue.value,
+			"onUpdate:modelValue": handleUpdate,
+			isInvalid: isInvalid.value,
+			errorMessage: fieldError.value,
+			isDisabled: isDisabled.value,
+			onBlur: handleBlur
+		}));
+		return (_ctx, _cache) => {
+			return (0, vue.renderSlot)(_ctx.$slots, "default", { fieldProps: fieldProps.value });
+		};
+	}
+});
+//#endregion
 //#region src/components/input/Input.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$46 = [
+var _hoisted_1$49 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -1451,8 +1689,8 @@ var _hoisted_1$46 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$29 = ["for"];
-var _hoisted_3$19 = {
+var _hoisted_2$31 = ["for"];
+var _hoisted_3$20 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -1613,7 +1851,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$19, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$29)) : (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$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", {
 				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
 				"data-filled": hasLabel.value ? isFilled.value || void 0 : void 0
 			}, [
@@ -1708,13 +1946,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$46);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_12)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$49);
 		};
 	}
 });
 //#endregion
 //#region src/components/textarea/Textarea.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$45 = [
+var _hoisted_1$48 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -1722,8 +1960,8 @@ var _hoisted_1$45 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$28 = ["for"];
-var _hoisted_3$18 = {
+var _hoisted_2$30 = ["for"];
+var _hoisted_3$19 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -1853,7 +2091,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$18, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$28)) : (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$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
 			}, [
@@ -1931,13 +2169,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$45);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_9)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$48);
 		};
 	}
 });
 //#endregion
 //#region src/components/number-field/NumberField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$44 = ["for"];
+var _hoisted_1$47 = ["for"];
 //#endregion
 //#region src/components/number-field/NumberField.vue
 var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2017,7 +2255,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$44)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", {
+				}, (0, vue.toDisplayString)(props.label || props.ariaLabel), 11, _hoisted_1$47)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", {
 					class: (0, vue.normalizeClass)(slotFns.value.group()),
 					"data-slot": "group"
 				}, [
@@ -2080,7 +2318,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$43 = ["disabled"];
+var _hoisted_1$46 = ["disabled"];
 //#endregion
 //#region src/components/fieldset/Fieldset.vue
 var Fieldset_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2108,7 +2346,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$43);
+			}, (0, vue.toDisplayString)(props.legend), 3)) : (0, vue.createCommentVNode)("", true), (0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$46);
 		};
 	}
 });
@@ -2117,7 +2355,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$42 = {
+var _hoisted_1$45 = {
 	key: 0,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "12",
@@ -2129,7 +2367,7 @@ var _hoisted_1$42 = {
 	"stroke-linecap": "round",
 	"aria-hidden": "true"
 };
-var _hoisted_2$27 = {
+var _hoisted_2$29 = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "12",
@@ -2204,12 +2442,12 @@ 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$42, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("line", {
+					default: (0, vue.withCtx)(() => [props.isIndeterminate ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$45, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("line", {
 						x1: "5",
 						y1: "12",
 						x2: "19",
 						y2: "12"
-					}, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$27, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" }, null, -1)])]))]),
+					}, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$29, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" }, null, -1)])]))]),
 					_: 1
 				}, 8, ["class"])], 2), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.content()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
 				_: 3
@@ -2225,9 +2463,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$41 = ["aria-labelledby", "data-orientation"];
-var _hoisted_2$26 = { class: "checkbox-group__wrapper" };
-var _hoisted_3$17 = {
+var _hoisted_1$44 = ["aria-labelledby", "data-orientation"];
+var _hoisted_2$28 = { class: "checkbox-group__wrapper" };
+var _hoisted_3$18 = {
 	key: 1,
 	class: "checkbox-group__description"
 };
@@ -2281,9 +2519,9 @@ var CheckboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					id: labelId,
 					class: "checkbox-group__label"
 				}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
-				(0, vue.createElementVNode)("div", _hoisted_2$26, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-				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$41);
+				(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$44);
 		};
 	}
 });
@@ -2334,8 +2572,8 @@ var Radio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/radio/RadioGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$40 = { class: "radio-group__wrapper" };
-var _hoisted_2$25 = {
+var _hoisted_1$43 = { class: "radio-group__wrapper" };
+var _hoisted_2$27 = {
 	key: 1,
 	class: "radio-group__description"
 };
@@ -2384,8 +2622,8 @@ 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$40, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-					props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$25, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
+					(0, vue.createElementVNode)("div", _hoisted_1$43, [(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
 			}, 8, [
@@ -2476,8 +2714,8 @@ var Switch_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/switch/SwitchGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$39 = ["aria-labelledby", "data-orientation"];
-var _hoisted_2$24 = {
+var _hoisted_1$42 = ["aria-labelledby", "data-orientation"];
+var _hoisted_2$26 = {
 	key: 1,
 	class: "switch-group__description"
 };
@@ -2532,8 +2770,8 @@ var SwitchGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					class: "switch-group__label"
 				}, (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$24, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$39);
+				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$42);
 		};
 	}
 });
@@ -12345,7 +12583,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$38 = ["data-placement"];
+var _hoisted_1$41 = ["data-placement"];
 //#endregion
 //#region src/components/alert-dialog/AlertDialogContent.vue
 var AlertDialogContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -12380,7 +12618,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$38)]),
+				}, 8, ["class", "data-placement"])], 10, _hoisted_1$41)]),
 				_: 3
 			});
 		};
@@ -12530,7 +12768,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$37 = {
+var _hoisted_1$40 = {
 	key: 0,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -12540,7 +12778,7 @@ var _hoisted_1$37 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_2$23 = {
+var _hoisted_2$25 = {
 	key: 1,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -12550,7 +12788,7 @@ var _hoisted_2$23 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_3$16 = {
+var _hoisted_3$17 = {
 	key: 2,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -12592,7 +12830,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$37, [..._cache[0] || (_cache[0] = [
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [resolvedStatus() === "danger" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$40, [..._cache[0] || (_cache[0] = [
 				(0, vue.createElementVNode)("circle", {
 					cx: "12",
 					cy: "12",
@@ -12600,11 +12838,11 @@ var AlertDialogIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, null, -1),
 				(0, vue.createElementVNode)("path", { d: "m9 9 6 6" }, null, -1),
 				(0, vue.createElementVNode)("path", { d: "m15 9-6 6" }, null, -1)
-			])])) : resolvedStatus() === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$23, [..._cache[1] || (_cache[1] = [
+			])])) : resolvedStatus() === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$25, [..._cache[1] || (_cache[1] = [
 				(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$16, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("circle", {
+			])])) : resolvedStatus() === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$17, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9"
@@ -13324,7 +13562,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$36 = ["data-state"];
+var _hoisted_1$39 = ["data-state"];
 //#endregion
 //#region src/components/collapsible/CollapsibleTrigger.vue
 var CollapsibleTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -13351,7 +13589,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$36)]),
+				}, [(0, vue.createElementVNode)("polyline", { points: "6 9 12 15 18 9" })], -1)])], 10, _hoisted_1$39)]),
 				_: 3
 			}, 8, ["class"]);
 		};
@@ -13497,9 +13735,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$35 = ["aria-current"];
-var _hoisted_2$22 = ["href"];
-var _hoisted_3$15 = {
+var _hoisted_1$38 = ["aria-current"];
+var _hoisted_2$24 = ["href"];
+var _hoisted_3$16 = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
 	viewBox: "0 0 24 24",
@@ -13534,14 +13772,14 @@ var BreadcrumbItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				href: props.href,
 				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.link())
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_2$22)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_2$24)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				key: 1,
 				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.link())
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)), !props.isLast ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				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$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$35);
+			}, [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);
 		};
 	}
 });
@@ -13734,7 +13972,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$34 = {
+var _hoisted_1$37 = {
 	key: 0,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -13744,7 +13982,7 @@ var _hoisted_1$34 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_2$21 = {
+var _hoisted_2$23 = {
 	key: 1,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -13754,7 +13992,7 @@ var _hoisted_2$21 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_3$14 = {
+var _hoisted_3$15 = {
 	key: 2,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -13829,7 +14067,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$34, [..._cache[0] || (_cache[0] = [
+						}, [__props.severity === "default" || __props.severity === "primary" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$37, [..._cache[0] || (_cache[0] = [
 							(0, vue.createElementVNode)("circle", {
 								cx: "12",
 								cy: "12",
@@ -13837,11 +14075,11 @@ var Alert_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M12 8h.01" }, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M11 12h1v4h1" }, null, -1)
-						])])) : __props.severity === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$21, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("circle", {
+						])])) : __props.severity === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$23, [..._cache[1] || (_cache[1] = [(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)])])) : __props.severity === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$14, [..._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$15, [..._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)
@@ -14203,7 +14441,7 @@ function useToast() {
 }
 //#endregion
 //#region src/components/toast/ToastViewport.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$33 = { class: "flex shrink-0 items-center gap-1 ml-auto" };
+var _hoisted_1$36 = { class: "flex shrink-0 items-center gap-1 ml-auto" };
 //#endregion
 //#region src/components/toast/ToastViewport.vue
 var ToastViewport_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -14273,7 +14511,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$33, [toast.action ? ((0, vue.openBlock)(), (0, vue.createBlock)(ToastAction_default, {
+							}, 1024)) : (0, vue.createCommentVNode)("", true)], 2), (0, vue.createElementVNode)("div", _hoisted_1$36, [toast.action ? ((0, vue.openBlock)(), (0, vue.createBlock)(ToastAction_default, {
 								key: 0,
 								"alt-text": toast.action.label,
 								onClick: toast.action.onClick
@@ -14462,7 +14700,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$32 = [
+var _hoisted_1$35 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -14470,8 +14708,8 @@ var _hoisted_1$32 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$20 = ["for"];
-var _hoisted_3$13 = {
+var _hoisted_2$22 = ["for"];
+var _hoisted_3$14 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -14590,7 +14828,7 @@ 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$13, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$20)) : (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$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), {
 				"model-value": props.modelValue,
 				"default-value": props.defaultValue,
 				open: props.open,
@@ -14622,14 +14860,14 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				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$32);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$7)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$35);
 		};
 	}
 });
 //#endregion
 //#region src/components/select/SelectTrigger.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$31 = ["for"];
-var _hoisted_2$19 = {
+var _hoisted_1$34 = ["for"];
+var _hoisted_2$21 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -14664,7 +14902,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$19, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$31)) : (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$34)) : (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()),
@@ -14720,7 +14958,7 @@ var SelectValue_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				placeholder: props.placeholder,
 				"data-slot": "value"
 			}, {
-				default: (0, vue.withCtx)(({ modelValue }) => [modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).itemLabel(modelValue.toString())), 1)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64))]),
+				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))]),
 				_: 1
 			}, 8, ["class", "placeholder"]);
 		};
@@ -14742,24 +14980,17 @@ var SelectContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SelectPortal), null, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(AnimatePresence_default), null, {
-					default: (0, vue.withCtx)(() => [(0, vue.unref)(rootContext).open.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SelectContent), {
-						key: 0,
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectContent), {
 						position: props.position,
 						"side-offset": props.sideOffset,
-						"as-child": "",
 						"data-slot": "popover"
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(motion).div, {
+						default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(motion).div, {
 							class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.popover()),
-							initial: {
-								opacity: 0,
-								scale: .95
-							},
-							animate: {
+							animate: (0, vue.unref)(rootContext).open.value ? {
 								opacity: 1,
 								scale: 1
-							},
-							exit: {
+							} : {
 								opacity: 0,
 								scale: .95
 							},
@@ -14770,9 +15001,9 @@ var SelectContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								_: 3
 							})]),
 							_: 3
-						}, 8, ["class"])]),
+						}, 8, ["class", "animate"]), [[vue.vShow, (0, vue.unref)(rootContext).open.value]])]),
 						_: 3
-					}, 8, ["position", "side-offset"])) : (0, vue.createCommentVNode)("", true)]),
+					}, 8, ["position", "side-offset"])]),
 					_: 3
 				})]),
 				_: 3
@@ -14797,8 +15028,10 @@ var SelectItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const props = __props;
 		const ctx = useSelectInject();
 		const textRef = (0, vue.useTemplateRef)("textRef");
+		if (props.textValue !== void 0) ctx.registerItem(props.value, props.textValue);
 		(0, vue.onMounted)(() => {
-			const label = props.textValue ?? textRef.value?.textContent?.trim() ?? props.value;
+			const el = textRef.value?.$el;
+			const label = props.textValue ?? el?.textContent?.trim() ?? props.value;
 			ctx.registerItem(props.value, label);
 		});
 		return (_ctx, _cache) => {
@@ -14964,9 +15197,9 @@ var DropdownMenu_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/dropdown/DropdownItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$30 = { class: "flex flex-1 flex-col" };
-var _hoisted_2$18 = { "data-slot": "label" };
-var _hoisted_3$12 = {
+var _hoisted_1$33 = { class: "flex flex-1 flex-col" };
+var _hoisted_2$20 = { "data-slot": "label" };
+var _hoisted_3$13 = {
 	key: 0,
 	"data-slot": "description"
 };
@@ -15004,7 +15237,7 @@ var DropdownItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.createElementVNode)("div", _hoisted_1$30, [(0, vue.createElementVNode)("span", _hoisted_2$18, [(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)]),
+					(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.renderSlot)(_ctx.$slots, "endContent")
 				]),
@@ -15339,9 +15572,9 @@ 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$29 = ["aria-invalid"];
-var _hoisted_2$17 = ["id"];
-var _hoisted_3$11 = {
+var _hoisted_1$32 = ["aria-invalid"];
+var _hoisted_2$19 = ["id"];
+var _hoisted_3$12 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -15414,17 +15647,52 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (props.filterFunction) return props.filterFunction;
 			return (itemText, searchTerm) => itemText.toLowerCase().includes(searchTerm.toLowerCase());
 		});
-		const displayValue = (0, vue.computed)(() => (val) => {
-			if (!val) return "";
-			const item = props.items.find((i) => i.value === val);
-			return item?.label ?? item?.textValue ?? val;
+		const slotItemRegistry = (0, vue.ref)(/* @__PURE__ */ new Map());
+		function registerItem(value, label) {
+			const next = new Map(slotItemRegistry.value);
+			next.set(value, label);
+			slotItemRegistry.value = next;
+		}
+		function unregisterItem(value) {
+			const next = new Map(slotItemRegistry.value);
+			next.delete(value);
+			slotItemRegistry.value = next;
+		}
+		function labelFor(value) {
+			if (!value) return "";
+			const item = props.items.find((i) => i.value === value);
+			if (item) return item.label ?? item.textValue ?? value;
+			return slotItemRegistry.value.get(value) ?? value;
+		}
+		function valueFor(label) {
+			if (!label) return "";
+			const item = props.items.find((i) => (i.label ?? i.textValue ?? i.value) === label);
+			if (item) return item.value;
+			for (const [value, lbl] of slotItemRegistry.value) if (lbl === label) return value;
+			return label;
+		}
+		const internalValue = (0, vue.ref)(labelFor(props.modelValue));
+		const displayValue = (0, vue.computed)(() => (val) => val);
+		(0, vue.watch)(() => props.modelValue, (val) => {
+			const next = labelFor(val);
+			if (internalValue.value !== next) internalValue.value = next;
+		});
+		function handleModelValueUpdate(emitted) {
+			internalValue.value = emitted;
+			emit("update:modelValue", valueFor(emitted));
+		}
+		(0, vue.watch)(slotItemRegistry, () => {
+			const next = labelFor(props.modelValue);
+			if (next !== internalValue.value && valueFor(internalValue.value) === (props.modelValue ?? "")) internalValue.value = next;
 		});
 		useComboBoxProvide({
 			isDisabled: (0, vue.toRef)(props, "isDisabled"),
 			isInvalid: (0, vue.toRef)(props, "isInvalid"),
 			fullWidth: (0, vue.toRef)(props, "fullWidth"),
 			slots: slotFns,
-			displayValue
+			displayValue,
+			registerItem,
+			unregisterItem
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -15436,22 +15704,22 @@ 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$11, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$17)) : (0, vue.createCommentVNode)("", true),
+				}, [(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.createVNode)((0, vue.unref)(reka_ui.ComboboxRoot), {
-					"model-value": props.modelValue,
-					"default-value": props.defaultValue,
+					modelValue: internalValue.value,
+					"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => internalValue.value = $event), _cache[1] || (_cache[1] = ($event) => handleModelValueUpdate($event))],
+					"default-value": props.defaultValue ? labelFor(props.defaultValue) : void 0,
 					open: props.open,
 					"default-open": props.defaultOpen,
 					disabled: props.isDisabled,
 					required: props.isRequired,
 					"filter-function": effectiveFilter.value,
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event)),
-					"onUpdate:open": _cache[1] || (_cache[1] = ($event) => emit("update:open", $event))
+					"onUpdate:open": _cache[2] || (_cache[2] = ($event) => emit("update:open", $event))
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
 				}, 8, [
-					"model-value",
+					"modelValue",
 					"default-value",
 					"open",
 					"default-open",
@@ -15460,7 +15728,7 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"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$29);
+			], 10, _hoisted_1$32);
 		};
 	}
 });
@@ -15560,6 +15828,40 @@ var ComboBoxContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const props = __props;
 		const ctx = useComboBoxInject();
 		const comboboxRootContext = (0, reka_ui.injectComboboxRootContext)();
+		const slots = (0, vue.useSlots)();
+		function extractNodeText(nodes) {
+			return nodes.map((n) => {
+				if (typeof n.children === "string") return n.children;
+				if (Array.isArray(n.children)) return extractNodeText(n.children);
+				return "";
+			}).join("");
+		}
+		function walkAndRegister(nodes) {
+			for (const node of nodes) {
+				if (node.props && typeof node.props.value === "string") {
+					const value = node.props.value;
+					const children = node.children;
+					if (children && typeof children === "object" && "default" in children) {
+						const slotFn = children.default;
+						if (typeof slotFn === "function") {
+							const text = extractNodeText(slotFn()).trim();
+							if (text) ctx.registerItem(value, text);
+						}
+					} else if (typeof children === "string") {
+						const text = children.trim();
+						if (text) ctx.registerItem(value, text);
+					} else if (Array.isArray(children)) {
+						const text = extractNodeText(children).trim();
+						if (text) ctx.registerItem(value, text);
+					}
+				}
+				if (Array.isArray(node.children)) walkAndRegister(node.children);
+			}
+		}
+		(0, vue.watchEffect)(() => {
+			const vnodes = slots.default?.();
+			if (vnodes) walkAndRegister(vnodes);
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ComboboxPortal), null, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(AnimatePresence_default), null, {
@@ -15607,7 +15909,6 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ComboBoxItem",
 	props: {
 		value: {},
-		textValue: { default: void 0 },
 		isDisabled: {
 			type: Boolean,
 			default: false
@@ -15616,11 +15917,32 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	},
 	setup(__props) {
 		const props = __props;
+		const slots = (0, vue.useSlots)();
+		const ctx = useComboBoxInject();
+		function extractText(nodes) {
+			return nodes.map((n) => {
+				if (typeof n.children === "string") return n.children;
+				if (Array.isArray(n.children)) return extractText(n.children);
+				return "";
+			}).join("");
+		}
+		const displayText = (0, vue.computed)(() => {
+			const vnodes = slots.default?.();
+			if (!vnodes) return props.value;
+			return extractText(vnodes).trim() || props.value;
+		});
+		(0, vue.onMounted)(() => {
+			ctx.registerItem(props.value, displayText.value);
+		});
+		(0, vue.onUnmounted)(() => {
+			ctx.unregisterItem(props.value);
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ComboboxItem), {
-				value: props.value,
-				"text-value": props.textValue ?? props.value,
+				value: displayText.value,
+				"text-value": displayText.value,
 				disabled: props.isDisabled,
+				"data-item-value": props.value,
 				class: "list-box-item list-box-item--default",
 				"data-slot": "list-box-item"
 			}, {
@@ -15652,7 +15974,8 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, 8, [
 				"value",
 				"text-value",
-				"disabled"
+				"disabled",
+				"data-item-value"
 			]);
 		};
 	}
@@ -15678,7 +16001,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$28 = [
+var _hoisted_1$31 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -15686,8 +16009,8 @@ var _hoisted_1$28 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$16 = ["for"];
-var _hoisted_3$10 = {
+var _hoisted_2$18 = ["for"];
+var _hoisted_3$11 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -15748,6 +16071,10 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		filterOnOpen: {
 			type: Boolean,
 			default: false
+		},
+		truncateItems: {
+			type: Boolean,
+			default: true
 		}
 	},
 	emits: ["update:modelValue", "update:open"],
@@ -15758,6 +16085,17 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const generatedId = (0, vue.useId)();
 		const inputId = (0, vue.computed)(() => attrs.id ?? generatedId);
 		const hasLabel = (0, vue.computed)(() => !!props.label);
+		const slotItemRegistry = (0, vue.ref)(/* @__PURE__ */ new Map());
+		function registerItem(value, label) {
+			const next = new Map(slotItemRegistry.value);
+			next.set(value, label);
+			slotItemRegistry.value = next;
+		}
+		function unregisterItem(value) {
+			const next = new Map(slotItemRegistry.value);
+			next.delete(value);
+			slotItemRegistry.value = next;
+		}
 		const isLoading = (0, vue.ref)(false);
 		const internalItems = (0, vue.ref)([...props.items]);
 		const isOpen = (0, vue.ref)(props.defaultOpen ?? false);
@@ -15771,14 +16109,19 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		function labelFor(value) {
 			if (value == null || value === "") return "";
 			const match = internalItems.value.find((i) => i.value === value);
-			return match?.label ?? match?.textValue ?? value;
+			if (match) return match.label ?? match.textValue ?? value;
+			return slotItemRegistry.value.get(value) ?? value;
 		}
 		function valueFor(displayed) {
 			if (!displayed) return "";
-			return internalItems.value.find((i) => (i.label ?? i.textValue ?? i.value) === displayed)?.value ?? displayed;
+			const match = internalItems.value.find((i) => (i.label ?? i.textValue ?? i.value) === displayed);
+			if (match) return match.value;
+			for (const [value, label] of slotItemRegistry.value) if (label === displayed) return value;
+			return displayed;
 		}
 		const searchTerm = (0, vue.ref)(labelFor(props.modelValue));
 		const isFilled = (0, vue.computed)(() => !!searchTerm.value);
+		const hasItems = (0, vue.computed)(() => internalItems.value.length > 0);
 		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);
@@ -15834,6 +16177,10 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const next = labelFor(props.modelValue);
 			if (next && searchTerm.value !== next && valueFor(searchTerm.value) === (props.modelValue ?? "")) 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;
+		});
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.autocompleteVariants)({
 			variant: props.variant,
 			size: props.size,
@@ -15859,7 +16206,11 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			inputId,
 			label: (0, vue.toRef)(props, "label"),
 			ariaDescribedBy,
-			slots: slotFns
+			truncateItems: (0, vue.toRef)(props, "truncateItems"),
+			hasItems,
+			slots: slotFns,
+			registerItem,
+			unregisterItem
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -15874,7 +16225,7 @@ 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$10, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$16)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteRoot), {
+			}, [(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), {
 				"model-value": searchTerm.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
 				open: props.open,
@@ -15908,14 +16259,14 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				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$28);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$5)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$31);
 		};
 	}
 });
 //#endregion
 //#region src/components/autocomplete/AutocompleteInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$27 = ["for"];
-var _hoisted_2$15 = {
+var _hoisted_1$30 = ["for"];
+var _hoisted_2$17 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -15948,7 +16299,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						for: (0, vue.unref)(ctx).inputId.value,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.label())
-					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$15, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$27)) : (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$17, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$30)) : (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()),
@@ -15977,6 +16328,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					]),
 					(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"
 					}, {
@@ -16004,7 +16356,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							y2: "18"
 						})], -1))])]),
 						_: 3
-					}, 8, ["class"]),
+					}, 8, ["class", "data-empty"]),
 					(0, vue.unref)(ctx).isLoading.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 2,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.indicator()),
@@ -16047,7 +16399,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/autocomplete/AutocompleteContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$26 = [
+var _hoisted_1$29 = [
 	"inert",
 	"aria-disabled",
 	"data-disabled"
@@ -16064,10 +16416,48 @@ var AutocompleteContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const props = __props;
 		const ctx = useAutocompleteInject();
 		const rootContext = (0, reka_ui.injectComboboxRootContext)();
+		const slots = (0, vue.useSlots)();
+		function extractNodeText(nodes) {
+			return nodes.map((n) => {
+				if (typeof n.children === "string") return n.children;
+				if (Array.isArray(n.children)) return extractNodeText(n.children);
+				return "";
+			}).join("");
+		}
+		function walkAndRegister(nodes) {
+			for (const node of nodes) {
+				if (node.props && typeof node.props.value === "string") {
+					const value = node.props.value;
+					const label = node.props.label;
+					if (label) ctx.registerItem(value, label);
+					else {
+						const children = node.children;
+						if (children && typeof children === "object" && "default" in children) {
+							const slotFn = children.default;
+							if (typeof slotFn === "function") {
+								const text = extractNodeText(slotFn()).trim();
+								if (text) ctx.registerItem(value, text);
+							}
+						} else if (typeof children === "string") {
+							const text = children.trim();
+							if (text) ctx.registerItem(value, text);
+						} else if (Array.isArray(children)) {
+							const text = extractNodeText(children).trim();
+							if (text) ctx.registerItem(value, text);
+						}
+					}
+				}
+				if (Array.isArray(node.children)) walkAndRegister(node.children);
+			}
+		}
+		(0, vue.watchEffect)(() => {
+			const vnodes = slots.default?.();
+			if (vnodes) walkAndRegister(vnodes);
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AutocompletePortal), null, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(AnimatePresence_default), null, {
-					default: (0, vue.withCtx)(() => [(0, vue.unref)(rootContext).open.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AutocompleteContent), {
+					default: (0, vue.withCtx)(() => [(0, vue.unref)(rootContext).open.value && ((0, vue.unref)(ctx).hasItems.value || (0, vue.unref)(ctx).isFilled.value && !(0, vue.unref)(ctx).isLoading.value) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AutocompleteContent), {
 						key: 0,
 						position: "popper",
 						"side-offset": props.sideOffset,
@@ -16077,6 +16467,7 @@ var AutocompleteContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(motion).div, {
 							class: (0, vue.normalizeClass)(["autocomplete__popover", "relative"]),
 							"data-loading": (0, vue.unref)(ctx).isLoading.value ? "" : void 0,
+							"data-truncate-items": (0, vue.unref)(ctx).truncateItems.value ? void 0 : "false",
 							"aria-busy": (0, vue.unref)(ctx).isLoading.value || void 0,
 							initial: {
 								opacity: 0,
@@ -16099,17 +16490,22 @@ var AutocompleteContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								"data-disabled": (0, vue.unref)(ctx).isLoading.value ? "" : void 0,
 								"data-slot": "list-wrapper"
 							}, [(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteViewport), { "data-slot": "list-box" }, {
-								default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteEmpty), {
+								default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.unref)(ctx).isFilled.value && !(0, vue.unref)(ctx).isLoading.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AutocompleteEmpty), {
+									key: 0,
 									class: "py-3 text-center text-sm text-default-400",
 									"data-slot": "empty-content"
 								}, {
 									default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "empty", {}, () => [_cache[0] || (_cache[0] = (0, vue.createTextVNode)(" No results found ", -1))])]),
 									_: 3
-								})]),
+								})) : (0, vue.createCommentVNode)("", true)]),
 								_: 3
-							})], 10, _hoisted_1$26)]),
+							})], 10, _hoisted_1$29)]),
 							_: 3
-						}, 8, ["data-loading", "aria-busy"])]),
+						}, 8, [
+							"data-loading",
+							"data-truncate-items",
+							"aria-busy"
+						])]),
 						_: 3
 					}, 8, ["side-offset"])) : (0, vue.createCommentVNode)("", true)]),
 					_: 3
@@ -16120,12 +16516,17 @@ var AutocompleteContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
+//#region src/components/autocomplete/AutocompleteItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$28 = {
+	class: "autocomplete-item__text",
+	"data-slot": "item-text"
+};
+//#endregion
 //#region src/components/autocomplete/AutocompleteItem.vue
 var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AutocompleteItem",
 	props: {
 		value: {},
-		textValue: { default: void 0 },
 		isDisabled: {
 			type: Boolean,
 			default: false
@@ -16134,10 +16535,30 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	},
 	setup(__props) {
 		const props = __props;
+		const slots = (0, vue.useSlots)();
+		const ctx = useAutocompleteInject();
+		function extractText(nodes) {
+			return nodes.map((n) => {
+				if (typeof n.children === "string") return n.children;
+				if (Array.isArray(n.children)) return extractText(n.children);
+				return "";
+			}).join("");
+		}
+		const displayText = (0, vue.computed)(() => {
+			const vnodes = slots.default?.();
+			if (!vnodes) return props.value;
+			return extractText(vnodes).trim() || props.value;
+		});
+		(0, vue.onMounted)(() => {
+			ctx.registerItem(props.value, displayText.value);
+		});
+		(0, vue.onUnmounted)(() => {
+			ctx.unregisterItem(props.value);
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AutocompleteItem), {
-				value: props.textValue ?? props.value,
-				"text-value": props.textValue ?? props.value,
+				value: displayText.value,
+				"text-value": displayText.value,
 				disabled: props.isDisabled,
 				"data-item-value": props.value,
 				class: "list-box-item list-box-item--default",
@@ -16145,7 +16566,7 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.renderSlot)(_ctx.$slots, "default"),
+					(0, vue.createElementVNode)("span", _hoisted_1$28, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxItemIndicator), {
 						class: "list-box-item__indicator",
 						"data-slot": "list-box-item-indicator"
@@ -16213,14 +16634,14 @@ var TagGroupInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/tag-group/TagGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$25 = [
+var _hoisted_1$27 = [
 	"data-invalid",
 	"data-required",
 	"data-disabled",
 	"data-readonly"
 ];
-var _hoisted_2$14 = ["id"];
-var _hoisted_3$9 = {
+var _hoisted_2$16 = ["id"];
+var _hoisted_3$10 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -16311,7 +16732,7 @@ var TagGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					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$9, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$14)) : (0, vue.createCommentVNode)("", true),
+				}, [(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,
@@ -16343,7 +16764,7 @@ var TagGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"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$25);
+			], 10, _hoisted_1$27);
 		};
 	}
 });
@@ -16564,8 +16985,8 @@ var Pagination_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/pagination/PaginationContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$24 = ["disabled", "data-disabled"];
-var _hoisted_2$13 = ["disabled", "data-disabled"];
+var _hoisted_1$26 = ["disabled", "data-disabled"];
+var _hoisted_2$15 = ["disabled", "data-disabled"];
 //#endregion
 //#region src/components/pagination/PaginationContent.vue
 var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -16597,7 +17018,7 @@ var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"data-disabled": !hasPreviousPage.value || (0, vue.unref)(ctx).disabled.value || void 0,
 					"aria-label": "Before page",
 					onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(ctx).onCursorChange((0, vue.unref)(ctx).beforeCursor.value, null))
-				}, [(0, vue.renderSlot)(_ctx.$slots, "before", {}, () => [_cache[2] || (_cache[2] = (0, vue.createTextVNode)(" Before ", -1))])], 10, _hoisted_1$24),
+				}, [(0, vue.renderSlot)(_ctx.$slots, "before", {}, () => [_cache[2] || (_cache[2] = (0, vue.createTextVNode)(" Before ", -1))])], 10, _hoisted_1$26),
 				(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(styles.value.summary?.()) }, [(0, vue.renderSlot)(_ctx.$slots, "page-info", {}, () => [(0, vue.createTextVNode)("Page " + (0, vue.toDisplayString)((0, vue.unref)(ctx).page.value), 1)])], 2),
 				(0, vue.createElementVNode)("button", {
 					type: "button",
@@ -16606,7 +17027,7 @@ var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"data-disabled": !hasNextPage.value || (0, vue.unref)(ctx).disabled.value || void 0,
 					"aria-label": "After page",
 					onClick: _cache[1] || (_cache[1] = ($event) => (0, vue.unref)(ctx).onCursorChange(null, (0, vue.unref)(ctx).afterCursor.value))
-				}, [(0, vue.renderSlot)(_ctx.$slots, "after", {}, () => [_cache[3] || (_cache[3] = (0, vue.createTextVNode)(" After ", -1))])], 10, _hoisted_2$13)
+				}, [(0, vue.renderSlot)(_ctx.$slots, "after", {}, () => [_cache[3] || (_cache[3] = (0, vue.createTextVNode)(" After ", -1))])], 10, _hoisted_2$15)
 			], 2));
 		};
 	}
@@ -19388,7 +19809,7 @@ function useTableKeyboardNav(options) {
 }
 //#endregion
 //#region src/components/table/TableHeader.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$23 = [
+var _hoisted_1$25 = [
 	"data-col-index",
 	"aria-sort",
 	"data-allows-sorting",
@@ -19443,7 +19864,7 @@ var TableHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						render: header.column.columnDef.header,
 						props: header.getContext()
-					}, null, 8, ["render", "props"])) : (0, vue.createCommentVNode)("", true)], 42, _hoisted_1$23);
+					}, null, 8, ["render", "props"])) : (0, vue.createCommentVNode)("", true)], 42, _hoisted_1$25);
 				}), 128))], 2);
 			}), 128))], 2);
 		};
@@ -19451,14 +19872,14 @@ var TableHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/table/TableBody.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$22 = [
+var _hoisted_1$24 = [
 	"aria-rowindex",
 	"aria-selected",
 	"data-state",
 	"onClick",
 	"onKeydown"
 ];
-var _hoisted_2$12 = [
+var _hoisted_2$14 = [
 	"data-row-index",
 	"data-col-index",
 	"tabindex"
@@ -19506,8 +19927,8 @@ var TableBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}, () => [(0, vue.createVNode)((0, vue.unref)(FlexRender), {
 						render: cell.column.columnDef.cell,
 						props: cell.getContext()
-					}, null, 8, ["render", "props"])])], 10, _hoisted_2$12);
-				}), 128))], 42, _hoisted_1$22);
+					}, null, 8, ["render", "props"])])], 10, _hoisted_2$14);
+				}), 128))], 42, _hoisted_1$24);
 			}), 128))], 2);
 		};
 	}
@@ -20299,12 +20720,12 @@ function useVirtualizer(options) {
 }
 //#endregion
 //#region src/components/table/TableVirtualBody.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$21 = {
+var _hoisted_1$23 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_2$11 = ["colspan"];
-var _hoisted_3$8 = [
+var _hoisted_2$13 = ["colspan"];
+var _hoisted_3$9 = [
 	"aria-rowindex",
 	"aria-selected",
 	"data-state",
@@ -20367,14 +20788,14 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		__expose({ scrollToIndex: (index) => virtualizer.value.scrollToIndex(index, { align: "auto" }) });
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tbody", { class: (0, vue.normalizeClass)(slotFns.value.body()) }, [
-				paddingTop.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", _hoisted_1$21, [(0, vue.createElementVNode)("td", {
+				paddingTop.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", _hoisted_1$23, [(0, vue.createElementVNode)("td", {
 					colspan: columnCount.value,
 					style: (0, vue.normalizeStyle)({
 						height: `${paddingTop.value}px`,
 						padding: 0,
 						border: "none"
 					})
-				}, null, 12, _hoisted_2$11)])) : (0, vue.createCommentVNode)("", true),
+				}, null, 12, _hoisted_2$13)])) : (0, vue.createCommentVNode)("", true),
 				((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(virtualItems.value, (vItem) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
 						key: rows.value[vItem.index].id,
@@ -20397,7 +20818,7 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							render: cell.column.columnDef.cell,
 							props: cell.getContext()
 						}, null, 8, ["render", "props"])], 10, _hoisted_4$4);
-					}), 128))], 42, _hoisted_3$8);
+					}), 128))], 42, _hoisted_3$9);
 				}), 128)),
 				paddingBottom.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", _hoisted_5$3, [(0, vue.createElementVNode)("td", {
 					colspan: columnCount.value,
@@ -20470,7 +20891,7 @@ var TableCheckboxCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/table/Table.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$20 = [
+var _hoisted_1$22 = [
 	"aria-label",
 	"aria-rowcount",
 	"aria-colcount"
@@ -20643,7 +21064,7 @@ var Table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "footer")]),
 					_: 3
 				})) : (0, vue.createCommentVNode)("", true)
-			], 40, _hoisted_1$20)], 6)], 2);
+			], 40, _hoisted_1$22)], 6)], 2);
 		};
 	}
 });
@@ -20664,7 +21085,7 @@ var TableRow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/table/TableCell.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$19 = ["data-row-index", "data-col-index"];
+var _hoisted_1$21 = ["data-row-index", "data-col-index"];
 //#endregion
 //#region src/components/table/TableCell.vue
 var TableCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -20682,13 +21103,13 @@ var TableCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)(slotFns.value.cell()),
 				"data-row-index": __props.rowIndex,
 				"data-col-index": __props.columnIndex
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$19);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$21);
 		};
 	}
 });
 //#endregion
 //#region src/components/table/TableHeaderCell.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$18 = ["data-col-index", "aria-sort"];
+var _hoisted_1$20 = ["data-col-index", "aria-sort"];
 //#endregion
 //#region src/components/table/TableHeaderCell.vue
 var TableHeaderCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -20706,7 +21127,7 @@ var TableHeaderCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)(slotFns.value.column()),
 				"data-col-index": __props.columnIndex,
 				"aria-sort": __props.sortDirection
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$18);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$20);
 		};
 	}
 });
@@ -20715,11 +21136,11 @@ var TableHeaderCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useAvatarGroupProvide, useInject: useAvatarGroupInject, key: avatarGroupContextKey } = createContext("AvatarGroup");
 //#endregion
 //#region src/components/avatar/Avatar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$17 = {
+var _hoisted_1$19 = {
 	key: 0,
 	class: /* @__PURE__ */ (0, vue.normalizeClass)("avatar__name text-xs font-medium leading-none")
 };
-var _hoisted_2$10 = {
+var _hoisted_2$12 = {
 	key: 1,
 	class: "avatar__icon size-4/5",
 	"aria-hidden": "true",
@@ -20794,7 +21215,7 @@ var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"alt",
 					"class"
 				])) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)((0, vue.unref)(reka_ui.AvatarFallback), (0, vue.mergeProps)({ class: slotFns.value.fallback() }, props.src && !props.showFallback ? { "delay-ms": 600 } : {}), {
-					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "fallback", {}, () => [initials.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$17, (0, vue.toDisplayString)(initials.value), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$10, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" }, null, -1)])]))])]),
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "fallback", {}, () => [initials.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$19, (0, vue.toDisplayString)(initials.value), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$12, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" }, null, -1)])]))])]),
 					_: 3
 				}, 16, ["class"])]),
 				_: 3
@@ -21017,7 +21438,7 @@ var SplitterResizeHandle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var stepperContextKey = Symbol("Stepper");
 //#endregion
 //#region src/components/stepper/Stepper.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$16 = ["aria-label"];
+var _hoisted_1$18 = ["aria-label"];
 //#endregion
 //#region src/components/stepper/Stepper.vue
 var Stepper_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -21067,13 +21488,13 @@ var Stepper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
 				"aria-label": `Step ${currentStep.value} of ${__props.totalSteps}`,
 				"data-slot": "stepper"
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$16);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$18);
 		};
 	}
 });
 //#endregion
 //#region src/components/stepper/StepperItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$15 = ["data-status", "data-step"];
+var _hoisted_1$17 = ["data-status", "data-step"];
 //#endregion
 //#region src/components/stepper/StepperItem.vue
 var StepperItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -21103,7 +21524,7 @@ var StepperItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				isCurrent: status.value === "current",
 				isCompleted: status.value === "completed",
 				isError: status.value === "error"
-			})], 10, _hoisted_1$15);
+			})], 10, _hoisted_1$17);
 		};
 	}
 });
@@ -21271,7 +21692,7 @@ var Tree_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/tree/TreeItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$14 = ["data-selected", "data-expanded"];
+var _hoisted_1$16 = ["data-selected", "data-expanded"];
 //#endregion
 //#region src/components/tree/TreeItem.vue
 var TreeItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -21314,7 +21735,7 @@ var TreeItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					handleToggle: s.handleToggle,
 					toggleClass: slotFns.value.itemToggle(),
 					iconClass: slotFns.value.itemIcon()
-				})], 14, _hoisted_1$14)]),
+				})], 14, _hoisted_1$16)]),
 				_: 3
 			}, 8, [
 				"value",
@@ -21326,7 +21747,7 @@ var TreeItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/tree/TreeItemToggle.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$13 = ["data-expanded", "data-no-children"];
+var _hoisted_1$15 = ["data-expanded", "data-no-children"];
 //#endregion
 //#region src/components/tree/TreeItemToggle.vue
 var TreeItemToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -21362,18 +21783,18 @@ var TreeItemToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
 				"aria-hidden": "true"
-			}, [(0, vue.createElementVNode)("path", { d: "m9 18 6-6-6-6" })], -1))])], 10, _hoisted_1$13);
+			}, [(0, vue.createElementVNode)("path", { d: "m9 18 6-6-6-6" })], -1))])], 10, _hoisted_1$15);
 		};
 	}
 });
 //#endregion
 //#region src/components/slider/Slider.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$12 = ["data-orientation", "data-disabled"];
-var _hoisted_2$9 = {
+var _hoisted_1$14 = ["data-orientation", "data-disabled"];
+var _hoisted_2$11 = {
 	key: 0,
 	"data-slot": "label"
 };
-var _hoisted_3$7 = { class: "relative flex items-center gap-2" };
+var _hoisted_3$8 = { class: "relative flex items-center gap-2" };
 //#endregion
 //#region src/components/slider/Slider.vue
 var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -21463,10 +21884,10 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
 				"data-orientation": __props.orientation,
 				"data-disabled": __props.disabled || void 0
-			}, [showLabelWrapper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", _hoisted_2$9, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true), !__props.hideValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
+			}, [showLabelWrapper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", _hoisted_2$11, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true), !__props.hideValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
 				key: 1,
 				class: (0, vue.normalizeClass)(slotFns.value.output())
-			}, (0, vue.toDisplayString)(formatted.value), 3)) : (0, vue.createCommentVNode)("", true)], 64)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_3$7, [
+			}, (0, vue.toDisplayString)(formatted.value), 3)) : (0, vue.createCommentVNode)("", true)], 64)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_3$8, [
 				(0, vue.renderSlot)(_ctx.$slots, "startContent"),
 				(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderRoot), {
 					modelValue: internalValue.value,
@@ -21523,13 +21944,13 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"data-orientation"
 				]),
 				(0, vue.renderSlot)(_ctx.$slots, "endContent")
-			])], 10, _hoisted_1$12);
+			])], 10, _hoisted_1$14);
 		};
 	}
 });
 //#endregion
 //#region src/components/progress-bar/ProgressBar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$11 = ["data-disabled"];
+var _hoisted_1$13 = ["data-disabled"];
 //#endregion
 //#region src/components/progress-bar/ProgressBar.vue
 var ProgressBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -21612,14 +22033,14 @@ var ProgressBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"max",
 				"class",
 				"aria-label"
-			])], 10, _hoisted_1$11);
+			])], 10, _hoisted_1$13);
 		};
 	}
 });
 //#endregion
 //#region src/components/progress-circle/ProgressCircle.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$10 = ["r", "stroke-width"];
-var _hoisted_2$8 = [
+var _hoisted_1$12 = ["r", "stroke-width"];
+var _hoisted_2$10 = [
 	"r",
 	"stroke-width",
 	"stroke-dasharray",
@@ -21695,7 +22116,7 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					r: radius.value,
 					"stroke-width": __props.strokeWidth,
 					fill: "none"
-				}, null, 10, _hoisted_1$10), (0, vue.createElementVNode)("circle", {
+				}, null, 10, _hoisted_1$12), (0, vue.createElementVNode)("circle", {
 					class: (0, vue.normalizeClass)(slotFns.value.indicator()),
 					cx: "16",
 					cy: "16",
@@ -21707,7 +22128,7 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"stroke-dashoffset": offset.value,
 					transform: "rotate(-90 16 16)",
 					style: { "transition": "stroke-dashoffset 300ms ease-out" }
-				}, null, 10, _hoisted_2$8)], 2)), __props.showValueLabel || __props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				}, null, 10, _hoisted_2$10)], 2)), __props.showValueLabel || __props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
 					class: (0, vue.normalizeClass)(slotFns.value.value())
 				}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(formattedValue.value), 1)])], 2)) : (0, vue.createCommentVNode)("", true)]),
@@ -21724,11 +22145,11 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/meter/Meter.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$9 = {
+var _hoisted_1$11 = {
 	key: 0,
 	"data-slot": "label"
 };
-var _hoisted_2$7 = [
+var _hoisted_2$9 = [
 	"aria-valuenow",
 	"aria-valuemin",
 	"aria-valuemax",
@@ -21771,7 +22192,7 @@ var Meter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)) }, [
-				__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$9, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true),
+				__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$11, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true),
 				__props.showValueLabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
 					key: 1,
 					class: (0, vue.normalizeClass)(slotFns.value.output())
@@ -21787,14 +22208,14 @@ var Meter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, [(0, vue.createElementVNode)("div", {
 					class: (0, vue.normalizeClass)(slotFns.value.fill()),
 					style: (0, vue.normalizeStyle)({ width: percentage.value + "%" })
-				}, null, 6)], 10, _hoisted_2$7)
+				}, null, 6)], 10, _hoisted_2$9)
 			], 2);
 		};
 	}
 });
 //#endregion
 //#region src/components/scroll-shadow/ScrollShadow.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$8 = [
+var _hoisted_1$10 = [
 	"data-orientation",
 	"data-top-scroll",
 	"data-bottom-scroll",
@@ -21839,7 +22260,7 @@ var ScrollShadow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-left-scroll": leftScroll.value ? "true" : void 0,
 				"data-right-scroll": rightScroll.value ? "true" : void 0,
 				style: (0, vue.normalizeStyle)({ "--scroll-shadow-size": __props.size + "px" })
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 14, _hoisted_1$8);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 14, _hoisted_1$10);
 		};
 	}
 });
@@ -22727,9 +23148,9 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/calendar/Calendar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$7 = ["aria-label"];
-var _hoisted_2$6 = ["aria-label"];
-var _hoisted_3$6 = ["aria-label"];
+var _hoisted_1$9 = ["aria-label"];
+var _hoisted_2$8 = ["aria-label"];
+var _hoisted_3$7 = ["aria-label"];
 //#endregion
 //#region src/components/calendar/Calendar.vue
 var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -22848,7 +23269,7 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_1$7)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_1$9)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarNext), {
@@ -22986,7 +23407,7 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$6)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$8)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerNext), {
@@ -23064,7 +23485,7 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
 						"aria-label": `Switch to ${nextViewLabel.value} view`,
 						onClick: cycleView
-					}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$6)]),
+					}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$7)]),
 					_: 1
 				}, 8, [
 					"placeholder",
@@ -23081,9 +23502,9 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/range-calendar/RangeCalendar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$6 = ["aria-label"];
-var _hoisted_2$5 = ["aria-label"];
-var _hoisted_3$5 = ["aria-label"];
+var _hoisted_1$8 = ["aria-label"];
+var _hoisted_2$7 = ["aria-label"];
+var _hoisted_3$6 = ["aria-label"];
 //#endregion
 //#region src/components/range-calendar/RangeCalendar.vue
 var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -23207,7 +23628,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_1$6)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_1$8)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarNext), {
@@ -23346,7 +23767,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$5)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$7)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerNext), {
@@ -23448,7 +23869,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$5)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$6)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerNext), {
@@ -23515,7 +23936,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/date-input/DateInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$5 = [
+var _hoisted_1$7 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -23523,8 +23944,8 @@ var _hoisted_1$5 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$4 = ["id", "for"];
-var _hoisted_3$4 = {
+var _hoisted_2$6 = ["id", "for"];
+var _hoisted_3$5 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -23722,7 +24143,7 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				id: labelId.value,
 				for: fieldId.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$4, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$4)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateFieldRoot), {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$5, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$6)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -23819,13 +24240,13 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)(slotFns.value.description())
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$2)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$5);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$2)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$7);
 		};
 	}
 });
 //#endregion
 //#region src/components/date-range-field/DateRangeField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$4 = [
+var _hoisted_1$6 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -23833,8 +24254,8 @@ var _hoisted_1$4 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$3 = ["id", "for"];
-var _hoisted_3$3 = {
+var _hoisted_2$5 = ["id", "for"];
+var _hoisted_3$4 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -24033,7 +24454,7 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				id: labelId.value,
 				for: fieldId.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$3, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$3)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangeFieldRoot), {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$4, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$5)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangeFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -24152,13 +24573,13 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)(slotFns.value.description())
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$1)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$4);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$1)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$6);
 		};
 	}
 });
 //#endregion
 //#region src/components/time-field/TimeField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$3 = [
+var _hoisted_1$5 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -24166,8 +24587,8 @@ var _hoisted_1$3 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$2 = ["id", "for"];
-var _hoisted_3$2 = {
+var _hoisted_2$4 = ["id", "for"];
+var _hoisted_3$3 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -24366,7 +24787,7 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				id: labelId.value,
 				for: fieldId.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$2, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$2)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TimeFieldRoot), {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$3, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$4)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TimeFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -24463,7 +24884,7 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)(slotFns.value.description())
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$3);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$5);
 		};
 	}
 });
@@ -24543,7 +24964,12 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const calendarValue = (0, vue.computed)({
 			get: () => modelValue.value ?? void 0,
 			set: (val) => {
-				modelValue.value = val ?? null;
+				if (val != null && modelValue.value != null && "hour" in modelValue.value) modelValue.value = modelValue.value.set({
+					year: val.year,
+					month: val.month,
+					day: val.day
+				});
+				else modelValue.value = val ?? null;
 				if (props.closeOnSelect && val != null) openModel.value = false;
 			}
 		});
@@ -24986,6 +25412,546 @@ var DateRangePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
+//#region src/components/date-time-picker/DateTimePickerTimeScroller.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$4 = ["aria-label", "onScrollPassive"];
+var _hoisted_2$3 = [
+	"data-selected",
+	"aria-selected",
+	"onClick"
+];
+var ITEM_H = 40;
+//#endregion
+//#region src/components/date-time-picker/DateTimePickerTimeScroller.vue
+var DateTimePickerTimeScroller_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "DateTimePickerTimeScroller",
+	props: {
+		modelValue: {},
+		granularity: { default: "minute" },
+		hourCycle: { default: 24 },
+		class: { default: void 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const hours24 = Array.from({ length: 24 }, (_, i) => i);
+		const hours12 = [12, ...Array.from({ length: 11 }, (_, i) => i + 1)];
+		const minutes = Array.from({ length: 60 }, (_, i) => i);
+		const seconds = Array.from({ length: 60 }, (_, i) => i);
+		const ampm = ["AM", "PM"];
+		const hourItems = (0, vue.computed)(() => props.hourCycle === 12 ? hours12 : hours24);
+		const columns = (0, vue.computed)(() => {
+			const cols = [{
+				key: "hour",
+				items: hourItems.value
+			}, {
+				key: "minute",
+				items: minutes
+			}];
+			if (props.granularity === "second") cols.push({
+				key: "second",
+				items: seconds
+			});
+			if (props.hourCycle === 12) cols.push({
+				key: "ampm",
+				items: ampm
+			});
+			return cols;
+		});
+		function currentIndexFor(key) {
+			const v = props.modelValue;
+			if (key === "hour") {
+				if (props.hourCycle === 12) {
+					const h12 = v.hour % 12 === 0 ? 12 : v.hour % 12;
+					return hours12.indexOf(h12);
+				}
+				return v.hour;
+			}
+			if (key === "minute") return v.minute;
+			if (key === "second") return v.second ?? 0;
+			if (key === "ampm") return v.hour >= 12 ? 1 : 0;
+			return 0;
+		}
+		const columnRefs = (0, vue.ref)([]);
+		function scrollColumnToIndex(colEl, index) {
+			colEl.scrollTop = index * ITEM_H;
+		}
+		function syncScrollPositions() {
+			columns.value.forEach((col, i) => {
+				const el = columnRefs.value[i];
+				if (el) scrollColumnToIndex(el, currentIndexFor(col.key));
+			});
+		}
+		(0, vue.onMounted)(() => (0, vue.nextTick)(syncScrollPositions));
+		(0, vue.watch)(() => props.modelValue, () => (0, vue.nextTick)(syncScrollPositions));
+		function onColumnScroll(key, colEl) {
+			const idx = Math.round(colEl.scrollTop / ITEM_H);
+			const item = columns.value.find((c) => c.key === key).items[idx];
+			if (item === void 0) return;
+			const v = props.modelValue;
+			if (key === "hour") {
+				let newHour;
+				if (props.hourCycle === 12) {
+					const isPm = v.hour >= 12;
+					const h12 = item;
+					newHour = h12 === 12 ? isPm ? 12 : 0 : isPm ? h12 + 12 : h12;
+				} else newHour = item;
+				emit("update:modelValue", v.set({ hour: newHour }));
+			} else if (key === "minute") emit("update:modelValue", v.set({ minute: item }));
+			else if (key === "second") emit("update:modelValue", v.set({ second: item }));
+			else if (key === "ampm") {
+				const isPm = item === "PM";
+				if (isPm !== v.hour >= 12) emit("update:modelValue", v.set({ hour: isPm ? v.hour + 12 : v.hour - 12 }));
+			}
+		}
+		function onKeyDown(e, colEl) {
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				colEl.scrollTop += ITEM_H;
+			} else if (e.key === "ArrowUp") {
+				e.preventDefault();
+				colEl.scrollTop -= ITEM_H;
+			}
+		}
+		function onItemClick(colEl, idx) {
+			colEl.scrollTo({
+				top: idx * ITEM_H,
+				behavior: "smooth"
+			});
+		}
+		function columnLabel(key) {
+			if (key === "hour") return "Hour";
+			if (key === "minute") return "Minute";
+			if (key === "second") return "Second";
+			return "AM/PM";
+		}
+		function itemLabel(_key, item) {
+			if (typeof item === "string") return item;
+			return String(item).padStart(2, "0");
+		}
+		__expose({
+			columnRefs,
+			columns,
+			currentIndexFor
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: (0, vue.normalizeClass)(["date-time-picker__scroller-wrap", props.class]),
+				"data-slot": "time-scroller"
+			}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(columns.value, (col, i) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: col.key,
+					ref_for: true,
+					ref: (el) => {
+						if (el) columnRefs.value[i] = el;
+					},
+					class: "date-time-picker__scroller-column",
+					"aria-label": columnLabel(col.key),
+					"data-slot": "scroller-column",
+					role: "listbox",
+					tabindex: "0",
+					onScrollPassive: ($event) => onColumnScroll(col.key, $event.currentTarget),
+					onKeydown: _cache[0] || (_cache[0] = ($event) => onKeyDown($event, $event.currentTarget))
+				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(col.items, (item, idx) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: idx,
+						class: "date-time-picker__scroller-item",
+						"data-selected": idx === currentIndexFor(col.key) ? "true" : void 0,
+						"aria-selected": idx === currentIndexFor(col.key),
+						role: "option",
+						onClick: ($event) => onItemClick(columnRefs.value[i], idx)
+					}, (0, vue.toDisplayString)(itemLabel(col.key, item)), 9, _hoisted_2$3);
+				}), 128))], 40, _hoisted_1$4);
+			}), 128))], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/date-time-picker/DateTimePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = ["data-hidden"];
+var _hoisted_2$2 = ["aria-label"];
+var _hoisted_3$2 = {
+	key: 1,
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2.5",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+};
+//#endregion
+//#region src/components/date-time-picker/DateTimePicker.vue
+var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "DateTimePicker",
+	props: /* @__PURE__ */ (0, vue.mergeModels)({
+		variant: {},
+		size: { default: "md" },
+		color: { default: "default" },
+		labelPlacement: { default: "inside" },
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		label: {},
+		description: {},
+		errorMessage: {},
+		isInvalid: {
+			type: Boolean,
+			default: false
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: false
+		},
+		isRequired: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		class: {},
+		granularity: { default: "minute" },
+		hourCycle: {},
+		hideTimeZone: {
+			type: Boolean,
+			default: false
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		locale: {},
+		defaultValue: {},
+		minValue: {},
+		maxValue: {},
+		isDateUnavailable: {},
+		isDateDisabled: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: void 0
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:open"],
+	setup(__props) {
+		const props = __props;
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const openModel = (0, vue.useModel)(__props, "open");
+		const STEP_TITLES = {
+			date: "Pick a date",
+			time: "Pick a time"
+		};
+		const STEP_ORDER = ["date", "time"];
+		if (props.defaultOpen && openModel.value === void 0) openModel.value = true;
+		if (modelValue.value == null && props.defaultValue != null) modelValue.value = props.defaultValue;
+		const _today = $ad063034c8620db8$export$d0bdf45af03a6ea3($ad063034c8620db8$export$aa8b41735afcabd2());
+		const internalValue = (0, vue.shallowRef)(modelValue.value ?? props.defaultValue ?? new $2aaf608024c21ca1$export$ca871e8dbb80966f(_today.year, _today.month, _today.day, 0, 0));
+		(0, vue.watch)(modelValue, (v) => {
+			if (v instanceof $2aaf608024c21ca1$export$ca871e8dbb80966f) internalValue.value = v;
+		});
+		function onInputChange(v) {
+			if (!(v instanceof $2aaf608024c21ca1$export$ca871e8dbb80966f)) return;
+			internalValue.value = v;
+			modelValue.value = v;
+		}
+		const activeStep = (0, vue.ref)("date");
+		const direction = (0, vue.ref)(1);
+		(0, vue.watch)(openModel, (open) => {
+			if (open) activeStep.value = "date";
+		});
+		function goTo(step) {
+			const from = STEP_ORDER.indexOf(activeStep.value);
+			direction.value = STEP_ORDER.indexOf(step) > from ? 1 : -1;
+			activeStep.value = step;
+		}
+		function goBack() {
+			const idx = STEP_ORDER.indexOf(activeStep.value);
+			if (idx > 0) goTo(STEP_ORDER[idx - 1]);
+		}
+		function goForward() {
+			const idx = STEP_ORDER.indexOf(activeStep.value);
+			if (idx < STEP_ORDER.length - 1) goTo(STEP_ORDER[idx + 1]);
+			else if (props.closeOnSelect) openModel.value = false;
+		}
+		const panelInitial = (0, vue.computed)(() => ({
+			x: direction.value > 0 ? "100%" : "-100%",
+			opacity: 0
+		}));
+		const panelAnimate = {
+			x: "0%",
+			opacity: 1
+		};
+		const panelExit = (0, vue.computed)(() => ({
+			x: direction.value > 0 ? "-100%" : "100%",
+			opacity: 0
+		}));
+		const calendarValue = (0, vue.computed)({
+			get: () => $d07e34cce18680fd$export$93522d1a439f3617(internalValue.value),
+			set: (val) => {
+				if (!val) return;
+				internalValue.value = internalValue.value.set({
+					year: val.year,
+					month: val.month,
+					day: val.day
+				});
+				modelValue.value = internalValue.value;
+				goTo("time");
+			}
+		});
+		function onTimeUpdate(val) {
+			internalValue.value = val;
+			modelValue.value = val;
+		}
+		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.dateTimePickerVariants)({
+			isInvalid: props.isInvalid,
+			isDisabled: props.isDisabled,
+			fullWidth: props.fullWidth
+		}));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.DatePickerRoot), {
+				modelValue: modelValue.value,
+				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modelValue.value = $event),
+				open: openModel.value,
+				"onUpdate:open": _cache[3] || (_cache[3] = ($event) => openModel.value = $event),
+				"default-value": __props.defaultValue,
+				"default-open": __props.defaultOpen,
+				"min-value": __props.minValue,
+				"max-value": __props.maxValue,
+				"is-date-unavailable": __props.isDateUnavailable,
+				"is-date-disabled": __props.isDateDisabled,
+				locale: __props.locale,
+				granularity: __props.granularity,
+				"hour-cycle": __props.hourCycle,
+				disabled: __props.isDisabled,
+				readonly: __props.isReadOnly,
+				name: __props.name,
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				"data-slot": "date-time-picker"
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(DateInput_default, {
+					"model-value": internalValue.value,
+					variant: __props.variant,
+					size: __props.size,
+					color: __props.color,
+					"label-placement": __props.labelPlacement,
+					"full-width": __props.fullWidth,
+					"default-value": __props.defaultValue,
+					granularity: __props.granularity,
+					"hour-cycle": __props.hourCycle,
+					locale: __props.locale,
+					label: __props.label,
+					description: __props.description,
+					"error-message": __props.errorMessage,
+					"is-invalid": __props.isInvalid,
+					"is-disabled": __props.isDisabled,
+					"is-read-only": __props.isReadOnly,
+					"is-required": __props.isRequired,
+					name: __props.name,
+					"hide-time-zone": __props.hideTimeZone,
+					"onUpdate:modelValue": onInputChange
+				}, {
+					endContent: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerTrigger), {
+						class: (0, vue.normalizeClass)(slotFns.value.trigger()),
+						"aria-label": "Open date time picker",
+						onMousedown: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"]))
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectorIcon", {}, () => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
+							class: (0, vue.normalizeClass)(slotFns.value.triggerIndicator()),
+							xmlns: "http://www.w3.org/2000/svg",
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true",
+							focusable: "false"
+						}, [..._cache[4] || (_cache[4] = [
+							(0, vue.createElementVNode)("rect", {
+								x: "3",
+								y: "4",
+								width: "18",
+								height: "18",
+								rx: "2",
+								ry: "2"
+							}, null, -1),
+							(0, vue.createElementVNode)("line", {
+								x1: "16",
+								y1: "2",
+								x2: "16",
+								y2: "6"
+							}, null, -1),
+							(0, vue.createElementVNode)("line", {
+								x1: "8",
+								y1: "2",
+								x2: "8",
+								y2: "6"
+							}, null, -1),
+							(0, vue.createElementVNode)("line", {
+								x1: "3",
+								y1: "10",
+								x2: "21",
+								y2: "10"
+							}, null, -1)
+						])], 2))])]),
+						_: 3
+					}, 8, ["class"])]),
+					_: 3
+				}, 8, [
+					"model-value",
+					"variant",
+					"size",
+					"color",
+					"label-placement",
+					"full-width",
+					"default-value",
+					"granularity",
+					"hour-cycle",
+					"locale",
+					"label",
+					"description",
+					"error-message",
+					"is-invalid",
+					"is-disabled",
+					"is-read-only",
+					"is-required",
+					"name",
+					"hide-time-zone"
+				]), (0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerContent), {
+					class: (0, vue.normalizeClass)(slotFns.value.popover()),
+					"data-slot": "popover",
+					"side-offset": 8
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
+						class: (0, vue.normalizeClass)(slotFns.value.stepHeader()),
+						"data-slot": "step-header"
+					}, [
+						(0, vue.createElementVNode)("button", {
+							type: "button",
+							class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+							"data-hidden": activeStep.value === "date" ? "true" : void 0,
+							"aria-label": "Previous step",
+							"data-slot": "back-button",
+							onClick: goBack
+						}, [..._cache[5] || (_cache[5] = [(0, vue.createElementVNode)("svg", {
+							width: "14",
+							height: "14",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2.5",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true"
+						}, [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" })], -1)])], 10, _hoisted_1$3),
+						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.stepTitle()) }, (0, vue.toDisplayString)(STEP_TITLES[activeStep.value]), 3),
+						(0, vue.createElementVNode)("button", {
+							type: "button",
+							class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+							"aria-label": activeStep.value === "time" ? "Done" : "Next step",
+							"data-slot": "forward-button",
+							onClick: goForward
+						}, [activeStep.value === "time" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+							key: 0,
+							class: (0, vue.normalizeClass)(slotFns.value.doneLabel())
+						}, "Done", 2)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$2, [..._cache[6] || (_cache[6] = [(0, vue.createElementVNode)("polyline", { points: "9 18 15 12 9 6" }, null, -1)])]))], 10, _hoisted_2$2)
+					], 2), (0, vue.createElementVNode)("div", {
+						class: (0, vue.normalizeClass)(slotFns.value.panelWrap()),
+						style: { "overflow": "hidden" }
+					}, [(0, vue.createVNode)((0, vue.unref)(AnimatePresence_default), { mode: "popLayout" }, {
+						default: (0, vue.withCtx)(() => [activeStep.value === "date" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(motion).div, {
+							key: "date",
+							initial: panelInitial.value,
+							animate: panelAnimate,
+							exit: panelExit.value,
+							transition: { duration: .15 },
+							class: "px-3 pb-3",
+							"data-slot": "calendar-panel"
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)(Calendar_default, {
+								modelValue: calendarValue.value,
+								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => calendarValue.value = $event),
+								"default-value": __props.defaultValue,
+								"min-value": __props.minValue,
+								"max-value": __props.maxValue,
+								"is-date-disabled": __props.isDateDisabled,
+								"is-date-unavailable": __props.isDateUnavailable,
+								locale: __props.locale,
+								readonly: __props.isReadOnly,
+								disabled: __props.isDisabled
+							}, null, 8, [
+								"modelValue",
+								"default-value",
+								"min-value",
+								"max-value",
+								"is-date-disabled",
+								"is-date-unavailable",
+								"locale",
+								"readonly",
+								"disabled"
+							])]),
+							_: 1
+						}, 8, ["initial", "exit"])) : activeStep.value === "time" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(motion).div, {
+							key: "time",
+							initial: panelInitial.value,
+							animate: panelAnimate,
+							exit: panelExit.value,
+							transition: { duration: .15 }
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)(DateTimePickerTimeScroller_default, {
+								"model-value": internalValue.value,
+								granularity: __props.granularity,
+								"hour-cycle": __props.hourCycle,
+								"onUpdate:modelValue": onTimeUpdate
+							}, null, 8, [
+								"model-value",
+								"granularity",
+								"hour-cycle"
+							])]),
+							_: 1
+						}, 8, ["initial", "exit"])) : (0, vue.createCommentVNode)("", true)]),
+						_: 1
+					})], 2)]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 3
+			}, 8, [
+				"modelValue",
+				"open",
+				"default-value",
+				"default-open",
+				"min-value",
+				"max-value",
+				"is-date-unavailable",
+				"is-date-disabled",
+				"locale",
+				"granularity",
+				"hour-cycle",
+				"disabled",
+				"readonly",
+				"name",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
 //#region src/components/color-picker/color-picker.context.ts
 var { useProvide: provideColorPickerContext, useInject: useColorPickerInject, key: ColorPickerContextKey } = createContext("ColorPicker");
 //#endregion
@@ -25671,6 +26637,7 @@ exports.DateInput = DateInput_default;
 exports.DatePicker = DatePicker_default;
 exports.DateRangeField = DateRangeField_default;
 exports.DateRangePicker = DateRangePicker_default;
+exports.DateTimePicker = DateTimePicker_default;
 exports.Description = Description_default;
 exports.Drawer = Drawer_default;
 exports.DrawerBody = DrawerBody_default;
@@ -25695,6 +26662,8 @@ exports.DropdownTrigger = DropdownTrigger_default;
 exports.EmptyState = EmptyState_default;
 exports.EmptyStateContent = EmptyStateContent_default;
 exports.Fieldset = Fieldset_default;
+exports.Form = Form_default;
+exports.FormField = FormField_default;
 exports.Header = Header_default;
 exports.Input = Input_default;
 exports.InputOTP = InputOTP_default;