base-ui-vue 0.1.0 → 0.2.0

package/dist/checkbox/index.cjs

@@ -0,0 +1,1173 @@
+const require_button_Button = require('../button/Button.cjs');
+const require_checkbox_group_CheckboxGroup = require('../checkbox-group/CheckboxGroup.cjs');
+let vue = require("vue");
+
+//#region src/utils/stateAttributesMapping.ts
+let TransitionStatusDataAttributes = /* @__PURE__ */ function(TransitionStatusDataAttributes) {
+	/**
+	* Present when the component is animating in.
+	*/
+	TransitionStatusDataAttributes["startingStyle"] = "data-starting-style";
+	/**
+	* Present when the component is animating out.
+	*/
+	TransitionStatusDataAttributes["endingStyle"] = "data-ending-style";
+	return TransitionStatusDataAttributes;
+}({});
+const STARTING_HOOK = { [TransitionStatusDataAttributes.startingStyle]: "" };
+const ENDING_HOOK = { [TransitionStatusDataAttributes.endingStyle]: "" };
+const transitionStatusMapping = { transitionStatus(value) {
+	if (value === "starting") return STARTING_HOOK;
+	if (value === "ending") return ENDING_HOOK;
+	return null;
+} };
+
+//#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 ?? require_button_Button.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
+	};
+}
+function createGenericEventDetails(reason, event, trigger) {
+	return createChangeEventDetails(reason, event, trigger);
+}
+
+//#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/resolveRef.ts
+function resolveRef(refOrElement) {
+	const element = (0, vue.unref)(refOrElement);
+	if (element && "$el" in element) return element.$el;
+	return element;
+}
+
+//#endregion
+//#region src/utils/useAnimationFrame.ts
+/**
+* Unlike `setTimeout`, rAF doesn't guarantee a positive integer return value, so we can't have
+* a monomorphic `uint` type with `0` meaning empty.
+* See warning note at:
+* https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame#return_value
+*/
+const EMPTY = null;
+let LAST_RAF = typeof window !== "undefined" ? window.requestAnimationFrame : void 0;
+var Scheduler = class {
+	callbacks = [];
+	callbacksCount = 0;
+	nextId = 1;
+	startId = 1;
+	isScheduled = false;
+	tick = (timestamp) => {
+		this.isScheduled = false;
+		const currentCallbacks = this.callbacks;
+		const currentCallbacksCount = this.callbacksCount;
+		this.callbacks = [];
+		this.callbacksCount = 0;
+		this.startId = this.nextId;
+		if (currentCallbacksCount > 0) for (let i = 0; i < currentCallbacks.length; i += 1) currentCallbacks[i]?.(timestamp);
+	};
+	request(fn) {
+		if (typeof window === "undefined") return 0;
+		const id = this.nextId;
+		this.nextId += 1;
+		this.callbacks.push(fn);
+		this.callbacksCount += 1;
+		const didRAFChange = process.env.NODE_ENV !== "production" && LAST_RAF !== window.requestAnimationFrame && (LAST_RAF = window.requestAnimationFrame, true);
+		if (!this.isScheduled || didRAFChange) {
+			window.requestAnimationFrame(this.tick);
+			this.isScheduled = true;
+		}
+		return id;
+	}
+	cancel(id) {
+		const index = id - this.startId;
+		if (index < 0 || index >= this.callbacks.length) return;
+		this.callbacks[index] = null;
+		this.callbacksCount -= 1;
+	}
+};
+const scheduler = new Scheduler();
+var AnimationFrame = class AnimationFrame {
+	static create() {
+		return new AnimationFrame();
+	}
+	static request(fn) {
+		return scheduler.request(fn);
+	}
+	static cancel(id) {
+		return scheduler.cancel(id);
+	}
+	currentId = EMPTY;
+	request(fn) {
+		this.cancel();
+		this.currentId = scheduler.request((timestamp) => {
+			this.currentId = EMPTY;
+			fn(timestamp);
+		});
+	}
+	cancel = () => {
+		if (this.currentId !== EMPTY) {
+			scheduler.cancel(this.currentId);
+			this.currentId = EMPTY;
+		}
+	};
+	disposeEffect = () => {
+		return this.cancel;
+	};
+};
+/**
+* A `requestAnimationFrame` with automatic cleanup and guard.
+*/
+function useAnimationFrame() {
+	const animationFrame = AnimationFrame.create();
+	(0, vue.onUnmounted)(animationFrame.disposeEffect());
+	return animationFrame;
+}
+
+//#endregion
+//#region src/utils/useAnimationsFinished.ts
+function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
+	const frame = useAnimationFrame();
+	return (fnToExecute, signal = null) => {
+		frame.cancel();
+		function done() {
+			(0, vue.nextTick)(() => {
+				fnToExecute();
+			});
+		}
+		const resolvedElement = resolveRef(elementOrRef);
+		if (resolvedElement == null) return;
+		if (typeof resolvedElement.getAnimations !== "function" || globalThis.BASE_UI_ANIMATIONS_DISABLED) fnToExecute();
+		else {
+			function execWaitForStartingStyleRemoved() {
+				const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
+				if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+					frame.request(exec);
+					return;
+				}
+				const attributeObserver = new MutationObserver(() => {
+					if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+						attributeObserver.disconnect();
+						exec();
+					}
+				});
+				attributeObserver.observe(resolvedElement, {
+					attributes: true,
+					attributeFilter: [startingStyleAttribute]
+				});
+				signal?.addEventListener("abort", () => attributeObserver.disconnect(), { once: true });
+			}
+			function exec() {
+				Promise.all(resolvedElement.getAnimations().map((anim) => anim.finished)).then(() => {
+					if (signal?.aborted) return;
+					done();
+				}).catch(() => {
+					const currentAnimations = resolvedElement.getAnimations();
+					if (treatAbortedAsFinished) {
+						if (signal?.aborted) return;
+						done();
+					} else if (currentAnimations.length > 0 && currentAnimations.some((anim) => anim.pending || anim.playState !== "finished")) exec();
+				});
+			}
+			if ((0, vue.toValue)(waitForStartingStyleRemoved)) {
+				execWaitForStartingStyleRemoved();
+				return;
+			}
+			frame.request(exec);
+		}
+	};
+}
+
+//#endregion
+//#region src/utils/useTransitionStatus.ts
+/**
+* Provides a status string for CSS animations.
+* @param openRef - a boolean that determines if the element is open.
+* @param enableIdleStateRef - a boolean that enables the `'idle'` state between `'starting'` and `'ending'`
+* @param deferEndingStateRef - a boolean that defers the `'ending'` state.
+*/
+function useTransitionStatus(openRef, enableIdleStateRef = false, deferEndingStateRef = false) {
+	const open = (0, vue.computed)(() => (0, vue.toValue)(openRef));
+	const enableIdleState = (0, vue.computed)(() => (0, vue.toValue)(enableIdleStateRef));
+	const deferEndingState = (0, vue.computed)(() => (0, vue.toValue)(deferEndingStateRef));
+	const transitionStatus = (0, vue.ref)(open.value && enableIdleState.value ? "idle" : void 0);
+	const mounted = (0, vue.ref)(open.value);
+	(0, vue.watchEffect)(() => {
+		if (open.value && !mounted.value) {
+			mounted.value = true;
+			transitionStatus.value = "starting";
+		}
+		if (!open.value && mounted.value && transitionStatus.value !== "ending" && !deferEndingState.value) transitionStatus.value = "ending";
+		if (!open.value && !mounted.value && transitionStatus.value === "ending") transitionStatus.value = void 0;
+	});
+	(0, vue.watchEffect)((onCleanup) => {
+		if (!open.value && mounted.value && transitionStatus.value !== "ending" && deferEndingState.value) {
+			const frame = AnimationFrame.request(() => {
+				transitionStatus.value = "ending";
+			});
+			onCleanup(() => {
+				AnimationFrame.cancel(frame);
+			});
+		}
+	});
+	(0, vue.watchEffect)((onCleanup) => {
+		if (!open.value || enableIdleState.value) return;
+		const frame = AnimationFrame.request(() => {
+			transitionStatus.value = void 0;
+		});
+		onCleanup(() => {
+			AnimationFrame.cancel(frame);
+		});
+	});
+	(0, vue.watchEffect)((onCleanup) => {
+		if (!open.value || !enableIdleState.value) return;
+		if (open.value && mounted.value && transitionStatus.value !== "idle") transitionStatus.value = "starting";
+		const frame = AnimationFrame.request(() => {
+			transitionStatus.value = "idle";
+		});
+		onCleanup(() => {
+			AnimationFrame.cancel(frame);
+		});
+	});
+	return {
+		mounted,
+		setMounted(value) {
+			mounted.value = value;
+		},
+		transitionStatus
+	};
+}
+
+//#endregion
+//#region src/utils/useOpenChangeComplete.ts
+/**
+* Calls the provided function when the CSS open/close animation or transition completes.
+*/
+function useOpenChangeComplete(parameters) {
+	const runOnceAnimationsFinish = useAnimationsFinished(parameters.ref, parameters.open, false);
+	(0, vue.watchEffect)((onCleanup) => {
+		if (!((0, vue.toValue)(parameters.enabled) ?? true)) return;
+		const abortController = new AbortController();
+		runOnceAnimationsFinish(parameters.onComplete, abortController.signal);
+		onCleanup(() => {
+			abortController.abort();
+		});
+	});
+}
+
+//#endregion
+//#region src/checkbox/root/CheckboxRootContext.ts
+const checkboxRootContextKey = Symbol("CheckboxRootContext");
+function useCheckboxRootContext(optional = false) {
+	const context = (0, vue.inject)(checkboxRootContextKey, void 0);
+	if (!context && !optional) throw new Error("Base UI Vue: CheckboxRootContext is missing. Checkbox parts must be placed within <CheckboxRoot>.");
+	return context;
+}
+
+//#endregion
+//#region src/checkbox/root/CheckboxRootDataAttributes.ts
+let CheckboxRootDataAttributes = /* @__PURE__ */ function(CheckboxRootDataAttributes) {
+	/**
+	* Present when the checkbox is checked.
+	*/
+	CheckboxRootDataAttributes["checked"] = "data-checked";
+	/**
+	* Present when the checkbox is not checked.
+	*/
+	CheckboxRootDataAttributes["unchecked"] = "data-unchecked";
+	/**
+	* Present when the checkbox is in an indeterminate state.
+	*/
+	CheckboxRootDataAttributes["indeterminate"] = "data-indeterminate";
+	/**
+	* Present when the checkbox is disabled.
+	*/
+	CheckboxRootDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the checkbox is readonly.
+	*/
+	CheckboxRootDataAttributes["readonly"] = "data-readonly";
+	/**
+	* Present when the checkbox is required.
+	*/
+	CheckboxRootDataAttributes["required"] = "data-required";
+	/**
+	* Present when the checkbox is in valid state (when wrapped in FieldRoot).
+	*/
+	CheckboxRootDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the checkbox is in invalid state (when wrapped in FieldRoot).
+	*/
+	CheckboxRootDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the checkbox has been touched (when wrapped in FieldRoot).
+	*/
+	CheckboxRootDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the checkbox's value has changed (when wrapped in FieldRoot).
+	*/
+	CheckboxRootDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the checkbox is checked (when wrapped in FieldRoot).
+	*/
+	CheckboxRootDataAttributes["filled"] = "data-filled";
+	/**
+	* Present when the checkbox is focused (when wrapped in FieldRoot).
+	*/
+	CheckboxRootDataAttributes["focused"] = "data-focused";
+	/**
+	* Present when the checkbox is acting as the parent checkbox for a group.
+	*/
+	CheckboxRootDataAttributes["parent"] = "data-parent";
+	return CheckboxRootDataAttributes;
+}({});
+
+//#endregion
+//#region src/checkbox/utils/useStateAttributesMapping.ts
+const CHECKED_ATTRS = { [CheckboxRootDataAttributes.checked]: "" };
+const UNCHECKED_ATTRS = { [CheckboxRootDataAttributes.unchecked]: "" };
+function useCheckboxStateAttributesMapping(state) {
+	return {
+		checked(value) {
+			if (state.value.indeterminate) return null;
+			if (value) return CHECKED_ATTRS;
+			return UNCHECKED_ATTRS;
+		},
+		...require_checkbox_group_CheckboxGroup.fieldValidityMapping
+	};
+}
+
+//#endregion
+//#region src/checkbox/indicator/CheckboxIndicator.vue?vue&type=script&setup=true&lang.ts
+/**
+* Indicates whether the checkbox is ticked.
+* Renders a `<span>` element.
+*
+* Documentation: [Base UI Vue Checkbox](https://baseui-vue.com/docs/components/checkbox)
+*/
+var CheckboxIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "CheckboxIndicator",
+	inheritAttrs: false,
+	__name: "CheckboxIndicator",
+	props: {
+		keepMounted: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		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 attrsObject = (0, vue.useAttrs)();
+		const rootState = useCheckboxRootContext();
+		const rendered = (0, vue.computed)(() => rootState.value.checked || rootState.value.indeterminate);
+		const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
+		const localIndicatorRef = (0, vue.ref)(null);
+		const state = (0, vue.computed)(() => ({
+			...rootState.value,
+			transitionStatus: transitionStatus.value
+		}));
+		useOpenChangeComplete({
+			open: rendered,
+			ref: localIndicatorRef,
+			onComplete() {
+				if (!rendered.value) setMounted(false);
+			}
+		});
+		const stateAttributesMapping = {
+			...useCheckboxStateAttributesMapping(rootState),
+			...transitionStatusMapping,
+			...require_checkbox_group_CheckboxGroup.fieldValidityMapping
+		};
+		const shouldRender = (0, vue.computed)(() => props.keepMounted || mounted.value);
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state,
+			props: (0, vue.computed)(() => attrsObject),
+			stateAttributesMapping,
+			defaultTagName: "span",
+			ref: localIndicatorRef
+		});
+		return (_ctx, _cache) => {
+			return shouldRender.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				ref: (0, vue.unref)(renderRef),
+				props: (0, vue.unref)(mergedProps),
+				state: state.value
+			}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+				key: 1,
+				ref: (0, vue.unref)(renderRef)
+			}, (0, vue.unref)(mergedProps)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16))], 64)) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/checkbox/indicator/CheckboxIndicator.vue
+var CheckboxIndicator_default = CheckboxIndicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/field/item/FieldItemContext.ts
+const defaultContext = { disabled: (0, vue.ref)(false) };
+const fieldItemContextKey = Symbol("FieldItemContext");
+function useFieldItemContext() {
+	return (0, vue.inject)(fieldItemContextKey, defaultContext);
+}
+
+//#endregion
+//#region src/labelable-provider/useAriaLabelledBy.ts
+function useAriaLabelledBy(params) {
+	const { ariaLabelledBy, labelId, labelSourceRef, enableFallback = true, labelSourceId } = params;
+	const fallbackAriaLabelledBy = (0, vue.ref)(void 0);
+	const generatedLabelId = (0, vue.computed)(() => {
+		const sourceId = (0, vue.toValue)(labelSourceId);
+		return sourceId ? `${sourceId}-label` : void 0;
+	});
+	const resolvedAriaLabelledBy = (0, vue.computed)(() => {
+		const explicit = ariaLabelledBy?.value;
+		const fromContext = labelId?.value;
+		return explicit ?? fromContext ?? fallbackAriaLabelledBy.value;
+	});
+	(0, vue.watchPostEffect)(() => {
+		if (ariaLabelledBy?.value || labelId?.value || !enableFallback) {
+			fallbackAriaLabelledBy.value = void 0;
+			return;
+		}
+		const next = getAriaLabelledBy(labelSourceRef.value, generatedLabelId.value);
+		if (fallbackAriaLabelledBy.value !== next) fallbackAriaLabelledBy.value = next;
+	});
+	return resolvedAriaLabelledBy;
+}
+function getAriaLabelledBy(labelSource, generatedLabelId) {
+	const label = findAssociatedLabel(labelSource);
+	if (!label) return;
+	if (!label.id && generatedLabelId) label.id = generatedLabelId;
+	return label.id || void 0;
+}
+function findAssociatedLabel(labelSource) {
+	if (!labelSource) return;
+	const parent = labelSource.parentElement;
+	if (parent && parent.tagName === "LABEL") return parent;
+	const controlId = labelSource.id;
+	if (controlId) {
+		const nextSibling = labelSource.nextElementSibling;
+		if (nextSibling && nextSibling.htmlFor === controlId) return nextSibling;
+	}
+	const labels = labelSource.labels;
+	return labels && labels[0] ? labels[0] : void 0;
+}
+
+//#endregion
+//#region src/utils/visuallyHidden.ts
+const visuallyHiddenBase = {
+	clipPath: "inset(50%)",
+	overflow: "hidden",
+	whiteSpace: "nowrap",
+	border: 0,
+	padding: 0,
+	width: 1,
+	height: 1,
+	margin: -1
+};
+const visuallyHidden = {
+	...visuallyHiddenBase,
+	position: "fixed",
+	top: 0,
+	left: 0
+};
+const visuallyHiddenInput = {
+	...visuallyHiddenBase,
+	position: "absolute"
+};
+
+//#endregion
+//#region src/checkbox/root/CheckboxRoot.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"form",
+	"name",
+	"value"
+];
+/**
+* Represents the checkbox itself.
+* Renders a `<span>` element and a hidden `<input>` beside.
+*
+* Documentation: [Base UI Vue Checkbox](https://baseui-vue.com/docs/components/checkbox)
+*/
+var CheckboxRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "CheckboxRoot",
+	inheritAttrs: false,
+	__name: "CheckboxRoot",
+	props: {
+		id: {
+			type: String,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		checked: {
+			type: Boolean,
+			required: false
+		},
+		defaultChecked: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		indeterminate: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		inputRef: {
+			type: null,
+			required: false
+		},
+		parent: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		uncheckedValue: {
+			type: String,
+			required: false
+		},
+		value: {
+			type: String,
+			required: false
+		},
+		"aria-labelledby": {
+			type: String,
+			required: false
+		},
+		nativeButton: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		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
+		}
+	},
+	emits: ["checkedChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrsObject = (0, vue.useAttrs)();
+		const instance = (0, vue.getCurrentInstance)();
+		const controlSource = Symbol("checkbox-control");
+		const { clearErrors } = require_checkbox_group_CheckboxGroup.useFormContext();
+		const { disabled: rootDisabled, name: fieldName, setDirty, setFilled, setFocused, setTouched, state: fieldState, validationMode, validityData, shouldValidateOnChange, validation: localValidation } = require_checkbox_group_CheckboxGroup.useFieldRootContext();
+		const fieldItemContext = useFieldItemContext();
+		const labelableContext = require_checkbox_group_CheckboxGroup.useLabelableContext();
+		const groupContext = require_checkbox_group_CheckboxGroup.useCheckboxGroupContext(true);
+		const parentContext = (0, vue.computed)(() => groupContext?.parent);
+		const isGroupedWithParent = (0, vue.computed)(() => Boolean(parentContext.value && groupContext && groupContext.allValues.value !== void 0));
+		const disabled = (0, vue.computed)(() => rootDisabled.value || fieldItemContext.disabled.value || groupContext?.disabled.value || props.disabled);
+		const name = (0, vue.computed)(() => fieldName.value ?? props.name);
+		const checkboxValue = (0, vue.computed)(() => props.value !== void 0 ? props.value : name.value);
+		const rootElementId = require_checkbox_group_CheckboxGroup.useBaseUiId();
+		const generatedInputId = require_checkbox_group_CheckboxGroup.useBaseUiId();
+		const groupParentId = require_checkbox_group_CheckboxGroup.useBaseUiId();
+		const inputId = (0, vue.computed)(() => {
+			if (isGroupedWithParent.value && parentContext.value) {
+				if (props.parent) return parentContext.value.id ?? groupParentId;
+			}
+			if (props.id) return props.id;
+			return labelableContext.controlId.value ?? generatedInputId;
+		});
+		(0, vue.watchEffect)((onCleanup) => {
+			labelableContext.registerControlId(controlSource, inputId.value);
+			onCleanup(() => {
+				labelableContext.registerControlId(controlSource, void 0);
+			});
+		});
+		(0, vue.watch)(() => ({
+			groupedWithParent: isGroupedWithParent.value,
+			checkboxValue: checkboxValue.value,
+			inputId: inputId.value,
+			isParent: props.parent
+		}), (nextState, _prevState, onCleanup) => {
+			if (!nextState.groupedWithParent || !groupContext || nextState.isParent || nextState.checkboxValue === void 0) return;
+			groupContext.parent.registerChildControlId(nextState.checkboxValue, nextState.inputId);
+			onCleanup(() => {
+				groupContext.parent.registerChildControlId(nextState.checkboxValue, void 0);
+			});
+		}, { immediate: true });
+		const groupProps = (0, vue.computed)(() => {
+			if (!isGroupedWithParent.value || !groupContext) return {};
+			if (props.parent) return groupContext.parent.getParentProps();
+			if (checkboxValue.value !== void 0) return groupContext.parent.getChildProps(checkboxValue.value);
+			return {};
+		});
+		const hasCheckedProp = (0, vue.computed)(() => Boolean(instance?.vnode.props && Object.prototype.hasOwnProperty.call(instance.vnode.props, "checked")));
+		const groupChecked = (0, vue.computed)(() => {
+			const checked = groupProps.value.checked;
+			return checked === void 0 ? hasCheckedProp.value ? props.checked : void 0 : checked;
+		});
+		const groupIndeterminate = (0, vue.computed)(() => {
+			const indeterminate = groupProps.value.indeterminate;
+			return indeterminate === void 0 ? props.indeterminate : indeterminate;
+		});
+		const validation = groupContext?.validation ?? localValidation;
+		const { value: checked, setValue: setCheckedState } = require_checkbox_group_CheckboxGroup.useControllableState({
+			controlled: () => {
+				if (groupContext && !props.parent && checkboxValue.value !== void 0) return groupContext.value.value.includes(checkboxValue.value);
+				return groupChecked.value;
+			},
+			default: () => groupContext && !props.parent && checkboxValue.value !== void 0 ? groupContext.defaultValue.value.includes(checkboxValue.value) : props.defaultChecked,
+			name: "CheckboxRoot",
+			state: "checked"
+		});
+		const computedChecked = (0, vue.computed)(() => isGroupedWithParent.value ? Boolean(groupChecked.value) : checked.value);
+		const computedIndeterminate = (0, vue.computed)(() => isGroupedWithParent.value ? Boolean(groupIndeterminate.value || props.indeterminate) : props.indeterminate);
+		const controlRef = (0, vue.ref)(null);
+		const inputElementRef = (0, vue.ref)(null);
+		require_checkbox_group_CheckboxGroup.useField({
+			enabled: (0, vue.computed)(() => !groupContext),
+			id: (0, vue.computed)(() => rootElementId),
+			commit: (value) => validation.commit(value),
+			value: checked,
+			controlRef,
+			name,
+			getValue: () => checked.value
+		});
+		const ariaLabelledBy = useAriaLabelledBy({
+			ariaLabelledBy: (0, vue.computed)(() => props["aria-labelledby"]),
+			labelId: labelableContext.labelId,
+			labelSourceRef: inputElementRef,
+			enableFallback: !props.nativeButton,
+			labelSourceId: inputId
+		});
+		(0, vue.watchEffect)(() => {
+			if (inputElementRef.value) inputElementRef.value.indeterminate = computedIndeterminate.value;
+		});
+		(0, vue.watchEffect)(() => {
+			if (computedChecked.value) setFilled(true);
+		});
+		(0, vue.watchEffect)(() => {
+			if (!inputElementRef.value) return;
+			validation.setInputRef(inputElementRef.value);
+		});
+		(0, vue.watch)(() => checked.value, (nextChecked) => {
+			if (groupContext) return;
+			clearErrors(name.value);
+			setFilled(nextChecked);
+			setDirty(nextChecked !== validityData.value.initialValue);
+			if (shouldValidateOnChange()) validation.commit(nextChecked);
+			else validation.commit(nextChecked, true);
+		}, { flush: "sync" });
+		(0, vue.watch)(() => ({
+			parentContext: parentContext.value,
+			checkboxValue: checkboxValue.value,
+			disabled: disabled.value
+		}), (nextState, _prevState, onCleanup) => {
+			if (!nextState.parentContext || nextState.checkboxValue === void 0) return;
+			const checkboxKey = nextState.checkboxValue;
+			const nextDisabledStates = new Map(nextState.parentContext.disabledStatesRef.value);
+			nextDisabledStates.set(checkboxKey, nextState.disabled);
+			nextState.parentContext.disabledStatesRef.value = nextDisabledStates;
+			onCleanup(() => {
+				if (!nextState.parentContext) return;
+				const cleanupDisabledStates = new Map(nextState.parentContext.disabledStatesRef.value);
+				cleanupDisabledStates.delete(checkboxKey);
+				nextState.parentContext.disabledStatesRef.value = cleanupDisabledStates;
+			});
+		}, { immediate: true });
+		const { getButtonProps, buttonRef } = require_button_Button.useButton({
+			disabled,
+			native: (0, vue.computed)(() => props.nativeButton)
+		});
+		function combineDescriptionProps(localProps, validationProps) {
+			const localDescribedBy = localProps["aria-describedby"];
+			const validationDescribedBy = validationProps["aria-describedby"];
+			const describedBy = Array.from(new Set([localDescribedBy, validationDescribedBy].filter(Boolean).flatMap((value) => String(value).split(/\s+/).filter(Boolean)))).join(" ") || void 0;
+			return {
+				...localProps,
+				...validationProps,
+				"aria-describedby": describedBy
+			};
+		}
+		function applyCheckedChange(nextChecked, event, onApplied) {
+			const details = createChangeEventDetails(REASONS.none, event);
+			emit("checkedChange", nextChecked, details);
+			if (details.isCanceled) return false;
+			groupProps.value.onCheckedChange?.(nextChecked, details);
+			onApplied?.();
+			setCheckedState(nextChecked);
+			if (groupContext && !isGroupedWithParent.value && !props.parent && checkboxValue.value !== void 0) {
+				const currentValue = groupContext.value.value.slice();
+				const nextValue = nextChecked ? Array.from(new Set([...currentValue, checkboxValue.value])) : currentValue.filter((item) => item !== checkboxValue.value);
+				groupContext.setValue(nextValue, details);
+			}
+			return true;
+		}
+		function handleInputChange(event) {
+			const target = event.currentTarget;
+			if (props.readOnly || disabled.value || !props.parent && props.indeterminate && !groupContext) {
+				event.preventDefault();
+				event.stopPropagation();
+				target.checked = computedChecked.value;
+				target.indeterminate = computedIndeterminate.value;
+				return;
+			}
+			if (!applyCheckedChange(target.checked, event)) {
+				target.checked = computedChecked.value;
+				target.indeterminate = computedIndeterminate.value;
+			}
+		}
+		function handleRootClick(event) {
+			if (props.readOnly || disabled.value || !props.parent && props.indeterminate) return;
+			event.preventDefault();
+			const nextChecked = !computedChecked.value;
+			applyCheckedChange(nextChecked, event, () => {
+				if (inputElementRef.value) inputElementRef.value.checked = nextChecked;
+			});
+		}
+		function handleFocus() {
+			setFocused(true);
+		}
+		function handleBlur() {
+			setTouched(true);
+			setFocused(false);
+			if (validationMode.value === "onBlur") validation.commit(groupContext ? groupContext.value.value : checked.value);
+		}
+		const state = (0, vue.computed)(() => ({
+			...fieldState.value,
+			checked: computedChecked.value,
+			disabled: disabled.value,
+			readOnly: props.readOnly,
+			required: props.required,
+			indeterminate: computedIndeterminate.value
+		}));
+		(0, vue.provide)(checkboxRootContextKey, state);
+		const stateAttributesMapping = useCheckboxStateAttributesMapping(state);
+		const mergedRootRef = require_button_Button.useMergedRefs(buttonRef, controlRef, groupContext?.registerControlRef);
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state,
+			props: (0, vue.computed)(() => {
+				const localDescriptionProps = labelableContext.getDescriptionProps();
+				const validationProps = validation.getValidationProps();
+				return require_button_Button.mergeProps(getButtonProps({ onClick: handleRootClick }), combineDescriptionProps(localDescriptionProps, validationProps), groupProps.value["aria-controls"] ? { "aria-controls": groupProps.value["aria-controls"] } : require_button_Button.EMPTY_OBJECT, {
+					"id": groupProps.value.id ?? (props.nativeButton ? inputId.value : rootElementId),
+					"role": "checkbox",
+					"aria-checked": computedIndeterminate.value ? "mixed" : computedChecked.value,
+					"aria-readonly": props.readOnly || void 0,
+					"aria-required": props.required || void 0,
+					"aria-labelledby": ariaLabelledBy.value,
+					"data-parent": props.parent ? "" : void 0,
+					"onFocus": handleFocus,
+					"onBlur": handleBlur
+				}, attrsObject);
+			}),
+			stateAttributesMapping,
+			defaultTagName: "span",
+			ref: mergedRootRef
+		});
+		const inputProps = (0, vue.computed)(() => {
+			const localDescriptionProps = labelableContext.getDescriptionProps();
+			const validationProps = groupContext ? validation.getValidationProps() : validation.getInputValidationProps();
+			return require_button_Button.mergeProps({
+				"checked": computedChecked.value,
+				"disabled": disabled.value,
+				"form": props.form,
+				"name": props.parent ? void 0 : name.value,
+				"id": props.nativeButton ? void 0 : inputId.value,
+				"required": props.required,
+				"ref": require_button_Button.useMergedRefs(inputElementRef, props.inputRef),
+				"type": "checkbox",
+				"aria-hidden": true,
+				"tabindex": -1,
+				"style": name.value ? visuallyHiddenInput : visuallyHidden,
+				"onChange": handleInputChange,
+				onFocus() {
+					controlRef.value?.focus();
+				}
+			}, checkboxValue.value !== void 0 ? { value: groupContext ? computedChecked.value ? checkboxValue.value : "" : checkboxValue.value } : require_button_Button.EMPTY_OBJECT, combineDescriptionProps(localDescriptionProps, validationProps));
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
+				(0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+					key: 0,
+					ref: (0, vue.unref)(renderRef),
+					props: (0, vue.unref)(mergedProps),
+					state: state.value
+				}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+					key: 1,
+					ref: (0, vue.unref)(renderRef)
+				}, (0, vue.unref)(mergedProps)), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { state: state.value })]),
+					_: 3
+				}, 16)),
+				!computedChecked.value && !(0, vue.unref)(groupContext) && name.value && !__props.parent && __props.uncheckedValue !== void 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("input", {
+					key: 2,
+					type: "hidden",
+					form: __props.form,
+					name: name.value,
+					value: __props.uncheckedValue
+				}, null, 8, _hoisted_1)) : (0, vue.createCommentVNode)("v-if", true),
+				(0, vue.createElementVNode)("input", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(inputProps.value)), null, 16)
+			], 64);
+		};
+	}
+});
+
+//#endregion
+//#region src/checkbox/root/CheckboxRoot.vue
+var CheckboxRoot_default = CheckboxRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/checkbox/indicator/CheckboxIndicatorDataAttributes.ts
+let CheckboxIndicatorDataAttributes = /* @__PURE__ */ function(CheckboxIndicatorDataAttributes) {
+	/**
+	* Present when the checkbox is checked.
+	*/
+	CheckboxIndicatorDataAttributes["checked"] = "data-checked";
+	/**
+	* Present when the checkbox is not checked.
+	*/
+	CheckboxIndicatorDataAttributes["unchecked"] = "data-unchecked";
+	/**
+	* Present when the checkbox is in an indeterminate state.
+	*/
+	CheckboxIndicatorDataAttributes["indeterminate"] = "data-indeterminate";
+	/**
+	* Present when the checkbox is disabled.
+	*/
+	CheckboxIndicatorDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the checkbox is readonly.
+	*/
+	CheckboxIndicatorDataAttributes["readonly"] = "data-readonly";
+	/**
+	* Present when the checkbox is required.
+	*/
+	CheckboxIndicatorDataAttributes["required"] = "data-required";
+	/**
+	* Present when the checkbox indicator is animating in.
+	*/
+	CheckboxIndicatorDataAttributes[CheckboxIndicatorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+	/**
+	* Present when the checkbox indicator is animating out.
+	*/
+	CheckboxIndicatorDataAttributes[CheckboxIndicatorDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+	/**
+	* Present when the checkbox is in valid state (when wrapped in FieldRoot).
+	*/
+	CheckboxIndicatorDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the checkbox is in invalid state (when wrapped in FieldRoot).
+	*/
+	CheckboxIndicatorDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the checkbox has been touched (when wrapped in FieldRoot).
+	*/
+	CheckboxIndicatorDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the checkbox's value has changed (when wrapped in FieldRoot).
+	*/
+	CheckboxIndicatorDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the checkbox is checked (when wrapped in FieldRoot).
+	*/
+	CheckboxIndicatorDataAttributes["filled"] = "data-filled";
+	/**
+	* Present when the checkbox is focused (when wrapped in FieldRoot).
+	*/
+	CheckboxIndicatorDataAttributes["focused"] = "data-focused";
+	return CheckboxIndicatorDataAttributes;
+}({});
+
+//#endregion
+//#region src/checkbox/index.ts
+const Checkbox = {
+	Root: CheckboxRoot_default,
+	Indicator: CheckboxIndicator_default
+};
+
+//#endregion
+Object.defineProperty(exports, 'AnimationFrame', {
+  enumerable: true,
+  get: function () {
+    return AnimationFrame;
+  }
+});
+Object.defineProperty(exports, 'Checkbox', {
+  enumerable: true,
+  get: function () {
+    return Checkbox;
+  }
+});
+Object.defineProperty(exports, 'CheckboxIndicatorDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return CheckboxIndicatorDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'CheckboxIndicator_default', {
+  enumerable: true,
+  get: function () {
+    return CheckboxIndicator_default;
+  }
+});
+Object.defineProperty(exports, 'CheckboxRootDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return CheckboxRootDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'CheckboxRoot_default', {
+  enumerable: true,
+  get: function () {
+    return CheckboxRoot_default;
+  }
+});
+Object.defineProperty(exports, 'REASONS', {
+  enumerable: true,
+  get: function () {
+    return REASONS;
+  }
+});
+Object.defineProperty(exports, 'checkboxRootContextKey', {
+  enumerable: true,
+  get: function () {
+    return checkboxRootContextKey;
+  }
+});
+Object.defineProperty(exports, 'createChangeEventDetails', {
+  enumerable: true,
+  get: function () {
+    return createChangeEventDetails;
+  }
+});
+Object.defineProperty(exports, 'createGenericEventDetails', {
+  enumerable: true,
+  get: function () {
+    return createGenericEventDetails;
+  }
+});
+Object.defineProperty(exports, 'fieldItemContextKey', {
+  enumerable: true,
+  get: function () {
+    return fieldItemContextKey;
+  }
+});
+Object.defineProperty(exports, 'transitionStatusMapping', {
+  enumerable: true,
+  get: function () {
+    return transitionStatusMapping;
+  }
+});
+Object.defineProperty(exports, 'useAnimationFrame', {
+  enumerable: true,
+  get: function () {
+    return useAnimationFrame;
+  }
+});
+Object.defineProperty(exports, 'useAnimationsFinished', {
+  enumerable: true,
+  get: function () {
+    return useAnimationsFinished;
+  }
+});
+Object.defineProperty(exports, 'useAriaLabelledBy', {
+  enumerable: true,
+  get: function () {
+    return useAriaLabelledBy;
+  }
+});
+Object.defineProperty(exports, 'useCheckboxRootContext', {
+  enumerable: true,
+  get: function () {
+    return useCheckboxRootContext;
+  }
+});
+Object.defineProperty(exports, 'useFieldItemContext', {
+  enumerable: true,
+  get: function () {
+    return useFieldItemContext;
+  }
+});
+Object.defineProperty(exports, 'useOpenChangeComplete', {
+  enumerable: true,
+  get: function () {
+    return useOpenChangeComplete;
+  }
+});
+Object.defineProperty(exports, 'useTransitionStatus', {
+  enumerable: true,
+  get: function () {
+    return useTransitionStatus;
+  }
+});
+Object.defineProperty(exports, 'visuallyHidden', {
+  enumerable: true,
+  get: function () {
+    return visuallyHidden;
+  }
+});
+Object.defineProperty(exports, 'visuallyHiddenInput', {
+  enumerable: true,
+  get: function () {
+    return visuallyHiddenInput;
+  }
+});
+//# sourceMappingURL=index.cjs.map