ropav 0.0.11 → 0.0.13

package/dist/slider.js

@@ -3,9 +3,10 @@ import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { n as getComponentColorValue, t as componentColors } 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 { i as useDelayedOpen, n as resolveTooltipColorStyleWithContrast, r as resolveTooltipOffsetStyle, t as tooltip_default } from "./tooltip.js";
-import { applyVShow, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, next, on, onBeforeUnmount, onMounted, ref, renderEffect, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setText, template, toDisplayString, toRef, txt, unref, useId, useSlots, watch } from "vue";
+import { applyVShow, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setText, template, toDisplayString, toRef, txt, unref, useId, useSlots, watch } from "vue";
 //#region src/components/slider/sliderCore.ts
 function normalizeSliderBounds(min, max) {
 	const safeMin = Number.isFinite(min) ? min : 0;
@@ -112,11 +113,11 @@ function getSliderTrackStyle(props, valuePercent) {
 	});
 	return style;
 }
-function useSlider(props, emitUpdate) {
+function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props.min) {
 	const control = useControlState(props);
 	const bounds = computed(() => normalizeSliderBounds(props.min, props.max));
 	const nativeStep = computed(() => normalizeSliderStep(props.step));
-	const normalizedValue = computed(() => normalizeSliderValue(props.modelValue, bounds.value.min, bounds.value.max, nativeStep.value));
+	const normalizedValue = computed(() => normalizeSliderValue(getValue(), bounds.value.min, bounds.value.max, nativeStep.value));
 	const valuePercent = computed(() => getSliderValuePercent(normalizedValue.value, bounds.value.min, bounds.value.max));
 	const formattedValue = computed(() => getFormattedSliderValue(normalizedValue.value, props.formatValue));
 	const ariaValueText = computed(() => getSliderAriaValueText(normalizedValue.value, props.ariaValueText, props.formatValue));
@@ -158,7 +159,8 @@ function useSlider(props, emitUpdate) {
 		marked: markItems.value.length > 0,
 		"marks-with-labels": hasMarkLabels.value,
 		"tooltip-always-visible": tooltipAlwaysVisible.value,
-		disabled: control.disabled
+		disabled: control.disabled,
+		invalid: control.invalid
 	}));
 	const trackStyle = computed(() => getSliderTrackStyle(props, valuePercent.value));
 	function onInput(e) {
@@ -256,14 +258,14 @@ function useSlider(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/slider/slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<span data-v-cf8192a8>");
-var t1$2 = template("<span data-v-cf8192a8 class=rp-slider__header>");
-var t2$2 = template("<span data-v-cf8192a8> ");
-var t3$2 = template("<span data-v-cf8192a8><span data-v-cf8192a8 class=rp-slider__mark-dot></span>");
-var t4$2 = template("<span data-v-cf8192a8 class=rp-slider__marks aria-hidden=true>");
-var t5$1 = template("<span data-v-cf8192a8><span data-v-cf8192a8 class=rp-slider__thumb-content>");
-var t6$1 = template("<span data-v-cf8192a8 class=rp-slider__tooltip-anchor aria-hidden=true>", 2);
-var t7$1 = template("<label data-v-cf8192a8><span data-v-cf8192a8><span data-v-cf8192a8></span><input data-v-cf8192a8>", 1);
+var t0$2 = template("<span data-v-a837ba72>");
+var t1$2 = template("<span data-v-a837ba72 class=rp-slider__header>");
+var t2$2 = template("<span data-v-a837ba72> ");
+var t3$2 = template("<span data-v-a837ba72><span data-v-a837ba72 class=rp-slider__mark-dot></span>");
+var t4$2 = template("<span data-v-a837ba72 class=rp-slider__marks aria-hidden=true>");
+var t5$1 = template("<span data-v-a837ba72><span data-v-a837ba72 class=rp-slider__thumb-content>");
+var t6$1 = template("<span data-v-a837ba72 class=rp-slider__tooltip-anchor aria-hidden=true>", 2);
+var t7$1 = template("<label data-v-a837ba72><span data-v-a837ba72><span data-v-a837ba72></span><input data-v-a837ba72>", 1);
 delegateEvents("pointerdown", "focusin", "focusout", "keydown");
 //#endregion
 //#region src/components/slider/slider.vue
@@ -274,7 +276,9 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
 		min: { default: 0 },
 		max: { default: 100 },
 		step: { default: 1 },
@@ -296,11 +300,20 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			type: Boolean,
 			default: void 0
 		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
 		ariaLabel: {},
 		ariaValueText: {},
 		describedby: {},
 		labelledby: {},
 		inputAttrs: {},
+		validationMessage: {},
 		classNames: {},
 		styles: {}
 	},
@@ -310,17 +323,38 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const emit = __emit;
 		const inputRef = ref(null);
 		const slots = useSlots();
-		const { control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, trackStyle, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipId, tooltipColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipContent, onInput, onTooltipPointerDown, onTooltipMouseEnter, onTooltipMouseLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => {
-			emit("update:modelValue", value);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue ?? props.min,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const { control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, trackStyle, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipId, tooltipColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipContent, onInput, onTooltipPointerDown, onTooltipMouseEnter, onTooltipMouseLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		useFormControl({
+			elements: () => [inputRef.value],
+			isControlled: () => controllable.isControlled.value,
+			initializeDefault(element) {
+				element.defaultValue = String(normalizeSliderValue(controllable.initialValue, nativeMin.value, nativeMax.value, nativeStep.value));
+			},
+			validationMessage: () => props.validationMessage,
+			readResetValue(elements) {
+				controllable.resetValue(elements[0].valueAsNumber);
+			},
+			syncControlledValue(elements) {
+				elements[0].value = String(normalizedValue.value);
+			}
 		});
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: [rootClass.value, { "rp-slider--custom-thumb": Boolean(slots.thumb) }],
 			style: trackStyle.value,
 			"data-disabled": presence(control.disabled),
+			"data-invalid": presence(control.invalid),
 			"data-orientation": props.orientation
 		}));
-		const tooltipClassNames = computed(() => ({ root: ["rp-slider__tooltip", props.classNames?.tooltip] }));
+		const tooltipClassNames = computed(() => ({
+			root: ["rp-slider__tooltip", props.classNames?.tooltip],
+			content: "rp-slider__tooltip-content"
+		}));
 		const tooltipStyles = computed(() => ({ root: props.styles?.tooltip }));
 		const nativeInputAttrs = computed(() => {
 			const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, ...attrs } = props.inputAttrs ?? {};
@@ -378,12 +412,16 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		_setTemplateRef(n12, inputRef, null, "inputRef");
 		renderEffect(() => {
 			const _getPartAttrs = unref(getPartAttrs);
+			const _nativeInputAttrs = nativeInputAttrs.value;
 			const _control = unref(control);
+			const _props = props;
+			const _props_required_nativeInputAttrs_required = _props.required ?? _nativeInputAttrs.required;
 			setDynamicProps(n31, [_getPartAttrs("track", { class: "rp-slider__track" })]);
 			setDynamicProps(n11, [_getPartAttrs("range", { class: "rp-slider__bar" }), { "aria-hidden": "true" }]);
-			setDynamicProps(n12, [nativeInputAttrs.value, {
+			setDynamicProps(n12, [_nativeInputAttrs, {
 				id: _control.id,
 				name: __props.name,
+				form: _control.form ?? _nativeInputAttrs.form,
 				type: "range",
 				value: unref(normalizedValue),
 				min: unref(nativeMin),
@@ -391,12 +429,16 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				step: unref(nativeStep),
 				orient: __props.orientation === "vertical" ? "vertical" : void 0,
 				disabled: _control.disabled || void 0,
+				required: _props_required_nativeInputAttrs_required,
 				"aria-label": __props.ariaLabel || void 0,
 				"aria-labelledby": _control.ariaLabelledby,
 				"aria-describedby": _control.ariaDescribedby,
 				"aria-orientation": __props.orientation === "vertical" ? "vertical" : void 0,
 				"aria-valuetext": unref(ariaValueText),
-				"data-disabled": unref(presence)(_control.disabled)
+				"aria-invalid": _props.invalid === void 0 ? _nativeInputAttrs["aria-invalid"] : _control.invalid || void 0,
+				"aria-required": _props_required_nativeInputAttrs_required,
+				"data-disabled": unref(presence)(_control.disabled),
+				"data-invalid": unref(presence)(_control.invalid)
 			}]);
 		});
 		setInsertionState(n31, null, 2);
@@ -465,7 +507,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		n31.$evtkeydown = createInvoker((e) => unref(onTooltipKeydown)(e));
 		return n32;
 	}
-}), [["__scopeId", "data-v-cf8192a8"]]);
+}), [["__scopeId", "data-v-a837ba72"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderTooltipCollision.ts
 var TOOLTIP_COLLISION_GAP = 4;
@@ -1151,7 +1193,7 @@ function getThumbInput(track, thumb) {
 function focusThumb(track, thumb) {
 	getThumbInput(track, thumb)?.focus({ preventScroll: true });
 }
-function useRangeSlider(props, emitUpdate) {
+function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ?? [props.min, props.max]) {
 	const control = useControlState(props);
 	const activeThumb = ref();
 	const bounds = computed(() => normalizeSliderBounds(props.min, props.max));
@@ -1163,7 +1205,7 @@ function useRangeSlider(props, emitUpdate) {
 	});
 	const hasManualNativeKeyboard = computed(() => valueStep.value !== "any" && nativeStep.value === "any");
 	const normalizedMinRange = computed(() => normalizeRangeSliderMinRange(props.minRange, bounds.value.min, bounds.value.max));
-	const normalizedValue = computed(() => normalizeRangeSliderValue(props.modelValue, bounds.value.min, bounds.value.max, valueStep.value, normalizedMinRange.value));
+	const normalizedValue = computed(() => normalizeRangeSliderValue(getValue(), bounds.value.min, bounds.value.max, valueStep.value, normalizedMinRange.value));
 	const valuePercent = computed(() => [getSliderValuePercent(normalizedValue.value[0], bounds.value.min, bounds.value.max), getSliderValuePercent(normalizedValue.value[1], bounds.value.min, bounds.value.max)]);
 	const formattedValue = computed(() => getFormattedRangeSliderValue(normalizedValue.value, props.formatValue));
 	const ariaLabels = computed(() => props.ariaLabel ?? ["Minimum", "Maximum"]);
@@ -1226,7 +1268,8 @@ function useRangeSlider(props, emitUpdate) {
 		marked: markItems.value.length > 0,
 		"marks-with-labels": hasMarkLabels.value,
 		"tooltip-always-visible": tooltipAlwaysVisible.value,
-		disabled: control.disabled
+		disabled: control.disabled,
+		invalid: control.invalid
 	}));
 	function getThumbUpdate(thumb, value, anchorValue = normalizedValue.value[getThumbIndex(getOppositeThumb(thumb))]) {
 		const safeValue = normalizeSliderValue(value, bounds.value.min, bounds.value.max, valueStep.value);
@@ -1379,14 +1422,14 @@ function useRangeSlider(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/slider/range-slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-c82ae6e8>");
-var t1 = template("<span data-v-c82ae6e8 class=rp-range-slider__header>");
-var t2 = template("<input data-v-c82ae6e8>");
-var t3 = template("<span data-v-c82ae6e8> ");
-var t4 = template("<span data-v-c82ae6e8><span data-v-c82ae6e8 class=rp-range-slider__mark-dot></span>");
-var t5 = template("<span data-v-c82ae6e8 class=rp-range-slider__marks aria-hidden=true>");
-var t6 = template("<span data-v-c82ae6e8><span data-v-c82ae6e8 class=rp-range-slider__thumb-content>");
-var t7 = template("<div data-v-c82ae6e8><span data-v-c82ae6e8><span data-v-c82ae6e8></span><!><span data-v-c82ae6e8 class=rp-range-slider__thumbs aria-hidden=true>", 1);
+var t0 = template("<span data-v-b0e2c3da>");
+var t1 = template("<span data-v-b0e2c3da class=rp-range-slider__header>");
+var t2 = template("<input data-v-b0e2c3da>");
+var t3 = template("<span data-v-b0e2c3da> ");
+var t4 = template("<span data-v-b0e2c3da><span data-v-b0e2c3da class=rp-range-slider__mark-dot></span>");
+var t5 = template("<span data-v-b0e2c3da class=rp-range-slider__marks aria-hidden=true>");
+var t6 = template("<span data-v-b0e2c3da><span data-v-b0e2c3da class=rp-range-slider__thumb-content>");
+var t7 = template("<div data-v-b0e2c3da><span data-v-b0e2c3da><span data-v-b0e2c3da></span><!><span data-v-b0e2c3da class=rp-range-slider__thumbs aria-hidden=true>", 1);
 delegateEvents("pointerdown");
 //#endregion
 //#region src/components/slider/range-slider.vue
@@ -1395,13 +1438,16 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	inheritAttrs: false,
 	__name: "range-slider",
 	props: {
-		modelValue: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
 		minRange: { default: 0 },
 		name: {},
 		ariaLabel: { default: () => ["Minimum", "Maximum"] },
 		ariaValueText: {},
 		inputAttrs: {},
+		validationMessage: {},
 		id: {},
+		form: {},
 		min: { default: 0 },
 		max: { default: 100 },
 		step: { default: 1 },
@@ -1423,6 +1469,14 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: Boolean,
 			default: void 0
 		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
 		describedby: {},
 		labelledby: {},
 		classNames: {},
@@ -1439,8 +1493,43 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const lowerInputRef = ref(null);
 		const upperInputRef = ref(null);
 		const labelId = computed(() => `${props.id ?? generatedId}-label`);
-		const { control, nativeMin, nativeMax, nativeStep, nativeNames, nativeIds, rootClass, normalizedValue, valuePercent, formattedValue, ariaLabels, ariaValueText, markItems, trackStyle, activeThumb, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipIds, mergedTooltipId, tooltipColor, tooltipOffset, tooltipArrow, tooltipContent, mergedTooltipContent, onInput, onTrackPointerDown, onTooltipFocus, onTooltipBlur, onTooltipTrackMouseEnter, onTooltipTrackMouseLeave, onTooltipKeydown } = useRangeSlider(props, (value) => {
-			emit("update:modelValue", value);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue ?? [props.min, props.max],
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const { control, nativeMin, nativeMax, nativeStep, nativeNames, nativeIds, rootClass, normalizedValue, valuePercent, formattedValue, ariaLabels, ariaValueText, markItems, trackStyle, activeThumb, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipIds, mergedTooltipId, tooltipColor, tooltipOffset, tooltipArrow, tooltipContent, mergedTooltipContent, onInput, onTrackPointerDown, onTooltipFocus, onTooltipBlur, onTooltipTrackMouseEnter, onTooltipTrackMouseLeave, onTooltipKeydown } = useRangeSlider(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		const validationMessages = computed(() => Array.isArray(props.validationMessage) ? props.validationMessage : [props.validationMessage, props.validationMessage]);
+		function normalizeInitialValue(value = controllable.initialValue) {
+			return normalizeRangeSliderValue(value, props.min, props.max, props.step, props.minRange);
+		}
+		useFormControl({
+			elements: () => [lowerInputRef.value, upperInputRef.value],
+			isControlled: () => controllable.isControlled.value,
+			initializeDefault(element, index) {
+				const initialValue = normalizeInitialValue();
+				element.defaultValue = String(initialValue[index]);
+			},
+			validationMessage: (_element, index) => validationMessages.value[index],
+			readResetValue(elements) {
+				const resetValue = [normalizedValue.value[0], normalizedValue.value[1]];
+				for (const element of elements) {
+					const index = element === upperInputRef.value ? 1 : 0;
+					resetValue[index] = Number(element.defaultValue);
+				}
+				const nextValue = normalizeInitialValue(resetValue);
+				controllable.resetValue(nextValue);
+				nextTick(() => {
+					if (lowerInputRef.value) lowerInputRef.value.value = String(nextValue[0]);
+					if (upperInputRef.value) upperInputRef.value.value = String(nextValue[1]);
+				});
+			},
+			syncControlledValue(elements) {
+				for (const element of elements) {
+					const index = element === upperInputRef.value ? 1 : 0;
+					element.value = String(normalizedValue.value[index]);
+				}
+			}
 		});
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
@@ -1452,9 +1541,12 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			role: "group",
 			"data-active-thumb": activeThumb.value || void 0,
 			"data-disabled": presence(control.disabled),
+			"data-invalid": presence(control.invalid),
 			"data-orientation": props.orientation,
 			"aria-labelledby": groupLabelledby.value,
-			"aria-describedby": control.ariaDescribedby
+			"aria-describedby": control.ariaDescribedby,
+			"aria-invalid": control.invalid || void 0,
+			"aria-required": control.required || void 0
 		}));
 		const inputAttrsByThumb = computed(() => {
 			if (Array.isArray(props.inputAttrs)) return props.inputAttrs;
@@ -1544,11 +1636,16 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		createFor(() => rangeSliderThumbs, (_for_item0, _for_key0) => {
 			const n14 = t2();
 			renderEffect(() => {
+				const _nativeInputAttrs = nativeInputAttrs.value;
 				const _index = _for_key0.value;
 				const _control = unref(control);
-				setDynamicProps(n14, [nativeInputAttrs.value[_index], {
+				const _props = props;
+				const _nativeInputAttrs_index = _nativeInputAttrs[_index];
+				const _props_required_nativeInputAttrs_index_required = _props.required ?? _nativeInputAttrs_index?.required;
+				setDynamicProps(n14, [_nativeInputAttrs_index, {
 					id: unref(nativeIds)[_index],
 					name: unref(nativeNames)[_index],
+					form: _control.form ?? _nativeInputAttrs_index?.form,
 					type: "range",
 					value: unref(normalizedValue)[_index],
 					min: unref(nativeMin)[_index],
@@ -1556,12 +1653,16 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					step: unref(nativeStep),
 					orient: __props.orientation === "vertical" ? "vertical" : void 0,
 					disabled: _control.disabled || void 0,
+					required: _props_required_nativeInputAttrs_index_required,
 					"aria-label": unref(ariaLabels)[_index],
 					"aria-describedby": _control.ariaDescribedby,
 					"aria-orientation": __props.orientation === "vertical" ? "vertical" : void 0,
 					"aria-valuetext": unref(ariaValueText)[_index],
+					"aria-invalid": _props.invalid === void 0 ? _nativeInputAttrs_index?.["aria-invalid"] : _control.invalid || void 0,
+					"aria-required": _props_required_nativeInputAttrs_index_required,
 					"data-thumb": _for_item0.value,
-					"data-disabled": unref(presence)(_control.disabled)
+					"data-disabled": unref(presence)(_control.disabled),
+					"data-invalid": unref(presence)(_control.invalid)
 				}]);
 				_setTemplateRef(n14, (element) => setInputRef(_index, element), true);
 			});
@@ -1640,7 +1741,7 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		on(n34, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
 		return n35;
 	}
-}), [["__scopeId", "data-v-c82ae6e8"]]);
+}), [["__scopeId", "data-v-b0e2c3da"]]);
 //#endregion
 //#region src/components/slider/types.ts
 var sliderParts = [

package/dist/switch.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-switch[data-v-403c12b8] {
+.rp-switch[data-v-d966892e] {
     --_rp-switch-color: var(--rp-color-control-selected-bg);
     --_rp-switch-font-size: var(--rp-font-size-md);
     --_rp-switch-default-track-width: 46px;
@@ -26,15 +26,15 @@
     font-family: var(--rp-font-family);
     user-select: none;
 }
-.rp-switch--disabled[data-v-403c12b8] {
+.rp-switch--disabled[data-v-d966892e] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-switch[data-v-403c12b8] {
+.rp-switch[data-v-d966892e] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-switch-font-size);
 }
-.rp-switch__native[data-v-403c12b8] {
+.rp-switch__native[data-v-d966892e] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -46,11 +46,11 @@
     border-width: 0;
     pointer-events: none;
 }
-.rp-switch__native:focus-visible + .rp-switch__track[data-v-403c12b8] {
+.rp-switch__native:focus-visible + .rp-switch__track[data-v-d966892e] {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-switch__track[data-v-403c12b8] {
+.rp-switch__track[data-v-d966892e] {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -61,17 +61,17 @@
     border-radius: var(--rp-radius-full);
     transition: background-color var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__track[data-v-403c12b8] {
+.rp-switch--checked .rp-switch__track[data-v-d966892e] {
     background-color: var(--_rp-switch-color);
 }
-.rp-switch--invalid .rp-switch__track[data-v-403c12b8] {
+.rp-switch--invalid .rp-switch__track[data-v-d966892e] {
     outline: var(--rp-border-width-thin) solid var(--_rp-switch-invalid-border);
     outline-offset: var(--_rp-switch-thumb-offset);
 }
-.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-403c12b8] {
+.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-d966892e] {
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-switch-invalid-ring);
 }
-.rp-switch__thumb[data-v-403c12b8] {
+.rp-switch__thumb[data-v-d966892e] {
     position: absolute;
     left: var(--_rp-switch-thumb-offset);
     width: var(--_rp-switch-thumb-size);
@@ -81,38 +81,38 @@
     box-shadow: var(--rp-shadow-sm);
     transition: transform var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__thumb[data-v-403c12b8] {
+.rp-switch--checked .rp-switch__thumb[data-v-d966892e] {
     transform: translateX(calc(var(--_rp-switch-track-width) - var(--_rp-switch-thumb-size) - var(--_rp-switch-thumb-offset) * 2));
 }
-.rp-switch__label[data-v-403c12b8] {
+.rp-switch__label[data-v-d966892e] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-switch--size-xs[data-v-403c12b8] {
+.rp-switch--size-xs[data-v-d966892e] {
     --_rp-switch-default-track-width: 32px;
     --_rp-switch-default-track-height: 16px;
     --_rp-switch-default-thumb-size: 12px;
     --_rp-switch-font-size: var(--rp-font-size-xs);
 }
-.rp-switch--size-sm[data-v-403c12b8] {
+.rp-switch--size-sm[data-v-d966892e] {
     --_rp-switch-default-track-width: 38px;
     --_rp-switch-default-track-height: 20px;
     --_rp-switch-default-thumb-size: 14px;
     --_rp-switch-font-size: var(--rp-font-size-sm);
 }
-.rp-switch--size-md[data-v-403c12b8] {
+.rp-switch--size-md[data-v-d966892e] {
     --_rp-switch-default-track-width: 46px;
     --_rp-switch-default-track-height: 24px;
     --_rp-switch-default-thumb-size: 18px;
     --_rp-switch-font-size: var(--rp-font-size-md);
 }
-.rp-switch--size-lg[data-v-403c12b8] {
+.rp-switch--size-lg[data-v-d966892e] {
     --_rp-switch-default-track-width: 56px;
     --_rp-switch-default-track-height: 30px;
     --_rp-switch-default-thumb-size: 22px;
     --_rp-switch-font-size: var(--rp-font-size-lg);
 }
-.rp-switch--size-xl[data-v-403c12b8] {
+.rp-switch--size-xl[data-v-d966892e] {
     --_rp-switch-default-track-width: 72px;
     --_rp-switch-default-track-height: 36px;
     --_rp-switch-default-thumb-size: 28px;

package/dist/switch.js

@@ -3,6 +3,7 @@ import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { n as getComponentColorValue } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { o as useControllableValue, r as useCheckedFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, createIf, createSlot, defineVaporComponent, next, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/switch/useSwitch.ts
@@ -11,11 +12,11 @@ function getSwitchColorStyle(color) {
 	if (!colorValue) return void 0;
 	return { "--_rp-switch-color": colorValue };
 }
-function useSwitch(props, emitUpdate) {
+function useSwitch(props, emitUpdate, getValue = () => props.modelValue ?? false) {
 	const inputRef = ref(null);
 	const control = useControlState(props);
 	const rootClass = computed(() => bem("rp-switch", {
-		checked: props.modelValue,
+		checked: getValue(),
 		disabled: control.disabled,
 		invalid: control.invalid,
 		[`size-${props.size}`]: Boolean(props.size)
@@ -38,8 +39,8 @@ function useSwitch(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/switch/switch.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-403c12b8>");
-var t1 = template("<label data-v-403c12b8><input data-v-403c12b8><span data-v-403c12b8><span data-v-403c12b8></span></span>", 1);
+var t0 = template("<span data-v-d966892e>");
+var t1 = template("<label data-v-d966892e><input data-v-d966892e><span data-v-d966892e><span data-v-d966892e></span></span>", 1);
 //#endregion
 //#region src/components/switch/switch.vue
 var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -49,7 +50,16 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	props: {
 		id: {},
 		name: {},
-		modelValue: { type: Boolean },
+		form: {},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultValue: {
+			type: Boolean,
+			default: false
+		},
+		value: { default: "on" },
 		color: {},
 		size: {},
 		disabled: {
@@ -68,6 +78,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		describedby: {},
 		labelledby: {},
 		inputAttrs: {},
+		validationMessage: {},
 		classNames: {},
 		styles: {}
 	},
@@ -75,16 +86,20 @@ var switch_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, rootClass, rootStyle, onChange, focus } = useSwitch(props, (value) => {
-			emit("update:modelValue", value);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
 		});
+		const { inputRef, control, rootClass, rootStyle, onChange, focus } = useSwitch(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		useCheckedFormControl(() => inputRef.value, controllable, () => props.validationMessage);
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
 			style: rootStyle.value,
 			"data-disabled": presence(control.disabled),
 			"data-invalid": presence(control.invalid),
-			"data-state": props.modelValue ? "checked" : "unchecked"
+			"data-state": controllable.value.value ? "checked" : "unchecked"
 		}));
 		const nativeInputAttrs = computed(() => {
 			const attrs = props.inputAttrs ?? {};
@@ -114,20 +129,23 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const n1 = child(n2);
 		setStaticTemplateRef(n0, inputRef, null, "inputRef");
 		renderEffect(() => {
+			const _nativeInputAttrs = nativeInputAttrs.value;
 			const _control = unref(control);
-			const _modelValue = __props.modelValue;
 			const _getPartAttrs = unref(getPartAttrs);
 			const _control_required = _control.required;
+			const _controllable_value_value = unref(controllable).value.value;
 			setDynamicProps(n7, [rootAttrs.value]);
-			setDynamicProps(n0, [nativeInputAttrs.value, {
+			setDynamicProps(n0, [_nativeInputAttrs, {
 				id: _control.id,
 				name: __props.name,
+				form: _control.form ?? _nativeInputAttrs.form,
 				type: "checkbox",
 				role: "switch",
-				checked: _modelValue,
+				value: __props.value,
+				checked: _controllable_value_value,
 				disabled: _control.disabled || void 0,
 				required: _control_required || void 0,
-				"aria-checked": _modelValue,
+				"aria-checked": _controllable_value_value,
 				"aria-label": __props.ariaLabel || void 0,
 				"aria-labelledby": _control.ariaLabelledby,
 				"aria-describedby": _control.ariaDescribedby,
@@ -147,7 +165,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		return n7;
 	}
-}), [["__scopeId", "data-v-403c12b8"]]);
+}), [["__scopeId", "data-v-d966892e"]]);
 //#endregion
 //#region src/components/switch/types.ts
 var switchParts = [