ropav 0.1.7 → 0.1.8

package/dist/segmented-control.js

@@ -0,0 +1,382 @@
+import './segmented-control.css';
+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 getComponentCheckedColorStyle, t as componentColors } from "./componentColors.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
+import { t as useControlState } from "./useControlState.js";
+import { t as useNativeChoiceTransaction } from "./useNativeChoiceTransaction.js";
+import { child, computed, createFor, createSlot, createTemplateRefSetter, defineVaporComponent, next, renderEffect, setDynamicProps, setInsertionState, setText, shallowRef, template, toDisplayString, unref, useId } from "vue";
+//#region src/internal/composables/useGroupedRadioChoiceTransaction.ts
+function getFirstEnabledValue(choices) {
+	return choices?.find((choice) => !choice.disabled)?.value ?? null;
+}
+function getChoiceMetadata(choices) {
+	return choices?.map((choice) => [choice.value, Boolean(choice.disabled)]) ?? [];
+}
+function hasSameChoiceMetadata(previous, next) {
+	return previous.length === next.length && previous.every(([value, disabled], index) => value === next[index]?.[0] && disabled === next[index]?.[1]);
+}
+function useGroupedRadioChoiceTransaction(options) {
+	const inputsByValue = shallowRef(/* @__PURE__ */ new Map());
+	const inputRefs = computed(() => options.choices()?.map((choice) => inputsByValue.value.get(choice.value) ?? null) ?? []);
+	const explicitDefaultValue = options.value.defaultValue();
+	const hasExplicitEmptyDefault = explicitDefaultValue === null;
+	const initialValue = explicitDefaultValue === void 0 ? getFirstEnabledValue(options.choices()) : explicitDefaultValue;
+	let nativeResetValue = initialValue;
+	let choiceMetadata = getChoiceMetadata(options.choices());
+	let shouldSyncNativeDefault = true;
+	function findInputChoice(input) {
+		const index = inputRefs.value.indexOf(input);
+		return index < 0 ? void 0 : options.choices()?.[index];
+	}
+	function getResetValue(currentValue) {
+		if (hasExplicitEmptyDefault) return null;
+		const initialChoice = options.choices()?.find((choice) => choice.value === initialValue);
+		if (initialChoice && !initialChoice.disabled) return initialChoice.value;
+		const fallbackValue = getFirstEnabledValue(options.choices());
+		return currentValue === fallbackValue ? fallbackValue : initialValue;
+	}
+	function getValidationAnchor(currentValue) {
+		let firstEnabledInput;
+		for (const [index, choice] of (options.choices() ?? []).entries()) {
+			const input = inputRefs.value[index];
+			if (!input || options.disabled() || choice.disabled) continue;
+			firstEnabledInput ??= input;
+			if (choice.value === currentValue) return input;
+		}
+		return firstEnabledInput;
+	}
+	function syncInputs(value) {
+		for (const [index, input] of inputRefs.value.entries()) {
+			if (!input) continue;
+			input.checked = options.choices()?.[index]?.value === value;
+		}
+		if (!shouldSyncNativeDefault) return;
+		shouldSyncNativeDefault = false;
+		for (const [index, input] of inputRefs.value.entries()) if (input) input.defaultChecked = options.choices()?.[index]?.value === nativeResetValue;
+	}
+	const valueOptions = {
+		modelValue: options.value.modelValue,
+		defaultValue: () => initialValue,
+		onChange: options.value.onChange
+	};
+	let currentValue;
+	const transaction = useNativeChoiceTransaction({
+		value: valueOptions,
+		adapter: {
+			commitValue(_value, _initialValue, applyValue) {
+				applyValue();
+			},
+			controls: () => inputRefs.value,
+			readResetValue(controls) {
+				const checked = controls.find((control) => control.checked);
+				return checked ? findInputChoice(checked)?.value ?? null : null;
+			},
+			reconcileValue(value, _initialValue, isControlled) {
+				const nextChoiceMetadata = getChoiceMetadata(options.choices());
+				if (hasSameChoiceMetadata(choiceMetadata, nextChoiceMetadata)) return value;
+				choiceMetadata = nextChoiceMetadata;
+				let reconciledValue = value;
+				if (!isControlled && !(value === null && hasExplicitEmptyDefault)) reconciledValue = options.choices()?.some((choice) => choice.value === value && !choice.disabled) ? value : getFirstEnabledValue(options.choices());
+				nativeResetValue = getResetValue(reconciledValue);
+				shouldSyncNativeDefault = true;
+				return reconciledValue;
+			},
+			syncValue: syncInputs,
+			validationMessage(element) {
+				return element === getValidationAnchor(currentValue.value) ? options.validationMessage?.() : void 0;
+			}
+		}
+	});
+	currentValue = transaction.value;
+	function createInputRef(value) {
+		let mountedInput = null;
+		return (element) => {
+			const input = element instanceof HTMLInputElement ? element : null;
+			if (input) {
+				mountedInput = input;
+				input.defaultChecked = value === nativeResetValue;
+				const existingInput = inputsByValue.value.get(value);
+				const hasOtherRegistration = [...inputsByValue.value].some(([registeredValue, registeredInput]) => registeredValue !== value && registeredInput === input);
+				if (existingInput === input && !hasOtherRegistration) return;
+				const nextInputs = new Map(inputsByValue.value);
+				for (const [registeredValue, registeredInput] of nextInputs) if (registeredInput === input) nextInputs.delete(registeredValue);
+				nextInputs.set(value, input);
+				inputsByValue.value = nextInputs;
+				return;
+			}
+			const removedInput = mountedInput;
+			mountedInput = null;
+			if (!removedInput || inputsByValue.value.get(value) !== removedInput) return;
+			const nextInputs = new Map(inputsByValue.value);
+			nextInputs.delete(value);
+			inputsByValue.value = nextInputs;
+		};
+	}
+	return {
+		acceptValue: transaction.requestValueUpdate,
+		createInputRef,
+		inputRefs,
+		value: transaction.value
+	};
+}
+//#endregion
+//#region src/components/segmented-control/useSegmentedControl.ts
+function useSegmentedControl(props, emitUpdate) {
+	const control = useControlState(props);
+	const generatedId = useId();
+	const baseId = computed(() => props.id ?? generatedId);
+	const groupName = computed(() => props.name ?? `${baseId.value}-segmented-control`);
+	const transaction = useGroupedRadioChoiceTransaction({
+		choices: () => props.options,
+		disabled: () => control.disabled,
+		validationMessage: () => props.validationMessage,
+		value: {
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange(value) {
+				if (value !== null) emitUpdate(value);
+			}
+		}
+	});
+	const inputRefs = transaction.inputRefs;
+	const selectedValue = transaction.value;
+	const rootClass = computed(() => bem("rp-segmented-control", {
+		[`size-${props.size ?? "md"}`]: true,
+		[`radius-${props.radius ?? "sm"}`]: true,
+		[props.orientation ?? "horizontal"]: true,
+		"full-width": props.fullWidth,
+		disabled: control.disabled,
+		invalid: control.invalid
+	}));
+	const rootStyle = computed(() => getComponentCheckedColorStyle({
+		color: props.color,
+		autoContrast: props.autoContrast,
+		contrastColor: props.contrastColor,
+		colorProperty: "--_rp-segmented-control-color",
+		checkedColorProperty: "--_rp-segmented-control-on-color"
+	}));
+	function isSelected(option) {
+		return option.value === selectedValue.value;
+	}
+	function isOptionDisabled(option) {
+		return control.disabled || Boolean(option.disabled);
+	}
+	function selectOption(option) {
+		if (isOptionDisabled(option)) return;
+		transaction.acceptValue(option.value);
+	}
+	function getInputId(index) {
+		return `${baseId.value}-option-${index}`;
+	}
+	function focus(options) {
+		const selectedInput = inputRefs.value.find((input) => input?.checked && !input.disabled);
+		const firstEnabledInput = inputRefs.value.find((input) => input && !input.disabled);
+		(selectedInput ?? firstEnabledInput)?.focus(options);
+	}
+	return {
+		control,
+		inputRefs,
+		selectedValue,
+		rootClass,
+		rootStyle,
+		groupName,
+		createInputRef: transaction.createInputRef,
+		isSelected,
+		isOptionDisabled,
+		selectOption,
+		getInputId,
+		focus
+	};
+}
+//#endregion
+//#region src/components/segmented-control/segmented-control.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<label data-v-aba56e2a><input data-v-aba56e2a><span data-v-aba56e2a></span><span data-v-aba56e2a>");
+var t2 = template("<div data-v-aba56e2a>", 1);
+//#endregion
+//#region src/components/segmented-control/segmented-control.vue
+var segmented_control_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpSegmentedControl",
+	inheritAttrs: false,
+	__name: "segmented-control",
+	props: {
+		id: {},
+		name: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
+		options: { default: () => [] },
+		color: {},
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
+		size: { default: "md" },
+		radius: { default: "sm" },
+		orientation: { default: "horizontal" },
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { control, inputRefs, selectedValue, rootClass, rootStyle, groupName, createInputRef, isSelected, isOptionDisabled, selectOption, getInputId, focus } = useSegmentedControl(props, (value) => emit("update:modelValue", value));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			id: control.id,
+			class: rootClass.value,
+			style: rootStyle.value,
+			role: "radiogroup",
+			"data-value": selectedValue.value ?? void 0,
+			"data-size": props.size,
+			"data-orientation": props.orientation,
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid),
+			"aria-label": props.ariaLabel || void 0,
+			"aria-labelledby": control.ariaLabelledby,
+			"aria-describedby": control.ariaDescribedby,
+			"aria-orientation": props.orientation,
+			"aria-disabled": control.disabled || void 0,
+			"aria-invalid": control.invalid || void 0,
+			"aria-required": control.required || void 0
+		}));
+		function getControlAttrs(option) {
+			const selected = isSelected(option);
+			const disabled = isOptionDisabled(option);
+			return {
+				...getPartAttrs("control", { class: ["rp-segmented-control__control", {
+					"rp-segmented-control__control--selected": selected,
+					"rp-segmented-control__control--disabled": disabled
+				}] }),
+				"data-state": selected ? "checked" : "unchecked",
+				"data-disabled": toPresenceAttribute(disabled)
+			};
+		}
+		function getInputAttrs(option) {
+			const attributes = props.inputAttrs ?? {};
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(attributes);
+			return {
+				...forwardedAttributes,
+				...getPartAttrs("input", {
+					class: "rp-segmented-control__input",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				onChange: composeEventHandlers(() => selectOption(option), attributes.onChange)
+			};
+		}
+		__expose({
+			nativeElements: inputRefs,
+			focus
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n9 = t2();
+		renderEffect(() => setDynamicProps(n9, [rootAttrs.value]));
+		setInsertionState(n9, null, 0);
+		createFor(() => __props.options, (_for_item0, _for_key0) => {
+			const n8 = t1();
+			const n2 = child(n8);
+			const n3 = next(n2, 1);
+			const n7 = next(n3, 2);
+			renderEffect(() => {
+				const _option = _for_item0.value;
+				const _control = unref(control);
+				const _isOptionDisabled = unref(isOptionDisabled);
+				const _toPresenceAttribute = unref(toPresenceAttribute);
+				const _getPartAttrs = unref(getPartAttrs);
+				const _control_required = _control.required;
+				const _isSelected_option_checked_unchecked = unref(isSelected)(_option) ? "checked" : "unchecked";
+				setDynamicProps(n8, [getControlAttrs(_option)]);
+				setDynamicProps(n2, [getInputAttrs(_option), {
+					id: unref(getInputId)(_for_key0.value),
+					type: "radio",
+					name: unref(groupName),
+					form: _control.form ?? __props.inputAttrs?.form,
+					value: String(_option.value),
+					checked: unref(isSelected)(_option),
+					disabled: _isOptionDisabled(_option) || void 0,
+					required: _control_required || void 0,
+					"aria-describedby": _control.ariaDescribedby,
+					"aria-invalid": _control.invalid || void 0,
+					"aria-required": _control_required || void 0,
+					"data-state": _isSelected_option_checked_unchecked,
+					"data-disabled": _toPresenceAttribute(_isOptionDisabled(_option)),
+					"data-invalid": _toPresenceAttribute(_control.invalid)
+				}]);
+				_setTemplateRef(n2, unref(createInputRef)(_option.value), true);
+				setDynamicProps(n3, [_getPartAttrs("indicator", { class: "rp-segmented-control__indicator" }), {
+					"aria-hidden": "true",
+					"data-state": _isSelected_option_checked_unchecked
+				}]);
+				setDynamicProps(n7, [_getPartAttrs("label", { class: "rp-segmented-control__label" })]);
+			});
+			setInsertionState(n7, null, 0);
+			createSlot("option", {
+				option: () => _for_item0.value,
+				selected: () => unref(isSelected)(_for_item0.value),
+				disabled: () => unref(isOptionDisabled)(_for_item0.value)
+			}, () => {
+				const n6 = t0();
+				renderEffect(() => setText(n6, toDisplayString(_for_item0.value.label)));
+				return n6;
+			}, 1);
+			return n8;
+		}, (option, index) => option.value, 9);
+		return n9;
+	}
+}), [["__scopeId", "data-v-aba56e2a"]]);
+//#endregion
+//#region src/components/segmented-control/types.ts
+var segmentedControlParts = [
+	"root",
+	"control",
+	"input",
+	"indicator",
+	"label"
+];
+var segmentedControlColors = componentColors;
+var segmentedControlSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var segmentedControlRadiuses = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"full"
+];
+var segmentedControlOrientations = ["horizontal", "vertical"];
+//#endregion
+export { segmentedControlSizes as a, segmentedControlRadiuses as i, segmentedControlOrientations as n, segmented_control_default as o, segmentedControlParts as r, segmentedControlColors as t };

