ropav 0.1.6 → 0.1.8

package/dist/popover.js

@@ -1,54 +1,56 @@
 import './popover.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as mergeAriaIdRefs } from "./aria.js";
+import { i as isNodeWithinElement } from "./events.js";
 import { n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
+import { t as getFloatingOffsetStyle } from "./floatingOffset.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
-import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.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";
-var DEFAULT_ROLE = "dialog";
+import { t as useFloatingPosition } from "./useFloatingPosition.js";
+import { t as useFloatingTargetLifecycle } from "./useFloatingTargetLifecycle.js";
+import { n as useTeleportTarget } from "./useTeleportTarget.js";
+import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, nextTick, on, onBeforeUnmount, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, template, unref, useAttrs, useId, useSlots, watch } from "vue";
+//#region src/components/popover/usePopoverBindings.ts
 var TARGET_ATTRIBUTES = [
 	"aria-controls",
 	"aria-expanded",
 	"aria-haspopup"
 ];
-function addIdReference(currentValue, id) {
-	const ids = (currentValue ?? "").split(/\s+/).filter(Boolean);
-	if (!ids.includes(id)) ids.push(id);
-	return ids.join(" ");
-}
-function snapshotAttributes(element) {
-	const snapshot = {};
-	for (const attribute of TARGET_ATTRIBUTES) snapshot[attribute] = element.getAttribute(attribute);
-	return snapshot;
-}
-function restoreAttributes(element, snapshot) {
-	for (const attribute of TARGET_ATTRIBUTES) {
-		const value = snapshot[attribute];
-		if (value == null) element.removeAttribute(attribute);
-		else element.setAttribute(attribute, value);
-	}
-}
 function applyTargetAttributes(element, snapshot, options) {
-	element.setAttribute("aria-controls", addIdReference(snapshot["aria-controls"], options.id));
+	element.setAttribute("aria-controls", mergeAriaIdRefs(snapshot.get("aria-controls"), options.id) ?? "");
 	element.setAttribute("aria-expanded", String(options.expanded));
 	element.setAttribute("aria-haspopup", options.role);
 }
+function usePopoverBindings({ targetLifecycle, popoverId, popoverRole, isVisible, isDisabled, onTriggerClick }) {
+	targetLifecycle.bindTarget({
+		listeners: [["click", onTriggerClick]],
+		attributes: {
+			names: TARGET_ATTRIBUTES,
+			isActive: () => !isDisabled.value,
+			apply: (target, snapshot) => {
+				applyTargetAttributes(target, snapshot, {
+					id: popoverId.value,
+					expanded: isVisible.value,
+					role: popoverRole.value
+				});
+			}
+		}
+	});
+}
+//#endregion
+//#region src/components/popover/usePopover.ts
+var DEFAULT_PLACEMENT = "bottom";
+var DEFAULT_ROLE = "dialog";
+var POPOVER_OFFSET_PROPERTIES = {
+	mainAxis: "--_rp-popover-main-axis-offset",
+	crossAxis: "--_rp-popover-cross-axis-offset"
+};
 function isFocusTrapContainer(value) {
 	return typeof HTMLElement !== "undefined" && value instanceof HTMLElement || typeof SVGElement !== "undefined" && value instanceof SVGElement;
 }
-function resolveOffsetStyle(offset) {
-	if (offset == null) return void 0;
-	if (typeof offset === "number") return { "--_rp-popover-main-axis-offset": `${offset}px` };
-	const style = {};
-	if (offset.mainAxis != null) style["--_rp-popover-main-axis-offset"] = `${offset.mainAxis}px`;
-	if (offset.crossAxis != null) style["--_rp-popover-cross-axis-offset"] = `${offset.crossAxis}px`;
-	return Object.keys(style).length > 0 ? style : void 0;
-}
 function usePopover(props, emitOpenChange) {
 	const slots = useSlots();
 	const attrs = useAttrs();
@@ -65,9 +67,11 @@ 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 targetLifecycle = useFloatingTargetLifecycle({
+		target: () => props.target,
+		fallback: rootRef
+	});
+	const { isExplicitTarget, reference, targetElement } = targetLifecycle;
 	const hasContent = computed(() => Boolean(slots.content || isExplicitTarget.value && slots.default));
 	const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));
 	const isOpen = controllableOpen.value;
