ropav 0.1.7 → 0.1.9

package/dist/slider.js

@@ -11,8 +11,8 @@ import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./
 import { n as mergeAriaIdRefs } from "./aria.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as toCssLength } from "./css.js";
-import { n as isMatchingPointer, t as getPointerId } from "./pointer.js";
 import { t as createRafScheduler } from "./rafScheduler.js";
+import { t as createPointerSession } from "./pointerSession.js";
 import { t as getFloatingOffsetStyle } from "./floatingOffset.js";
 import { n as resolveTooltipColorStyleWithContrast, r as useDelayedOpen, t as tooltip_default } from "./tooltip.js";
 import { applyVShow, child, computed, createComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setText, template, toDisplayString, toRef, txt, unref, useId, useSlots, watch } from "vue";
@@ -112,6 +112,63 @@ function getSliderTooltipAnchor(tooltip) {
 	return typeof tooltip === "object" && tooltip.anchor === "pointer" ? "pointer" : "thumb";
 }
 //#endregion
+//#region src/components/slider/useSliderPointer.ts
+function readPointerGeometry(track, orientation) {
+	const vertical = orientation === "vertical";
+	const thumbTravelRect = track.querySelector(".rp-slider__thumb")?.getBoundingClientRect();
+	const rect = thumbTravelRect && (vertical ? thumbTravelRect.height > 0 : thumbTravelRect.width > 0) ? thumbTravelRect : track.getBoundingClientRect();
+	const length = vertical ? rect.height : rect.width;
+	if (length <= 0) return;
+	return {
+		length,
+		start: vertical ? rect.bottom : rect.left,
+		vertical
+	};
+}
+function getPointerValue(event, geometry, bounds, step) {
+	const pointerPosition = geometry.vertical ? event.clientY : event.clientX;
+	const ratio = clamp((geometry.vertical ? geometry.start - pointerPosition : pointerPosition - geometry.start) / geometry.length, 0, 1);
+	return normalizeSliderValue(bounds.min + ratio * (bounds.max - bounds.min), bounds.min, bounds.max, step);
+}
+function useSliderPointer(options) {
+	function refreshGeometry(currentSession) {
+		const geometry = readPointerGeometry(currentSession.track, options.orientation());
+		if (!geometry) return false;
+		currentSession.geometry = geometry;
+		return true;
+	}
+	function updateFromPointer(event, currentSession) {
+		options.updateValue(getPointerValue(event, currentSession.geometry, options.bounds.value, options.step.value));
+	}
+	const pointerSession = createPointerSession({
+		onStart(event, currentSession) {
+			event.preventDefault();
+			options.inputRef.value?.focus({ preventScroll: true });
+			updateFromPointer(event, currentSession);
+		},
+		onUpdate: updateFromPointer,
+		refreshGeometry
+	});
+	function onPointerDown(event) {
+		return pointerSession.start(event, () => {
+			if (options.disabled()) return;
+			const track = event.currentTarget;
+			if (!track) return;
+			const geometry = readPointerGeometry(track, options.orientation());
+			if (!geometry) return;
+			return {
+				state: {
+					geometry,
+					track
+				},
+				target: track
+			};
+		});
+	}
+	onBeforeUnmount(pointerSession.stop);
+	return { onPointerDown };
+}
+//#endregion
 //#region src/components/slider/useSliderPointerPreview.ts
 function getPreviewRect(track, vertical) {
 	const travelRect = track.querySelector(".rp-slider__travel")?.getBoundingClientRect();
@@ -122,9 +179,7 @@ function useSliderPointerPreview(options) {
 	const dragging = ref(false);
 	const previewAvailable = ref(false);
 	const previewValue = ref(options.initialValue);
-	let dragView = null;
-	let dragPointerId;
-	let dragTrack = null;
+	let disposing = false;
 	let pendingPreview;
 	const previewScheduler = createRafScheduler(applyScheduledPreview, () => pendingPreview?.track.ownerDocument.defaultView);
 	function updateFromPointer(pointer, track) {
@@ -158,43 +213,36 @@ function useSliderPointerPreview(options) {
 		previewScheduler.cancel();
 		pendingPreview = void 0;
 	}
-	function removeDragListeners() {
-		dragView?.removeEventListener("pointermove", onWindowPointerMove);
-		dragView?.removeEventListener("pointerup", onPointerEnd);
-		dragView?.removeEventListener("pointercancel", onPointerEnd);
-		dragView = null;
-		dragPointerId = void 0;
-		dragTrack = null;
-	}
+	const pointerSession = createPointerSession({
+		endUpdate: "event",
+		onStart(event, track) {
+			cancelScheduledPreview();
+			dragging.value = true;
+			updateFromPointer(event, track);
+		},
+		onStop() {
+			dragging.value = false;
+			if (!disposing) options.onStateChange();
+		},
+		onUpdate(event, track) {
+			if (updateFromPointer(event, track) && event.type === "pointermove") options.onStateChange();
+		}
+	});
 	function onPointerMove(event) {
-		if (dragging.value && !isMatchingPointer(event, dragPointerId)) return;
+		if (dragging.value) return;
 		const track = event.currentTarget;
 		if (track) schedulePreview(event, track);
 	}
-	function onWindowPointerMove(event) {
-		if (!isMatchingPointer(event, dragPointerId)) return;
-		if (dragTrack) schedulePreview(event, dragTrack);
-	}
-	function onPointerEnd(event) {
-		if (!isMatchingPointer(event, dragPointerId)) return;
-		cancelScheduledPreview();
-		if (dragTrack) updateFromPointer(event, dragTrack);
-		dragging.value = false;
-		removeDragListeners();
-		options.onStateChange();
-	}
 	function onPointerDown(event) {
-		if (options.disabled() || event.button !== 0 || event.isPrimary === false) return false;
-		removeDragListeners();
-		dragging.value = true;
-		dragPointerId = getPointerId(event);
-		dragTrack = event.currentTarget;
-		if (dragTrack) updateFromPointer(event, dragTrack);
-		dragView = dragTrack?.ownerDocument.defaultView ?? null;
-		dragView?.addEventListener("pointermove", onWindowPointerMove);
-		dragView?.addEventListener("pointerup", onPointerEnd);
-		dragView?.addEventListener("pointercancel", onPointerEnd);
-		return true;
+		return pointerSession.start(event, () => {
+			if (options.disabled()) return;
+			const track = event.currentTarget;
+			if (!track) return;
+			return {
+				state: track,
+				target: track
+			};
+		});
 	}
 	function onTrackEnter(event) {
 		if (!options.enabled()) return;
@@ -207,7 +255,8 @@ function useSliderPointerPreview(options) {
 		if (!dragging.value && options.enabled()) cancelScheduledPreview();
 	}
 	onBeforeUnmount(() => {
-		removeDragListeners();
+		disposing = true;
+		pointerSession.stop();
 		cancelScheduledPreview();
 	});
 	return {
@@ -365,7 +414,11 @@ function useSliderValueState(props, onChange) {
 	function onInput(event) {
 		if (control.disabled) return;
 		const input = event.target;
-		controllable.setValue(normalizeSliderValue(input.valueAsNumber, bounds.value.min, bounds.value.max, nativeStep.value));
+		updateValue(input.valueAsNumber);
+	}
+	function updateValue(value) {
+		if (control.disabled) return;
+		controllable.setValue(normalizeSliderValue(value, bounds.value.min, bounds.value.max, nativeStep.value));
 	}
 	useFormControl({
 		elements: () => [inputRef.value],
@@ -399,7 +452,8 @@ function useSliderValueState(props, onChange) {
 		markItems,
 		hasMarkLabels,
 		trackSlotProps,
-		onInput
+		onInput,
+		updateValue
 	};
 }
 //#endregion
@@ -444,6 +498,19 @@ function useSlider(props, onChange) {
 		invalid: valueState.control.invalid
 	}));
 	const trackStyle = computed(() => getSliderTrackStyle(props, valueState.valuePercent.value, tooltipState.tooltipPercent.value));
+	const pointerState = useSliderPointer({
+		bounds: valueState.bounds,
+		disabled: () => valueState.control.disabled,
+		inputRef: valueState.inputRef,
+		orientation: () => props.orientation,
+		step: valueState.nativeStep,
+		updateValue: valueState.updateValue
+	});
+	function onTrackPointerDown(event) {
+		const started = pointerState.onPointerDown(event);
+		tooltipState.onTooltipPointerDown(event);
+		return started;
+	}
 	return {
 		inputRef: valueState.inputRef,
 		focus: valueState.focus,
@@ -478,7 +545,7 @@ function useSlider(props, onChange) {
 		tooltipFormattedValue: tooltipState.tooltipFormattedValue,
 		tooltipContent: tooltipState.tooltipContent,
 		onInput: valueState.onInput,
-		onTooltipPointerDown: tooltipState.onTooltipPointerDown,
+		onTrackPointerDown,
 		onTooltipPointerMove: tooltipState.onTooltipPointerMove,
 		onTooltipTrackEnter: tooltipState.onTooltipTrackEnter,
 		onTooltipTrackLeave: tooltipState.onTooltipTrackLeave,
@@ -489,17 +556,17 @@ function useSlider(props, onChange) {
 }
 //#endregion
 //#region src/components/slider/slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<span data-v-f21fa11c>");
-var t1$2 = template("<span data-v-f21fa11c class=rp-slider__header>");
-var t2$2 = template("<span data-v-f21fa11c class=\"rp-slider__track-layer rp-slider__track-underlay\"aria-hidden=true>");
-var t3$2 = template("<span data-v-f21fa11c class=\"rp-slider__track-layer rp-slider__track-overlay\"aria-hidden=true>");
-var t4$2 = template("<span data-v-f21fa11c class=rp-slider__travel aria-hidden=true>", 2);
-var t5$1 = template("<span data-v-f21fa11c> ");
-var t6$1 = template("<span data-v-f21fa11c><span data-v-f21fa11c class=rp-slider__mark-dot></span>");
-var t7$1 = template("<span data-v-f21fa11c class=rp-slider__marks aria-hidden=true>");
-var t8$1 = template("<span data-v-f21fa11c class=rp-slider__tooltip-anchor aria-hidden=true></span>", 2);
+var t0$2 = template("<span data-v-0fbfb274>");
+var t1$2 = template("<span data-v-0fbfb274 class=rp-slider__header>");
+var t2$2 = template("<span data-v-0fbfb274 class=\"rp-slider__track-layer rp-slider__track-underlay\"aria-hidden=true>");
+var t3$2 = template("<span data-v-0fbfb274 class=\"rp-slider__track-layer rp-slider__track-overlay\"aria-hidden=true>");
+var t4$2 = template("<span data-v-0fbfb274 class=rp-slider__travel aria-hidden=true>", 2);
+var t5$1 = template("<span data-v-0fbfb274> ");
+var t6$1 = template("<span data-v-0fbfb274><span data-v-0fbfb274 class=rp-slider__mark-dot></span>");
+var t7$1 = template("<span data-v-0fbfb274 class=rp-slider__marks aria-hidden=true>");
+var t8$1 = template("<span data-v-0fbfb274 class=rp-slider__tooltip-anchor aria-hidden=true></span>", 2);
 var t9$1 = template(" ");
-var t10 = template("<label data-v-f21fa11c><span data-v-f21fa11c><span data-v-f21fa11c class=rp-slider__rail aria-hidden=true></span><!><span data-v-f21fa11c></span><!><input data-v-f21fa11c><!><span data-v-f21fa11c><span data-v-f21fa11c class=rp-slider__thumb-content>", 1);
+var t10 = template("<label data-v-0fbfb274><span data-v-0fbfb274><span data-v-0fbfb274 class=rp-slider__rail aria-hidden=true></span><!><span data-v-0fbfb274></span><!><input data-v-0fbfb274><!><span data-v-0fbfb274><span data-v-0fbfb274 class=rp-slider__thumb-content>", 1);
 //#endregion
 //#region src/components/slider/slider.vue
 var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -562,7 +629,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const slots = useSlots();
 		const props = __props;
 		const emit = __emit;
-		const { inputRef, focus, control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, thumbMode, trackSlotProps, trackStyle, trackHovered, dragging, tooltipVisible, tooltipOpen, tooltipAnchor, tooltipPlacement, tooltipId, tooltipColor, tooltipAutoContrast, tooltipContrastColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipValue, tooltipPercent, tooltipFormattedValue, tooltipContent, onInput, onTooltipPointerDown, onTooltipPointerMove, onTooltipTrackEnter, onTooltipTrackLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => emit("update:modelValue", value));
+		const { inputRef, focus, control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, thumbMode, trackSlotProps, trackStyle, trackHovered, dragging, tooltipVisible, tooltipOpen, tooltipAnchor, tooltipPlacement, tooltipId, tooltipColor, tooltipAutoContrast, tooltipContrastColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipValue, tooltipPercent, tooltipFormattedValue, tooltipContent, onInput, onTrackPointerDown, onTooltipPointerMove, onTooltipTrackEnter, onTooltipTrackLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => emit("update:modelValue", value));
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: [rootClass.value, { "rp-slider--custom-thumb": Boolean(slots.thumb) }],
@@ -749,7 +816,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				}
 			});
 		});
-		on(n45, "pointerdown", (e) => unref(onTooltipPointerDown)(e));
+		on(n45, "pointerdown", (e) => unref(onTrackPointerDown)(e));
 		on(n45, "pointerenter", (e) => unref(onTooltipTrackEnter)(e));
 		on(n45, "pointerleave", (e) => unref(onTooltipTrackLeave)(e));
 		on(n45, "pointermove", (e) => unref(onTooltipPointerMove)(e));
@@ -758,7 +825,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		on(n45, "keydown", (e) => unref(onTooltipKeydown)(e));
 		return n48;
 	}
-}), [["__scopeId", "data-v-f21fa11c"]]);
+}), [["__scopeId", "data-v-0fbfb274"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderTooltipCollision.ts
 var TOOLTIP_COLLISION_GAP = 4;
@@ -1240,113 +1307,62 @@ function getRangeSliderPointerValue(pointer, geometry, bounds) {
 //#endregion
 //#region src/components/slider/useRangeSliderPointer.ts
 function useRangeSliderPointer(options) {
-	let session;
-	let pendingPointerEvent;
-	let geometryDirty = false;
-	function refreshGeometry() {
-		const currentSession = session;
-		if (!currentSession) return false;
-		if (!geometryDirty) return true;
+	function refreshGeometry(currentSession) {
 		const geometry = options.getPointerGeometry(currentSession.track);
 		if (geometry === void 0) return false;
-		geometryDirty = false;
 		currentSession.geometry = geometry;
 		return true;
 	}
-	function applyScheduledUpdate() {
-		if (!refreshGeometry()) return;
-		const event = pendingPointerEvent;
-		pendingPointerEvent = void 0;
-		if (event && isCurrentPointer(event)) updateFromPointer(event);
-	}
-	const updateScheduler = createRafScheduler(applyScheduledUpdate, () => session?.view);
-	function flushScheduledUpdate() {
-		updateScheduler.cancel();
-		applyScheduledUpdate();
-	}
-	function scheduleUpdate() {
-		if (session) updateScheduler.schedule();
-	}
-	function onGeometryChange() {
-		if (!session) return;
-		geometryDirty = true;
-		scheduleUpdate();
-	}
-	function stopDragging() {
-		const stoppedSession = session;
-		if (!stoppedSession) return;
-		stoppedSession.view?.removeEventListener("pointermove", onPointerMove);
-		stoppedSession.view?.removeEventListener("pointerup", onPointerEnd);
-		stoppedSession.view?.removeEventListener("pointercancel", onPointerEnd);
-		stoppedSession.view?.removeEventListener("resize", onGeometryChange);
-		stoppedSession.view?.removeEventListener("scroll", onGeometryChange, true);
-		updateScheduler.cancel();
-		pendingPointerEvent = void 0;
-		geometryDirty = false;
-		session = void 0;
-		options.endDrag(stoppedSession.thumb);
-	}
-	function switchDraggingThumb(nextThumb) {
-		const currentSession = session;
-		if (!currentSession || currentSession.thumb === nextThumb) return;
+	function switchDraggingThumb(currentSession, nextThumb) {
+		if (currentSession.thumb === nextThumb) return;
 		const previousThumb = currentSession.thumb;
 		currentSession.thumb = nextThumb;
 		options.transferDrag(previousThumb, nextThumb);
 		options.setActiveThumb(nextThumb);
 		options.transferFocusedThumb(currentSession.track, previousThumb, nextThumb);
 	}
-	function updateFromPointer(event) {
-		const currentSession = session;
-		if (!currentSession) return;
+	function updateFromPointer(event, currentSession) {
 		const value = options.getPointerValue(event, currentSession.geometry);
 		if (value == null) return;
-		switchDraggingThumb(options.updateThumb(currentSession.thumb, value, currentSession.anchorValue));
-	}
-	function isCurrentPointer(event) {
-		return isMatchingPointer(event, session?.pointerId);
-	}
-	function onPointerMove(event) {
-		if (!isCurrentPointer(event)) return;
-		if (!session) return;
-		pendingPointerEvent = event;
-		scheduleUpdate();
-	}
-	function onPointerEnd(event) {
-		if (!isCurrentPointer(event)) return;
-		if (event.type === "pointerup") flushScheduledUpdate();
-		stopDragging();
-	}
+		switchDraggingThumb(currentSession, options.updateThumb(currentSession.thumb, value, currentSession.anchorValue));
+	}
+	const pointerSession = createPointerSession({
+		onStart(event, currentSession) {
+			event.preventDefault();
+			options.setActiveThumb(currentSession.thumb);
+			options.focusThumb(currentSession.track, currentSession.thumb);
+			options.startDrag(currentSession.thumb);
+			switchDraggingThumb(currentSession, options.updateThumb(currentSession.thumb, currentSession.initialValue, currentSession.anchorValue));
+		},
+		onStop(currentSession) {
+			options.endDrag(currentSession.thumb);
+		},
+		onUpdate: updateFromPointer,
+		refreshGeometry
+	});
 	function onTrackPointerDown(event) {
-		if (options.disabled() || event.button !== 0 || event.isPrimary === false) return;
-		const track = event.currentTarget;
-		if (!track) return;
-		const geometry = options.getPointerGeometry(track);
-		if (geometry === void 0) return;
-		const pointerValue = options.getPointerValue(event, geometry);
-		if (pointerValue == null) return;
-		const thumb = options.getThumb(event, pointerValue);
-		event.preventDefault();
-		stopDragging();
-		options.setActiveThumb(thumb);
-		options.focusThumb(track, thumb);
-		session = {
-			view: track.ownerDocument.defaultView,
-			track,
-			geometry,
-			thumb,
-			anchorValue: options.getAnchorValue(thumb),
-			pointerId: getPointerId(event)
-		};
-		options.startDrag(thumb);
-		switchDraggingThumb(options.updateThumb(thumb, pointerValue, session.anchorValue));
-		const view = session?.view;
-		view?.addEventListener("pointermove", onPointerMove);
-		view?.addEventListener("pointerup", onPointerEnd);
-		view?.addEventListener("pointercancel", onPointerEnd);
-		view?.addEventListener("resize", onGeometryChange);
-		view?.addEventListener("scroll", onGeometryChange, true);
+		return pointerSession.start(event, () => {
+			if (options.disabled()) return;
+			const track = event.currentTarget;
+			if (!track) return;
+			const geometry = options.getPointerGeometry(track);
+			if (geometry === void 0) return;
+			const initialValue = options.getPointerValue(event, geometry);
+			if (initialValue == null) return;
+			const thumb = options.getThumb(event, initialValue);
+			return {
+				state: {
+					anchorValue: options.getAnchorValue(thumb),
+					geometry,
+					initialValue,
+					thumb,
+					track
+				},
+				target: track
+			};
+		});
 	}
-	onBeforeUnmount(stopDragging);
+	onBeforeUnmount(pointerSession.stop);
 	return { onTrackPointerDown };
 }
 //#endregion

package/dist/tags-input.css

@@ -0,0 +1,197 @@
+@layer ropav.components {
+.rp-tags-input[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-md);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-md);
+    --_rp-tags-input-radius: var(--rp-radius-sm);
+    --_rp-tags-input-invalid-border: var(--rp-color-red-outline);
+    --_rp-tags-input-invalid-ring: color-mix(in srgb, var(--rp-color-red-outline) 32%, transparent);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-width: 180px;
+    min-height: var(--_rp-tags-input-height);
+    padding: var(--rp-spacing-1) var(--_rp-tags-input-padding-x);
+    gap: var(--rp-spacing-2);
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-tags-input-font-size);
+    font-weight: var(--rp-font-weight-normal);
+    line-height: 1;
+    background-color: var(--rp-color-control-bg);
+    border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+    border-radius: var(--_rp-tags-input-radius);
+    cursor: text;
+    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-tags-input[data-v-9fbac28f]:hover:not(.rp-tags-input--disabled):not(.rp-tags-input--invalid) {
+    border-color: var(--rp-color-control-border-hover);
+}
+.rp-tags-input[data-v-9fbac28f]:focus-within:not(.rp-tags-input--disabled):not(.rp-tags-input--invalid) {
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-tags-input__native[data-v-9fbac28f] {
+    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-tags-input--size-xs[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-xs);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-xs) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-xs);
+}
+.rp-tags-input--size-sm[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-sm);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-sm) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-sm);
+}
+.rp-tags-input--size-md[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-md);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-md);
+}
+.rp-tags-input--size-lg[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-lg);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-lg) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-lg);
+}
+.rp-tags-input--size-xl[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-xl);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-xl) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-xl);
+}
+.rp-tags-input--radius-xs[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-xs);
+}
+.rp-tags-input--radius-sm[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-sm);
+}
+.rp-tags-input--radius-md[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-md);
+}
+.rp-tags-input--radius-lg[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-lg);
+}
+.rp-tags-input--radius-xl[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-xl);
+}
+.rp-tags-input--disabled[data-v-9fbac28f] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-tags-input--readonly[data-v-9fbac28f] {
+    background-color: var(--rp-color-control-readonly-bg);
+}
+.rp-tags-input--invalid[data-v-9fbac28f] {
+    border-color: var(--_rp-tags-input-invalid-border);
+}
+.rp-tags-input--invalid[data-v-9fbac28f]:focus-within:not(.rp-tags-input--disabled) {
+    border-color: var(--_rp-tags-input-invalid-border);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-tags-input-invalid-ring);
+}
+.rp-tags-input__tags[data-v-9fbac28f] {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 0;
+    gap: var(--rp-spacing-1);
+}
+.rp-tags-input__tag[data-v-9fbac28f] {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    max-width: 100%;
+    min-height: calc(var(--_rp-tags-input-height) - var(--rp-spacing-3));
+    padding-inline: var(--rp-spacing-2) var(--rp-spacing-1);
+    gap: var(--rp-spacing-1);
+    color: var(--rp-color-control-fg);
+    background-color: var(--rp-color-default-hover);
+    border-radius: var(--_rp-tags-input-radius);
+}
+.rp-tags-input__tag-label[data-v-9fbac28f] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.6;
+    flex-shrink: 0;
+    transition: opacity var(--rp-transition-fast);
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f]:hover {
+    opacity: 1;
+}
+.rp-tags-input__tag-remove svg[data-v-9fbac28f] {
+    width: 100%;
+    height: 100%;
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f] {
+    width: 1em;
+    height: 1em;
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f]:disabled {
+    cursor: not-allowed;
+}
+.rp-tags-input__input[data-v-9fbac28f] {
+    box-sizing: border-box;
+    flex: 1 0 4rem;
+    width: 4rem;
+    min-width: 4rem;
+    min-height: calc(var(--_rp-tags-input-height) - var(--rp-spacing-2));
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: var(--rp-color-control-fg);
+    line-height: 1;
+}
+.rp-tags-input__input[data-v-9fbac28f]::placeholder {
+    color: var(--rp-color-control-placeholder);
+}
+.rp-tags-input__input[data-v-9fbac28f]:disabled {
+    cursor: not-allowed;
+}
+.rp-tags-input__clear[data-v-9fbac28f] {
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+.rp-tags-input__clear svg[data-v-9fbac28f] {
+    width: 100%;
+    height: 100%;
+}
+.rp-tags-input__clear[data-v-9fbac28f] {
+    flex-shrink: 0;
+    color: var(--rp-color-control-icon);
+    transform: translateX(var(--rp-spacing-1));
+    transition: color var(--rp-transition-fast);
+}
+.rp-tags-input__clear[data-v-9fbac28f]:hover {
+    color: var(--rp-color-control-fg);
+}
+}