package/dist/select.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-select[data-v-b42a5b2f] {
+.rp-select[data-v-097d7f90] {
     --_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,7 +15,7 @@
     font-weight: var(--rp-font-weight-normal);
     line-height: 1;
 }
-.rp-select__native[data-v-b42a5b2f] {
+.rp-select__native[data-v-097d7f90] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -26,42 +26,42 @@
     white-space: nowrap;
     border-width: 0;
 }
-.rp-select--size-xs[data-v-b42a5b2f] {
+.rp-select--size-xs[data-v-097d7f90] {
     --_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-b42a5b2f] {
+.rp-select--size-sm[data-v-097d7f90] {
     --_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-b42a5b2f] {
+.rp-select--size-md[data-v-097d7f90] {
     --_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-b42a5b2f] {
+.rp-select--size-lg[data-v-097d7f90] {
     --_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-b42a5b2f] {
+.rp-select--size-xl[data-v-097d7f90] {
     --_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-b42a5b2f], [data-rp-color-scheme=dark] .rp-select[data-v-b42a5b2f] {
+html.dark .rp-select[data-v-097d7f90], [data-rp-color-scheme=dark] .rp-select[data-v-097d7f90] {
     --_rp-select-invalid-border: var(--rp-color-red-light-color);
     --_rp-select-invalid-ring: color-mix(
         in srgb,
@@ -70,11 +70,11 @@ html.dark .rp-select[data-v-b42a5b2f], [data-rp-color-scheme=dark] .rp-select[da
     );
     --_rp-select-option-focused-bg: var(--rp-color-default-hover);
 }
-.rp-select--disabled[data-v-b42a5b2f] {
+.rp-select--disabled[data-v-097d7f90] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-select__trigger[data-v-b42a5b2f] {
+.rp-select__trigger[data-v-097d7f90] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -91,81 +91,81 @@ html.dark .rp-select[data-v-b42a5b2f], [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-b42a5b2f]:hover {
+.rp-select__trigger[data-v-097d7f90]:hover {
     border-color: var(--rp-color-control-border-hover);
 }
-.rp-select__trigger[data-v-b42a5b2f]:focus-visible {
+.rp-select__trigger[data-v-097d7f90]: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-b42a5b2f] {
+.rp-select--radius-xs[data-v-097d7f90] {
     --_rp-select-radius: var(--rp-radius-xs);
 }
-.rp-select--radius-sm[data-v-b42a5b2f] {
+.rp-select--radius-sm[data-v-097d7f90] {
     --_rp-select-radius: var(--rp-radius-sm);
 }
-.rp-select--radius-md[data-v-b42a5b2f] {
+.rp-select--radius-md[data-v-097d7f90] {
     --_rp-select-radius: var(--rp-radius-md);
 }
-.rp-select--radius-lg[data-v-b42a5b2f] {
+.rp-select--radius-lg[data-v-097d7f90] {
     --_rp-select-radius: var(--rp-radius-lg);
 }
-.rp-select--radius-xl[data-v-b42a5b2f] {
+.rp-select--radius-xl[data-v-097d7f90] {
     --_rp-select-radius: var(--rp-radius-xl);
 }
-.rp-select--open .rp-select__trigger[data-v-b42a5b2f] {
+.rp-select--open .rp-select__trigger[data-v-097d7f90] {
     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-b42a5b2f] {
+.rp-select--invalid .rp-select__trigger[data-v-097d7f90] {
     border-color: var(--_rp-select-invalid-border);
 }
-.rp-select--invalid .rp-select__trigger[data-v-b42a5b2f]:focus-visible, .rp-select--open.rp-select--invalid .rp-select__trigger[data-v-b42a5b2f] {
+.rp-select--invalid .rp-select__trigger[data-v-097d7f90]:focus-visible, .rp-select--open.rp-select--invalid .rp-select__trigger[data-v-097d7f90] {
     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-b42a5b2f] {
+.rp-select__value[data-v-097d7f90] {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--rp-color-control-fg);
 }
-.rp-select__placeholder[data-v-b42a5b2f] {
+.rp-select__placeholder[data-v-097d7f90] {
     color: var(--rp-color-control-placeholder);
 }
-.rp-select__indicator[data-v-b42a5b2f] {
+.rp-select__indicator[data-v-097d7f90] {
     display: inline-flex;
     align-items: center;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }
-.rp-select__indicator svg[data-v-b42a5b2f] {
+.rp-select__indicator svg[data-v-097d7f90] {
     width: 100%;
     height: 100%;
 }
-.rp-select__indicator[data-v-b42a5b2f] {
+.rp-select__indicator[data-v-097d7f90] {
     position: relative;
     color: var(--rp-color-control-icon);
     transform: translateX(var(--rp-spacing-1));
 }
-.rp-select__arrow[data-v-b42a5b2f] {
+.rp-select__arrow[data-v-097d7f90] {
     display: inline-flex;
     align-items: center;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }
-.rp-select__arrow svg[data-v-b42a5b2f] {
+.rp-select__arrow svg[data-v-097d7f90] {
     width: 100%;
     height: 100%;
 }
-.rp-select__arrow[data-v-b42a5b2f] {
+.rp-select__arrow[data-v-097d7f90] {
     transition: opacity var(--rp-transition-fast);
 }
-.rp-select__clear[data-v-b42a5b2f] {
+.rp-select__clear[data-v-097d7f90] {
     padding: 0;
     font: inherit;
     background: none;
@@ -177,11 +177,11 @@ html.dark .rp-select[data-v-b42a5b2f], [data-rp-color-scheme=dark] .rp-select[da
     height: 1em;
     flex-shrink: 0;
 }
-.rp-select__clear svg[data-v-b42a5b2f] {
+.rp-select__clear svg[data-v-097d7f90] {
     width: 100%;
     height: 100%;
 }
-.rp-select__clear[data-v-b42a5b2f] {
+.rp-select__clear[data-v-097d7f90] {
     position: absolute;
     inset: 0;
     z-index: 1;
@@ -190,21 +190,19 @@ html.dark .rp-select[data-v-b42a5b2f], [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-b42a5b2f]:hover {
+.rp-select__clear[data-v-097d7f90]:hover {
     color: var(--rp-color-control-fg);
 }
-.rp-select__trigger:hover .rp-select__clear[data-v-b42a5b2f] {
+.rp-select__trigger:hover .rp-select__clear[data-v-097d7f90] {
     opacity: 1;
     pointer-events: auto;
 }
-.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-b42a5b2f] {
+.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-097d7f90] {
     opacity: 0;
 }
-.rp-select__dropdown[data-v-b42a5b2f] {
+.rp-select__dropdown[data-v-097d7f90] {
     position: absolute;
-    top: calc(100% + var(--rp-spacing-2));
-    left: 0;
-    right: 0;
+    width: 100%;
     z-index: 100;
     background-color: var(--rp-color-default);
     border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
@@ -214,10 +212,10 @@ html.dark .rp-select[data-v-b42a5b2f], [data-rp-color-scheme=dark] .rp-select[da
     max-height: 240px;
     padding: var(--rp-spacing-1);
 }
-.rp-select__dropdown[data-v-b42a5b2f] .rp-scroll-area__viewport {
+.rp-select__dropdown[data-v-097d7f90] .rp-scroll-area__viewport {
     scroll-padding-block: var(--rp-spacing-1);
 }
-.rp-select__option[data-v-b42a5b2f] {
+.rp-select__option[data-v-097d7f90] {
     display: flex;
     align-items: center;
     min-height: var(--_rp-select-option-min-height);
@@ -228,17 +226,17 @@ html.dark .rp-select[data-v-b42a5b2f], [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-b42a5b2f] {
+.rp-select__option--focused[data-v-097d7f90] {
     background-color: var(--_rp-select-option-focused-bg);
 }
-.rp-select__option--selected[data-v-b42a5b2f] {
+.rp-select__option--selected[data-v-097d7f90] {
     color: var(--rp-primary-color-light-color);
 }
-.rp-select__option--disabled[data-v-b42a5b2f] {
+.rp-select__option--disabled[data-v-097d7f90] {
     color: var(--rp-color-disabled-color);
     cursor: not-allowed;
 }
-.rp-select__empty[data-v-b42a5b2f] {
+.rp-select__empty[data-v-097d7f90] {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -246,13 +244,17 @@ html.dark .rp-select[data-v-b42a5b2f], [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-b42a5b2f],
-  .rp-select-dropdown-leave-active[data-v-b42a5b2f] {
+.rp-select-dropdown-enter-active[data-v-097d7f90],
+  .rp-select-dropdown-leave-active[data-v-097d7f90] {
     transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
 }
-.rp-select-dropdown-enter-from[data-v-b42a5b2f],
-  .rp-select-dropdown-leave-to[data-v-b42a5b2f] {
+.rp-select-dropdown-enter-from[data-v-097d7f90],
+  .rp-select-dropdown-leave-to[data-v-097d7f90] {
     opacity: 0;
     transform: translateY(calc(-1 * var(--rp-spacing-1)));
 }
+.rp-select__dropdown[data-side=top].rp-select-dropdown-enter-from[data-v-097d7f90],
+  .rp-select__dropdown[data-side=top].rp-select-dropdown-leave-to[data-v-097d7f90] {
+    transform: translateY(var(--rp-spacing-1));
+}
 }