ropav 0.0.11 → 0.0.13

package/dist/select.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-select[data-v-e6060752] {
+.rp-select[data-v-5c4e4e6a] {
     --_rp-select-height: var(--rp-size-control-md);
     --_rp-select-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-select-font-size: var(--rp-font-size-md);
@@ -15,42 +15,53 @@
     font-weight: var(--rp-font-weight-normal);
     line-height: 1;
 }
-.rp-select--size-xs[data-v-e6060752] {
+.rp-select__native[data-v-5c4e4e6a] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+.rp-select--size-xs[data-v-5c4e4e6a] {
     --_rp-select-height: var(--rp-size-control-xs);
     --_rp-select-padding-x: calc(var(--rp-size-control-xs) / 3);
     --_rp-select-font-size: var(--rp-font-size-xs);
     --_rp-select-option-min-height: calc(var(--rp-size-control-xs) - var(--rp-spacing-2));
     --_rp-select-option-padding-y: calc(var(--rp-spacing-1) / 2);
 }
-.rp-select--size-sm[data-v-e6060752] {
+.rp-select--size-sm[data-v-5c4e4e6a] {
     --_rp-select-height: var(--rp-size-control-sm);
     --_rp-select-padding-x: calc(var(--rp-size-control-sm) / 3);
     --_rp-select-font-size: var(--rp-font-size-sm);
     --_rp-select-option-min-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-3));
     --_rp-select-option-padding-y: var(--rp-spacing-1);
 }
-.rp-select--size-md[data-v-e6060752] {
+.rp-select--size-md[data-v-5c4e4e6a] {
     --_rp-select-height: var(--rp-size-control-md);
     --_rp-select-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-select-font-size: var(--rp-font-size-md);
     --_rp-select-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
     --_rp-select-option-padding-y: var(--rp-spacing-1);
 }
-.rp-select--size-lg[data-v-e6060752] {
+.rp-select--size-lg[data-v-5c4e4e6a] {
     --_rp-select-height: var(--rp-size-control-lg);
     --_rp-select-padding-x: calc(var(--rp-size-control-lg) / 3);
     --_rp-select-font-size: var(--rp-font-size-lg);
     --_rp-select-option-min-height: calc(var(--rp-size-control-lg) - var(--rp-spacing-5));
     --_rp-select-option-padding-y: calc(var(--rp-spacing-3) / 2);
 }
-.rp-select--size-xl[data-v-e6060752] {
+.rp-select--size-xl[data-v-5c4e4e6a] {
     --_rp-select-height: var(--rp-size-control-xl);
     --_rp-select-padding-x: calc(var(--rp-size-control-xl) / 3);
     --_rp-select-font-size: var(--rp-font-size-xl);
     --_rp-select-option-min-height: calc(var(--rp-size-control-xl) - var(--rp-spacing-6));
     --_rp-select-option-padding-y: var(--rp-spacing-2);
 }
-html.dark .rp-select[data-v-e6060752], [data-rp-color-scheme=dark] .rp-select[data-v-e6060752] {
+html.dark .rp-select[data-v-5c4e4e6a], [data-rp-color-scheme=dark] .rp-select[data-v-5c4e4e6a] {
     --_rp-select-invalid-border: var(--rp-color-red-light-color);
     --_rp-select-invalid-ring: color-mix(
         in srgb,
@@ -59,11 +70,11 @@ html.dark .rp-select[data-v-e6060752], [data-rp-color-scheme=dark] .rp-select[da
     );
     --_rp-select-option-focused-bg: var(--rp-color-default-hover);
 }
-.rp-select--disabled[data-v-e6060752] {
+.rp-select--disabled[data-v-5c4e4e6a] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-select__trigger[data-v-e6060752] {
+.rp-select__trigger[data-v-5c4e4e6a] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -80,81 +91,81 @@ html.dark .rp-select[data-v-e6060752], [data-rp-color-scheme=dark] .rp-select[da
     transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
     gap: var(--rp-spacing-2);
 }
-.rp-select__trigger[data-v-e6060752]:hover {
+.rp-select__trigger[data-v-5c4e4e6a]:hover {
     border-color: var(--rp-color-control-border-hover);
 }
-.rp-select__trigger[data-v-e6060752]:focus-visible {
+.rp-select__trigger[data-v-5c4e4e6a]:focus-visible {
     outline: none;
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-select--radius-xs[data-v-e6060752] {
+.rp-select--radius-xs[data-v-5c4e4e6a] {
     --_rp-select-radius: var(--rp-radius-xs);
 }
-.rp-select--radius-sm[data-v-e6060752] {
+.rp-select--radius-sm[data-v-5c4e4e6a] {
     --_rp-select-radius: var(--rp-radius-sm);
 }
-.rp-select--radius-md[data-v-e6060752] {
+.rp-select--radius-md[data-v-5c4e4e6a] {
     --_rp-select-radius: var(--rp-radius-md);
 }
-.rp-select--radius-lg[data-v-e6060752] {
+.rp-select--radius-lg[data-v-5c4e4e6a] {
     --_rp-select-radius: var(--rp-radius-lg);
 }
-.rp-select--radius-xl[data-v-e6060752] {
+.rp-select--radius-xl[data-v-5c4e4e6a] {
     --_rp-select-radius: var(--rp-radius-xl);
 }
-.rp-select--open .rp-select__trigger[data-v-e6060752] {
+.rp-select--open .rp-select__trigger[data-v-5c4e4e6a] {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-select--invalid .rp-select__trigger[data-v-e6060752] {
+.rp-select--invalid .rp-select__trigger[data-v-5c4e4e6a] {
     border-color: var(--_rp-select-invalid-border);
 }
-.rp-select--invalid .rp-select__trigger[data-v-e6060752]:focus-visible, .rp-select--open.rp-select--invalid .rp-select__trigger[data-v-e6060752] {
+.rp-select--invalid .rp-select__trigger[data-v-5c4e4e6a]:focus-visible, .rp-select--open.rp-select--invalid .rp-select__trigger[data-v-5c4e4e6a] {
     border-color: var(--_rp-select-invalid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-select-invalid-ring);
 }
-.rp-select__value[data-v-e6060752] {
+.rp-select__value[data-v-5c4e4e6a] {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--rp-color-control-fg);
 }
-.rp-select__placeholder[data-v-e6060752] {
+.rp-select__placeholder[data-v-5c4e4e6a] {
     color: var(--rp-color-control-placeholder);
 }
-.rp-select__indicator[data-v-e6060752] {
+.rp-select__indicator[data-v-5c4e4e6a] {
     display: inline-flex;
     align-items: center;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }
-.rp-select__indicator svg[data-v-e6060752] {
+.rp-select__indicator svg[data-v-5c4e4e6a] {
     width: 100%;
     height: 100%;
 }
-.rp-select__indicator[data-v-e6060752] {
+.rp-select__indicator[data-v-5c4e4e6a] {
     position: relative;
     color: var(--rp-color-control-icon);
     transform: translateX(var(--rp-spacing-1));
 }
-.rp-select__arrow[data-v-e6060752] {
+.rp-select__arrow[data-v-5c4e4e6a] {
     display: inline-flex;
     align-items: center;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }
-.rp-select__arrow svg[data-v-e6060752] {
+.rp-select__arrow svg[data-v-5c4e4e6a] {
     width: 100%;
     height: 100%;
 }
-.rp-select__arrow[data-v-e6060752] {
+.rp-select__arrow[data-v-5c4e4e6a] {
     transition: opacity var(--rp-transition-fast);
 }
-.rp-select__clear[data-v-e6060752] {
+.rp-select__clear[data-v-5c4e4e6a] {
     padding: 0;
     font: inherit;
     background: none;
@@ -166,11 +177,11 @@ html.dark .rp-select[data-v-e6060752], [data-rp-color-scheme=dark] .rp-select[da
     height: 1em;
     flex-shrink: 0;
 }
-.rp-select__clear svg[data-v-e6060752] {
+.rp-select__clear svg[data-v-5c4e4e6a] {
     width: 100%;
     height: 100%;
 }
-.rp-select__clear[data-v-e6060752] {
+.rp-select__clear[data-v-5c4e4e6a] {
     position: absolute;
     inset: 0;
     z-index: 1;
@@ -179,17 +190,17 @@ html.dark .rp-select[data-v-e6060752], [data-rp-color-scheme=dark] .rp-select[da
     pointer-events: none;
     transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-select__clear[data-v-e6060752]:hover {
+.rp-select__clear[data-v-5c4e4e6a]:hover {
     color: var(--rp-color-control-fg);
 }
-.rp-select__trigger:hover .rp-select__clear[data-v-e6060752] {
+.rp-select__trigger:hover .rp-select__clear[data-v-5c4e4e6a] {
     opacity: 1;
     pointer-events: auto;
 }
-.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-e6060752] {
+.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-5c4e4e6a] {
     opacity: 0;
 }
-.rp-select__dropdown[data-v-e6060752] {
+.rp-select__dropdown[data-v-5c4e4e6a] {
     position: absolute;
     top: calc(100% + var(--rp-spacing-2));
     left: 0;
@@ -204,7 +215,7 @@ html.dark .rp-select[data-v-e6060752], [data-rp-color-scheme=dark] .rp-select[da
     overflow-y: auto;
     padding: var(--rp-spacing-1);
 }
-.rp-select__option[data-v-e6060752] {
+.rp-select__option[data-v-5c4e4e6a] {
     display: flex;
     align-items: center;
     min-height: var(--_rp-select-option-min-height);
@@ -215,17 +226,17 @@ html.dark .rp-select[data-v-e6060752], [data-rp-color-scheme=dark] .rp-select[da
     transition: color var(--rp-transition-fast);
     color: var(--rp-color-control-fg);
 }
-.rp-select__option--focused[data-v-e6060752] {
+.rp-select__option--focused[data-v-5c4e4e6a] {
     background-color: var(--_rp-select-option-focused-bg);
 }
-.rp-select__option--selected[data-v-e6060752] {
+.rp-select__option--selected[data-v-5c4e4e6a] {
     color: var(--rp-primary-color-light-color);
 }
-.rp-select__option--disabled[data-v-e6060752] {
+.rp-select__option--disabled[data-v-5c4e4e6a] {
     color: var(--rp-color-disabled-color);
     cursor: not-allowed;
 }
-.rp-select__empty[data-v-e6060752] {
+.rp-select__empty[data-v-5c4e4e6a] {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -233,12 +244,12 @@ html.dark .rp-select[data-v-e6060752], [data-rp-color-scheme=dark] .rp-select[da
     color: var(--rp-color-dimmed);
     font-size: var(--_rp-select-font-size);
 }
-.rp-select-dropdown-enter-active[data-v-e6060752],
-  .rp-select-dropdown-leave-active[data-v-e6060752] {
+.rp-select-dropdown-enter-active[data-v-5c4e4e6a],
+  .rp-select-dropdown-leave-active[data-v-5c4e4e6a] {
     transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
 }
-.rp-select-dropdown-enter-from[data-v-e6060752],
-  .rp-select-dropdown-leave-to[data-v-e6060752] {
+.rp-select-dropdown-enter-from[data-v-5c4e4e6a],
+  .rp-select-dropdown-leave-to[data-v-5c4e4e6a] {
     opacity: 0;
     transform: translateY(calc(-1 * var(--rp-spacing-1)));
 }

package/dist/select.js

@@ -3,9 +3,9 @@ import { t as x_default } from "./x.js";
 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 { i as useFormControl, o as useControllableValue } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { t as useClickOutside } from "./useClickOutside.js";
-import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, ref, renderEffect, setDynamicProps, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, withModifiers, withVaporModifiers } from "vue";
+import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, watch, watchEffect, withModifiers, withVaporModifiers } from "vue";
 //#region ~icons/lucide/chevrons-up-down
 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=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
 function render(_ctx) {
@@ -16,6 +16,28 @@ var chevrons_up_down_default = markRaw(defineVaporComponent({
 	render
 }));
 //#endregion
+//#region src/composables/useClickOutside.ts
+function useClickOutside(target, active, callback) {
+	let isListening = false;
+	let stopWatch;
+	function handler(e) {
+		if (!(Array.isArray(target) ? target : [target]).some((current) => current.value?.contains(e.target))) callback(e);
+	}
+	function setListening(value) {
+		if (typeof document === "undefined" || value === isListening) return;
+		isListening = value;
+		if (value) document.addEventListener("click", handler, true);
+		else document.removeEventListener("click", handler, true);
+	}
+	onMounted(() => {
+		stopWatch = watch(active, setListening, { immediate: true });
+	});
+	onBeforeUnmount(() => {
+		stopWatch?.();
+		setListening(false);
+	});
+}
+//#endregion
 //#region src/composables/useListNavigation.ts
 function useListNavigation(options) {
 	const localFocusedIndex = ref(-1);
@@ -89,7 +111,7 @@ function getSelectDisplayLabel(options, value) {
 function getSelectActiveDescendantId(baseId, focusedIndex) {
 	return focusedIndex < 0 ? void 0 : `${baseId}-option-${focusedIndex}`;
 }
-function useSelect(props, emitUpdate) {
+function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null) {
 	const selectRef = ref(null);
 	const triggerRef = ref(null);
 	const isOpen = ref(false);
@@ -97,9 +119,10 @@ function useSelect(props, emitUpdate) {
 	const listboxId = `${selectId}-listbox`;
 	const control = useControlState(props);
 	const visibleOptions = computed(() => props.options ?? []);
+	const value = computed(getValue);
 	const navigation = useListNavigation({
 		items: () => visibleOptions.value,
-		isSelected: (item) => item.value === props.modelValue
+		isSelected: (item) => item.value === value.value
 	});
 	const focusedIndex = navigation.focusedIndex;
 	const activeDescendantId = computed(() => getSelectActiveDescendantId(selectId, focusedIndex.value));
@@ -110,8 +133,8 @@ function useSelect(props, emitUpdate) {
 		disabled: control.disabled,
 		invalid: control.invalid
 	}));
-	const hasValue = computed(() => hasSelectValue(props.modelValue));
-	const displayLabel = computed(() => getSelectDisplayLabel(props.options, props.modelValue));
+	const hasValue = computed(() => hasSelectValue(value.value));
+	const displayLabel = computed(() => getSelectDisplayLabel(props.options, value.value));
 	const canClear = computed(() => Boolean(props.clearable && hasValue.value && !control.disabled));
 	function focusTrigger() {
 		nextTick(() => triggerRef.value?.focus());
@@ -216,6 +239,7 @@ function useSelect(props, emitUpdate) {
 		rootClass,
 		hasValue,
 		displayLabel,
+		value,
 		canClear,
 		toggle,
 		selectOption,
@@ -226,12 +250,12 @@ function useSelect(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/select/select.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<input data-v-e6060752 type=hidden>");
-var t1 = template("<button data-v-e6060752></button>");
+var t0 = template("<option data-v-5c4e4e6a> ");
+var t1 = template("<button data-v-5c4e4e6a></button>");
 var t2 = template("No options", 2);
-var t3 = template("<div data-v-e6060752>");
-var t4 = template("<div data-v-e6060752> ");
-var t5 = template("<div data-v-e6060752><div data-v-e6060752><span data-v-e6060752> </span><span data-v-e6060752><span data-v-e6060752 class=rp-select__arrow aria-hidden=true>", 1);
+var t3 = template("<div data-v-5c4e4e6a>");
+var t4 = template("<div data-v-5c4e4e6a> ");
+var t5 = template("<div data-v-5c4e4e6a><select data-v-5c4e4e6a><option data-v-5c4e4e6a value></option></select><div data-v-5c4e4e6a><span data-v-5c4e4e6a> </span><span data-v-5c4e4e6a><span data-v-5c4e4e6a class=rp-select__arrow aria-hidden=true>", 1);
 delegateEvents("mousedown", "click", "keydown");
 //#endregion
 //#region src/components/select/select.vue
@@ -242,7 +266,9 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: null },
 		options: { default: () => [] },
 		size: {},
 		radius: {},
@@ -267,15 +293,86 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		ariaLabel: {},
 		describedby: {},
 		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
 		classNames: {},
 		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { selectRef, triggerRef, isOpen, selectId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onTriggerKeydown } = useSelect(props, (value) => {
-			emit("update:modelValue", value);
+		const nativeSelectRef = ref(null);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		function getNativeValue(select) {
+			if (select.selectedIndex <= 0) return null;
+			return props.options?.[select.selectedIndex - 1]?.value ?? null;
+		}
+		function syncNativeSelection(value) {
+			const select = nativeSelectRef.value;
+			if (!select) return;
+			select.selectedIndex = (props.options?.findIndex((option) => option.value === value) ?? -1) + 1;
+		}
+		function syncNativeDefaultSelection() {
+			const select = nativeSelectRef.value;
+			if (!select) return;
+			const optionIndex = props.options?.findIndex((option) => option.value === controllable.initialValue) ?? -1;
+			for (const [index, option] of [...select.options].entries()) option.defaultSelected = index === optionIndex + 1;
+		}
+		function requestValueUpdate(value) {
+			const select = nativeSelectRef.value;
+			if (!select) {
+				controllable.setValue(value);
+				return;
+			}
+			syncNativeSelection(value);
+			select.dispatchEvent(new Event("input", {
+				bubbles: true,
+				cancelable: true
+			}));
+			select.dispatchEvent(new Event("change", {
+				bubbles: true,
+				cancelable: true
+			}));
+			if (controllable.isControlled.value) queueMicrotask(() => syncNativeSelection(controllable.value.value));
+		}
+		const { selectRef, triggerRef, isOpen, selectId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onTriggerKeydown } = useSelect(props, requestValueUpdate, () => controllable.value.value);
+		useFormControl({
+			elements: () => [nativeSelectRef.value],
+			isControlled: () => controllable.isControlled.value,
+			validationMessage: () => props.validationMessage,
+			readResetValue(elements) {
+				controllable.resetValue(getNativeValue(elements[0]));
+			},
+			syncControlledValue() {
+				syncNativeSelection(controllable.value.value);
+			}
+		});
+		watchEffect(syncNativeDefaultSelection, { flush: "post" });
+		watchEffect(() => syncNativeSelection(controllable.value.value), { flush: "post" });
+		const nativeInputAttrs = computed(() => {
+			const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, onChange: compatibilityOnChange, onInvalid: compatibilityOnInvalid, ...attrs } = props.inputAttrs ?? {};
+			return {
+				...attrs,
+				class: ["rp-select__native", compatibilityClass],
+				style: compatibilityStyle,
+				onInput(event) {
+					controllable.setValue(getNativeValue(event.currentTarget));
+					compatibilityOnInput?.(event);
+				},
+				onChange(event) {
+					compatibilityOnChange?.(event);
+				},
+				onInvalid(event) {
+					event.preventDefault();
+					triggerRef.value?.focus();
+					compatibilityOnInvalid?.(event);
+				}
+			};
 		});
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
@@ -284,30 +381,50 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			"data-disabled": presence(control.disabled),
 			"data-invalid": presence(control.invalid)
 		}));
+		__expose({
+			nativeElement: nativeSelectRef,
+			focus: () => triggerRef.value?.focus()
+		});
 		const _setTemplateRef = createTemplateRefSetter();
-		const n25 = t5();
-		const n11 = child(n25, 1);
-		const n3 = child(n11);
-		const n10 = next(n3, 1);
-		const n9 = child(n10, 1);
-		renderEffect(() => setDynamicProps(n25, [rootAttrs.value]));
-		setInsertionState(n25, 0, 0);
-		createIf(() => __props.name, () => {
+		const n26 = t5();
+		const n3 = child(n26);
+		const n12 = next(n3, 1);
+		const n4 = child(n12);
+		const n11 = next(n4, 1);
+		const n10 = child(n11, 1);
+		renderEffect(() => {
+			const _nativeInputAttrs = nativeInputAttrs.value;
+			const _control = unref(control);
+			setDynamicProps(n26, [rootAttrs.value]);
+			setDynamicProps(n3, [_nativeInputAttrs, {
+				name: __props.name,
+				form: _control.form ?? _nativeInputAttrs.form,
+				disabled: _control.disabled || void 0,
+				required: _control.required || void 0,
+				tabindex: "-1",
+				"aria-hidden": "true"
+			}]);
+		});
+		setInsertionState(n3, null, 1);
+		createFor(() => unref(visibleOptions), (_for_item0) => {
 			const n2 = t0();
+			const x2 = txt(n2);
 			renderEffect(() => {
-				setProp(n2, "name", __props.name);
-				setValue(n2, __props.modelValue ?? "");
-				setProp(n2, "disabled", unref(control).disabled || void 0);
+				const _option = _for_item0.value;
+				setValue(n2, String(_option.value));
+				setProp(n2, "disabled", _option.disabled || void 0);
+				setText(x2, toDisplayString(_option.label));
 			});
 			return n2;
-		});
-		const x3 = txt(n3);
+		}, (option) => option.value, 8);
+		_setTemplateRef(n3, nativeSelectRef, null, "nativeSelectRef");
+		const x4 = txt(n4);
 		renderEffect(() => {
 			const _control = unref(control);
 			const _getPartAttrs = unref(getPartAttrs);
 			const _isOpen = unref(isOpen);
 			const _control_disabled = _control.disabled;
-			setDynamicProps(n11, [
+			setDynamicProps(n12, [
 				{ id: _control.id },
 				_getPartAttrs("trigger", { class: "rp-select__trigger" }),
 				{
@@ -328,14 +445,14 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					tabindex: _control_disabled ? -1 : 0
 				}
 			]);
-			setDynamicProps(n3, [_getPartAttrs("value", { class: ["rp-select__value", { "rp-select__placeholder": !unref(hasValue) }] })]);
-			setText(x3, toDisplayString(unref(displayLabel) || __props.placeholder));
-			setDynamicProps(n10, [_getPartAttrs("indicator", { class: "rp-select__indicator" })]);
+			setDynamicProps(n4, [_getPartAttrs("value", { class: ["rp-select__value", { "rp-select__placeholder": !unref(hasValue) }] })]);
+			setText(x4, toDisplayString(unref(displayLabel) || __props.placeholder));
+			setDynamicProps(n11, [_getPartAttrs("indicator", { class: "rp-select__indicator" })]);
 		});
-		setInsertionState(n10, 0, 0);
+		setInsertionState(n11, 0, 0);
 		createIf(() => unref(canClear), () => {
-			const n7 = t1();
-			renderEffect(() => setDynamicProps(n7, [
+			const n8 = t1();
+			renderEffect(() => setDynamicProps(n8, [
 				{ type: "button" },
 				unref(getPartAttrs)("clear", { class: "rp-select__clear" }),
 				{
@@ -343,74 +460,75 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					tabindex: "-1"
 				}
 			]));
-			setInsertionState(n7, null, 0);
+			setInsertionState(n8, null, 0);
 			createComponent(unref(x_default));
-			n7.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
-			on(n7, "click", withModifiers((e) => unref(clearSelection)(e), ["stop"]));
-			return n7;
+			n8.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
+			on(n8, "click", withModifiers((e) => unref(clearSelection)(e), ["stop"]));
+			return n8;
 		});
-		setInsertionState(n9, null, 0);
+		setInsertionState(n10, null, 0);
 		createComponent(unref(chevrons_up_down_default));
-		n11.$evtclick = createInvoker((e) => unref(toggle)(e));
-		n11.$evtkeydown = createInvoker((e) => unref(onTriggerKeydown)(e));
-		_setTemplateRef(n11, triggerRef, null, "triggerRef");
-		setInsertionState(n25, null, 2);
+		n12.$evtclick = createInvoker((e) => unref(toggle)(e));
+		n12.$evtkeydown = createInvoker((e) => unref(onTriggerKeydown)(e));
+		_setTemplateRef(n12, triggerRef, null, "triggerRef");
+		setInsertionState(n26, null, 2);
 		createComponent(VaporTransition, { name: "rp-select-dropdown" }, extend(() => {
 			return createIf(() => unref(isOpen), () => {
-				const n23 = t3();
-				renderEffect(() => setDynamicProps(n23, [unref(getPartAttrs)("content", { class: "rp-select__dropdown" }), {
+				const n24 = t3();
+				renderEffect(() => setDynamicProps(n24, [unref(getPartAttrs)("content", { class: "rp-select__dropdown" }), {
 					role: "listbox",
 					id: unref(listboxId),
 					"data-state": unref(isOpen) ? "open" : "closed"
 				}]));
-				setInsertionState(n23, null, 0);
+				setInsertionState(n24, null, 0);
 				createIf(() => unref(visibleOptions).length === 0, () => {
-					const n19 = t3();
-					renderEffect(() => setDynamicProps(n19, [unref(getPartAttrs)("empty", { class: "rp-select__empty" })]));
-					setInsertionState(n19, null, 0);
+					const n20 = t3();
+					renderEffect(() => setDynamicProps(n20, [unref(getPartAttrs)("empty", { class: "rp-select__empty" })]));
+					setInsertionState(n20, null, 0);
 					createSlot("empty", null, () => {
 						return t2();
 					}, 1);
-					return n19;
+					return n20;
 				});
-				setInsertionState(n23, null, 1);
+				setInsertionState(n24, null, 1);
 				createFor(() => unref(visibleOptions), (_for_item0, _for_key0) => {
-					const n22 = t4();
-					const x22 = txt(n22);
-					n22.$evtclick = createInvoker(() => unref(selectOption)(_for_item0.value));
-					on(n22, "mouseenter", () => unref(onOptionMouseenter)(_for_item0.value, _for_key0.value));
+					const n23 = t4();
+					const x23 = txt(n23);
+					n23.$evtclick = createInvoker(() => unref(selectOption)(_for_item0.value));
+					on(n23, "mouseenter", () => unref(onOptionMouseenter)(_for_item0.value, _for_key0.value));
 					renderEffect(() => {
 						const _index = _for_key0.value;
 						const _option = _for_item0.value;
-						const _modelValue = __props.modelValue;
+						const _controllable = unref(controllable);
 						const _presence = unref(presence);
 						const _focusedIndex = unref(focusedIndex);
 						const _option_value = _option.value;
+						const _controllable_value = _controllable.value;
 						const _option_disabled = _option.disabled;
-						setDynamicProps(n22, [{
+						setDynamicProps(n23, [{
 							role: "option",
 							id: `${unref(selectId)}-option-${_index}`,
-							"aria-selected": _option_value === _modelValue,
+							"aria-selected": _option_value === _controllable_value.value,
 							"aria-disabled": _option_disabled || void 0,
-							"data-selected": _presence(_option_value === _modelValue),
+							"data-selected": _presence(_option_value === _controllable_value.value),
 							"data-highlighted": _presence(_index === _focusedIndex),
 							"data-disabled": _presence(_option.disabled)
 						}, unref(getPartAttrs)("option", { class: ["rp-select__option", {
-							"rp-select__option--selected": _option_value === _modelValue,
+							"rp-select__option--selected": _option_value === _controllable_value.value,
 							"rp-select__option--focused": _index === _focusedIndex,
 							"rp-select__option--disabled": _option_disabled
 						}] })]);
-						setText(x22, toDisplayString(_option.label));
+						setText(x23, toDisplayString(_option.label));
 					});
-					return n22;
+					return n23;
 				}, (option, index) => option.value, 8);
-				return n23;
+				return n24;
 			}, null, 129);
 		}, { _: 8 }));
-		_setTemplateRef(n25, selectRef, null, "selectRef");
-		return n25;
+		_setTemplateRef(n26, selectRef, null, "selectRef");
+		return n26;
 	}
-}), [["__scopeId", "data-v-e6060752"]]);
+}), [["__scopeId", "data-v-5c4e4e6a"]]);
 //#endregion
 //#region src/components/select/types.ts
 var selectParts = [