ropav 0.1.4 → 0.1.6

package/dist/radio.js

@@ -1,9 +1,10 @@
 import './radio.css';
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
-import { n as getComponentColorValue, r as getComponentContrastColor } from "./componentColors.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { i as useFormControl, o as useControllableValue } from "./useFormControl.js";
+import { i as getComponentContrastColor, r as getComponentColorValue } from "./componentColors.js";
+import { i as useFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, createIf, createSlot, defineVaporComponent, inject, next, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, shallowRef, template, unref, useId } from "vue";
 //#region src/components/radio/types.ts
@@ -17,13 +18,16 @@ var radioGroupParts = ["root"];
 var radioGroupKey = Symbol("radioGroup");
 //#endregion
 //#region src/components/radio/useRadio.ts
-function getRadioColorStyle(color, autoContrast) {
+function getRadioColorStyle(color, autoContrast, contrastColor) {
 	const colorValue = getComponentColorValue(color);
 	if (color && !colorValue) return void 0;
-	if (!colorValue && !autoContrast) return void 0;
+	if (!colorValue && autoContrast === false && contrastColor === void 0) return void 0;
 	const style = {};
 	if (colorValue) style["--_rp-radio-color"] = colorValue;
-	if (autoContrast) style["--_rp-radio-on-color"] = getComponentContrastColor(color ?? "primary", { autoContrast });
+	if (autoContrast !== false || contrastColor !== void 0) style["--_rp-radio-on-color"] = getComponentContrastColor(color ?? "primary", {
+		autoContrast,
+		contrastColor
+	});
 	return style;
 }
 function useRadio(props, emitChange) {
@@ -39,6 +43,7 @@ function useRadio(props, emitChange) {
 	const variant = computed(() => props.variant ?? group?.variant);
 	const color = computed(() => props.color ?? group?.color);
 	const autoContrast = computed(() => props.autoContrast ?? group?.autoContrast);
+	const contrastColor = computed(() => props.contrastColor ?? group?.contrastColor);
 	const size = computed(() => props.size ?? group?.size);
 	const rootClass = computed(() => bem("rp-radio", {
 		checked: isChecked.value,
@@ -47,7 +52,7 @@ function useRadio(props, emitChange) {
 		[variant.value ?? ""]: Boolean(variant.value),
 		[`size-${size.value}`]: Boolean(size.value)
 	}));
-	const rootStyle = computed(() => getRadioColorStyle(color.value, autoContrast.value));
+	const rootStyle = computed(() => getRadioColorStyle(color.value, autoContrast.value, contrastColor.value));
 	function onSelect(event) {
 		if (isDisabled.value) return;
 		group?.select(props.value);
@@ -163,6 +168,9 @@ function useRadioGroup(props, emitUpdate) {
 		get autoContrast() {
 			return props.autoContrast;
 		},
+		get contrastColor() {
+			return props.contrastColor;
+		},
 		get size() {
 			return props.size;
 		},
@@ -205,6 +213,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			type: Boolean,
 			default: void 0
 		},
+		contrastColor: {},
 		size: { default: void 0 },
 		disabled: {
 			type: Boolean,
@@ -325,6 +334,7 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			type: Boolean,
 			default: void 0
 		},
+		contrastColor: {},
 		size: { default: void 0 },
 		orientation: { default: "vertical" },
 		disabled: {

package/dist/scroll-area.css

@@ -60,6 +60,9 @@
     user-select: none;
     transition: opacity var(--rp-transition-fast);
 }
+.rp-scroll-area__scrollbar[data-direction=rtl][data-v-f5c4e940] {
+    direction: rtl;
+}
 .rp-scroll-area__scrollbar[data-visible][data-v-f5c4e940] {
     opacity: 1;
     pointer-events: auto;
@@ -102,6 +105,9 @@
     height: 100%;
     transform: translateX(var(--_rp-scroll-area-thumb-offset));
 }
+.rp-scroll-area__scrollbar--horizontal[data-direction=rtl] .rp-scroll-area__thumb[data-v-f5c4e940] {
+    transform: translateX(calc(-1 * var(--_rp-scroll-area-thumb-offset)));
+}
 .rp-scroll-area__scrollbar--vertical .rp-scroll-area__thumb[data-v-f5c4e940] {
     width: 100%;
     height: var(--_rp-scroll-area-thumb-size);
@@ -109,7 +115,7 @@
 }
 .rp-scroll-area__corner[data-v-f5c4e940] {
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 1;
     width: var(--_rp-scroll-area-scrollbar-size);
@@ -118,6 +124,9 @@
     pointer-events: none;
     transition: opacity var(--rp-transition-fast);
 }
+.rp-scroll-area__corner[data-direction=rtl][data-v-f5c4e940] {
+    direction: rtl;
+}
 .rp-scroll-area__corner[data-visible][data-v-f5c4e940] {
     opacity: 1;
 }

package/dist/scroll-area.js

@@ -7,6 +7,16 @@ var minimumThumbSize = 18;
 function clamp(value, min, max) {
 	return Math.min(max, Math.max(min, value));
 }
+function getScrollDirection(viewport) {
+	return viewport.ownerDocument.defaultView?.getComputedStyle(viewport).direction === "rtl" ? "rtl" : "ltr";
+}
+function getLogicalHorizontalPosition(scrollLeft, maxPosition, direction) {
+	return clamp(direction === "rtl" ? -scrollLeft : scrollLeft, 0, maxPosition);
+}
+function getRawHorizontalPosition(position, maxPosition, direction) {
+	const logicalPosition = clamp(position, 0, maxPosition);
+	return direction === "rtl" && logicalPosition !== 0 ? -logicalPosition : logicalPosition;
+}
 function isAxisEnabled(scrollbars, axis) {
 	if (scrollbars === false) return false;
 	if (axis === "x") return scrollbars === "x" || scrollbars === "both";
@@ -43,7 +53,7 @@ function useScrollAreaControls(options) {
 		y: 0
 	};
 	function onViewportScroll(event) {
-		options.metrics.update();
+		options.metrics.updatePosition();
 		options.showDuringScroll();
 		const position = {
 			x: options.metrics.getPosition("x"),
@@ -70,9 +80,7 @@ function useScrollAreaControls(options) {
 			const reachedStart = position.x <= 1 && previousPosition.x > 1;
 			const reachedEnd = position.x >= maxPosition - 1 && previousPosition.x < maxPosition - 1;
 			if (reachedStart || reachedEnd) {
-				const viewport = options.viewportRef.value;
-				const view = viewport?.ownerDocument.defaultView;
-				const rtl = viewport ? view?.getComputedStyle(viewport).direction === "rtl" : false;
+				const rtl = options.metrics.metrics.direction === "rtl";
 				if (reachedStart) boundaries.push(rtl ? "right" : "left");
 				if (reachedEnd) boundaries.push(rtl ? "left" : "right");
 			}
@@ -98,24 +106,26 @@ function useScrollAreaControls(options) {
 	function writeAxisPosition(axis, value) {
 		const viewport = options.viewportRef.value;
 		if (!viewport) return;
-		if (axis === "x") viewport.scrollLeft = (viewport.scrollLeft < 0 ? -1 : 1) * clamp(value, 0, options.metrics.getMaxPosition("x"));
+		if (axis === "x") viewport.scrollLeft = getRawHorizontalPosition(value, options.metrics.getMaxPosition("x"), options.metrics.metrics.direction);
 		else viewport.scrollTop = clamp(value, 0, options.metrics.getMaxPosition("y"));
-		options.metrics.update();
+		options.metrics.updatePosition();
 		options.showDuringScroll();
 	}
 	function onScrollbarKeydown(axis, event) {
 		const viewport = options.viewportRef.value;
 		if (!viewport || !options.metrics.getOverflow(axis)) return;
+		options.metrics.updatePosition(viewport);
 		const current = options.metrics.getPosition(axis);
 		const pageSize = axis === "x" ? viewport.clientWidth : viewport.clientHeight;
-		const nextPosition = getKeyboardPosition(event.key, current, pageSize, options.metrics.getMaxPosition(axis));
+		const nextPosition = getKeyboardPosition(axis, event.key, current, pageSize, options.metrics.getMaxPosition(axis), options.metrics.metrics.direction);
 		if (nextPosition === void 0) return;
 		event.preventDefault();
 		writeAxisPosition(axis, nextPosition);
 	}
 	function onScrollbarWheel(axis, event) {
 		if (!options.metrics.getOverflow(axis)) return;
-		const delta = axis === "x" ? event.deltaX || event.deltaY : event.deltaY;
+		options.metrics.updatePosition();
+		const delta = getWheelDelta(axis, event, options.metrics.metrics.direction);
 		if (!delta) return;
 		event.preventDefault();
 		writeAxisPosition(axis, options.metrics.getPosition(axis) + delta);
@@ -125,14 +135,14 @@ function useScrollAreaControls(options) {
 		if (!viewport) return;
 		if (typeof viewport.scrollTo === "function") viewport.scrollTo(scrollOptions);
 		else setFallbackPosition(viewport, scrollOptions, false);
-		options.metrics.scheduleUpdate();
+		options.metrics.schedulePositionUpdate();
 	}
 	function scrollBy(scrollOptions) {
 		const viewport = options.viewportRef.value;
 		if (!viewport) return;
 		if (typeof viewport.scrollBy === "function") viewport.scrollBy(scrollOptions);
 		else setFallbackPosition(viewport, scrollOptions, true);
-		options.metrics.scheduleUpdate();
+		options.metrics.schedulePositionUpdate();
 	}
 	return {
 		onViewportScroll,
@@ -143,11 +153,11 @@ function useScrollAreaControls(options) {
 		scrollBy
 	};
 }
-function getKeyboardPosition(key, current, pageSize, max) {
+function getKeyboardPosition(axis, key, current, pageSize, max, direction) {
 	switch (key) {
-		case "ArrowLeft":
+		case "ArrowLeft": return current + (axis === "x" && direction === "rtl" ? 40 : -40);
 		case "ArrowUp": return current - 40;
-		case "ArrowRight":
+		case "ArrowRight": return current + (axis === "x" && direction === "rtl" ? -40 : 40);
 		case "ArrowDown": return current + 40;
 		case "PageUp": return current - pageSize;
 		case "PageDown": return current + pageSize;
@@ -156,6 +166,11 @@ function getKeyboardPosition(key, current, pageSize, max) {
 		default: return;
 	}
 }
+function getWheelDelta(axis, event, direction) {
+	if (axis === "y") return event.deltaY;
+	if (!event.deltaX) return event.deltaY;
+	return direction === "rtl" ? -event.deltaX : event.deltaX;
+}
 function setFallbackPosition(viewport, scrollOptions, relative) {
 	if (scrollOptions.left !== void 0) viewport.scrollLeft = (relative ? viewport.scrollLeft : 0) + scrollOptions.left;
 	if (scrollOptions.top !== void 0) viewport.scrollTop = (relative ? viewport.scrollTop : 0) + scrollOptions.top;
@@ -197,6 +212,7 @@ function createRafScheduler(callback, getView) {
 //#region src/components/scroll-area/useScrollAreaMetrics.ts
 function useScrollAreaMetrics(options) {
 	const metrics = reactive({
+		direction: "ltr",
 		clientWidth: 0,
 		clientHeight: 0,
 		scrollWidth: 0,
@@ -216,33 +232,44 @@ function useScrollAreaMetrics(options) {
 	}));
 	let resizeObserver;
 	let mutationObserver;
+	let directionObserver;
+	let horizontalThumbSizeRatio = 1;
+	let verticalThumbSizeRatio = 1;
 	const scheduler = createRafScheduler(update, () => options.viewportRef.value?.ownerDocument.defaultView);
+	const positionScheduler = createRafScheduler(updatePosition, () => options.viewportRef.value?.ownerDocument.defaultView);
 	function update() {
 		const viewport = options.viewportRef.value;
 		if (!viewport) return;
-		readViewportMetrics(viewport);
-		updateThumbMetrics(viewport);
+		readViewportGeometry(viewport);
+		updateThumbGeometry(viewport);
+		updatePosition(viewport);
 	}
-	function readViewportMetrics(viewport) {
+	function readViewportGeometry(viewport) {
 		metrics.clientWidth = viewport.clientWidth;
 		metrics.clientHeight = viewport.clientHeight;
 		metrics.scrollWidth = viewport.scrollWidth;
 		metrics.scrollHeight = viewport.scrollHeight;
-		metrics.x = viewport.scrollLeft;
-		metrics.y = viewport.scrollTop;
 		metrics.overflowX = options.horizontalEnabled.value && viewport.scrollWidth > viewport.clientWidth + 1;
 		metrics.overflowY = options.verticalEnabled.value && viewport.scrollHeight > viewport.clientHeight + 1;
 	}
-	function updateThumbMetrics(viewport) {
+	function updateThumbGeometry(viewport) {
 		const horizontalGeometry = getThumbGeometry(options.horizontalScrollbarRef.value?.clientWidth ?? viewport.clientWidth, viewport.clientWidth, viewport.scrollWidth);
 		const verticalGeometry = getThumbGeometry(options.verticalScrollbarRef.value?.clientHeight ?? viewport.clientHeight, viewport.clientHeight, viewport.scrollHeight);
 		metrics.horizontalThumbSize = horizontalGeometry.size;
-		metrics.horizontalThumbOffset = getThumbOffset(clamp(Math.abs(viewport.scrollLeft), 0, getMaxPosition("x")), getMaxPosition("x"), horizontalGeometry.offsetRatio);
+		horizontalThumbSizeRatio = horizontalGeometry.offsetRatio;
 		metrics.verticalThumbSize = verticalGeometry.size;
-		metrics.verticalThumbOffset = getThumbOffset(clamp(viewport.scrollTop, 0, getMaxPosition("y")), getMaxPosition("y"), verticalGeometry.offsetRatio);
+		verticalThumbSizeRatio = verticalGeometry.offsetRatio;
+	}
+	function updatePosition(viewport = options.viewportRef.value) {
+		if (!viewport) return;
+		metrics.direction = getScrollDirection(viewport);
+		metrics.x = getLogicalHorizontalPosition(viewport.scrollLeft, getMaxPosition("x"), metrics.direction);
+		metrics.y = clamp(viewport.scrollTop, 0, getMaxPosition("y"));
+		metrics.horizontalThumbOffset = getThumbOffset(metrics.x, getMaxPosition("x"), horizontalThumbSizeRatio);
+		metrics.verticalThumbOffset = getThumbOffset(metrics.y, getMaxPosition("y"), verticalThumbSizeRatio);
 	}
 	function getPosition(axis) {
-		return axis === "x" ? Math.abs(metrics.x) : metrics.y;
+		return axis === "x" ? metrics.x : metrics.y;
 	}
 	function getMaxPosition(axis) {
 		return axis === "x" ? Math.max(0, metrics.scrollWidth - metrics.clientWidth) : Math.max(0, metrics.scrollHeight - metrics.clientHeight);
@@ -260,8 +287,26 @@ function useScrollAreaMetrics(options) {
 			resizeObserver.observe(viewport);
 			if (options.contentRef.value) resizeObserver.observe(options.contentRef.value);
 		} else attachMutationObserver(view);
+		attachDirectionObserver(view, viewport);
 		view?.addEventListener("resize", scheduler.schedule);
 	}
+	function attachDirectionObserver(view, viewport) {
+		const MutationObserverConstructor = view?.MutationObserver ?? globalThis.MutationObserver;
+		if (!MutationObserverConstructor) return;
+		directionObserver = new MutationObserverConstructor(positionScheduler.schedule);
+		let element = viewport;
+		while (element) {
+			directionObserver.observe(element, {
+				attributes: true,
+				attributeFilter: [
+					"class",
+					"dir",
+					"style"
+				]
+			});
+			element = element.parentElement;
+		}
+	}
 	function attachMutationObserver(view) {
 		const MutationObserverConstructor = view?.MutationObserver ?? globalThis.MutationObserver;
 		const content = options.contentRef.value;
@@ -279,8 +324,10 @@ function useScrollAreaMetrics(options) {
 		const view = options.viewportRef.value?.ownerDocument.defaultView;
 		resizeObserver?.disconnect();
 		mutationObserver?.disconnect();
+		directionObserver?.disconnect();
 		resizeObserver = void 0;
 		mutationObserver = void 0;
+		directionObserver = void 0;
 		view?.removeEventListener("resize", scheduler.schedule);
 	}
 	onMounted(() => {
@@ -290,12 +337,15 @@ function useScrollAreaMetrics(options) {
 	onBeforeUnmount(() => {
 		detachObservers();
 		scheduler.cancel();
+		positionScheduler.cancel();
 	});
 	return {
 		metrics,
 		position,
 		update,
+		updatePosition,
 		scheduleUpdate: scheduler.schedule,
+		schedulePositionUpdate: positionScheduler.schedule,
 		getPosition,
 		getMaxPosition,
 		getOverflow
@@ -308,6 +358,7 @@ function useScrollAreaPointer(options) {
 	function onScrollbarPointerdown(axis, event) {
 		if (event.target !== event.currentTarget || event.button !== 0) return;
 		if (!options.metrics.getOverflow(axis)) return;
+		options.metrics.updatePosition();
 		const scrollbar = event.currentTarget;
 		const thumb = scrollbar.firstElementChild;
 		const trackRect = scrollbar.getBoundingClientRect();
@@ -319,12 +370,14 @@ function useScrollAreaPointer(options) {
 		const travel = Math.max(0, trackSize - thumbSize);
 		if (travel === 0) return;
 		event.preventDefault();
-		const ratio = clamp((coordinate - trackStart - thumbSize / 2) / travel, 0, 1);
-		options.controls.writeAxisPosition(axis, ratio * options.metrics.getMaxPosition(axis));
+		const physicalRatio = clamp((coordinate - trackStart - thumbSize / 2) / travel, 0, 1);
+		const logicalRatio = axis === "x" && options.metrics.metrics.direction === "rtl" ? 1 - physicalRatio : physicalRatio;
+		options.controls.writeAxisPosition(axis, logicalRatio * options.metrics.getMaxPosition(axis));
 	}
 	function onThumbPointerdown(axis, event) {
 		if (event.button !== 0 || event.isPrimary === false) return;
 		if (!options.metrics.getOverflow(axis)) return;
+		options.metrics.updatePosition();
 		const scrollbar = getScrollbar(axis);
 		const thumb = event.currentTarget;
 		if (!scrollbar) return;
@@ -349,6 +402,7 @@ function useScrollAreaPointer(options) {
 			startPosition: options.metrics.getPosition(axis),
 			maxPosition: options.metrics.getMaxPosition(axis),
 			travel,
+			coordinateDirection: axis === "x" && options.metrics.metrics.direction === "rtl" ? -1 : 1,
 			view
 		};
 		options.setDraggingAxis(axis);
@@ -360,7 +414,7 @@ function useScrollAreaPointer(options) {
 		const session = dragSession;
 		if (!session || !isCurrentPointer(event, session)) return;
 		const delta = getPointerCoordinate(session.axis, event) - session.startCoordinate;
-		options.controls.writeAxisPosition(session.axis, session.startPosition + delta / session.travel * session.maxPosition);
+		options.controls.writeAxisPosition(session.axis, session.startPosition + session.coordinateDirection * delta * session.maxPosition / session.travel);
 	}
 	function onPointerend(event) {
 		if (!dragSession || !isCurrentPointer(event, dragSession)) return;
@@ -542,6 +596,7 @@ function useScrollAreaPresentation(props, scrollArea) {
 		class: "rp-scroll-area",
 		style: getRootStyle(props.scrollbarSize),
 		"data-type": props.type,
+		"data-direction": scrollArea.metrics.direction,
 		"data-scrollbars": props.scrollbars === false ? "none" : props.scrollbars,
 		"data-overflow-x": presence(scrollArea.metrics.overflowX),
 		"data-overflow-y": presence(scrollArea.metrics.overflowY),
@@ -593,6 +648,7 @@ function useScrollAreaPresentation(props, scrollArea) {
 	const cornerAttrs = computed(() => ({
 		...getPartAttrs("corner", { class: "rp-scroll-area__corner" }),
 		"aria-hidden": true,
+		"data-direction": scrollArea.metrics.direction,
 		"data-visible": presence(scrollArea.horizontalScrollbarActive.value && scrollArea.verticalScrollbarActive.value)
 	}));
 	const slotProps = computed(() => ({
@@ -619,6 +675,7 @@ function useScrollAreaPresentation(props, scrollArea) {
 			"aria-disabled": !scrollArea.getOverflow(axis) || void 0,
 			"aria-hidden": props.embedded || !active || void 0,
 			"data-orientation": vertical ? "vertical" : "horizontal",
+			"data-direction": scrollArea.metrics.direction,
 			"data-active": presence(active),
 			"data-visible": presence(visible)
 		};

package/dist/select.css

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