ropav 0.0.11 → 0.0.12

package/README.md

@@ -42,3 +42,6 @@ import { Button } from 'ropav';
 Use typed `classNames` and `styles`, documented state attributes, and variables listed in the packaged styles manifest. DOM nesting, internal selectors and undocumented variables are private implementation details.
 
 See the [Public Styles API](./docs/public-styles-api.md) and [public token table](./docs/public-tokens.md). Layered consumers should declare `reset, ropav.tokens, ropav.components, app`; `ropav/legacy-unlayered.css` is the temporary compatibility import for unlayered resets.
+
+For headless Tooltip, HoverCard and custom menu markup, see the
+[public floating API](./docs/public-floating-api.md).

package/dist/checkbox.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-checkbox[data-v-bad0fe43] {
+.rp-checkbox[data-v-cc3e1126] {
     --_rp-checkbox-color: var(--rp-color-control-selected-bg);
     --_rp-checkbox-on-color: var(--rp-color-control-selected-fg);
     --_rp-checkbox-size: 24px;
@@ -17,15 +17,15 @@
     user-select: none;
     vertical-align: top;
 }
-.rp-checkbox--disabled[data-v-bad0fe43] {
+.rp-checkbox--disabled[data-v-cc3e1126] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-checkbox[data-v-bad0fe43] {
+.rp-checkbox[data-v-cc3e1126] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-checkbox-font-size);
 }
-.rp-checkbox__native[data-v-bad0fe43] {
+.rp-checkbox__native[data-v-cc3e1126] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -37,11 +37,11 @@
     border-width: 0;
     pointer-events: none;
 }
-.rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-bad0fe43] {
+.rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-cc3e1126] {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-checkbox__box[data-v-bad0fe43] {
+.rp-checkbox__box[data-v-cc3e1126] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -53,90 +53,90 @@
     background-color: var(--rp-color-control-bg);
     transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-checkbox--checked .rp-checkbox__box[data-v-bad0fe43], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-bad0fe43] {
+.rp-checkbox--checked .rp-checkbox__box[data-v-cc3e1126], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-cc3e1126] {
     background-color: var(--_rp-checkbox-checked-bg);
     border-color: var(--_rp-checkbox-checked-border);
 }
-.rp-checkbox--invalid .rp-checkbox__box[data-v-bad0fe43] {
+.rp-checkbox--invalid .rp-checkbox__box[data-v-cc3e1126] {
     border-color: var(--_rp-checkbox-invalid-border);
 }
-.rp-checkbox--invalid .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-bad0fe43] {
+.rp-checkbox--invalid .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-cc3e1126] {
     border-color: var(--_rp-checkbox-invalid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-checkbox-invalid-ring);
 }
-.rp-checkbox__icon[data-v-bad0fe43] {
+.rp-checkbox__icon[data-v-cc3e1126] {
     width: 60%;
     height: 60%;
     color: var(--_rp-checkbox-checked-icon);
     transform-origin: center;
 }
-.rp-checkbox__icon[data-v-bad0fe43] [stroke-width] {
+.rp-checkbox__icon[data-v-cc3e1126] [stroke-width] {
     stroke-width: 3;
 }
-.rp-checkbox__label[data-v-bad0fe43] {
+.rp-checkbox__label[data-v-cc3e1126] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-checkbox--outline[data-v-bad0fe43] {
+.rp-checkbox--outline[data-v-cc3e1126] {
     --_rp-checkbox-checked-bg: var(--rp-color-control-bg);
     --_rp-checkbox-checked-border: var(--_rp-checkbox-color);
     --_rp-checkbox-checked-icon: var(--_rp-checkbox-color);
 }
-.rp-checkbox--size-xs[data-v-bad0fe43] {
+.rp-checkbox--size-xs[data-v-cc3e1126] {
     --_rp-checkbox-size: 16px;
     --_rp-checkbox-font-size: var(--rp-font-size-xs);
 }
-.rp-checkbox--size-sm[data-v-bad0fe43] {
+.rp-checkbox--size-sm[data-v-cc3e1126] {
     --_rp-checkbox-size: 20px;
     --_rp-checkbox-font-size: var(--rp-font-size-sm);
 }
-.rp-checkbox--size-md[data-v-bad0fe43] {
+.rp-checkbox--size-md[data-v-cc3e1126] {
     --_rp-checkbox-size: 24px;
     --_rp-checkbox-font-size: var(--rp-font-size-md);
 }
-.rp-checkbox--size-lg[data-v-bad0fe43] {
+.rp-checkbox--size-lg[data-v-cc3e1126] {
     --_rp-checkbox-size: 30px;
     --_rp-checkbox-font-size: var(--rp-font-size-lg);
 }
-.rp-checkbox--size-xl[data-v-bad0fe43] {
+.rp-checkbox--size-xl[data-v-cc3e1126] {
     --_rp-checkbox-size: 36px;
     --_rp-checkbox-font-size: var(--rp-font-size-xl);
 }
-.rp-checkbox--radius-xs[data-v-bad0fe43] {
+.rp-checkbox--radius-xs[data-v-cc3e1126] {
     --_rp-checkbox-radius: 2px;
 }
-.rp-checkbox--radius-sm[data-v-bad0fe43] {
+.rp-checkbox--radius-sm[data-v-cc3e1126] {
     --_rp-checkbox-radius: 4px;
 }
-.rp-checkbox--radius-md[data-v-bad0fe43] {
+.rp-checkbox--radius-md[data-v-cc3e1126] {
     --_rp-checkbox-radius: 6px;
 }
-.rp-checkbox--radius-lg[data-v-bad0fe43] {
+.rp-checkbox--radius-lg[data-v-cc3e1126] {
     --_rp-checkbox-radius: 8px;
 }
-.rp-checkbox--radius-xl[data-v-bad0fe43] {
+.rp-checkbox--radius-xl[data-v-cc3e1126] {
     --_rp-checkbox-radius: var(--rp-radius-full);
 }
-.rp-checkbox-icon-enter-active[data-v-bad0fe43],
-  .rp-checkbox-icon-leave-active[data-v-bad0fe43] {
+.rp-checkbox-icon-enter-active[data-v-cc3e1126],
+  .rp-checkbox-icon-leave-active[data-v-cc3e1126] {
     transition: opacity var(--rp-transition-base), transform var(--rp-transition-base);
 }
-.rp-checkbox-icon-enter-from[data-v-bad0fe43],
-  .rp-checkbox-icon-leave-to[data-v-bad0fe43] {
+.rp-checkbox-icon-enter-from[data-v-cc3e1126],
+  .rp-checkbox-icon-leave-to[data-v-cc3e1126] {
     opacity: 0;
     transform: translateY(3px) scale(0.85);
 }
-.rp-checkbox-icon-enter-to[data-v-bad0fe43],
-  .rp-checkbox-icon-leave-from[data-v-bad0fe43] {
+.rp-checkbox-icon-enter-to[data-v-cc3e1126],
+  .rp-checkbox-icon-leave-from[data-v-cc3e1126] {
     opacity: 1;
     transform: translateY(0) scale(1);
 }
-.rp-checkbox-icon-leave-to[data-v-bad0fe43] {
+.rp-checkbox-icon-leave-to[data-v-cc3e1126] {
     transform: translateY(-3px) scale(0.85);
 }
 @media (prefers-reduced-motion: reduce) {
-.rp-checkbox-icon-enter-active[data-v-bad0fe43],
-    .rp-checkbox-icon-leave-active[data-v-bad0fe43] {
+.rp-checkbox-icon-enter-active[data-v-cc3e1126],
+    .rp-checkbox-icon-leave-active[data-v-cc3e1126] {
       transition: none;
 }
 }

package/dist/checkbox.js

@@ -5,6 +5,7 @@ import { n as getComponentColorValue, r as getComponentContrastColor } from "./c
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as check_default } from "./check.js";
 import { t as minus_default } from "./minus.js";
+import { o as useControllableValue, r as useCheckedFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { VaporTransition, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, next, ref, renderEffect, setBlockKey, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/checkbox/useCheckbox.ts
@@ -17,11 +18,11 @@ function getCheckboxColorStyle(color, autoContrast) {
 	if (autoContrast) style["--_rp-checkbox-on-color"] = getComponentContrastColor(color ?? "primary", { autoContrast });
 	return style;
 }
-function useCheckbox(props, emitUpdate) {
+function useCheckbox(props, emitUpdate, getValue = () => props.modelValue ?? false) {
 	const inputRef = ref(null);
 	const control = useControlState(props);
 	const rootClass = computed(() => bem("rp-checkbox", {
-		checked: props.modelValue,
+		checked: getValue(),
 		indeterminate: props.indeterminate,
 		disabled: control.disabled,
 		invalid: control.invalid,
@@ -47,8 +48,8 @@ function useCheckbox(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/checkbox/checkbox.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-bad0fe43>");
-var t1 = template("<label data-v-bad0fe43><input data-v-bad0fe43><span data-v-bad0fe43></span>", 1);
+var t0 = template("<span data-v-cc3e1126>");
+var t1 = template("<label data-v-cc3e1126><input data-v-cc3e1126><span data-v-cc3e1126></span>", 1);
 //#endregion
 //#region src/components/checkbox/checkbox.vue
 var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -58,7 +59,16 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	props: {
 		id: {},
 		name: {},
-		modelValue: { type: Boolean },
+		form: {},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultValue: {
+			type: Boolean,
+			default: false
+		},
+		value: { default: "on" },
 		variant: {},
 		color: {},
 		autoContrast: { type: Boolean },
@@ -84,6 +94,7 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			default: false
 		},
 		inputAttrs: {},
+		validationMessage: {},
 		classNames: {},
 		styles: {}
 	},
@@ -91,10 +102,14 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
-		const { inputRef, control, rootClass, rootStyle, onChange, focus } = useCheckbox(props, (value) => {
-			emit("update:modelValue", value);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
 		});
-		const state = computed(() => props.indeterminate ? "indeterminate" : props.modelValue ? "checked" : "unchecked");
+		const { inputRef, control, rootClass, rootStyle, onChange, focus } = useCheckbox(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		const state = computed(() => props.indeterminate ? "indeterminate" : controllable.value.value ? "checked" : "unchecked");
+		useCheckedFormControl(() => inputRef.value, controllable, () => props.validationMessage);
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
@@ -127,20 +142,24 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const n8 = next(n0, 1);
 		setStaticTemplateRef(n0, inputRef, null, "inputRef");
 		renderEffect(() => {
+			const _nativeInputAttrs = nativeInputAttrs.value;
 			const _control = unref(control);
-			const _modelValue = __props.modelValue;
+			const _controllable = unref(controllable);
 			const _indeterminate = __props.indeterminate;
+			const _controllable_value = _controllable.value;
 			const _control_required = _control.required;
 			setDynamicProps(n13, [rootAttrs.value]);
-			setDynamicProps(n0, [nativeInputAttrs.value, {
+			setDynamicProps(n0, [_nativeInputAttrs, {
 				id: _control.id,
 				name: __props.name,
+				form: _control.form ?? _nativeInputAttrs.form,
 				type: "checkbox",
-				checked: _modelValue,
+				value: __props.value,
+				checked: _controllable_value.value,
 				disabled: _control.disabled || void 0,
 				required: _control_required || void 0,
 				indeterminate: _indeterminate,
-				"aria-checked": _indeterminate ? "mixed" : _modelValue,
+				"aria-checked": _indeterminate ? "mixed" : _controllable_value.value,
 				"aria-label": __props.ariaLabel || void 0,
 				"aria-labelledby": _control.ariaLabelledby,
 				"aria-describedby": _control.ariaDescribedby,
@@ -161,7 +180,7 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				const n3 = createComponent(unref(minus_default), { class: "rp-checkbox__icon" });
 				setBlockKey(n3, "minus");
 				return n3;
-			}, () => createIf(() => __props.modelValue, () => {
+			}, () => createIf(() => unref(controllable).value.value, () => {
 				const n5 = createComponent(unref(check_default), { class: "rp-checkbox__icon" });
 				setBlockKey(n5, "check");
 				return n5;
@@ -177,7 +196,7 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return n13;
 	}
-}), [["__scopeId", "data-v-bad0fe43"]]);
+}), [["__scopeId", "data-v-cc3e1126"]]);
 //#endregion
 //#region src/components/checkbox/types.ts
 var checkboxParts = [

package/dist/color-input.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-color-input[data-v-cf9bd64a] {
+.rp-color-input[data-v-0c4e1f32] {
     --_rp-color-input-height: var(--rp-size-control-md);
     --_rp-color-input-preview-size: calc(var(--_rp-color-input-height) / 2);
     --_rp-color-input-preview-inset: calc(
@@ -18,42 +18,42 @@
     font-family: var(--rp-font-family);
     vertical-align: middle;
 }
-.rp-color-input--size-xs[data-v-cf9bd64a] {
+.rp-color-input--size-xs[data-v-0c4e1f32] {
     --_rp-color-input-height: var(--rp-size-control-xs);
 }
-.rp-color-input--size-sm[data-v-cf9bd64a] {
+.rp-color-input--size-sm[data-v-0c4e1f32] {
     --_rp-color-input-height: var(--rp-size-control-sm);
 }
-.rp-color-input--size-md[data-v-cf9bd64a] {
+.rp-color-input--size-md[data-v-0c4e1f32] {
     --_rp-color-input-height: var(--rp-size-control-md);
 }
-.rp-color-input--size-lg[data-v-cf9bd64a] {
+.rp-color-input--size-lg[data-v-0c4e1f32] {
     --_rp-color-input-height: var(--rp-size-control-lg);
 }
-.rp-color-input--size-xl[data-v-cf9bd64a] {
+.rp-color-input--size-xl[data-v-0c4e1f32] {
     --_rp-color-input-height: var(--rp-size-control-xl);
 }
-html.dark .rp-color-input[data-v-cf9bd64a], [data-rp-color-scheme=dark] .rp-color-input[data-v-cf9bd64a] {
+html.dark .rp-color-input[data-v-0c4e1f32], [data-rp-color-scheme=dark] .rp-color-input[data-v-0c4e1f32] {
     --_rp-color-input-empty-tile: var(--rp-color-dark-6);
     --_rp-color-input-empty-tile-alt: var(--rp-color-dark-4);
 }
-.rp-color-input[data-v-cf9bd64a] .rp-input {
+.rp-color-input[data-v-0c4e1f32] .rp-input {
     width: 100%;
     min-width: 180px;
     padding-inline-start: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
 }
-.rp-color-input[data-v-cf9bd64a] .rp-popover__content {
+.rp-color-input[data-v-0c4e1f32] .rp-popover__content {
     min-width: auto;
     padding: var(--rp-spacing-3);
     padding-inline: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
 }
-.rp-color-input[data-v-cf9bd64a] .rp-color-picker {
+.rp-color-input[data-v-0c4e1f32] .rp-color-picker {
     --_rp-color-picker-size: min(
         var(--_rp-color-picker-saturation-width),
         calc(100vw - var(--rp-spacing-12))
     );
 }
-.rp-color-input__preview[data-v-cf9bd64a] {
+.rp-color-input__preview[data-v-0c4e1f32] {
     --_rp-color-swatch-radius: 50%;
     width: var(--_rp-color-input-preview-size);
     height: var(--_rp-color-input-preview-size);
@@ -61,14 +61,14 @@ html.dark .rp-color-input[data-v-cf9bd64a], [data-rp-color-scheme=dark] .rp-colo
     border-radius: 50%;
     pointer-events: none;
 }
-.rp-color-input__preview--empty[data-v-cf9bd64a] {
+.rp-color-input__preview--empty[data-v-0c4e1f32] {
     box-sizing: border-box;
     display: inline-flex;
     background: var(--_rp-color-input-empty-grid);
     background-size: calc(var(--_rp-color-input-preview-size) / 2) calc(var(--_rp-color-input-preview-size) / 2);
     border: var(--rp-border-width-thin) dashed var(--rp-color-control-border);
 }
-.rp-color-input__eye-dropper[data-v-cf9bd64a] {
+.rp-color-input__eye-dropper[data-v-0c4e1f32] {
     padding: 0;
     font: inherit;
     background: none;
@@ -81,29 +81,29 @@ html.dark .rp-color-input[data-v-cf9bd64a], [data-rp-color-scheme=dark] .rp-colo
     color: var(--rp-color-control-icon);
     transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-color-input__eye-dropper[data-v-cf9bd64a]:hover:not(:disabled) {
+.rp-color-input__eye-dropper[data-v-0c4e1f32]:hover:not(:disabled) {
     color: var(--rp-color-control-fg);
 }
-.rp-color-input__eye-dropper[data-v-cf9bd64a]:focus-visible {
+.rp-color-input__eye-dropper[data-v-0c4e1f32]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: 2px;
 }
-.rp-color-input__eye-dropper[data-v-cf9bd64a]:disabled {
+.rp-color-input__eye-dropper[data-v-0c4e1f32]:disabled {
     cursor: not-allowed;
     opacity: var(--rp-opacity-disabled);
 }
-.rp-color-input__eye-dropper-icon[data-v-cf9bd64a] {
+.rp-color-input__eye-dropper-icon[data-v-0c4e1f32] {
     display: inline-flex;
     align-items: center;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }
-.rp-color-input__eye-dropper-icon svg[data-v-cf9bd64a] {
+.rp-color-input__eye-dropper-icon svg[data-v-0c4e1f32] {
     width: 100%;
     height: 100%;
 }
-.rp-color-input__eye-dropper-icon[data-v-cf9bd64a] >  svg {
+.rp-color-input__eye-dropper-icon[data-v-0c4e1f32] >  svg {
     width: 100%;
     height: 100%;
 }

package/dist/color-input.js

@@ -2,12 +2,13 @@ import './color-input.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 { a as useTextFormControl, n as provideNestedFormControlOwner, o as useControllableValue } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as color_swatch_default } from "./color-swatch.js";
 import { n as formatColorPickerValue, r as parseColorPickerValue, t as color_picker_default } from "./color-picker.js";
 import { t as input_default } from "./input.js";
 import { t as popover_default } from "./popover.js";
-import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, markRaw, nextTick, on, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, withModifiers } from "vue";
+import { child, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, markRaw, nextTick, on, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, withModifiers } from "vue";
 //#region ~icons/lucide/crosshair
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><g fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2><circle cx=12 cy=12 r=10></circle><path d=\"M22 12h-4M6 12H2m10-6V2m0 20v-4\">", 3, 1);
 function render(_ctx) {
@@ -121,11 +122,12 @@ function useColorInputPopover(getInputAttrs) {
 }
 //#endregion
 //#region src/components/color-input/useColorInputValue.ts
-function useColorInputValue(props, isControlInvalid) {
-	const parsedColor = computed(() => parseColorPickerValue(props.modelValue));
-	const previewColor = computed(() => parsedColor.value ? props.modelValue : void 0);
+function useColorInputValue(props, isControlInvalid, getValue = () => props.modelValue ?? "") {
+	const currentValue = computed(getValue);
+	const parsedColor = computed(() => parseColorPickerValue(currentValue.value));
+	const previewColor = computed(() => parsedColor.value ? currentValue.value : void 0);
 	const hasValidSwatches = computed(() => Boolean(props.swatches?.some((swatch) => parseColorPickerValue(swatch))));
-	const hasInvalidColor = computed(() => props.validateColor && props.modelValue.trim().length > 0 && !parsedColor.value);
+	const hasInvalidColor = computed(() => props.validateColor && currentValue.value.trim().length > 0 && !parsedColor.value);
 	return {
 		previewColor,
 		hasValidSwatches,
@@ -136,9 +138,9 @@ function useColorInputValue(props, isControlInvalid) {
 }
 //#endregion
 //#region src/components/color-input/useColorInput.ts
-function useColorInput(props, emit) {
+function useColorInput(props, emit, getValue = () => props.modelValue ?? "") {
 	const control = useControlState(props);
-	const value = useColorInputValue(props, () => control.invalid);
+	const value = useColorInputValue(props, () => control.invalid, getValue);
 	const popover = useColorInputPopover(() => props.inputAttrs);
 	const popoverDisabled = computed(() => control.disabled || Boolean(props.readonly) || Boolean(props.swatchesOnly) && !value.hasValidSwatches.value);
 	const eyeDropper = useColorInputEyeDropper({
@@ -180,8 +182,8 @@ function useColorInput(props, emit) {
 }
 //#endregion
 //#region src/components/color-input/color-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-cf9bd64a>");
-var t1 = template("<button data-v-cf9bd64a><span data-v-cf9bd64a class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
+var t0 = template("<span data-v-0c4e1f32>");
+var t1 = template("<button data-v-0c4e1f32><span data-v-0c4e1f32 class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
 //#endregion
 //#region src/components/color-input/color-input.vue
 var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -191,7 +193,9 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: "" },
 		format: { default: "hex" },
 		size: {},
 		radius: {},
@@ -228,6 +232,7 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		describedby: {},
 		labelledby: {},
 		inputAttrs: {},
+		validationMessage: {},
 		validateColor: {
 			type: Boolean,
 			default: false
@@ -258,10 +263,19 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const inputComponentRef = ref(null);
+		provideNestedFormControlOwner();
 		const { control, rootClass, previewColor, isInvalid, colorValidationMessage, popoverDisabled, getInputTriggerAttrs, rememberClose, onPickerKeydown, onFocusOut, showEyeDropper, isPickingColor, pickScreenColor, onInputUpdate, onPickerUpdate, onOpenUpdate } = useColorInput(props, {
-			modelValue: (value) => emit("update:modelValue", value),
+			modelValue: (value) => controllable.setValue(value),
 			open: (value) => emit("update:open", value)
-		});
+		}, () => controllable.value.value);
+		const effectiveValidationMessage = computed(() => props.validationMessage !== void 0 ? props.validationMessage : colorValidationMessage.value);
+		useTextFormControl(() => inputComponentRef.value?.nativeElement, controllable, () => effectiveValidationMessage.value);
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			"data-disabled": presence(control.disabled),
@@ -298,6 +312,7 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			swatches: props.styles?.pickerSwatches,
 			swatch: props.styles?.pickerSwatch
 		}));
+		const _setTemplateRef = createTemplateRefSetter();
 		return createComponent(popover_default, { $: [() => rootAttrs.value, {
 			id: () => __props.popoverId,
 			"class-names": () => popoverClassNames.value,
@@ -311,10 +326,11 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			"onUpdate:open": () => unref(onOpenUpdate)
 		}] }, {
 			"default": (slotProps) => {
-				return createComponent(input_default, {
+				const n15 = createComponent(input_default, {
 					id: () => unref(control).id,
 					name: () => __props.name,
-					"model-value": () => __props.modelValue,
+					form: () => unref(control).form,
+					"model-value": () => unref(controllable).value.value,
 					type: "text",
 					size: () => __props.size,
 					radius: () => __props.radius,
@@ -330,7 +346,7 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 					"input-attrs": () => unref(getInputTriggerAttrs)(slotProps),
 					"class-names": () => inputClassNames.value,
 					styles: () => inputStyles.value,
-					"validation-message": () => unref(colorValidationMessage),
+					"validation-message": () => effectiveValidationMessage.value,
 					"onUpdate:modelValue": () => unref(onInputUpdate)
 				}, {
 					"left": extend(() => {
@@ -376,12 +392,14 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 						}
 					} : void 0]
 				});
+				_setTemplateRef(n15, inputComponentRef, null, "inputComponentRef");
+				return n15;
 			},
 			"content": (slotProps) => {
 				const _on_focusin = () => unref(rememberClose)(slotProps);
 				const _on_keydown = ($event) => unref(onPickerKeydown)($event, slotProps);
 				return createComponent(color_picker_default, {
-					"model-value": () => __props.modelValue,
+					"model-value": () => unref(controllable).value.value,
 					format: () => __props.format,
 					size: () => __props.size,
 					readonly: () => __props.readonly,
@@ -398,7 +416,7 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}
 		}, true);
 	}
-}), [["__scopeId", "data-v-cf9bd64a"]]);
+}), [["__scopeId", "data-v-0c4e1f32"]]);
 //#endregion
 //#region src/components/color-input/types.ts
 var colorInputParts = [

package/dist/components/checkbox/types.d.ts

@@ -10,7 +10,10 @@ export type CheckboxVariant = 'solid' | 'outline';
 export interface CheckboxProps extends StylesApiProps<CheckboxPart> {
     id?: string;
     name?: string;
-    modelValue: boolean;
+    form?: string;
+    modelValue?: boolean;
+    defaultValue?: boolean;
+    value?: string | number;
     variant?: CheckboxVariant;
     color?: CheckboxColor;
     autoContrast?: boolean;
@@ -24,4 +27,5 @@ export interface CheckboxProps extends StylesApiProps<CheckboxPart> {
     labelledby?: string;
     indeterminate?: boolean;
     inputAttrs?: InputHTMLAttributes;
+    validationMessage?: string;
 }

package/dist/components/checkbox/useCheckbox.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'vue';
 import { CheckboxProps } from './types.js';
-export declare function useCheckbox(props: Readonly<CheckboxProps>, emitUpdate: (value: boolean) => void): {
+export declare function useCheckbox(props: Readonly<CheckboxProps>, emitUpdate: (value: boolean) => void, getValue?: () => boolean): {
     inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
     control: import('../../composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;

package/dist/components/color-input/types.d.ts

@@ -8,7 +8,9 @@ export type ColorInputPart = (typeof colorInputParts)[number];
 export interface ColorInputProps extends StylesApiProps<ColorInputPart> {
     id?: string;
     name?: string;
-    modelValue: ColorPickerValue;
+    form?: string;
+    modelValue?: ColorPickerValue;
+    defaultValue?: ColorPickerValue;
     format?: ColorPickerFormat;
     size?: InputSize;
     radius?: InputRadius;
@@ -24,6 +26,7 @@ export interface ColorInputProps extends StylesApiProps<ColorInputPart> {
     describedby?: string;
     labelledby?: string;
     inputAttrs?: InputHTMLAttributes;
+    validationMessage?: string;
     validateColor?: boolean;
     invalidColorMessage?: string;
     swatches?: string[];

package/dist/components/color-input/useColorInput.d.ts

@@ -4,7 +4,7 @@ interface UseColorInputEmitters {
     modelValue: (value: ColorPickerValue) => void;
     open: (value: boolean) => void;
 }
-export declare function useColorInput(props: Readonly<ColorInputProps>, emit: UseColorInputEmitters): {
+export declare function useColorInput(props: Readonly<ColorInputProps>, emit: UseColorInputEmitters, getValue?: () => string): {
     onInputUpdate: (nextValue: ColorPickerValue) => void;
     onPickerUpdate: (nextValue: ColorPickerValue) => void;
     onOpenUpdate: (open: boolean) => void;

package/dist/components/color-input/useColorInputValue.d.ts

@@ -1,5 +1,5 @@
 import { ColorInputProps } from './types.js';
-export declare function useColorInputValue(props: Readonly<ColorInputProps>, isControlInvalid: () => boolean): {
+export declare function useColorInputValue(props: Readonly<ColorInputProps>, isControlInvalid: () => boolean, getValue?: () => string): {
     previewColor: import('vue').ComputedRef<string | undefined>;
     hasValidSwatches: import('vue').ComputedRef<boolean>;
     hasInvalidColor: import('vue').ComputedRef<boolean | undefined>;

package/dist/components/dialog/dialog-close.d.ts

@@ -0,0 +1,21 @@
+import { DialogCloseProps } from './types.js';
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DialogCloseProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};