@@ -108,12 +112,7 @@ function usePopover(props, emitOpenChange) {
 		flipOptions: () => props.flipOptions,
 		shift: () => props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
-		autoUpdateOptions: () => props.autoUpdateOptions,
-		restartKey: () => [
-			Boolean(props.teleport),
-			teleportTo.value,
-			teleportPositioningKey.value
-		]
+		autoUpdateOptions: () => props.autoUpdateOptions
 	});
 	const placementSide = computed(() => floating.actualPlacement.value.split("-")[0]);
 	const rootClass = computed(() => bem("rp-popover", {
@@ -125,7 +124,7 @@ function usePopover(props, emitOpenChange) {
 	}));
 	const contentStyle = computed(() => ({
 		...floating.floatingStyle.value,
-		...resolveOffsetStyle(props.offset),
+		...getFloatingOffsetStyle(props.offset, POPOVER_OFFSET_PROPERTIES),
 		zIndex: layer.zIndex.value
 	}));
 	const triggerProps = computed(() => ({
@@ -187,31 +186,31 @@ function usePopover(props, emitOpenChange) {
 		event.stopPropagation();
 		closePopover();
 	}
-	function isEventInsidePopover(event) {
-		return layer.isInside(event, [rootRef.value, targetElement.value]);
-	}
 	function onCompositeFocusout(event) {
 		const nextTarget = event.relatedTarget;
-		if (nextTarget instanceof Node && (rootRef.value?.contains(nextTarget) || contentRef.value?.contains(nextTarget) || targetElement.value?.contains(nextTarget))) return;
+		if (isNodeWithinElement(nextTarget, rootRef.value) || isNodeWithinElement(nextTarget, contentRef.value) || isNodeWithinElement(nextTarget, targetElement.value)) return;
 		const listener = attrs.onFocusout;
 		const listeners = Array.isArray(listener) ? listener : [listener];
 		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;
+	function onDocumentClick() {
+		if (props.closeOnOutsideClick === false) return;
 		closePopoverWithoutReturnFocus();
 	}
-	function onDocumentPointerDown(event) {
-		if (!layer.isTopLayer()) return;
-		if (props.closeOnOutsideClick === false || isEventInsidePopover(event)) return;
+	function onDocumentPointerDown() {
+		if (props.closeOnOutsideClick === false) return;
 		closePopoverWithoutReturnFocus();
 	}
-	function onDocumentKeydown(event) {
-		if (!layer.isTopLayer()) return;
-		if (props.closeOnEscape === false || event.key !== "Escape") return;
+	function onDocumentKeydown() {
+		if (props.closeOnEscape === false) return;
 		closePopover();
 	}
+	const disconnectLayerInteraction = layer.connectInteraction({
+		inside: () => [rootRef.value, targetElement.value],
+		clickOutside: onDocumentClick,
+		pointerDownOutside: onDocumentPointerDown,
+		escapeKeyDown: onDocumentKeydown
+	});
 	watch(isDisabled, (disabled) => {
 		if (disabled) closePopover();
 	});
@@ -227,44 +226,15 @@ function usePopover(props, emitOpenChange) {
 		flush: "post",
 		immediate: true
 	});
-	watch([isExplicitTarget, targetElement], ([explicit, target], _previous, onCleanup) => {
-		if (!explicit || !target) return;
-		target.addEventListener("click", onTriggerClick);
-		onCleanup(() => target.removeEventListener("click", onTriggerClick));
-	}, { flush: "sync" });
-	watch([
-		isExplicitTarget,
-		targetElement,
+	usePopoverBindings({
+		targetLifecycle,
 		popoverId,
 		popoverRole,
 		isVisible,
-		isDisabled
-	], ([explicit, target, id, role, visible, disabled], _previous, onCleanup) => {
-		if (!explicit || !target || disabled) return;
-		const snapshot = snapshotAttributes(target);
-		applyTargetAttributes(target, snapshot, {
-			id,
-			expanded: visible,
-			role
-		});
-		onCleanup(() => restoreAttributes(target, snapshot));
-	}, { flush: "sync" });
-	watch(isVisible, (visible, _previous, onCleanup) => {
-		if (!visible || typeof document === "undefined") return;
-		document.addEventListener("click", onDocumentClick, true);
-		document.addEventListener("mousedown", onDocumentPointerDown, true);
-		document.addEventListener("touchstart", onDocumentPointerDown, true);
-		document.addEventListener("keydown", onDocumentKeydown);
-		onCleanup(() => {
-			document.removeEventListener("click", onDocumentClick, true);
-			document.removeEventListener("mousedown", onDocumentPointerDown, true);
-			document.removeEventListener("touchstart", onDocumentPointerDown, true);
-			document.removeEventListener("keydown", onDocumentKeydown);
-		});
-	}, {
-		flush: "sync",
-		immediate: true
+		isDisabled,
+		onTriggerClick
 	});
+	onBeforeUnmount(disconnectLayerInteraction);
 	return {
 		rootRef,
 		contentRef,
@@ -298,10 +268,9 @@ function usePopover(props, emitOpenChange) {
 }
 //#endregion
 //#region src/components/popover/popover.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-8af57bff class=rp-popover__arrow aria-hidden=true>");
-var t1 = template("<section data-v-8af57bff>");
-var t2 = template("<span data-v-8af57bff>", 1);
-delegateEvents("focusout");
+var t0 = template("<span data-v-519e9856 class=rp-popover__arrow aria-hidden=true>");
+var t1 = template("<section data-v-519e9856>");
+var t2 = template("<span data-v-519e9856>", 1);
 //#endregion
 //#region src/components/popover/popover.vue
 var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -380,12 +349,17 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		const { rootRef, contentRef, arrowRef, popoverId, isDisabled, isTargetMode, popoverRole, ariaLabel, ariaLabelledby, ariaDescribedby, shouldRenderContent, shouldShowContent, rootClass, contentStyle, slotProps, contentSlotProps, actualPlacement, placementSide, arrowStyle, teleportTo, onCompositeFocusout } = usePopover(props, (open) => {
 			emit("update:open", open);
 		});
+		const templateRefs = {
+			root: rootRef,
+			content: contentRef,
+			arrow: arrowRef
+		};
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const publicRootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
 			onFocusout: onCompositeFocusout,
 			"data-state": slotProps.value.isOpen ? "open" : "closed",
-			"data-disabled": presence(isDisabled.value)
+			"data-disabled": toPresenceAttribute(isDisabled.value)
 		}, {}, ["onFocusout"]));
 		const styledTriggerProps = computed(() => {
 			const partAttrs = getPartAttrs("trigger");
@@ -394,7 +368,7 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				...props.classNames?.trigger !== void 0 ? { class: partAttrs.class } : {},
 				...props.styles?.trigger !== void 0 ? { style: partAttrs.style } : {},
 				"data-state": slotProps.value.isOpen ? "open" : "closed",
-				"data-disabled": presence(isDisabled.value)
+				"data-disabled": toPresenceAttribute(isDisabled.value)
 			};
 		});
 		const contentAttrs = computed(() => ({
@@ -458,23 +432,23 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 					setInsertionState(n13, null, 1);
 					createIf(() => __props.arrow, () => {
 						const n12 = t0();
-						_setTemplateRef(n12, arrowRef, null, "arrowRef");
 						renderEffect(() => {
 							setAttr(n12, "data-side", unref(placementSide));
 							setStyle(n12, unref(arrowStyle));
+							_setTemplateRef(n12, templateRefs.arrow);
 						});
 						return n12;
 					});
 					applyVShow(n13, () => unref(shouldShowContent));
-					n13.$evtfocusout = createInvoker((e) => unref(onCompositeFocusout)(e));
-					_setTemplateRef(n13, contentRef, null, "contentRef");
+					on(n13, "focusout", (e) => unref(onCompositeFocusout)(e));
+					setTemplateRefBinding(n13, () => templateRefs.content, _setTemplateRef);
 					return n13;
 				}, null, 129);
 			}, { _: 8 }));
 		});
-		setStaticTemplateRef(n16, rootRef, null, "rootRef");
+		setTemplateRefBinding(n16, () => templateRefs.root);
 		return n16;
 	}
