ropav 0.0.11 → 0.0.13

package/dist/number-input.js

@@ -3,9 +3,10 @@ import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as minus_default } from "./minus.js";
+import { i as useFormControl, n as provideNestedFormControlOwner, o as useControllableValue } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as input_default } from "./input.js";
-import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, delegateEvents, markRaw, on, renderEffect, setDynamicProps, setInsertionState, template, unref, withModifiers, withVaporModifiers } from "vue";
+import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, delegateEvents, markRaw, on, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref, withModifiers, withVaporModifiers } from "vue";
 //#region ~icons/lucide/plus
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M5 12h14m-7-7v14\">", 3, 1);
 function render(_ctx) {
@@ -76,11 +77,12 @@ function normalizeNumberInputTextAlign(textAlign) {
 function getModelInputValue(value) {
 	return value !== null && Number.isFinite(value) ? String(normalizeZero(value)) : "";
 }
-function useNumberInput(props, emitUpdate) {
+function useNumberInput(props, emitUpdate, getValue = () => props.modelValue ?? null) {
 	const control = useControlState(props);
 	const bounds = computed(() => normalizeNumberInputBounds(props.min, props.max));
 	const nativeStep = computed(() => normalizeNumberInputStep(props.step));
-	const modelInputValue = computed(() => getModelInputValue(props.modelValue));
+	const currentValue = computed(getValue);
+	const modelInputValue = computed(() => getModelInputValue(currentValue.value));
 	const isInteractive = computed(() => !control.disabled && !props.readonly);
 	const controlsPosition = computed(() => normalizeNumberInputControlsPosition(props.controlsPosition));
 	const textAlign = computed(() => normalizeNumberInputTextAlign(props.textAlign));
@@ -107,17 +109,17 @@ function useNumberInput(props, emitUpdate) {
 	}));
 	const canIncrement = computed(() => {
 		if (!isInteractive.value) return false;
-		if (props.modelValue === null || !Number.isFinite(props.modelValue)) return true;
-		return bounds.value.max === void 0 || props.modelValue < bounds.value.max;
+		if (currentValue.value === null || !Number.isFinite(currentValue.value)) return true;
+		return bounds.value.max === void 0 || currentValue.value < bounds.value.max;
 	});
 	const canDecrement = computed(() => {
 		if (!isInteractive.value) return false;
-		if (props.modelValue === null || !Number.isFinite(props.modelValue)) return true;
-		return bounds.value.min === void 0 || props.modelValue > bounds.value.min;
+		if (currentValue.value === null || !Number.isFinite(currentValue.value)) return true;
+		return bounds.value.min === void 0 || currentValue.value > bounds.value.min;
 	});
 	function emitStep(direction) {
 		if (!(direction === 1 ? canIncrement.value : canDecrement.value)) return false;
-		const current = Number.isFinite(props.modelValue) ? props.modelValue : null;
+		const current = Number.isFinite(currentValue.value) ? currentValue.value : null;
 		const next = stepNumberInputValue(current, direction, nativeStep.value, bounds.value);
 		if (current !== null && next === current) return false;
 		emitUpdate(next);
@@ -187,10 +189,10 @@ function useNumberInput(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/number-input/number-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<button data-v-3cef367f><span data-v-3cef367f class=rp-number-input__control-icon aria-hidden=true></button>");
-var t1 = template("<span data-v-3cef367f class=\"rp-number-input__controls rp-number-input__controls--left\">");
-var t2 = template("<button data-v-3cef367f><span data-v-3cef367f class=rp-number-input__control-icon aria-hidden=true>");
-var t3 = template("<span data-v-3cef367f class=\"rp-number-input__controls rp-number-input__controls--right\">");
+var t0 = template("<button data-v-eb2db673><span data-v-eb2db673 class=rp-number-input__control-icon aria-hidden=true></button>");
+var t1 = template("<span data-v-eb2db673 class=\"rp-number-input__controls rp-number-input__controls--left\">");
+var t2 = template("<button data-v-eb2db673><span data-v-eb2db673 class=rp-number-input__control-icon aria-hidden=true>");
+var t3 = template("<span data-v-eb2db673 class=\"rp-number-input__controls rp-number-input__controls--right\">");
 delegateEvents("mousedown");
 //#endregion
 //#region src/components/number-input/number-input.vue
@@ -201,7 +203,9 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: null },
 		min: {},
 		max: {},
 		step: { default: 1 },
@@ -252,7 +256,28 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { control, rootClass, nativeInputAttrs, modelInputValue, leftControls, rightControls, canIncrement, canDecrement, increment, decrement, onInputUpdate } = useNumberInput(props, (value) => emit("update:modelValue", value));
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const inputComponentRef = ref(null);
+		provideNestedFormControlOwner();
+		const { control, rootClass, nativeInputAttrs, modelInputValue, leftControls, rightControls, canIncrement, canDecrement, increment, decrement, onInputUpdate } = useNumberInput(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		useFormControl({
+			elements: () => [inputComponentRef.value?.nativeElement],
+			isControlled: () => controllable.isControlled.value,
+			initializeDefault(element) {
+				element.defaultValue = getModelInputValue(controllable.initialValue);
+			},
+			validationMessage: () => props.validationMessage,
+			readResetValue(elements) {
+				controllable.resetValue(parseNumberInputValue(elements[0].value));
+			},
+			syncControlledValue(elements) {
+				elements[0].value = getModelInputValue(controllable.value.value);
+			}
+		});
 		const { attrs, getPartAttrs } = useStylesApi(props, "root");
 		const inputClassNames = computed(() => ({
 			root: [rootClass.value, props.classNames?.root],
@@ -283,9 +308,10 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		function onControlClick(event, controlType) {
 			if (controlType === "increment" ? increment() : decrement()) focusNativeInput(event);
 		}
-		return createComponent(input_default, { $: [() => unref(attrs), {
+		const n30 = createComponent(input_default, { $: [() => unref(attrs), {
 			id: () => unref(control).id,
 			name: () => __props.name,
+			form: () => unref(control).form,
 			"model-value": () => unref(modelInputValue),
 			type: "number",
 			size: () => __props.size,
@@ -381,8 +407,10 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				return n28;
 			}
 		} : void 0] }, true);
+		setStaticTemplateRef(n30, inputComponentRef, null, "inputComponentRef");
+		return n30;
 	}
-}), [["__scopeId", "data-v-3cef367f"]]);
+}), [["__scopeId", "data-v-eb2db673"]]);
 //#endregion
 //#region src/components/number-input/types.ts
 var numberInputParts = [

package/dist/popover.css

@@ -1,15 +1,15 @@
 @layer ropav.components {
 .rp-popover[data-v-8af57bff] {
-    --_rp-popover-main-axis-offset: var(--rp-spacing-2);
-    --_rp-popover-cross-axis-offset: 0px;
-    --_rp-popover-radius: var(--rp-radius-sm);
-    --_rp-popover-arrow-size: 0.5rem;
     position: relative;
     display: inline-flex;
     font-family: var(--rp-font-family);
     vertical-align: middle;
 }
 .rp-popover__content[data-v-8af57bff] {
+    --_rp-popover-main-axis-offset: var(--rp-spacing-2);
+    --_rp-popover-cross-axis-offset: 0px;
+    --_rp-popover-radius: var(--rp-radius-sm);
+    --_rp-popover-arrow-size: 0.5rem;
     position: absolute;
     z-index: 100;
     box-sizing: border-box;

package/dist/popover.js

@@ -2,9 +2,10 @@ import './popover.css';
 import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as useOverlayLayer } from "./useOverlayLayer.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
 import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
-import { n as useTeleportTarget } from "./useTeleportTarget.js";
+import { n as useTeleportPositioningKey, r as useTeleportTarget } from "./useTeleportTarget.js";
 import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, isRef, nextTick, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, template, unref, useAttrs, useId, useSlots, watch } from "vue";
 //#region src/components/popover/usePopover.ts
 var DEFAULT_PLACEMENT = "bottom";
@@ -14,14 +15,6 @@ var TARGET_ATTRIBUTES = [
 	"aria-expanded",
 	"aria-haspopup"
 ];
-var TABBABLE_SELECTOR = [
-	"a[href]",
-	"button:not([disabled])",
-	"input:not([disabled])",
-	"select:not([disabled])",
-	"textarea:not([disabled])",
-	"[tabindex]:not([tabindex=\"-1\"])"
-].join(",");
 function addIdReference(currentValue, id) {
 	const ids = (currentValue ?? "").split(/\s+/).filter(Boolean);
 	if (!ids.includes(id)) ids.push(id);
@@ -67,12 +60,18 @@ function usePopover(props, emitOpenChange) {
 	const placement = computed(() => props.placement ?? DEFAULT_PLACEMENT);
 	const popoverRole = computed(() => props.role ?? DEFAULT_ROLE);
 	const teleportTo = useTeleportTarget(() => props.teleportTo);
+	const teleportPositioningKey = useTeleportPositioningKey();
 	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
 	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
 	const hasContent = computed(() => Boolean(slots.content || isExplicitTarget.value && slots.default));
 	const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));
 	const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
 	const isVisible = computed(() => isOpen.value && !isDisabled.value);
+	const layer = useOverlayLayer({
+		active: isVisible,
+		element: contentRef,
+		baseZIndex: 100
+	});
 	const shouldRenderContent = computed(() => !isDisabled.value && (Boolean(props.keepMounted) || isVisible.value));
 	const shouldShowContent = computed(() => !props.keepMounted || isVisible.value);
 	const ariaLabel = computed(() => props.ariaLabel || void 0);
@@ -82,7 +81,11 @@ function usePopover(props, emitOpenChange) {
 		const content = contentRef.value;
 		if (!content) return null;
 		const trigger = targetElement.value ?? rootRef.value;
-		return isFocusTrapContainer(trigger) ? [trigger, content] : content;
+		return isFocusTrapContainer(trigger) ? [
+			trigger,
+			content,
+			...layer.focusBranches.value
+		] : [content, ...layer.focusBranches.value];
 	});
 	const floating = useFloatingPosition({
 		reference,
@@ -93,10 +96,15 @@ function usePopover(props, emitOpenChange) {
 		strategy: () => props.strategy ?? "absolute",
 		offset: () => props.offset,
 		flip: () => props.flip !== false,
+		flipOptions: () => props.flipOptions,
 		shift: () => props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
-		arrowEnabled: () => Boolean(props.arrow),
-		restartKey: () => teleportTo.value
+		autoUpdateOptions: () => props.autoUpdateOptions,
+		restartKey: () => [
+			Boolean(props.teleport),
+			teleportTo.value,
+			teleportPositioningKey.value
+		]
 	});
 	const placementSide = computed(() => floating.actualPlacement.value.split("-")[0]);
 	const rootClass = computed(() => bem("rp-popover", {
@@ -108,7 +116,8 @@ function usePopover(props, emitOpenChange) {
 	}));
 	const contentStyle = computed(() => ({
 		...floating.floatingStyle.value,
-		...resolveOffsetStyle(props.offset)
+		...resolveOffsetStyle(props.offset),
+		zIndex: layer.zIndex.value
 	}));
 	const triggerProps = computed(() => ({
 		"aria-controls": isDisabled.value ? void 0 : popoverId.value,
@@ -167,14 +176,12 @@ function usePopover(props, emitOpenChange) {
 		togglePopover();
 	}
 	function onTriggerKeydown(event) {
-		if (event.key !== "Escape") return;
+		if (event.key !== "Escape" || !isVisible.value) return;
 		event.stopPropagation();
 		closePopover();
 	}
 	function isEventInsidePopover(event) {
-		const eventTarget = event.target;
-		if (typeof Node === "undefined" || !(eventTarget instanceof Node)) return false;
-		return Boolean(rootRef.value?.contains(eventTarget) || contentRef.value?.contains(eventTarget) || targetElement.value?.contains(eventTarget));
+		return layer.isInside(event, [rootRef.value, targetElement.value]);
 	}
 	function onCompositeFocusout(event) {
 		const nextTarget = event.relatedTarget;
@@ -184,37 +191,17 @@ function usePopover(props, emitOpenChange) {
 		for (const current of listeners) if (typeof current === "function") current(event);
 	}
 	function onDocumentClick(event) {
+		if (!layer.isTopLayer()) return;
 		if (props.closeOnOutsideClick === false || isEventInsidePopover(event)) return;
 		closePopoverWithoutReturnFocus();
 	}
 	function onDocumentPointerDown(event) {
-		if (!props.trapFocus) return;
+		if (!layer.isTopLayer()) return;
 		if (props.closeOnOutsideClick === false || isEventInsidePopover(event)) return;
 		closePopoverWithoutReturnFocus();
 	}
 	function onDocumentKeydown(event) {
-		if (props.trapFocus && event.key === "Tab") {
-			const containers = [targetElement.value ?? rootRef.value, contentRef.value];
-			const tabbables = [];
-			for (const container of containers) {
-				if (!container) continue;
-				if (container instanceof HTMLElement && container.matches(TABBABLE_SELECTOR)) tabbables.push(container);
-				tabbables.push(...container.querySelectorAll(TABBABLE_SELECTOR));
-			}
-			const active = event.target;
-			const first = tabbables[0];
-			const last = tabbables[tabbables.length - 1];
-			if (event.shiftKey && active === first && last) {
-				event.preventDefault();
-				last.focus();
-				return;
-			}
-			if (!event.shiftKey && active === last && first) {
-				event.preventDefault();
-				first.focus();
-				return;
-			}
-		}
+		if (!layer.isTopLayer()) return;
 		if (props.closeOnEscape === false || event.key !== "Escape") return;
 		closePopover();
 	}
@@ -359,11 +346,13 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			type: Boolean,
 			default: true
 		},
+		flipOptions: {},
 		shift: {
 			type: Boolean,
 			default: true
 		},
 		collisionPadding: { default: 8 },
+		autoUpdateOptions: {},
 		arrow: {
 			type: Boolean,
 			default: false

package/dist/radio.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-radio[data-v-d9c68210] {
+.rp-radio[data-v-0cdcdcfa] {
     --_rp-radio-color: var(--rp-color-control-selected-bg);
     --_rp-radio-on-color: var(--rp-color-control-selected-fg);
     --_rp-radio-default-size: 24px;
@@ -16,15 +16,15 @@
     font-family: var(--rp-font-family);
     user-select: none;
 }
-.rp-radio--disabled[data-v-d9c68210] {
+.rp-radio--disabled[data-v-0cdcdcfa] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-radio[data-v-d9c68210] {
+.rp-radio[data-v-0cdcdcfa] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-radio-font-size);
 }
-.rp-radio__native[data-v-d9c68210] {
+.rp-radio__native[data-v-0cdcdcfa] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -36,11 +36,11 @@
     border-width: 0;
     pointer-events: none;
 }
-.rp-radio__native:focus-visible + .rp-radio__dot[data-v-d9c68210] {
+.rp-radio__native:focus-visible + .rp-radio__dot[data-v-0cdcdcfa] {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-radio__dot[data-v-d9c68210] {
+.rp-radio__dot[data-v-0cdcdcfa] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -52,7 +52,7 @@
     background-color: var(--rp-color-control-bg);
     transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-radio__dot[data-v-d9c68210]::after {
+.rp-radio__dot[data-v-0cdcdcfa]::after {
     content: "";
     width: var(--_rp-radio-dot);
     height: var(--_rp-radio-dot);
@@ -61,55 +61,55 @@
     transform: scale(0);
     transition: transform var(--rp-transition-fast);
 }
-.rp-radio--checked .rp-radio__dot[data-v-d9c68210] {
+.rp-radio--checked .rp-radio__dot[data-v-0cdcdcfa] {
     background-color: var(--_rp-radio-checked-bg);
     border-color: var(--_rp-radio-checked-border);
 }
-.rp-radio--checked .rp-radio__dot[data-v-d9c68210]::after {
+.rp-radio--checked .rp-radio__dot[data-v-0cdcdcfa]::after {
     transform: scale(1);
 }
-.rp-radio__label[data-v-d9c68210] {
+.rp-radio__label[data-v-0cdcdcfa] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-radio--outline[data-v-d9c68210] {
+.rp-radio--outline[data-v-0cdcdcfa] {
     --_rp-radio-checked-bg: var(--rp-color-control-bg);
     --_rp-radio-checked-border: var(--_rp-radio-color);
     --_rp-radio-checked-dot: var(--_rp-radio-color);
 }
-.rp-radio--size-xs[data-v-d9c68210] {
+.rp-radio--size-xs[data-v-0cdcdcfa] {
     --_rp-radio-default-size: 16px;
     --_rp-radio-default-dot: 6px;
     --_rp-radio-font-size: var(--rp-font-size-xs);
 }
-.rp-radio--size-sm[data-v-d9c68210] {
+.rp-radio--size-sm[data-v-0cdcdcfa] {
     --_rp-radio-default-size: 20px;
     --_rp-radio-default-dot: 8px;
     --_rp-radio-font-size: var(--rp-font-size-sm);
 }
-.rp-radio--size-md[data-v-d9c68210] {
+.rp-radio--size-md[data-v-0cdcdcfa] {
     --_rp-radio-default-size: 24px;
     --_rp-radio-default-dot: 10px;
     --_rp-radio-font-size: var(--rp-font-size-md);
 }
-.rp-radio--size-lg[data-v-d9c68210] {
+.rp-radio--size-lg[data-v-0cdcdcfa] {
     --_rp-radio-default-size: 30px;
     --_rp-radio-default-dot: 14px;
     --_rp-radio-font-size: var(--rp-font-size-lg);
 }
-.rp-radio--size-xl[data-v-d9c68210] {
+.rp-radio--size-xl[data-v-0cdcdcfa] {
     --_rp-radio-default-size: 36px;
     --_rp-radio-default-dot: 16px;
     --_rp-radio-font-size: var(--rp-font-size-xl);
 }
 }@layer ropav.components {
-.rp-radio-group[data-v-a0fcf376] {
+.rp-radio-group[data-v-fc40a22d] {
     display: flex;
     flex-direction: column;
     gap: var(--rp-spacing-3);
     font-family: var(--rp-font-family);
 }
-.rp-radio-group[data-orientation=horizontal][data-v-a0fcf376] {
+.rp-radio-group[data-orientation=horizontal][data-v-fc40a22d] {
     flex-flow: row wrap;
 }
 }

package/dist/radio.js

@@ -3,8 +3,9 @@ import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { n as getComponentColorValue, r as getComponentContrastColor } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { i as useFormControl, o as useControllableValue } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createSlot, defineVaporComponent, inject, next, provide, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref, useId } from "vue";
+import { child, computed, createIf, createSlot, defineVaporComponent, inject, next, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, shallowRef, template, unref, useId } from "vue";
 //#region src/components/radio/types.ts
 var radioParts = [
 	"root",
@@ -34,6 +35,7 @@ function useRadio(props, emitChange) {
 	const isRequired = computed(() => props.required ?? group?.required ?? false);
 	const isInvalid = computed(() => props.invalid ?? group?.invalid ?? false);
 	const name = computed(() => props.name ?? group?.name);
+	const form = computed(() => props.form ?? group?.form);
 	const variant = computed(() => props.variant ?? group?.variant);
 	const color = computed(() => props.color ?? group?.color);
 	const autoContrast = computed(() => props.autoContrast ?? group?.autoContrast);
@@ -54,10 +56,35 @@ function useRadio(props, emitChange) {
 	function focus(options) {
 		inputRef.value?.focus(options);
 	}
+	let unregister;
+	onMounted(() => {
+		if (group && inputRef.value) unregister = group.register({
+			input: inputRef.value,
+			value: () => props.value,
+			disabled: () => isDisabled.value,
+			checked: () => isChecked.value,
+			validationMessage: () => props.validationMessage
+		});
+	});
+	onBeforeUnmount(() => unregister?.());
+	useFormControl({
+		elements: () => group ? [] : [inputRef.value],
+		isControlled: () => true,
+		initializeDefault(element) {
+			element.defaultChecked = isChecked.value;
+		},
+		validationMessage: () => props.validationMessage,
+		readResetValue() {},
+		syncControlledValue(elements) {
+			elements[0].checked = isChecked.value;
+		}
+	});
 	return {
 		inputRef,
 		control,
 		name,
+		form,
+		groupInputAttrs: computed(() => group?.inputAttrs),
 		isChecked,
 		isDisabled,
 		isRequired,
@@ -70,19 +97,54 @@ function useRadio(props, emitChange) {
 }
 function useRadioGroup(props, emitUpdate) {
 	const control = useControlState(props);
+	const registrations = shallowRef([]);
+	const controllable = useControllableValue({
+		modelValue: () => props.modelValue,
+		defaultValue: () => props.defaultValue ?? null,
+		onChange: emitUpdate
+	});
 	const rootClass = computed(() => bem("rp-radio-group", {
 		disabled: control.disabled,
 		invalid: control.invalid
 	}));
 	const generatedName = useId();
 	const groupName = computed(() => props.name ?? `${control.id ?? generatedName}-radio`);
+	function register(registration) {
+		registrations.value = [...registrations.value, registration];
+		return () => {
+			registrations.value = registrations.value.filter((item) => item !== registration);
+		};
+	}
+	useFormControl({
+		elements: () => registrations.value.map((registration) => registration.input),
+		isControlled: () => controllable.isControlled.value,
+		initializeDefault(element) {
+			element.defaultChecked = registrations.value.find((item) => item.input === element)?.value() === controllable.initialValue;
+		},
+		validationMessage(element) {
+			const enabled = registrations.value.filter((registration) => !registration.disabled());
+			const anchor = enabled.find((registration) => registration.checked()) ?? enabled[0];
+			const registration = registrations.value.find((item) => item.input === element);
+			return registration?.validationMessage() ?? (registration === anchor ? props.validationMessage : void 0);
+		},
+		readResetValue(elements) {
+			const checked = registrations.value.find((registration) => elements.includes(registration.input) && registration.input.checked);
+			controllable.resetValue(checked?.value() ?? null);
+		},
+		syncControlledValue() {
+			for (const registration of registrations.value) registration.input.checked = registration.value() === controllable.value.value;
+		}
+	});
 	provide(radioGroupKey, {
 		get modelValue() {
-			return props.modelValue;
+			return controllable.value.value;
 		},
 		get name() {
 			return groupName.value;
 		},
+		get form() {
+			return control.form;
+		},
 		get disabled() {
 			return control.disabled;
 		},
@@ -104,19 +166,24 @@ function useRadioGroup(props, emitUpdate) {
 		get size() {
 			return props.size;
 		},
+		get inputAttrs() {
+			return props.inputAttrs;
+		},
 		select(value) {
-			emitUpdate(value);
-		}
+			controllable.setValue(value);
+		},
+		register
 	});
 	return {
 		control,
-		rootClass
+		rootClass,
+		value: controllable.value
 	};
 }
 //#endregion
 //#region src/components/radio/radio.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<span data-v-d9c68210>");
-var t1 = template("<label data-v-d9c68210><input data-v-d9c68210><span data-v-d9c68210></span>", 1);
+var t0$1 = template("<span data-v-0cdcdcfa>");
+var t1 = template("<label data-v-0cdcdcfa><input data-v-0cdcdcfa><span data-v-0cdcdcfa></span>", 1);
 //#endregion
 //#region src/components/radio/radio.vue
 var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -126,6 +193,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 	props: {
 		id: {},
 		name: {},
+		form: {},
 		value: {},
 		checked: {
 			type: Boolean,
@@ -154,6 +222,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		describedby: {},
 		labelledby: {},
 		inputAttrs: {},
+		validationMessage: {},
 		classNames: {},
 		styles: {}
 	},
@@ -161,7 +230,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
-		const { inputRef, control, name, isChecked, isDisabled, isRequired, isInvalid, rootClass, rootStyle, onSelect, focus } = useRadio(props, (event) => emit("change", event));
+		const { inputRef, control, name, form, groupInputAttrs, isChecked, isDisabled, isRequired, isInvalid, rootClass, rootStyle, onSelect, focus } = useRadio(props, (event) => emit("change", event));
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
@@ -171,17 +240,20 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			"data-state": isChecked.value ? "checked" : "unchecked"
 		}));
 		const nativeInputAttrs = computed(() => {
-			const { class: compatibilityClass, style: compatibilityStyle, onChange: compatibilityOnChange, ...attrs } = props.inputAttrs ?? {};
+			const { class: groupClass, style: groupStyle, onChange: groupOnChange, ...groupForwardedAttrs } = groupInputAttrs.value ?? {};
+			const { class: itemClass, style: itemStyle, onChange: itemOnChange, ...itemForwardedAttrs } = props.inputAttrs ?? {};
 			return {
-				...attrs,
+				...groupForwardedAttrs,
+				...itemForwardedAttrs,
 				...getPartAttrs("input", {
 					class: "rp-radio__native",
-					compatibilityClass,
-					compatibilityStyle
+					compatibilityClass: [groupClass, itemClass],
+					compatibilityStyle: [groupStyle, itemStyle]
 				}),
 				onChange(event) {
 					onSelect(event);
-					compatibilityOnChange?.(event);
+					groupOnChange?.(event);
+					itemOnChange?.(event);
 				}
 			};
 		});
@@ -194,16 +266,18 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const n1 = next(n0, 1);
 		setStaticTemplateRef(n0, inputRef, null, "inputRef");
 		renderEffect(() => {
+			const _nativeInputAttrs = nativeInputAttrs.value;
 			const _control = unref(control);
 			const _isChecked = unref(isChecked);
 			const _isDisabled = unref(isDisabled);
 			const _isInvalid = unref(isInvalid);
 			const _presence = unref(presence);
 			setDynamicProps(n6, [rootAttrs.value]);
-			setDynamicProps(n0, [nativeInputAttrs.value, {
+			setDynamicProps(n0, [_nativeInputAttrs, {
 				id: _control.id,
 				type: "radio",
 				name: unref(name),
+				form: unref(form) ?? _nativeInputAttrs.form,
 				value: __props.value,
 				checked: _isChecked,
 				disabled: _isDisabled || void 0,
@@ -229,10 +303,10 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n6;
 	}
-}), [["__scopeId", "data-v-d9c68210"]]);
+}), [["__scopeId", "data-v-0cdcdcfa"]]);
 //#endregion
 //#region src/components/radio/radio-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-a0fcf376>", 1);
+var t0 = template("<div data-v-fc40a22d>", 1);
 //#endregion
 //#region src/components/radio/radio-group.vue
 var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -242,7 +316,9 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: null },
 		variant: { default: void 0 },
 		color: { default: void 0 },
 		autoContrast: {
@@ -266,6 +342,8 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		ariaLabel: {},
 		describedby: {},
 		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
 		classNames: {},
 		styles: {}
 	},
@@ -297,6 +375,6 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		createSlot("default", null, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-a0fcf376"]]);
+}), [["__scopeId", "data-v-fc40a22d"]]);
 //#endregion
 export { radioParts as i, radio_default as n, radioGroupParts as r, radio_group_default as t };