base-ui-vue 0.1.0

package/dist/index2.js

@@ -0,0 +1,2618 @@
+import { EMPTY_OBJECT, mergeProps as mergeProps$1, useButton, useMergedRefs, useRenderElement } from "./button/Button.js";
+import { CollapsiblePanelDataAttributes, accordionItemContextKey, accordionStateAttributesMapping, collapsibleOpenStateMapping, triggerOpenStateMapping, useAccordionItemContext } from "./header/AccordionHeader.js";
+import { AnimationFrame, transitionStatusMapping, useAnimationFrame, useAnimationsFinished, useOpenChangeComplete, useTransitionStatus } from "./error/FieldError.js";
+import { DEFAULT_VALIDITY_STATE, fieldRootContextKey, fieldValidityMapping, getCombinedFieldValidityData, labelableContextKey, useBaseUiId, useFieldRootContext, useFormContext, useLabelableContext } from "./control/FieldControl.js";
+import { useDirection } from "./direction-provider/DirectionContext.js";
+import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, END, HOME } from "./composite/composite.js";
+import { AvatarRootContextKey, avatarStateAttributesMapping, useTimeout } from "./fallback/AvatarFallback.js";
+import { computed, createBlock, createCommentVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, mergeProps, normalizeProps, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, readonly, ref, renderSlot, resolveDynamicComponent, shallowReadonly, shallowRef, toValue, unref, useAttrs, watch, watchEffect, withCtx } from "vue";
+
+//#region src/collapsible/root/CollapsibleRootContext.ts
+const collapsibleRootContextKey = Symbol("CollapsibleRootContext");
+function useCollapsibleRootContext() {
+	const context = inject(collapsibleRootContextKey, void 0);
+	if (context === void 0) throw new Error("Base UI Vue: CollapsibleRootContext is missing. Collapsible parts must be placed within <CollapsibleRoot>.");
+	return context;
+}
+
+//#endregion
+//#region src/utils/createBaseUIEventDetails.ts
+/**
+* Creates a Base UI event details object with the given reason and utilities
+* for preventing Base UI's internal event handling.
+*/
+function createChangeEventDetails(reason, event, trigger, customProperties) {
+	let canceled = false;
+	let propagationAllowed = false;
+	const custom = customProperties ?? EMPTY_OBJECT;
+	return {
+		reason,
+		event: event ?? new Event("base-ui"),
+		cancel() {
+			canceled = true;
+		},
+		allowPropagation() {
+			propagationAllowed = true;
+		},
+		get isCanceled() {
+			return canceled;
+		},
+		get isPropagationAllowed() {
+			return propagationAllowed;
+		},
+		trigger,
+		...custom
+	};
+}
+
+//#endregion
+//#region src/utils/reasons.ts
+const none = "none";
+const triggerPress = "trigger-press";
+const triggerHover = "trigger-hover";
+const triggerFocus = "trigger-focus";
+const outsidePress = "outside-press";
+const itemPress = "item-press";
+const closePress = "close-press";
+const linkPress = "link-press";
+const clearPress = "clear-press";
+const chipRemovePress = "chip-remove-press";
+const trackPress = "track-press";
+const incrementPress = "increment-press";
+const decrementPress = "decrement-press";
+const inputChange = "input-change";
+const inputClear = "input-clear";
+const inputBlur = "input-blur";
+const inputPaste = "input-paste";
+const inputPress = "input-press";
+const focusOut = "focus-out";
+const escapeKey = "escape-key";
+const closeWatcher = "close-watcher";
+const listNavigation = "list-navigation";
+const keyboard = "keyboard";
+const pointer = "pointer";
+const drag = "drag";
+const swipe = "swipe";
+const wheel = "wheel";
+const scrub = "scrub";
+const cancelOpen = "cancel-open";
+const siblingOpen = "sibling-open";
+const disabled = "disabled";
+const imperativeAction = "imperative-action";
+const windowResize = "window-resize";
+const REASONS = {
+	none,
+	triggerPress,
+	triggerHover,
+	triggerFocus,
+	outsidePress,
+	itemPress,
+	closePress,
+	linkPress,
+	clearPress,
+	chipRemovePress,
+	trackPress,
+	incrementPress,
+	decrementPress,
+	inputChange,
+	inputClear,
+	inputBlur,
+	inputPaste,
+	inputPress,
+	focusOut,
+	escapeKey,
+	closeWatcher,
+	listNavigation,
+	keyboard,
+	pointer,
+	drag,
+	swipe,
+	wheel,
+	scrub,
+	cancelOpen,
+	siblingOpen,
+	disabled,
+	imperativeAction,
+	windowResize
+};
+
+//#endregion
+//#region src/utils/useControllableState.ts
+/**
+* Manages controlled / uncontrolled state following the same semantics as
+* React's `useControlled` hook.
+*
+* - When `controlled()` returns a non-`undefined` value the component is
+*   considered **controlled** and the internal state is ignored.
+* - When `controlled()` returns `undefined` the component is **uncontrolled**
+*   and the internal ref drives the value.
+*/
+function useControllableState(params) {
+	const internalValue = ref(params.default);
+	const value = computed(() => {
+		const c = params.controlled();
+		return c !== void 0 ? c : internalValue.value;
+	});
+	function setValue(next) {
+		internalValue.value = next;
+	}
+	return {
+		value,
+		setValue
+	};
+}
+
+//#endregion
+//#region src/collapsible/root/useCollapsibleRoot.ts
+function useCollapsibleRoot(parameters) {
+	const { open: openParam, defaultOpen = false, onOpenChange, disabled: disabledGetter } = parameters;
+	const isControlled = computed(() => {
+		if (parameters.isOpenControlled) return parameters.isOpenControlled();
+		return openParam?.() !== void 0;
+	});
+	const { value: open, setValue: setOpen } = useControllableState({
+		controlled: () => isControlled.value ? openParam?.() : void 0,
+		default: defaultOpen
+	});
+	const { mounted, setMounted, transitionStatus } = useTransitionStatus(open, true, true);
+	const visible = ref(open.value);
+	const height = ref(void 0);
+	const width = ref(void 0);
+	const defaultPanelId = useBaseUiId();
+	const panelIdState = ref(void 0);
+	const panelId = computed(() => panelIdState.value ?? defaultPanelId);
+	const hiddenUntilFound = ref(false);
+	const keepMounted = ref(false);
+	const abortControllerRef = shallowRef(null);
+	const animationTypeRef = ref(null);
+	const transitionDimensionRef = ref(null);
+	const panelRef = ref(null);
+	const runOnceAnimationsFinish = useAnimationsFinished(panelRef, false);
+	const disabled = computed(() => disabledGetter());
+	function handleTrigger(event) {
+		if (disabled.value) return;
+		const nextOpen = !open.value;
+		const eventDetails = createChangeEventDetails(REASONS.triggerPress, event);
+		onOpenChange(nextOpen, eventDetails);
+		if (eventDetails.isCanceled) return;
+		const panel = panelRef.value;
+		if (nextOpen && !mounted.value) setMounted(true);
+		if (animationTypeRef.value === "css-animation" && panel != null) panel.style.removeProperty("animation-name");
+		if (!hiddenUntilFound.value && !keepMounted.value) {
+			if (animationTypeRef.value != null && animationTypeRef.value !== "css-animation") {
+				if (!mounted.value && nextOpen) setMounted(true);
+			}
+			if (animationTypeRef.value === "css-animation") {
+				if (!visible.value && nextOpen) visible.value = true;
+				if (!mounted.value && nextOpen) setMounted(true);
+			}
+		}
+		setOpen(nextOpen);
+		if (animationTypeRef.value === "none" && mounted.value && !nextOpen) setMounted(false);
+	}
+	watch(open, (isOpen) => {
+		if (isControlled.value && animationTypeRef.value === "none" && !keepMounted.value && !isOpen) setMounted(false);
+	}, { flush: "sync" });
+	return {
+		open,
+		disabled,
+		panelId,
+		state: computed(() => ({
+			open: open.value,
+			disabled: disabled.value,
+			transitionStatus: transitionStatus.value
+		})),
+		handleTrigger,
+		mounted,
+		setMounted,
+		transitionStatus,
+		height,
+		width,
+		setDimensions(dims) {
+			height.value = dims.height;
+			width.value = dims.width;
+		},
+		setOpen,
+		visible,
+		setVisible(next) {
+			visible.value = next;
+		},
+		keepMounted,
+		setKeepMounted(next) {
+			keepMounted.value = next;
+		},
+		hiddenUntilFound,
+		setHiddenUntilFound(next) {
+			hiddenUntilFound.value = next;
+		},
+		setPanelIdState(id) {
+			panelIdState.value = id;
+		},
+		animationTypeRef,
+		panelRef,
+		abortControllerRef,
+		transitionDimensionRef,
+		runOnceAnimationsFinish,
+		onOpenChange
+	};
+}
+
+//#endregion
+//#region src/composite/list/CompositeListContext.ts
+const compositeListContextKey = Symbol("CompositeListContext");
+function useCompositeListContext() {
+	return inject(compositeListContextKey);
+}
+
+//#endregion
+//#region src/composite/list/useCompositeListItem.ts
+let IndexGuessBehavior = /* @__PURE__ */ function(IndexGuessBehavior) {
+	IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
+	IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
+	return IndexGuessBehavior;
+}({});
+/**
+* Used to register a list item and its index (DOM position) in the `CompositeList`.
+*/
+function useCompositeListItem(params = {}) {
+	const externalIndex = computed(() => params.index?.());
+	const label = computed(() => params.label?.());
+	const metadata = computed(() => params.metadata?.());
+	const textRef = computed(() => params.textRef?.());
+	const indexGuessBehavior = computed(() => params.indexGuessBehavior?.());
+	const { register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef } = useCompositeListContext();
+	const indexRef = ref(-1);
+	function initializeIndex() {
+		if (externalIndex.value != null) return externalIndex.value;
+		if (indexGuessBehavior.value === IndexGuessBehavior.GuessFromOrder) {
+			if (indexRef.value === -1) {
+				const newIndex = nextIndexRef.value;
+				nextIndexRef.value += 1;
+				indexRef.value = newIndex;
+			}
+			return indexRef.value;
+		}
+		return -1;
+	}
+	const internalIndex = ref(initializeIndex());
+	const index = computed(() => externalIndex.value ?? internalIndex.value);
+	const componentRef = ref(null);
+	function setRef(node) {
+		const el = node?.$el || node;
+		componentRef.value = el;
+		if (index.value !== -1 && el !== null) {
+			elementsRef.value[index.value] = el;
+			if (labelsRef) {
+				const isLabelDefined = label.value !== void 0;
+				labelsRef.value[index.value] = isLabelDefined ? label.value : textRef.value?.value?.textContent ?? el.textContent;
+			}
+		}
+	}
+	watchEffect((onCleanup) => {
+		if (externalIndex.value != null) return;
+		const node = componentRef.value;
+		if (node) {
+			register(node, metadata.value);
+			onCleanup(() => {
+				unregister(node);
+			});
+		}
+	}, { flush: "post" });
+	watchEffect((onCleanup) => {
+		if (externalIndex.value != null) return;
+		const unsubscribe = subscribeMapChange((map) => {
+			const i = componentRef.value ? map.get(componentRef.value)?.index : null;
+			if (i != null) internalIndex.value = i;
+		});
+		onCleanup(() => {
+			unsubscribe();
+		});
+	}, { flush: "post" });
+	return {
+		ref: setRef,
+		index
+	};
+}
+
+//#endregion
+//#region src/accordion/root/AccordionRootContext.ts
+const accordionRootContextKey = Symbol("AccordionRootContext");
+function useAccordionRootContext() {
+	const context = inject(accordionRootContextKey);
+	if (context === void 0) throw new Error("Base UI Vue: AccordionRootContext is missing. Accordion parts must be placed within <AccordionRoot>.");
+	return context;
+}
+
+//#endregion
+//#region src/accordion/item/AccordionItem.vue?vue&type=script&setup=true&lang.ts
+var AccordionItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "AccordionItem",
+	inheritAttrs: false,
+	__name: "AccordionItem",
+	props: {
+		value: {
+			type: null,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	emits: ["openChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const rootCtx = useAccordionRootContext();
+		const { ref: listItemRef, index } = useCompositeListItem();
+		const fallbackValue = useBaseUiId();
+		const itemValue = computed(() => props.value ?? fallbackValue);
+		const disabled = computed(() => props.disabled || rootCtx.disabled.value);
+		const isOpen = computed(() => {
+			const values = rootCtx.value.value;
+			if (!values) return false;
+			for (let i = 0; i < values.length; i += 1) if (values[i] === itemValue.value) return true;
+			return false;
+		});
+		function onOpenChange(nextOpen, eventDetails) {
+			emit("openChange", nextOpen, eventDetails);
+			if (eventDetails.isCanceled) return;
+			rootCtx.handleValueChange(itemValue.value, nextOpen);
+		}
+		const collapsible = useCollapsibleRoot({
+			open: () => isOpen.value,
+			isOpenControlled: () => true,
+			defaultOpen: false,
+			onOpenChange,
+			disabled: () => disabled.value
+		});
+		const collapsibleState = computed(() => ({
+			open: collapsible.open.value,
+			disabled: collapsible.disabled.value,
+			transitionStatus: collapsible.transitionStatus.value
+		}));
+		const state = computed(() => ({
+			...rootCtx.state.value,
+			index: index.value,
+			disabled: disabled.value,
+			open: isOpen.value
+		}));
+		const triggerId = ref(useBaseUiId());
+		function setTriggerId(id) {
+			triggerId.value = id;
+		}
+		provide(collapsibleRootContextKey, {
+			...collapsible,
+			onOpenChange,
+			state: collapsibleState
+		});
+		provide(accordionItemContextKey, {
+			open: isOpen,
+			state,
+			setTriggerId,
+			triggerId
+		});
+		const mergedRef = useMergedRefs(ref(null), listItemRef);
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({ ...attrs })),
+			stateAttributesMapping: accordionStateAttributesMapping,
+			defaultTagName: "div",
+			ref: mergedRef
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/accordion/item/AccordionItem.vue
+var AccordionItem_default = AccordionItem_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/utils/warn.ts
+let set;
+if (process.env.NODE_ENV !== "production") set = /* @__PURE__ */ new Set();
+function warn(...messages) {
+	if (process.env.NODE_ENV !== "production") {
+		const messageKey = messages.join(" ");
+		if (!set.has(messageKey)) {
+			set.add(messageKey);
+			console.warn(`Base UI Vue: ${messageKey}`);
+		}
+	}
+}
+
+//#endregion
+//#region src/collapsible/panel/useCollapsiblePanel.ts
+function useCollapsiblePanel(parameters) {
+	const { abortControllerRef, animationTypeRef, height, hiddenUntilFound, keepMounted, mounted, onOpenChange, open, panelRef, runOnceAnimationsFinish, setDimensions, setMounted, setOpen, setVisible, transitionDimensionRef, visible, width, externalRef } = parameters;
+	const isBeforeMatchRef = ref(false);
+	const latestAnimationNameRef = ref(null);
+	const shouldCancelInitialOpenAnimationRef = ref(open.value);
+	const shouldCancelInitialOpenTransitionRef = ref(open.value);
+	const endingStyleFrame = useAnimationFrame();
+	/**
+	* When opening, the `hidden` attribute is removed immediately.
+	* When closing, the `hidden` attribute is set after any exit animations runs.
+	*/
+	const hidden = computed(() => {
+		if (animationTypeRef.value === "css-animation") return !visible.value;
+		return !open.value && !mounted.value;
+	});
+	/**
+	* When `keepMounted` is `true` this runs once as soon as it exists in the DOM
+	* regardless of initial open state.
+	*
+	* When `keepMounted` is `false` this runs on every mount, typically every
+	* time it opens. If the panel is in the middle of a close transition that is
+	* interrupted and re-opens, this won't run as the panel was not unmounted.
+	*/
+	function handlePanelRef(element) {
+		if (!element) return;
+		if (animationTypeRef.value == null || transitionDimensionRef.value == null) {
+			const panelStyles = getComputedStyle(element);
+			const hasAnimation = panelStyles.animationName !== "none" && panelStyles.animationName !== "";
+			const hasTransition = panelStyles.transitionDuration !== "0s" && panelStyles.transitionDuration !== "";
+			if (hasAnimation && hasTransition) {
+				if (process.env.NODE_ENV !== "production") warn("CSS transitions and CSS animations both detected on Collapsible or Accordion panel.", "Only one of either animation type should be used.");
+			} else if (panelStyles.animationName === "none" && panelStyles.transitionDuration !== "0s") animationTypeRef.value = "css-transition";
+			else if (panelStyles.animationName !== "none" && panelStyles.transitionDuration === "0s") animationTypeRef.value = "css-animation";
+			else animationTypeRef.value = "none";
+			/**
+			* We need to know in advance which side is being collapsed when using CSS
+			* transitions in order to set the value of width/height to `0px` momentarily.
+			* Setting both to `0px` will break layout.
+			*/
+			if (element.getAttribute("data-orientation") === "horizontal" || panelStyles.transitionProperty.includes("width")) transitionDimensionRef.value = "width";
+			else transitionDimensionRef.value = "height";
+		}
+		if (animationTypeRef.value !== "css-transition") return;
+		if (height.value === void 0 || width.value === void 0) {
+			setDimensions({
+				height: element.scrollHeight,
+				width: element.scrollWidth
+			});
+			if (shouldCancelInitialOpenTransitionRef.value) element.style.setProperty("transition-duration", "0s");
+		}
+		let frame = -1;
+		let nextFrame = -1;
+		frame = AnimationFrame.request(() => {
+			shouldCancelInitialOpenTransitionRef.value = false;
+			nextFrame = AnimationFrame.request(() => {
+				/**
+				* This is slightly faster than another RAF and is the earliest
+				* opportunity to remove the temporary `transition-duration: 0s` that
+				* was applied to cancel opening transitions of initially open panels.
+				* https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/
+				*/
+				setTimeout(() => {
+					element.style.removeProperty("transition-duration");
+				});
+			});
+		});
+		return () => {
+			AnimationFrame.cancel(frame);
+			AnimationFrame.cancel(nextFrame);
+		};
+	}
+	const mergedRef = useMergedRefs(externalRef ?? null, panelRef, handlePanelRef);
+	watch(open, (isOpen) => {
+		if (animationTypeRef.value !== "css-transition") return;
+		const panel = panelRef.value;
+		if (!panel) return;
+		if (abortControllerRef.value != null) {
+			abortControllerRef.value.abort();
+			abortControllerRef.value = null;
+		}
+		if (isOpen) {
+			const originalLayoutStyles = {
+				"justify-content": panel.style.justifyContent,
+				"align-items": panel.style.alignItems,
+				"align-content": panel.style.alignContent,
+				"justify-items": panel.style.justifyItems
+			};
+			Object.keys(originalLayoutStyles).forEach((key) => {
+				panel.style.setProperty(key, "initial", "important");
+			});
+			/**
+			* When `:keepMounted="false"` and the panel is initially closed, the very
+			* first time it opens (not any subsequent opens) `data-starting-style` is
+			* off or missing by a frame so we need to set it manually. Otherwise any
+			* CSS properties expected to transition using [data-starting-style] may
+			* be mis-timed and appear to be complete skipped.
+			*/
+			if (!shouldCancelInitialOpenTransitionRef.value && !keepMounted) panel.setAttribute(CollapsiblePanelDataAttributes.startingStyle, "");
+			setDimensions({
+				height: panel.scrollHeight,
+				width: panel.scrollWidth
+			});
+			const resizeFrame = AnimationFrame.request(() => {
+				Object.entries(originalLayoutStyles).forEach(([key, value]) => {
+					if (value === "") panel.style.removeProperty(key);
+					else panel.style.setProperty(key, value);
+				});
+			});
+			return () => {
+				AnimationFrame.cancel(resizeFrame);
+			};
+		} else {
+			if (panel.scrollHeight === 0 && panel.scrollWidth === 0) return;
+			setDimensions({
+				height: panel.scrollHeight,
+				width: panel.scrollWidth
+			});
+			const abortController = new AbortController();
+			abortControllerRef.value = abortController;
+			const signal = abortController.signal;
+			let attributeObserver = null;
+			const endingStyleAttribute = CollapsiblePanelDataAttributes.endingStyle;
+			attributeObserver = new MutationObserver((mutationList) => {
+				if (mutationList.some((mutation) => mutation.type === "attributes" && mutation.attributeName === endingStyleAttribute)) {
+					attributeObserver?.disconnect();
+					attributeObserver = null;
+					runOnceAnimationsFinish(() => {
+						setDimensions({
+							height: 0,
+							width: 0
+						});
+						panel.style.removeProperty("content-visibility");
+						setMounted(false);
+						if (abortControllerRef.value === abortController) abortControllerRef.value = null;
+					}, signal);
+				}
+			});
+			attributeObserver.observe(panel, {
+				attributes: true,
+				attributeFilter: [endingStyleAttribute]
+			});
+			return () => {
+				attributeObserver?.disconnect();
+				endingStyleFrame.cancel();
+				if (abortControllerRef.value === abortController) {
+					abortController.abort();
+					abortControllerRef.value = null;
+				}
+			};
+		}
+	}, { flush: "post" });
+	watch(open, (isOpen) => {
+		if (animationTypeRef.value !== "css-animation") return;
+		const panel = panelRef.value;
+		if (!panel) return;
+		latestAnimationNameRef.value = panel.style.animationName || latestAnimationNameRef.value;
+		panel.style.setProperty("animation-name", "none");
+		setDimensions({
+			height: panel.scrollHeight,
+			width: panel.scrollWidth
+		});
+		if (!shouldCancelInitialOpenAnimationRef.value && !isBeforeMatchRef.value) panel.style.removeProperty("animation-name");
+		if (isOpen) {
+			if (abortControllerRef.value != null) {
+				abortControllerRef.value.abort();
+				abortControllerRef.value = null;
+			}
+			setMounted(true);
+			setVisible(true);
+		} else {
+			abortControllerRef.value = new AbortController();
+			runOnceAnimationsFinish(() => {
+				setMounted(false);
+				setVisible(false);
+				abortControllerRef.value = null;
+			}, abortControllerRef.value.signal);
+		}
+	}, { flush: "post" });
+	onMounted(() => {
+		const frame = AnimationFrame.request(() => {
+			shouldCancelInitialOpenAnimationRef.value = false;
+		});
+		return () => AnimationFrame.cancel(frame);
+	});
+	watch([open, () => hiddenUntilFound], ([isOpen]) => {
+		if (!hiddenUntilFound) return;
+		const panel = panelRef.value;
+		if (!panel) return;
+		if (isOpen && isBeforeMatchRef.value) {
+			panel.style.transitionDuration = "0s";
+			setDimensions({
+				height: panel.scrollHeight,
+				width: panel.scrollWidth
+			});
+			let nextFrame = -1;
+			const frame = AnimationFrame.request(() => {
+				isBeforeMatchRef.value = false;
+				nextFrame = AnimationFrame.request(() => {
+					setTimeout(() => {
+						panel.style.removeProperty("transition-duration");
+					});
+				});
+			});
+			return () => {
+				AnimationFrame.cancel(frame);
+				AnimationFrame.cancel(nextFrame);
+			};
+		}
+	}, { flush: "sync" });
+	watch([hidden, () => hiddenUntilFound], ([isHidden]) => {
+		const panel = panelRef.value;
+		if (!panel || !hiddenUntilFound) return;
+		if (isHidden) {
+			panel.setAttribute("hidden", "until-found");
+			/**
+			* Set data-starting-style here to persist the closed styles, this is to
+			* prevent transitions from starting when the `hidden` attribute changes
+			* to `'until-found'` as they could have different `display` properties:
+			* https://github.com/tailwindlabs/tailwindcss/pull/14625
+			*/
+			if (animationTypeRef.value === "css-transition") panel.setAttribute(CollapsiblePanelDataAttributes.startingStyle, "");
+		} else panel.removeAttribute("hidden");
+	}, { flush: "post" });
+	let beforeMatchCleanup = null;
+	function setupBeforeMatchListener() {
+		beforeMatchCleanup?.();
+		beforeMatchCleanup = null;
+		const panel = panelRef.value;
+		if (!panel) return;
+		function handleBeforeMatch(event) {
+			isBeforeMatchRef.value = true;
+			setOpen(true);
+			onOpenChange(true, createChangeEventDetails(REASONS.none, event));
+		}
+		panel.addEventListener("beforematch", handleBeforeMatch);
+		beforeMatchCleanup = () => {
+			panel.removeEventListener("beforematch", handleBeforeMatch);
+		};
+	}
+	watch(panelRef, () => setupBeforeMatchListener(), { flush: "post" });
+	onMounted(setupBeforeMatchListener);
+	onUnmounted(() => {
+		beforeMatchCleanup?.();
+		endingStyleFrame.cancel();
+	});
+	return {
+		hidden,
+		panelRef: mergedRef
+	};
+}
+
+//#endregion
+//#region src/accordion/panel/AccordionPanelCssVars.ts
+let AccordionPanelCssVars = /* @__PURE__ */ function(AccordionPanelCssVars) {
+	/**
+	* The accordion panel's height.
+	* @type {number}
+	*/
+	AccordionPanelCssVars["accordionPanelHeight"] = "--accordion-panel-height";
+	/**
+	* The accordion panel's width.
+	* @type {number}
+	*/
+	AccordionPanelCssVars["accordionPanelWidth"] = "--accordion-panel-width";
+	return AccordionPanelCssVars;
+}({});
+
+//#endregion
+//#region src/accordion/panel/AccordionPanel.vue?vue&type=script&setup=true&lang.ts
+var AccordionPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "AccordionPanel",
+	inheritAttrs: false,
+	__name: "AccordionPanel",
+	props: {
+		hiddenUntilFound: {
+			type: Boolean,
+			required: false
+		},
+		keepMounted: {
+			type: Boolean,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const rootCtx = useAccordionRootContext();
+		const collapsibleCtx = useCollapsibleRootContext();
+		const itemCtx = useAccordionItemContext();
+		const hiddenUntilFound = computed(() => rootCtx.hiddenUntilFound.value || props.hiddenUntilFound);
+		const keepMounted = computed(() => rootCtx.keepMounted.value || props.keepMounted);
+		if (process.env.NODE_ENV !== "production") watchEffect(() => {
+			if (keepMounted.value === false && hiddenUntilFound.value) warn("The `:keepMounted=\"false\"` prop on a AccordionPanel will be ignored when using `hiddenUntilFound` on the Panel or the Root since it requires the panel to remain mounted when closed.");
+		});
+		watch(() => props.id, (id) => {
+			if (id) collapsibleCtx.setPanelIdState(id);
+		}, {
+			immediate: true,
+			flush: "sync"
+		});
+		onBeforeUnmount(() => {
+			collapsibleCtx.setPanelIdState(void 0);
+		});
+		watch(hiddenUntilFound, (val) => collapsibleCtx.setHiddenUntilFound(val), { immediate: true });
+		watch(keepMounted, (val) => collapsibleCtx.setKeepMounted(val), { immediate: true });
+		useOpenChangeComplete({
+			open: computed(() => collapsibleCtx.open.value && collapsibleCtx.transitionStatus.value === "idle"),
+			ref: collapsibleCtx.panelRef,
+			onComplete() {
+				if (!collapsibleCtx.open.value) return;
+				collapsibleCtx.setDimensions({
+					width: void 0,
+					height: void 0
+				});
+			}
+		});
+		const { hidden, panelRef } = useCollapsiblePanel({
+			abortControllerRef: collapsibleCtx.abortControllerRef,
+			animationTypeRef: collapsibleCtx.animationTypeRef,
+			height: collapsibleCtx.height,
+			hiddenUntilFound: hiddenUntilFound.value,
+			id: computed(() => props.id ?? collapsibleCtx.panelId.value),
+			keepMounted: keepMounted.value,
+			mounted: collapsibleCtx.mounted,
+			onOpenChange: collapsibleCtx.onOpenChange,
+			open: collapsibleCtx.open,
+			panelRef: collapsibleCtx.panelRef,
+			runOnceAnimationsFinish: collapsibleCtx.runOnceAnimationsFinish,
+			setDimensions: collapsibleCtx.setDimensions,
+			setMounted: collapsibleCtx.setMounted,
+			setOpen: collapsibleCtx.setOpen,
+			setVisible: collapsibleCtx.setVisible,
+			transitionDimensionRef: collapsibleCtx.transitionDimensionRef,
+			visible: collapsibleCtx.visible,
+			width: collapsibleCtx.width
+		});
+		const panelState = computed(() => ({
+			...itemCtx.state.value,
+			transitionStatus: collapsibleCtx.transitionStatus.value
+		}));
+		const shouldRender = computed(() => keepMounted.value || hiddenUntilFound.value || collapsibleCtx.mounted.value);
+		const panelProps = computed(() => {
+			const heightVal = collapsibleCtx.height.value;
+			const widthVal = collapsibleCtx.width.value;
+			const resolvedStyle = typeof props.style === "function" ? props.style(panelState.value) : props.style;
+			return {
+				...attrs,
+				"id": collapsibleCtx.panelId.value,
+				"aria-labelledby": itemCtx.triggerId.value,
+				"role": "region",
+				"hidden": hiddenUntilFound.value ? void 0 : hidden.value ? true : void 0,
+				"style": [resolvedStyle, {
+					[AccordionPanelCssVars.accordionPanelHeight]: heightVal === void 0 ? "auto" : `${heightVal}px`,
+					[AccordionPanelCssVars.accordionPanelWidth]: widthVal === void 0 ? "auto" : `${widthVal}px`
+				}]
+			};
+		});
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: {
+				as: props.as,
+				class: props.class
+			},
+			state: panelState,
+			props: panelProps,
+			stateAttributesMapping: accordionStateAttributesMapping,
+			defaultTagName: "div",
+			ref: panelRef
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) && shouldRender.value ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: panelState.value
+			}) : shouldRender.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: panelState.value })]),
+				_: 3
+			}, 16)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/accordion/panel/AccordionPanel.vue
+var AccordionPanel_default = AccordionPanel_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/composite/list/CompositeList.vue?vue&type=script&setup=true&lang.ts
+var CompositeList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CompositeList",
+	props: {
+		elementsRef: {
+			type: Object,
+			required: true
+		},
+		labelsRef: {
+			type: null,
+			required: false
+		},
+		onMapChange: {
+			type: Function,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const nextIndexRef = ref(0);
+		const listeners = ref(/* @__PURE__ */ new Set());
+		const map = shallowRef(/* @__PURE__ */ new Map());
+		const mapTick = ref(0);
+		let lastTick = 0;
+		function register(node, metadata) {
+			map.value.set(node, metadata);
+			lastTick += 1;
+			mapTick.value = lastTick;
+		}
+		function unregister(node) {
+			map.value.delete(node);
+			lastTick += 1;
+			mapTick.value = lastTick;
+		}
+		function sortByDocumentPosition(a, b) {
+			const position = a.compareDocumentPosition(b);
+			if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) return -1;
+			if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) return 1;
+			return 0;
+		}
+		const sortedMap = computed(() => {
+			mapTick.value;
+			const newMap = /* @__PURE__ */ new Map();
+			Array.from(map.value.keys()).filter((node) => node.isConnected).sort(sortByDocumentPosition).forEach((node, index) => {
+				const metadata = map.value.get(node) ?? {};
+				newMap.set(node, {
+					...metadata,
+					index
+				});
+			});
+			return newMap;
+		});
+		let observer = null;
+		watch(sortedMap, (newSortedMap) => {
+			if (typeof MutationObserver !== "function" || newSortedMap.size === 0) {
+				if (observer) {
+					observer.disconnect();
+					observer = null;
+				}
+				return;
+			}
+			if (!observer) observer = new MutationObserver((entries) => {
+				const diff = /* @__PURE__ */ new Set();
+				const updateDiff = (node) => diff.has(node) ? diff.delete(node) : diff.add(node);
+				entries.forEach((entry) => {
+					entry.removedNodes.forEach(updateDiff);
+					entry.addedNodes.forEach(updateDiff);
+				});
+				if (diff.size === 0) {
+					lastTick += 1;
+					mapTick.value = lastTick;
+				}
+			});
+			else observer.disconnect();
+			newSortedMap.forEach((_, node) => {
+				if (node.parentElement) observer.observe(node.parentElement, { childList: true });
+			});
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		onBeforeUnmount(() => {
+			if (observer) observer.disconnect();
+		});
+		watch(sortedMap, (newSortedMap) => {
+			if (lastTick === mapTick.value) {
+				if (props.elementsRef.value.length !== newSortedMap.size) props.elementsRef.value.length = newSortedMap.size;
+				if (props.labelsRef && props.labelsRef.value.length !== newSortedMap.size) props.labelsRef.value.length = newSortedMap.size;
+				nextIndexRef.value = newSortedMap.size;
+			}
+			if (props.onMapChange) props.onMapChange(newSortedMap);
+			listeners.value.forEach((l) => l(newSortedMap));
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		onBeforeUnmount(() => {
+			if (props.elementsRef) props.elementsRef.value = [];
+			if (props.labelsRef) props.labelsRef.value = [];
+		});
+		function subscribeMapChange(fn) {
+			listeners.value.add(fn);
+			return () => {
+				listeners.value.delete(fn);
+			};
+		}
+		provide(compositeListContextKey, {
+			register,
+			unregister,
+			subscribeMapChange,
+			elementsRef: props.elementsRef,
+			labelsRef: props.labelsRef,
+			nextIndexRef
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+
+//#endregion
+//#region src/composite/list/CompositeList.vue
+var CompositeList_default = CompositeList_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/accordion/root/stateAttributesMapping.ts
+const rootStateAttributesMapping = { value: () => null };
+
+//#endregion
+//#region src/accordion/root/AccordionRoot.vue?vue&type=script&setup=true&lang.ts
+var AccordionRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "AccordionRoot",
+	inheritAttrs: false,
+	__name: "AccordionRoot",
+	props: {
+		value: {
+			type: Array,
+			required: false
+		},
+		defaultValue: {
+			type: Array,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		hiddenUntilFound: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		keepMounted: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		loopFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "vertical"
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	emits: ["valueChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const direction = useDirection();
+		const instance = getCurrentInstance();
+		if (process.env.NODE_ENV !== "production") watchEffect(() => {
+			if (props.hiddenUntilFound && props.keepMounted === false) warn("The `:keepMounted=\"false\"` prop on a AccordionRoot will be ignored when using `hiddenUntilFound` since it requires Panels to remain mounted when closed.");
+		});
+		const isValueControlled = computed(() => {
+			const vnodeProps = instance?.vnode.props;
+			return Boolean(vnodeProps && "value" in vnodeProps);
+		});
+		const _compositeRefs = { elementsRef: ref([]) };
+		const accordionItemRefs = _compositeRefs.elementsRef;
+		const { value: openValues, setValue: setOpenValues } = useControllableState({
+			controlled: () => isValueControlled.value ? props.value : void 0,
+			default: props.defaultValue ?? []
+		});
+		function handleValueChange(newValue, nextOpen) {
+			const details = createChangeEventDetails(REASONS.none);
+			if (!props.multiple) {
+				const nextValue = openValues.value[0] === newValue ? [] : [newValue];
+				emit("valueChange", nextValue, details);
+				if (details.isCanceled) return;
+				setOpenValues(nextValue);
+			} else if (nextOpen) {
+				const nextOpenValues = openValues.value.slice();
+				nextOpenValues.push(newValue);
+				emit("valueChange", nextOpenValues, details);
+				if (details.isCanceled) return;
+				setOpenValues(nextOpenValues);
+			} else {
+				const nextOpenValues = openValues.value.filter((v) => v !== newValue);
+				emit("valueChange", nextOpenValues, details);
+				if (details.isCanceled) return;
+				setOpenValues(nextOpenValues);
+			}
+		}
+		const state = computed(() => ({
+			value: openValues.value,
+			disabled: props.disabled,
+			orientation: props.orientation
+		}));
+		provide(accordionRootContextKey, {
+			accordionItemRefs,
+			direction,
+			disabled: computed(() => props.disabled),
+			handleValueChange,
+			hiddenUntilFound: computed(() => props.hiddenUntilFound),
+			keepMounted: computed(() => props.keepMounted),
+			loopFocus: computed(() => props.loopFocus),
+			orientation: computed(() => props.orientation),
+			state,
+			value: openValues
+		});
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				...attrs,
+				dir: direction.value,
+				role: "region"
+			})),
+			stateAttributesMapping: rootStateAttributesMapping,
+			defaultTagName: "div"
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CompositeList_default, { "elements-ref": _compositeRefs.elementsRef }, {
+				default: withCtx(() => [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+					key: 0,
+					props: unref(mergedProps),
+					state: state.value
+				}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+					_: 3
+				}, 16))]),
+				_: 3
+			}, 8, ["elements-ref"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/accordion/root/AccordionRoot.vue
+var AccordionRoot_default = AccordionRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/floating-ui-vue/utils/event.ts
+function stopEvent(event) {
+	event.preventDefault();
+	event.stopPropagation();
+}
+
+//#endregion
+//#region src/utils/isElementDisabled.ts
+function isElementDisabled(element) {
+	return element == null || element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
+}
+
+//#endregion
+//#region src/accordion/trigger/AccordionTrigger.vue?vue&type=script&setup=true&lang.ts
+var AccordionTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "AccordionTrigger",
+	inheritAttrs: false,
+	__name: "AccordionTrigger",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		nativeButton: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "button"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const collapsibleCtx = useCollapsibleRootContext();
+		const rootCtx = useAccordionRootContext();
+		const itemCtx = useAccordionItemContext();
+		const disabled = computed(() => collapsibleCtx.disabled.value || props.disabled);
+		const { getButtonProps, buttonRef } = useButton({
+			disabled: () => disabled.value,
+			focusableWhenDisabled: () => true,
+			native: () => props.nativeButton ?? true
+		});
+		watch(() => props.id, (id) => {
+			if (id) itemCtx.setTriggerId(id);
+		}, { immediate: true });
+		onBeforeUnmount(() => {
+			itemCtx.setTriggerId(void 0);
+		});
+		const SUPPORTED_KEYS = new Set([
+			ARROW_DOWN,
+			ARROW_UP,
+			ARROW_RIGHT,
+			ARROW_LEFT,
+			HOME,
+			END
+		]);
+		function getActiveTriggers() {
+			const accordionItemElements = rootCtx.accordionItemRefs.value;
+			const output = [];
+			for (let i = 0; i < accordionItemElements.length; i += 1) {
+				const section = accordionItemElements[i];
+				if (!isElementDisabled(section)) {
+					const trigger = section?.querySelector("[type=\"button\"], [role=\"button\"]");
+					if (trigger && !isElementDisabled(trigger)) output.push(trigger);
+				}
+			}
+			return output;
+		}
+		function handleKeyDown(event) {
+			if (!SUPPORTED_KEYS.has(event.key)) return;
+			stopEvent(event);
+			const triggers = getActiveTriggers();
+			const lastIndex = triggers.length - 1;
+			let nextIndex = -1;
+			const thisIndex = triggers.indexOf(event.target);
+			const isRtl = rootCtx.direction.value === "rtl";
+			const isHorizontal = rootCtx.orientation.value === "horizontal";
+			const loopFocus = rootCtx.loopFocus.value;
+			function toNext() {
+				if (loopFocus) nextIndex = thisIndex + 1 > lastIndex ? 0 : thisIndex + 1;
+				else nextIndex = Math.min(thisIndex + 1, lastIndex);
+			}
+			function toPrev() {
+				if (loopFocus) nextIndex = thisIndex === 0 ? lastIndex : thisIndex - 1;
+				else nextIndex = thisIndex - 1;
+			}
+			switch (event.key) {
+				case ARROW_DOWN:
+					if (!isHorizontal) toNext();
+					break;
+				case ARROW_UP:
+					if (!isHorizontal) toPrev();
+					break;
+				case ARROW_RIGHT:
+					if (isHorizontal) if (isRtl) toPrev();
+					else toNext();
+					break;
+				case ARROW_LEFT:
+					if (isHorizontal) if (isRtl) toNext();
+					else toPrev();
+					break;
+				case HOME:
+					nextIndex = 0;
+					break;
+				case END:
+					nextIndex = lastIndex;
+					break;
+				default: break;
+			}
+			if (nextIndex > -1) triggers[nextIndex].focus();
+		}
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: itemCtx.state,
+			props: computed(() => getButtonProps({
+				...attrs,
+				"id": itemCtx.triggerId.value,
+				"aria-controls": collapsibleCtx.open.value ? collapsibleCtx.panelId.value : void 0,
+				"aria-expanded": collapsibleCtx.open.value,
+				"onClick": collapsibleCtx.handleTrigger,
+				"onKeydown": handleKeyDown
+			})),
+			stateAttributesMapping: triggerOpenStateMapping,
+			defaultTagName: "button",
+			ref: buttonRef
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(itemCtx).state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: unref(itemCtx).state })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/accordion/trigger/AccordionTrigger.vue
+var AccordionTrigger_default = AccordionTrigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/avatar/root/AvatarRoot.vue?vue&type=script&setup=true&lang.ts
+/**
+* Displays a user's profile picture, initials, or fallback icon.
+* Renders a \`<span>\` element.
+*
+* Documentation: [Base UI Avatar](https://base-ui-vue.com/components/avatar)
+*/
+var AvatarRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "AvatarRoot",
+	inheritAttrs: false,
+	__name: "AvatarRoot",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const imageLoadingStatus = ref("idle");
+		provide(AvatarRootContextKey, {
+			imageLoadingStatus,
+			setImageLoadingStatus: (status) => {
+				imageLoadingStatus.value = status;
+			}
+		});
+		const state = computed(() => ({ imageLoadingStatus: imageLoadingStatus.value }));
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({ ...attrs })),
+			stateAttributesMapping: avatarStateAttributesMapping,
+			defaultTagName: "span"
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/avatar/root/AvatarRoot.vue
+var AvatarRoot_default = AvatarRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/collapsible/root/stateAttributesMapping.ts
+const collapsibleStateAttributesMapping = {
+	...collapsibleOpenStateMapping,
+	...transitionStatusMapping
+};
+
+//#endregion
+//#region src/collapsible/panel/CollapsiblePanelCssVars.ts
+let CollapsiblePanelCssVars = /* @__PURE__ */ function(CollapsiblePanelCssVars) {
+	/**
+	* The collapsible panel's height.
+	* @type {number}
+	*/
+	CollapsiblePanelCssVars["collapsiblePanelHeight"] = "--collapsible-panel-height";
+	/**
+	* The collapsible panel's width.
+	* @type {number}
+	*/
+	CollapsiblePanelCssVars["collapsiblePanelWidth"] = "--collapsible-panel-width";
+	return CollapsiblePanelCssVars;
+}({});
+
+//#endregion
+//#region src/collapsible/panel/CollapsiblePanel.vue?vue&type=script&setup=true&lang.ts
+var CollapsiblePanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "CollapsiblePanel",
+	inheritAttrs: false,
+	__name: "CollapsiblePanel",
+	props: {
+		id: {
+			type: String,
+			required: false
+		},
+		keepMounted: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		hiddenUntilFound: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const ctx = useCollapsibleRootContext();
+		watch(() => props.hiddenUntilFound, (val) => ctx.setHiddenUntilFound(val), { immediate: true });
+		watch(() => props.keepMounted, (val) => ctx.setKeepMounted(val), { immediate: true });
+		watch(() => props.id, (id) => ctx.setPanelIdState(id), {
+			immediate: true,
+			flush: "sync"
+		});
+		if (process.env.NODE_ENV !== "production") watch([() => props.hiddenUntilFound, () => props.keepMounted], ([hiddenUntilFound, keepMounted]) => {
+			if (hiddenUntilFound && keepMounted === false) warn("The `:keep-mounted=\"false\"` prop on a Collapsible will be ignored when using `hidden-until-found` since it requires the Panel to remain mounted even when closed.");
+		}, { immediate: true });
+		const { hidden, panelRef } = useCollapsiblePanel({
+			abortControllerRef: ctx.abortControllerRef,
+			animationTypeRef: ctx.animationTypeRef,
+			height: ctx.height,
+			hiddenUntilFound: props.hiddenUntilFound,
+			id: ctx.panelId,
+			keepMounted: props.keepMounted,
+			mounted: ctx.mounted,
+			onOpenChange: ctx.onOpenChange,
+			open: ctx.open,
+			panelRef: ctx.panelRef,
+			runOnceAnimationsFinish: ctx.runOnceAnimationsFinish,
+			setDimensions: ctx.setDimensions,
+			setMounted: ctx.setMounted,
+			setOpen: ctx.setOpen,
+			setVisible: ctx.setVisible,
+			transitionDimensionRef: ctx.transitionDimensionRef,
+			visible: ctx.visible,
+			width: ctx.width
+		});
+		useOpenChangeComplete({
+			open: computed(() => ctx.open.value && ctx.transitionStatus.value === "idle"),
+			ref: ctx.panelRef,
+			onComplete() {
+				if (!ctx.open.value) return;
+				ctx.setDimensions({
+					height: void 0,
+					width: void 0
+				});
+			}
+		});
+		const panelState = computed(() => ({
+			...ctx.state.value,
+			transitionStatus: ctx.transitionStatus.value
+		}));
+		const shouldRender = computed(() => props.keepMounted || props.hiddenUntilFound || ctx.mounted.value);
+		const panelProps = computed(() => {
+			const heightVal = ctx.height.value;
+			const widthVal = ctx.width.value;
+			const resolvedStyle = typeof props.style === "function" ? props.style(panelState.value) : props.style;
+			return {
+				...attrs,
+				id: ctx.panelId.value,
+				hidden: props.hiddenUntilFound ? void 0 : hidden.value ? true : void 0,
+				style: [resolvedStyle, {
+					[CollapsiblePanelCssVars.collapsiblePanelHeight]: heightVal === void 0 ? "auto" : `${heightVal}px`,
+					[CollapsiblePanelCssVars.collapsiblePanelWidth]: widthVal === void 0 ? "auto" : `${widthVal}px`
+				}]
+			};
+		});
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: {
+				as: props.as,
+				class: props.class
+			},
+			state: panelState,
+			props: panelProps,
+			stateAttributesMapping: collapsibleStateAttributesMapping,
+			defaultTagName: "div",
+			ref: panelRef
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) && shouldRender.value ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: panelState.value
+			}) : shouldRender.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: panelState.value })]),
+				_: 3
+			}, 16)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/collapsible/panel/CollapsiblePanel.vue
+var CollapsiblePanel_default = CollapsiblePanel_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/collapsible/root/CollapsibleRoot.vue?vue&type=script&setup=true&lang.ts
+var CollapsibleRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "CollapsibleRoot",
+	inheritAttrs: false,
+	__name: "CollapsibleRoot",
+	props: {
+		open: {
+			type: Boolean,
+			required: false
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	emits: ["openChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const instance = getCurrentInstance();
+		const isOpenControlled = computed(() => {
+			const vnodeProps = instance?.vnode.props;
+			return Boolean(vnodeProps && "open" in vnodeProps);
+		});
+		const collapsible = useCollapsibleRoot({
+			open: () => props.open,
+			isOpenControlled: () => isOpenControlled.value,
+			defaultOpen: props.defaultOpen ?? false,
+			onOpenChange: (open, details) => emit("openChange", open, details),
+			disabled: () => props.disabled ?? false
+		});
+		const state = collapsible.state;
+		provide(collapsibleRootContextKey, collapsible);
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({ ...attrs })),
+			stateAttributesMapping: collapsibleStateAttributesMapping,
+			defaultTagName: "div"
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: unref(state)
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: unref(state) })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/collapsible/root/CollapsibleRoot.vue
+var CollapsibleRoot_default = CollapsibleRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/collapsible/trigger/CollapsibleTrigger.vue?vue&type=script&setup=true&lang.ts
+var CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "CollapsibleTrigger",
+	inheritAttrs: false,
+	__name: "CollapsibleTrigger",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		nativeButton: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "button"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const triggerStateAttributesMapping = {
+			...triggerOpenStateMapping,
+			...transitionStatusMapping
+		};
+		const attrs = useAttrs();
+		const ctx = useCollapsibleRootContext();
+		const disabled = computed(() => props.disabled ?? ctx.disabled.value);
+		const { getButtonProps, buttonRef } = useButton({
+			disabled: () => disabled.value,
+			focusableWhenDisabled: () => true,
+			native: () => props.nativeButton ?? true
+		});
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: ctx.state,
+			props: computed(() => getButtonProps({
+				...attrs,
+				"aria-controls": ctx.open.value ? ctx.panelId.value : void 0,
+				"aria-expanded": ctx.open.value,
+				"onClick": ctx.handleTrigger
+			})),
+			stateAttributesMapping: triggerStateAttributesMapping,
+			defaultTagName: "button",
+			ref: buttonRef
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(ctx).state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: unref(ctx).state })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/collapsible/trigger/CollapsibleTrigger.vue
+var CollapsibleTrigger_default = CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/labelable-provider/LabelableProvider.vue?vue&type=script&setup=true&lang.ts
+var LabelableProvider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "LabelableProvider",
+	__name: "LabelableProvider",
+	props: {
+		controlId: {
+			type: [String, null],
+			required: false
+		},
+		labelId: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const controlId = ref(props.controlId);
+		const labelId = ref(props.labelId);
+		const messageIds = ref([]);
+		const parent = useLabelableContext();
+		function setControlId(id) {
+			controlId.value = id;
+		}
+		function setLabelId(id) {
+			labelId.value = id;
+		}
+		function setMessageIds(updater) {
+			messageIds.value = updater(messageIds.value);
+		}
+		function getDescriptionProps() {
+			const describedBy = parent.messageIds.value.concat(messageIds.value).join(" ") || void 0;
+			return { "aria-describedby": describedBy };
+		}
+		provide(labelableContextKey, {
+			controlId,
+			setControlId,
+			labelId,
+			setLabelId,
+			messageIds,
+			setMessageIds,
+			getDescriptionProps
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+
+//#endregion
+//#region src/labelable-provider/LabelableProvider.vue
+var LabelableProvider_default = LabelableProvider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/field/item/FieldItemContext.ts
+const defaultContext = { disabled: ref(false) };
+const fieldItemContextKey = Symbol("FieldItemContext");
+function useFieldItemContext() {
+	return inject(fieldItemContextKey, defaultContext);
+}
+
+//#endregion
+//#region src/field/item/FieldItem.vue?vue&type=script&setup=true&lang.ts
+var FieldItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "FieldItem",
+	inheritAttrs: false,
+	__name: "FieldItem",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const { state, disabled: rootDisabled } = useFieldRootContext(false);
+		provide(fieldItemContextKey, { disabled: computed(() => rootDisabled.value || props.disabled) });
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({ ...attrs })),
+			stateAttributesMapping: fieldValidityMapping,
+			defaultTagName: "div"
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(LabelableProvider_default, null, {
+				default: withCtx(() => [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+					key: 0,
+					props: unref(mergedProps),
+					state: unref(state)
+				}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: unref(state) })]),
+					_: 3
+				}, 16))]),
+				_: 3
+			});
+		};
+	}
+});
+
+//#endregion
+//#region src/field/item/FieldItem.vue
+var FieldItem_default = FieldItem_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/field/label/FieldLabel.vue?vue&type=script&setup=true&lang.ts
+var FieldLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "FieldLabel",
+	inheritAttrs: false,
+	__name: "FieldLabel",
+	props: {
+		id: {
+			type: String,
+			required: false
+		},
+		nativeLabel: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "label"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const fieldRootContext = useFieldRootContext(false);
+		const { controlId, setLabelId, labelId: contextLabelId } = useLabelableContext();
+		const generatedLabelId = useBaseUiId(props.id);
+		const labelId = computed(() => props.id ?? contextLabelId.value ?? generatedLabelId);
+		watchEffect((onCleanup) => {
+			const id = labelId.value;
+			setLabelId(id);
+			onCleanup(() => setLabelId(void 0));
+		});
+		function handleInteraction(event) {
+			if (event.target?.closest("button,input,select,textarea")) return;
+			if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+			if (props.nativeLabel || !controlId.value) return;
+			const controlElement = document.getElementById(controlId.value);
+			if (controlElement) controlElement.focus();
+		}
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state: fieldRootContext.state,
+			props: computed(() => {
+				if (props.nativeLabel) return {
+					...attrs,
+					id: labelId.value,
+					for: controlId.value ?? void 0,
+					onMousedown: handleInteraction
+				};
+				return {
+					...attrs,
+					id: labelId.value,
+					onClick: handleInteraction,
+					onPointerdown: (event) => {
+						event.preventDefault();
+					}
+				};
+			}),
+			stateAttributesMapping: fieldValidityMapping,
+			defaultTagName: "label"
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: unref(fieldRootContext).state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: unref(fieldRootContext).state })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/field/label/FieldLabel.vue
+var FieldLabel_default = FieldLabel_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/fieldset/root/FieldsetRootContext.ts
+const fieldsetRootContextKey = Symbol("FieldsetRootContext");
+function useFieldsetRootContext(optional = false) {
+	const context = inject(fieldsetRootContextKey, void 0);
+	if (!context && !optional) throw new Error("Base UI Vue: FieldsetRootContext is missing. Fieldset parts must be placed within <FieldsetRoot>.");
+	return context;
+}
+
+//#endregion
+//#region src/field/root/useFieldRootState.ts
+function useFieldRootState(params) {
+	const { disabled, touchedProp, dirtyProp } = params;
+	const touchedState = shallowRef(false);
+	const dirtyState = shallowRef(false);
+	const filled = shallowRef(false);
+	const focused = shallowRef(false);
+	const markedDirtyRef = shallowRef(false);
+	const touched = computed(() => touchedProp.value ?? touchedState.value);
+	const dirty = computed(() => dirtyProp.value ?? dirtyState.value);
+	function setDirty(value) {
+		if (dirtyProp.value !== void 0) return;
+		if (value) markedDirtyRef.value = true;
+		dirtyState.value = value;
+	}
+	function setTouched(value) {
+		if (touchedProp.value !== void 0) return;
+		touchedState.value = value;
+	}
+	function setFilled(value) {
+		filled.value = value;
+	}
+	function setFocused(value) {
+		focused.value = value;
+	}
+	return {
+		touched,
+		dirty,
+		filled,
+		focused,
+		setTouched,
+		setDirty,
+		setFilled,
+		setFocused,
+		markedDirtyRef,
+		stateWithoutValidity: computed(() => ({
+			disabled: disabled.value,
+			touched: touched.value,
+			dirty: dirty.value,
+			filled: filled.value,
+			focused: focused.value
+		}))
+	};
+}
+
+//#endregion
+//#region src/field/root/useFieldValidation.ts
+const validityKeys = Object.keys(DEFAULT_VALIDITY_STATE);
+function isOnlyValueMissing(state) {
+	if (!state || state.valid || !state.valueMissing) return false;
+	for (const key of validityKeys) {
+		if (key === "valid" || key === "valueMissing") continue;
+		if (state[key]) return false;
+	}
+	return true;
+}
+function useFieldValidation(params) {
+	const { formRef, clearErrors } = useFormContext();
+	const { controlId, getDescriptionProps, setValidityData, validate, validityData, validationDebounceTime, invalid, markedDirtyRef, state, name, shouldValidateOnChange } = params;
+	const timeout = useTimeout();
+	const inputRef = shallowRef(null);
+	function setInputRef(element) {
+		inputRef.value = element;
+	}
+	async function commit(value, revalidate = false) {
+		const element = inputRef.value;
+		if (!element) return;
+		if (revalidate) {
+			if (state.value.valid !== false) return;
+			const currentNativeValidity = element.validity;
+			if (!currentNativeValidity.valueMissing) {
+				const nextValidityData = {
+					value,
+					state: {
+						...DEFAULT_VALIDITY_STATE,
+						valid: true
+					},
+					error: "",
+					errors: [],
+					initialValue: validityData.value.initialValue
+				};
+				element.setCustomValidity("");
+				const cId = controlId.value;
+				if (cId) {
+					const currentFieldData = formRef.value.fields.get(cId);
+					if (currentFieldData) formRef.value.fields.set(cId, {
+						...currentFieldData,
+						validityData: getCombinedFieldValidityData(nextValidityData, false)
+					});
+				}
+				setValidityData(nextValidityData);
+				return;
+			}
+			const currentNativeValidityObject = validityKeys.reduce((acc, key) => {
+				acc[key] = currentNativeValidity[key];
+				return acc;
+			}, {});
+			if (!currentNativeValidityObject.valid && !isOnlyValueMissing(currentNativeValidityObject)) return;
+		}
+		function getState(el) {
+			const computedState = validityKeys.reduce((acc, key) => {
+				acc[key] = el.validity[key];
+				return acc;
+			}, {});
+			let hasOnlyValueMissingError = false;
+			for (const key of validityKeys) {
+				if (key === "valid") continue;
+				if (key === "valueMissing" && computedState[key]) hasOnlyValueMissingError = true;
+				else if (computedState[key]) return computedState;
+			}
+			if (hasOnlyValueMissingError && !markedDirtyRef.value) {
+				computedState.valid = true;
+				computedState.valueMissing = false;
+			}
+			return computedState;
+		}
+		timeout.clear();
+		let result = null;
+		let validationErrors = [];
+		const nextState = getState(element);
+		let defaultValidationMessage;
+		const validateOnChange = shouldValidateOnChange();
+		if (element.validationMessage && !validateOnChange) {
+			defaultValidationMessage = element.validationMessage;
+			validationErrors = [element.validationMessage];
+		} else {
+			const resultOrPromise = validate(value, Array.from(formRef.value.fields.values()).reduce((acc, field) => {
+				if (field.name) acc[field.name] = field.getValue();
+				return acc;
+			}, {}));
+			if (typeof resultOrPromise === "object" && resultOrPromise !== null && "then" in resultOrPromise) result = await resultOrPromise;
+			else result = resultOrPromise;
+			if (result !== null) {
+				nextState.valid = false;
+				nextState.customError = true;
+				if (Array.isArray(result)) {
+					validationErrors = result;
+					element.setCustomValidity(result.join("\n"));
+				} else if (result) {
+					validationErrors = [result];
+					element.setCustomValidity(result);
+				}
+			} else if (validateOnChange) {
+				element.setCustomValidity("");
+				nextState.customError = false;
+				if (element.validationMessage) {
+					defaultValidationMessage = element.validationMessage;
+					validationErrors = [element.validationMessage];
+				} else if (element.validity.valid && !nextState.valid) nextState.valid = true;
+			}
+		}
+		const nextValidityData = {
+			value,
+			state: nextState,
+			error: defaultValidationMessage ?? (Array.isArray(result) ? result[0] : result ?? ""),
+			errors: validationErrors,
+			initialValue: validityData.value.initialValue
+		};
+		const cId = controlId.value;
+		if (cId) {
+			const currentFieldData = formRef.value.fields.get(cId);
+			if (currentFieldData) formRef.value.fields.set(cId, {
+				...currentFieldData,
+				validityData: getCombinedFieldValidityData(nextValidityData, invalid.value)
+			});
+		}
+		setValidityData(nextValidityData);
+	}
+	function getValidationProps() {
+		const descProps = getDescriptionProps();
+		const ariaInvalid = state.value.valid === false ? { "aria-invalid": true } : {};
+		return {
+			...descProps,
+			...ariaInvalid
+		};
+	}
+	function getInputValidationProps() {
+		return {
+			onInput(event) {
+				const target = event.target;
+				clearErrors(name.value);
+				if (!shouldValidateOnChange()) {
+					commit(target.value, true);
+					return;
+				}
+				const element = target;
+				if (element.value === "") {
+					commit(element.value);
+					return;
+				}
+				timeout.clear();
+				if (validationDebounceTime.value) timeout.start(validationDebounceTime.value, () => {
+					commit(element.value);
+				});
+				else commit(element.value);
+			},
+			...getValidationProps()
+		};
+	}
+	return {
+		getValidationProps,
+		getInputValidationProps,
+		inputRef: shallowReadonly(inputRef),
+		setInputRef,
+		commit
+	};
+}
+
+//#endregion
+//#region src/field/root/useFieldValidity.ts
+function useFieldValidity(params) {
+	const { invalid } = params;
+	const validityData = ref({
+		state: { ...DEFAULT_VALIDITY_STATE },
+		error: "",
+		errors: [],
+		value: null,
+		initialValue: null
+	});
+	function setValidityData(data) {
+		validityData.value = data;
+	}
+	return {
+		validityData,
+		setValidityData,
+		valid: computed(() => !invalid.value && validityData.value.state.valid)
+	};
+}
+
+//#endregion
+//#region src/field/root/FieldRoot.vue?vue&type=script&setup=true&lang.ts
+var FieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "FieldRoot",
+	inheritAttrs: false,
+	__name: "FieldRoot",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		validate: {
+			type: Function,
+			required: false
+		},
+		validationMode: {
+			type: String,
+			required: false
+		},
+		validationDebounceTime: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		invalid: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		dirty: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		touched: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const { validationMode: formValidationMode, submitAttempted } = useFormContext();
+		const fieldsetContext = useFieldsetRootContext(true);
+		const disabledFieldset = computed(() => fieldsetContext?.disabled.value ?? false);
+		const disabled = computed(() => disabledFieldset.value || props.disabled);
+		const nameRef = computed(() => props.name);
+		const validationModeRef = computed(() => props.validationMode ?? formValidationMode.value);
+		const validationDebounceTimeRef = computed(() => props.validationDebounceTime);
+		const validateFn = computed(() => props.validate ?? (() => null));
+		const parentLabelable = useLabelableContext();
+		const controlId = ref(void 0);
+		const labelId = ref(void 0);
+		const messageIds = ref([]);
+		function setControlId(id) {
+			controlId.value = id;
+		}
+		function setLabelId(id) {
+			labelId.value = id;
+		}
+		function setMessageIds(updater) {
+			messageIds.value = updater(messageIds.value);
+		}
+		function getDescriptionProps() {
+			const describedBy = parentLabelable.messageIds.value.concat(messageIds.value).join(" ") || void 0;
+			return { "aria-describedby": describedBy };
+		}
+		provide(labelableContextKey, {
+			controlId,
+			setControlId,
+			labelId,
+			setLabelId,
+			messageIds,
+			setMessageIds,
+			getDescriptionProps
+		});
+		const { errors: formErrors } = useFormContext();
+		const hasFormError = computed(() => {
+			const n = props.name;
+			return !!n && Object.hasOwn(formErrors.value, n) && formErrors.value[n] !== void 0;
+		});
+		const invalid = computed(() => props.invalid === true || hasFormError.value);
+		const { validityData, setValidityData, valid } = useFieldValidity({ invalid });
+		const shouldValidateOnChange = computed(() => {
+			return validationModeRef.value === "onChange" || validationModeRef.value === "onSubmit" && submitAttempted.value;
+		});
+		const { touched, dirty, filled, focused, setTouched, setDirty, setFilled, setFocused, markedDirtyRef, stateWithoutValidity } = useFieldRootState({
+			disabled,
+			touchedProp: computed(() => props.touched),
+			dirtyProp: computed(() => props.dirty)
+		});
+		const state = computed(() => ({
+			valid: valid.value,
+			...stateWithoutValidity.value
+		}));
+		const validation = useFieldValidation({
+			controlId,
+			getDescriptionProps,
+			setValidityData,
+			validate: (value, formValues) => validateFn.value(value, formValues),
+			validityData,
+			validationDebounceTime: validationDebounceTimeRef,
+			invalid,
+			markedDirtyRef,
+			state,
+			name: nameRef,
+			shouldValidateOnChange: () => shouldValidateOnChange.value
+		});
+		provide(fieldRootContextKey, {
+			invalid,
+			name: nameRef,
+			validityData: shallowReadonly(validityData),
+			setValidityData,
+			disabled,
+			touched,
+			setTouched,
+			dirty,
+			setDirty,
+			filled,
+			setFilled,
+			focused,
+			setFocused,
+			validate: (value, formValues) => validateFn.value(value, formValues),
+			validationMode: validationModeRef,
+			validationDebounceTime: validationDebounceTimeRef,
+			shouldValidateOnChange: () => shouldValidateOnChange.value,
+			state,
+			markedDirtyRef,
+			validation
+		});
+		function handleImperativeValidate() {
+			markedDirtyRef.value = true;
+			const currentValue = validation.inputRef.value?.value ?? validityData.value.value;
+			validation.commit(currentValue);
+		}
+		__expose({ validate: handleImperativeValidate });
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({ ...attrs })),
+			stateAttributesMapping: fieldValidityMapping,
+			defaultTagName: "div"
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/field/root/FieldRoot.vue
+var FieldRoot_default = FieldRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/field/validity/FieldValidity.vue?vue&type=script&setup=true&lang.ts
+var FieldValidity_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "FieldValidity",
+	__name: "FieldValidity",
+	setup(__props) {
+		const { validityData, invalid } = useFieldRootContext(false);
+		const combinedFieldValidityData = computed(() => getCombinedFieldValidityData(validityData.value, invalid.value));
+		const { transitionStatus } = useTransitionStatus(computed(() => combinedFieldValidityData.value.state.valid === false));
+		const fieldValidityState = computed(() => ({
+			...combinedFieldValidityData.value,
+			validity: combinedFieldValidityData.value.state,
+			transitionStatus: transitionStatus.value
+		}));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(fieldValidityState.value)));
+		};
+	}
+});
+
+//#endregion
+//#region src/field/validity/FieldValidity.vue
+var FieldValidity_default = FieldValidity_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/fieldset/legend/FieldsetLegend.vue?vue&type=script&setup=true&lang.ts
+/**
+* An accessible label that is automatically associated with the fieldset.
+* Renders a \`<div>\` element.
+*
+* Documentation: [Base UI Vue Fieldset](https://baseui-vue.com/components/fieldset)
+*/
+var FieldsetLegend_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "FieldsetLegend",
+	inheritAttrs: false,
+	__name: "FieldsetLegend",
+	props: {
+		id: {
+			type: String,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const { disabled, legendId, setLegendId } = useFieldsetRootContext();
+		const id = useBaseUiId(props.id);
+		setLegendId(id);
+		onBeforeUnmount(() => {
+			if (legendId.value === id) setLegendId(void 0);
+		});
+		const state = computed(() => ({ disabled: disabled.value }));
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				...attrs,
+				id
+			})),
+			defaultTagName: "div"
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/fieldset/legend/FieldsetLegend.vue
+var FieldsetLegend_default = FieldsetLegend_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/fieldset/root/FieldsetRoot.vue?vue&type=script&setup=true&lang.ts
+/**
+* Groups a shared legend with related controls.
+* Renders a \`<fieldset>\` element.
+*
+* Documentation: [Base UI Vue Fieldset](https://baseui-vue.com/components/fieldset)
+*/
+var FieldsetRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "FieldsetRoot",
+	inheritAttrs: false,
+	__name: "FieldsetRoot",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "fieldset"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const legendId = ref(void 0);
+		function setLegendId(id) {
+			legendId.value = id;
+		}
+		const disabled = computed(() => props.disabled ?? false);
+		const state = computed(() => ({ disabled: disabled.value }));
+		provide(fieldsetRootContextKey, {
+			legendId,
+			setLegendId,
+			disabled
+		});
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				...attrs,
+				"aria-labelledby": legendId.value
+			})),
+			defaultTagName: "fieldset"
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/fieldset/root/FieldsetRoot.vue
+var FieldsetRoot_default = FieldsetRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/use-render/useRender.ts
+/**
+* Renders a Base UI element.
+*
+* The public composable that collects `attrs` internally via `useAttrs()`,
+* merges them with explicit props, and delegates to `useRenderElement`.
+* Returns a readonly state and supports renderless mode via the `Slot` sentinel.
+*
+* @public
+*/
+function useRender(params) {
+	const attrs = useAttrs();
+	const state = computed(() => {
+		return readonly(toValue(params.state) ?? EMPTY_OBJECT);
+	});
+	const mergedComponentProps = useRenderElement({
+		componentProps: params,
+		state,
+		props: computed(() => mergeProps$1(attrs, toValue(params.props))),
+		stateAttributesMapping: params.stateAttributesMapping,
+		defaultTagName: params.defaultTagName,
+		ref: params.ref
+	});
+	return {
+		tag: mergedComponentProps.tag,
+		renderProps: mergedComponentProps.mergedProps,
+		renderless: mergedComponentProps.renderless,
+		state,
+		ref: mergedComponentProps.ref
+	};
+}
+
+//#endregion
+//#region src/index.ts
+const name = "base-ui-vue";
+const version = "0.0.0";
+
+//#endregion
+export { AccordionItem_default, AccordionPanel_default, AccordionRoot_default, AccordionTrigger_default, AvatarRoot_default, CollapsiblePanel_default, CollapsibleRoot_default, CollapsibleTrigger_default, FieldItem_default, FieldLabel_default, FieldRoot_default, FieldValidity_default, FieldsetLegend_default, FieldsetRoot_default, accordionRootContextKey, collapsibleRootContextKey, fieldItemContextKey, fieldsetRootContextKey, name, useAccordionRootContext, useCollapsibleRootContext, useFieldItemContext, useFieldsetRootContext, useRender, version };
+//# sourceMappingURL=index2.js.map