-}), [["__scopeId", "data-v-8af57bff"]]);
+}), [["__scopeId", "data-v-519e9856"]]);
 //#endregion
 export { popover_default as t };

package/dist/progress.js

@@ -1,11 +1,12 @@
 import './progress.css';
-import { n as useStylesApi } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { r as getComponentColorValue, t as componentColors } from "./componentColors.js";
+import { n as getValuePercent, t as clamp } from "./number.js";
+import { i as getComponentColorValue, t as componentColors } from "./componentColors.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
-//#region src/components/progress/useProgress.ts
+//#region src/components/progress/progressModel.ts
 function normalizeProgressBounds(min, max) {
 	const safeMin = Number.isFinite(min) ? min : 0;
 	const safeMax = Number.isFinite(max) ? max : 100;
@@ -18,15 +19,9 @@ function normalizeProgressBounds(min, max) {
 	};
 }
 function normalizeProgressValue(value, min, max) {
-	const safeValue = Number.isFinite(value) ? Number(value) : min;
-	return Math.min(max, Math.max(min, safeValue));
-}
-function getProgressValuePercent(value, min, max) {
-	if (max <= min) return 0;
-	const percent = (value - min) / (max - min) * 100;
-	return Math.min(100, Math.max(0, percent));
+	return clamp(Number.isFinite(value) ? Number(value) : min, min, max);
 }
-function getFormattedProgressValue(value, percent, formatter) {
+function formatProgressValue(value, percent, formatter) {
 	return formatter ? formatter(value, percent) : `${Math.round(percent)}%`;
 }
 function getProgressAriaValueText(value, percent, ariaValueText, formatter) {
@@ -34,13 +29,15 @@ function getProgressAriaValueText(value, percent, ariaValueText, formatter) {
 	if (ariaValueText != null && ariaValueText !== "") return String(ariaValueText);
 	if (formatter) return String(formatter(value, percent));
 }
+//#endregion
+//#region src/components/progress/useProgress.ts
 function useProgress(props) {
 	const control = useControlState(props);
 	const bounds = computed(() => normalizeProgressBounds(props.min, props.max));
 	const isIndeterminate = computed(() => props.indeterminate || props.value == null);
 	const normalizedValue = computed(() => normalizeProgressValue(props.value, bounds.value.min, bounds.value.max));
-	const valuePercent = computed(() => getProgressValuePercent(normalizedValue.value, bounds.value.min, bounds.value.max));
-	const formattedValue = computed(() => getFormattedProgressValue(normalizedValue.value, valuePercent.value, props.formatValue));
+	const valuePercent = computed(() => getValuePercent(normalizedValue.value, bounds.value.min, bounds.value.max));
+	const formattedValue = computed(() => formatProgressValue(normalizedValue.value, valuePercent.value, props.formatValue));
 	const ariaValueText = computed(() => isIndeterminate.value ? void 0 : getProgressAriaValueText(normalizedValue.value, valuePercent.value, props.ariaValueText, props.formatValue));
 	return {
 		control,

package/dist/query.js

@@ -0,0 +1,40 @@
+//#region src/utils/dom/query.ts
+function isElement(value) {
+	if (value == null || typeof value !== "object") return false;
+	if (typeof Element !== "undefined" && value instanceof Element) return true;
+	const candidate = value;
+	const ElementConstructor = ("ownerDocument" in value ? candidate.ownerDocument : null)?.defaultView?.Element;
+	if (ElementConstructor && value instanceof ElementConstructor) return true;
+	return candidate.nodeType === 1 && typeof candidate.getAttribute === "function";
+}
+function matchesSelectorSafe(element, selector) {
+	try {
+		return element.matches(selector);
+	} catch {
+		return false;
+	}
+}
+function getQueryRoot(root) {
+	if (root !== void 0) return root;
+	return typeof document !== "undefined" ? document : null;
+}
+function querySelectorSafe(selector, root) {
+	const queryRoot = getQueryRoot(root);
+	if (!queryRoot) return null;
+	try {
+		return queryRoot.querySelector(selector);
+	} catch {
+		return null;
+	}
+}
+function querySelectorAllSafe(selector, root) {
+	const queryRoot = getQueryRoot(root);
+	if (!queryRoot) return [];
+	try {
+		return Array.from(queryRoot.querySelectorAll(selector));
+	} catch {
+		return [];
+	}
+}
+//#endregion
+export { querySelectorSafe as i, matchesSelectorSafe as n, querySelectorAllSafe as r, isElement as t };

package/dist/radio.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-radio[data-v-0cdcdcfa] {
+.rp-radio[data-v-d1001176] {
     --_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-0cdcdcfa] {
+.rp-radio--disabled[data-v-d1001176] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-radio[data-v-0cdcdcfa] {
+.rp-radio[data-v-d1001176] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-radio-font-size);
 }
-.rp-radio__native[data-v-0cdcdcfa] {
+.rp-radio__native[data-v-d1001176] {
     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-0cdcdcfa] {
+.rp-radio__native:focus-visible + .rp-radio__dot[data-v-d1001176] {
     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-0cdcdcfa] {
+.rp-radio__dot[data-v-d1001176] {
     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-0cdcdcfa]::after {
+.rp-radio__dot[data-v-d1001176]::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-0cdcdcfa] {
+.rp-radio--checked .rp-radio__dot[data-v-d1001176] {
     background-color: var(--_rp-radio-checked-bg);
     border-color: var(--_rp-radio-checked-border);
 }
-.rp-radio--checked .rp-radio__dot[data-v-0cdcdcfa]::after {
+.rp-radio--checked .rp-radio__dot[data-v-d1001176]::after {
     transform: scale(1);
 }
-.rp-radio__label[data-v-0cdcdcfa] {
+.rp-radio__label[data-v-d1001176] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-radio--outline[data-v-0cdcdcfa] {
+.rp-radio--outline[data-v-d1001176] {
     --_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-0cdcdcfa] {
+.rp-radio--size-xs[data-v-d1001176] {
     --_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-0cdcdcfa] {
+.rp-radio--size-sm[data-v-d1001176] {
     --_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-0cdcdcfa] {
+.rp-radio--size-md[data-v-d1001176] {
     --_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-0cdcdcfa] {
+.rp-radio--size-lg[data-v-d1001176] {
     --_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-0cdcdcfa] {
+.rp-radio--size-xl[data-v-d1001176] {
     --_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-fc40a22d] {
+.rp-radio-group[data-v-9c16fa9f] {
     display: flex;
     flex-direction: column;
     gap: var(--rp-spacing-3);
     font-family: var(--rp-font-family);
 }
-.rp-radio-group[data-orientation=horizontal][data-v-fc40a22d] {
+.rp-radio-group[data-orientation=horizontal][data-v-9c16fa9f] {
     flex-flow: row wrap;
 }
 }

package/dist/radio.js

@@ -1,10 +1,12 @@
 import './radio.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { i as getComponentContrastColor, r as getComponentColorValue } from "./componentColors.js";
+import { n as getComponentCheckedColorStyle } from "./componentColors.js";
 import { i as useFormControl } from "./useFormControl.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
 import { t as useControlState } from "./useControlState.js";
 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
@@ -18,18 +20,6 @@ var radioGroupParts = ["root"];
 var radioGroupKey = Symbol("radioGroup");
 //#endregion
 //#region src/components/radio/useRadio.ts
-function getRadioColorStyle(color, autoContrast, contrastColor) {
-	const colorValue = getComponentColorValue(color);
-	if (color && !colorValue) return void 0;
-	if (!colorValue && autoContrast === false && contrastColor === void 0) return void 0;
-	const style = {};
-	if (colorValue) style["--_rp-radio-color"] = colorValue;
-	if (autoContrast !== false || contrastColor !== void 0) style["--_rp-radio-on-color"] = getComponentContrastColor(color ?? "primary", {
-		autoContrast,
-		contrastColor
-	});
-	return style;
-}
 function useRadio(props, emitChange) {
 	const inputRef = ref(null);
 	const control = useControlState(props);
@@ -52,7 +42,13 @@ function useRadio(props, emitChange) {
 		[variant.value ?? ""]: Boolean(variant.value),
 		[`size-${size.value}`]: Boolean(size.value)
 	}));
-	const rootStyle = computed(() => getRadioColorStyle(color.value, autoContrast.value, contrastColor.value));
+	const rootStyle = computed(() => getComponentCheckedColorStyle({
+		color: color.value,
+		autoContrast: autoContrast.value,
+		contrastColor: contrastColor.value,
+		colorProperty: "--_rp-radio-color",
+		checkedColorProperty: "--_rp-radio-on-color"
+	}));
 	function onSelect(event) {
 		if (isDisabled.value) return;
 		group?.select(props.value);
@@ -190,8 +186,8 @@ function useRadioGroup(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/radio/radio.vue?vue&type=script&setup=true&vapor=true&lang.ts
-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);
+var t0$1 = template("<span data-v-d1001176>");
+var t1 = template("<label data-v-d1001176><input data-v-d1001176><span data-v-d1001176></span>", 1);
 //#endregion
 //#region src/components/radio/radio.vue
 var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -244,26 +240,24 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
 			style: rootStyle.value,
-			"data-disabled": presence(isDisabled.value),
-			"data-invalid": presence(isInvalid.value),
+			"data-disabled": toPresenceAttribute(isDisabled.value),
+			"data-invalid": toPresenceAttribute(isInvalid.value),
 			"data-state": isChecked.value ? "checked" : "unchecked"
 		}));
 		const nativeInputAttrs = computed(() => {
-			const { class: groupClass, style: groupStyle, onChange: groupOnChange, ...groupForwardedAttrs } = groupInputAttrs.value ?? {};
-			const { class: itemClass, style: itemStyle, onChange: itemOnChange, ...itemForwardedAttrs } = props.inputAttrs ?? {};
+			const groupAttrs = groupInputAttrs.value ?? {};
+			const itemAttrs = props.inputAttrs ?? {};
+			const { compatibilityClass: groupClass, compatibilityStyle: groupStyle, forwardedAttributes: groupForwardedAttributes } = splitCompatibilityAttributes(groupAttrs);
+			const { compatibilityClass: itemClass, compatibilityStyle: itemStyle, forwardedAttributes: itemForwardedAttributes } = splitCompatibilityAttributes(itemAttrs);
 			return {
-				...groupForwardedAttrs,
-				...itemForwardedAttrs,
+				...groupForwardedAttributes,
+				...itemForwardedAttributes,
 				...getPartAttrs("input", {
 					class: "rp-radio__native",
 					compatibilityClass: [groupClass, itemClass],
 					compatibilityStyle: [groupStyle, itemStyle]
 				}),
-				onChange(event) {
-					onSelect(event);
-					groupOnChange?.(event);
-					itemOnChange?.(event);
-				}
+				onChange: composeEventHandlers(onSelect, groupAttrs.onChange, itemAttrs.onChange)
 			};
 		});
 		__expose({
@@ -280,7 +274,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			const _isChecked = unref(isChecked);
 			const _isDisabled = unref(isDisabled);
 			const _isInvalid = unref(isInvalid);
-			const _presence = unref(presence);
+			const _toPresenceAttribute = unref(toPresenceAttribute);
 			setDynamicProps(n6, [rootAttrs.value]);
 			setDynamicProps(n0, [_nativeInputAttrs, {
 				id: _control.id,
@@ -296,8 +290,8 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				"aria-describedby": _control.ariaDescribedby,
 				"aria-invalid": _isInvalid || void 0,
 				"aria-required": unref(isRequired) || void 0,
-				"data-disabled": _presence(_isDisabled),
-				"data-invalid": _presence(_isInvalid),
+				"data-disabled": _toPresenceAttribute(_isDisabled),
+				"data-invalid": _toPresenceAttribute(_isInvalid),
 				"data-state": _isChecked ? "checked" : "unchecked"
 			}]);
 			setDynamicProps(n1, [unref(getPartAttrs)("indicator", { class: "rp-radio__dot" })]);
@@ -312,10 +306,10 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n6;
 	}
-}), [["__scopeId", "data-v-0cdcdcfa"]]);
+}), [["__scopeId", "data-v-d1001176"]]);
 //#endregion
 //#region src/components/radio/radio-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-fc40a22d>", 1);
+var t0 = template("<div data-v-9c16fa9f>", 1);
 //#endregion
 //#region src/components/radio/radio-group.vue
 var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -370,8 +364,8 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			class: rootClass.value,
 			role: "radiogroup",
 			"data-orientation": props.orientation,
-			"data-disabled": presence(control.disabled),
-			"data-invalid": presence(control.invalid),
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid),
 			"aria-label": props.ariaLabel || void 0,
 			"aria-labelledby": control.ariaLabelledby,
 			"aria-describedby": control.ariaDescribedby,
@@ -385,6 +379,6 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		createSlot("default", null, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-fc40a22d"]]);
+}), [["__scopeId", "data-v-9c16fa9f"]]);
 //#endregion
 export { radioParts as i, radio_default as n, radioGroupParts as r, radio_group_default as t };