ropav 0.1.6 → 0.1.8

package/dist/field.js

@@ -1,21 +1,11 @@
 import './field.css';
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+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 { child, computed, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
+import { t as isInteractiveElement } from "./interactive.js";
+import { child, computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
 //#region src/components/field/useField.ts
-var INTERACTIVE_LABEL_SELECTOR = [
-	"button",
-	"a[href]",
-	"input",
-	"select",
-	"textarea",
-	"[contenteditable=\"true\"]",
-	"[tabindex]:not([tabindex=\"-1\"])"
-].join(",");
-function isInteractiveLabelTarget(target) {
-	return Boolean(target.closest(INTERACTIVE_LABEL_SELECTOR));
-}
 function useField(props) {
 	const slots = useSlots();
 	const generatedId = useId();
@@ -43,8 +33,7 @@ function useField(props) {
 	}));
 	function focusControl(e) {
 		if (props.disabled) return;
-		const target = e.target;
-		if (target instanceof Element && isInteractiveLabelTarget(target)) return;
+		if (isInteractiveElement(e.target)) return;
 		const label = e.currentTarget;
 		const control = label instanceof HTMLLabelElement ? label.control ?? label.ownerDocument.getElementById(controlId.value) : void 0;
 		if (control instanceof HTMLElement) control.focus();
@@ -67,11 +56,10 @@ function useField(props) {
 //#endregion
 //#region src/components/field/field.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template(" ");
-var t1 = template("<span data-v-cbd66c2e>*");
-var t2 = template("<label data-v-cbd66c2e>");
-var t3 = template("<p data-v-cbd66c2e>");
-var t4 = template("<div data-v-cbd66c2e><div data-v-cbd66c2e></div>", 1);
-delegateEvents("mousedown");
+var t1 = template("<span data-v-babf7642>*");
+var t2 = template("<label data-v-babf7642>");
+var t3 = template("<p data-v-babf7642>");
+var t4 = template("<div data-v-babf7642><div data-v-babf7642></div>", 1);
 //#endregion
 //#region src/components/field/field.vue
 var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -103,8 +91,8 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
-			"data-disabled": presence(props.disabled),
-			"data-invalid": presence(isInvalid.value)
+			"data-disabled": toPresenceAttribute(props.disabled),
+			"data-invalid": toPresenceAttribute(isInvalid.value)
 		}));
 		const n20 = t4();
 		const n10 = child(n20, 1);
@@ -129,7 +117,7 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				renderEffect(() => setDynamicProps(n7, [unref(getPartAttrs)("required", { class: "rp-field__required" }), { "aria-hidden": "true" }]));
 				return n7;
 			});
-			n8.$evtmousedown = createInvoker((e) => unref(focusControl)(e));
+			on(n8, "mousedown", (e) => unref(focusControl)(e));
 			return n8;
 		});
 		renderEffect(() => setDynamicProps(n10, [unref(getPartAttrs)("control", { class: "rp-field__control" })]));
@@ -161,7 +149,7 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n20;
 	}
-}), [["__scopeId", "data-v-cbd66c2e"]]);
+}), [["__scopeId", "data-v-babf7642"]]);
 //#endregion
 //#region src/components/field/types.ts
 var fieldParts = [

package/dist/file-input.css

@@ -0,0 +1,135 @@
+@layer ropav.components {
+.rp-file-input[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-md);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-md);
+    --_rp-file-input-radius: var(--rp-radius-sm);
+    --_rp-file-input-valid-border: var(--rp-color-green-outline);
+    --_rp-file-input-valid-ring: color-mix(in srgb, var(--rp-color-green-outline) 32%, transparent);
+    --_rp-file-input-invalid-border: var(--rp-color-red-outline);
+    --_rp-file-input-invalid-ring: color-mix(in srgb, var(--rp-color-red-outline) 32%, transparent);
+    position: relative;
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: stretch;
+    width: 100%;
+    height: var(--_rp-file-input-height);
+    overflow: hidden;
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-file-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-file-input-radius);
+    cursor: pointer;
+    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-file-input[data-v-c2dff394]:hover:not(.rp-file-input--disabled):not(.rp-file-input--invalid):not(.rp-file-input--valid) {
+    border-color: var(--rp-color-control-border-hover);
+}
+.rp-file-input[data-v-c2dff394]:focus-within:not(.rp-file-input--disabled):not(.rp-file-input--invalid):not(.rp-file-input--valid) {
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-file-input--size-xs[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-xs);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-xs) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-xs);
+}
+.rp-file-input--size-sm[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-sm);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-sm) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-sm);
+}
+.rp-file-input--size-md[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-md);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-md);
+}
+.rp-file-input--size-lg[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-lg);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-lg) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-lg);
+}
+.rp-file-input--size-xl[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-xl);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-xl) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-xl);
+}
+.rp-file-input--radius-xs[data-v-c2dff394] {
+    --_rp-file-input-radius: var(--rp-radius-xs);
+}
+.rp-file-input--radius-sm[data-v-c2dff394] {
+    --_rp-file-input-radius: var(--rp-radius-sm);
+}
+.rp-file-input--radius-md[data-v-c2dff394] {
+    --_rp-file-input-radius: var(--rp-radius-md);
+}
+.rp-file-input--radius-lg[data-v-c2dff394] {
+    --_rp-file-input-radius: var(--rp-radius-lg);
+}
+.rp-file-input--radius-xl[data-v-c2dff394] {
+    --_rp-file-input-radius: var(--rp-radius-xl);
+}
+.rp-file-input--disabled[data-v-c2dff394] {
+    background-color: var(--rp-color-disabled);
+    border-color: var(--rp-color-disabled-border);
+    cursor: not-allowed;
+}
+.rp-file-input--disabled .rp-file-input__trigger[data-v-c2dff394] {
+    background-color: var(--rp-color-disabled);
+    border-right-color: var(--rp-color-disabled-border);
+}
+.rp-file-input--valid[data-v-c2dff394] {
+    border-color: var(--_rp-file-input-valid-border);
+}
+.rp-file-input--valid[data-v-c2dff394]:focus-within:not(.rp-file-input--disabled) {
+    border-color: var(--_rp-file-input-valid-border);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-file-input-valid-ring);
+}
+.rp-file-input--invalid[data-v-c2dff394] {
+    border-color: var(--_rp-file-input-invalid-border);
+}
+.rp-file-input--invalid[data-v-c2dff394]:focus-within:not(.rp-file-input--disabled) {
+    border-color: var(--_rp-file-input-invalid-border);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-file-input-invalid-ring);
+}
+.rp-file-input__native[data-v-c2dff394] {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+.rp-file-input__native[data-v-c2dff394]:disabled {
+    cursor: not-allowed;
+}
+.rp-file-input__trigger[data-v-c2dff394] {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 var(--_rp-file-input-padding-x);
+    color: var(--rp-color-control-fg);
+    background-color: var(--rp-color-control-readonly-bg);
+    border-right: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+    font-weight: var(--rp-font-weight-medium);
+    white-space: nowrap;
+}
+.rp-file-input__value[data-v-c2dff394] {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0 var(--_rp-file-input-padding-x);
+    color: var(--rp-color-control-fg);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.rp-file-input__value--placeholder[data-v-c2dff394] {
+    color: var(--rp-color-control-placeholder);
+}
+}

package/dist/file-input.js

@@ -0,0 +1,198 @@
+import './file-input.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 { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
+import { t as useControlState } from "./useControlState.js";
+import { t as useNativeFileSelection } from "./useNativeFileSelection.js";
+import { child, computed, createSlot, defineVaporComponent, next, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, setText, template, toDisplayString, unref } from "vue";
+//#region src/components/file-input/useFileInput.ts
+function useFileInput(props, emitUpdate) {
+	const control = useControlState(props);
+	const { inputRef, files, settleSelection, clear, focus, open } = useNativeFileSelection({
+		modelValue: () => props.modelValue,
+		multiple: () => props.multiple ?? false,
+		disabled: () => control.disabled,
+		validationMessage: () => props.validationMessage,
+		onChange: emitUpdate
+	});
+	const fileNames = computed(() => files.value.map((file) => file.name));
+	const hasFiles = computed(() => files.value.length > 0);
+	const rootClass = computed(() => bem("rp-file-input", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		disabled: control.disabled,
+		invalid: control.invalid,
+		valid: control.valid && !control.invalid,
+		filled: hasFiles.value
+	}));
+	const buttonText = computed(() => props.buttonLabel ?? (props.multiple ? "Choose files" : "Choose file"));
+	const displayValue = computed(() => {
+		if (hasFiles.value) return fileNames.value.join(", ");
+		return props.placeholder ?? (props.multiple ? "No files selected" : "No file selected");
+	});
+	function onChange(event) {
+		const input = event.target;
+		settleSelection({
+			status: "accepted",
+			files: input.files ?? []
+		});
+	}
+	return {
+		inputRef,
+		control,
+		files,
+		fileNames,
+		hasFiles,
+		rootClass,
+		buttonText,
+		displayValue,
+		onChange,
+		clear,
+		focus,
+		open
+	};
+}
+//#endregion
+//#region src/components/file-input/file-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<div data-v-c2dff394><input data-v-c2dff394><span data-v-c2dff394></span><span data-v-c2dff394>", 1);
+//#endregion
+//#region src/components/file-input/file-input.vue
+var file_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpFileInput",
+	inheritAttrs: false,
+	__name: "file-input",
+	props: {
+		id: {},
+		name: {},
+		form: {},
+		modelValue: { default: void 0 },
+		accept: { default: void 0 },
+		capture: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		radius: {},
+		buttonLabel: { default: void 0 },
+		placeholder: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		valid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { inputRef, control, files, fileNames, hasFiles, rootClass, buttonText, displayValue, onChange, clear, focus, open } = useFileInput(props, (value) => emit("update:modelValue", value));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid)
+		}));
+		const nativeInputAttrs = computed(() => {
+			const attrs = props.inputAttrs ?? {};
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(attrs);
+			return {
+				...forwardedAttributes,
+				...getPartAttrs("input", {
+					class: "rp-file-input__native",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				id: control.id,
+				name: props.name,
+				form: control.form ?? forwardedAttributes.form,
+				type: "file",
+				value: void 0,
+				accept: props.accept,
+				capture: props.capture,
+				multiple: props.multiple || void 0,
+				disabled: control.disabled || void 0,
+				required: control.required || void 0,
+				"aria-label": props.ariaLabel || void 0,
+				"aria-labelledby": control.ariaLabelledby,
+				"aria-describedby": control.ariaDescribedby,
+				"aria-invalid": control.invalid || void 0,
+				"aria-required": control.required || void 0,
+				"data-disabled": toPresenceAttribute(control.disabled),
+				"data-invalid": toPresenceAttribute(control.invalid),
+				onChange: composeEventHandlers(onChange, attrs.onChange)
+			};
+		});
+		__expose({
+			nativeElement: inputRef,
+			clear,
+			focus,
+			open
+		});
+		const n9 = t1();
+		const n0 = child(n9);
+		const n4 = next(n0, 1);
+		const n8 = next(n4, 2);
+		setStaticTemplateRef(n0, inputRef, null, "inputRef");
+		renderEffect(() => {
+			setDynamicProps(n9, [rootAttrs.value]);
+			setDynamicProps(n0, [nativeInputAttrs.value]);
+			setDynamicProps(n4, [unref(getPartAttrs)("trigger", { class: "rp-file-input__trigger" }), { "aria-hidden": "true" }]);
+		});
+		setInsertionState(n4, null, 0);
+		createSlot("trigger", {
+			files: () => unref(files),
+			multiple: () => __props.multiple
+		}, () => {
+			const n3 = t0();
+			renderEffect(() => setText(n3, toDisplayString(unref(buttonText))));
+			return n3;
+		}, 1);
+		renderEffect(() => setDynamicProps(n8, [unref(getPartAttrs)("value", { class: ["rp-file-input__value", { "rp-file-input__value--placeholder": !unref(hasFiles) }] }), { "aria-hidden": "true" }]));
+		setInsertionState(n8, null, 0);
+		createSlot("value", {
+			files: () => unref(files),
+			fileNames: () => unref(fileNames),
+			hasFiles: () => unref(hasFiles)
+		}, () => {
+			const n7 = t0();
+			renderEffect(() => setText(n7, toDisplayString(unref(displayValue))));
+			return n7;
+		}, 1);
+		return n9;
+	}
+}), [["__scopeId", "data-v-c2dff394"]]);
+//#endregion
+//#region src/components/file-input/types.ts
+var fileInputParts = [
+	"root",
+	"input",
+	"trigger",
+	"value"
+];
+//#endregion
+export { file_input_default as n, fileInputParts as t };

package/dist/floatingOffset.js

@@ -0,0 +1,11 @@
+//#region src/utils/floatingOffset.ts
+function getFloatingOffsetStyle(offset, properties) {
+	if (offset == null) return void 0;
+	if (typeof offset === "number") return { [properties.mainAxis]: `${offset}px` };
+	const style = {};
+	if (offset.mainAxis != null) style[properties.mainAxis] = `${offset.mainAxis}px`;
+	if (offset.crossAxis != null) style[properties.crossAxis] = `${offset.crossAxis}px`;
+	return Object.keys(style).length > 0 ? style : void 0;
+}
+//#endregion
+export { getFloatingOffsetStyle as t };

package/dist/focus-trap.js

@@ -1,6 +1,7 @@
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
-import { computed, createDynamicComponent, createSlot, defineVaporComponent, extend, ref, setStaticTemplateRef, watch } from "vue";
+import { computed, createDynamicComponent, createSlot, defineVaporComponent, extend, ref, setTemplateRefBinding, watch } from "vue";
 //#endregion
 //#region src/components/focus-trap/focus-trap.vue
 var focus_trap_default = /* @__PURE__ */ defineVaporComponent({
@@ -27,6 +28,7 @@ var focus_trap_default = /* @__PURE__ */ defineVaporComponent({
 		const emit = __emit;
 		const containerRef = ref(null);
 		const { isActive, isPaused, activate, deactivate, pause, unpause } = useFocusTrap(containerRef, props.options);
+		const templateRefs = { container: containerRef };
 		const slotProps = computed(() => ({
 			active: isActive.value,
 			paused: isPaused.value,
@@ -38,8 +40,8 @@ var focus_trap_default = /* @__PURE__ */ defineVaporComponent({
 		const { getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: "rp-focus-trap",
-			"data-active": presence(isActive.value),
-			"data-paused": presence(isPaused.value)
+			"data-active": toPresenceAttribute(isActive.value),
+			"data-paused": toPresenceAttribute(isPaused.value)
 		}));
 		function pauseTrap(options) {
 			pause(options);
@@ -69,7 +71,7 @@ var focus_trap_default = /* @__PURE__ */ defineVaporComponent({
 		const n1 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
 			return createSlot("default", { $: [() => slotProps.value] });
 		}, { _: 8 }), 1);
-		setStaticTemplateRef(n1, containerRef, null, "containerRef");
+		setTemplateRefBinding(n1, () => templateRefs.container);
 		return n1;
 	}
 });

package/dist/focusNavigation.js

@@ -0,0 +1,37 @@
+import { n as getNextEnabledIndex, t as getEnabledIndexes } from "./collectionNavigation.js";
+import { t as isElement } from "./query.js";
+//#region src/utils/dom/focusNavigation.ts
+function isDisabled(element) {
+	return element.matches(":disabled");
+}
+function getDirection(key, orientation) {
+	if (orientation === "vertical") {
+		if (key === "ArrowDown") return 1;
+		if (key === "ArrowUp") return -1;
+		return;
+	}
+	if (key === "ArrowRight") return 1;
+	if (key === "ArrowLeft") return -1;
+}
+function getScopedItems(collection, options) {
+	return Array.from(collection.querySelectorAll(options.itemSelector)).filter((item) => item.closest(options.collectionSelector) === collection);
+}
+function getFocusNavigationTarget(event, collection, options) {
+	if (!isElement(event.target)) return void 0;
+	const currentItem = event.target.closest(options.itemSelector);
+	if (!currentItem || currentItem.closest(options.collectionSelector) !== collection || isDisabled(currentItem)) return;
+	const items = getScopedItems(collection, options);
+	const currentIndex = items.indexOf(currentItem);
+	if (currentIndex < 0) return void 0;
+	const enabledIndexes = getEnabledIndexes(items, isDisabled);
+	if (enabledIndexes.length === 0) return void 0;
+	if (event.key === "Home") return items[enabledIndexes[0]];
+	if (event.key === "End") return items[enabledIndexes[enabledIndexes.length - 1]];
+	let direction = getDirection(event.key, options.orientation);
+	if (!direction) return void 0;
+	if (options.orientation === "horizontal" && collection.ownerDocument.defaultView?.getComputedStyle(collection).direction === "rtl") direction = direction === 1 ? -1 : 1;
+	const nextIndex = getNextEnabledIndex(items, currentIndex, direction, isDisabled);
+	return nextIndex === void 0 ? void 0 : items[nextIndex];
+}
+//#endregion
+export { getFocusNavigationTarget as t };

package/dist/hover-card.css

@@ -0,0 +1,80 @@
+@layer ropav.components {
+.rp-hover-card[data-v-55e74041] {
+    position: relative;
+    display: inline-flex;
+    font-family: var(--rp-font-family);
+    vertical-align: middle;
+}
+.rp-hover-card__content[data-v-55e74041] {
+    --_rp-hover-card-main-axis-offset: var(--rp-spacing-2);
+    --_rp-hover-card-cross-axis-offset: 0px;
+    --_rp-hover-card-radius: var(--rp-radius-sm);
+    --_rp-hover-card-arrow-size: 0.5rem;
+    position: absolute;
+    z-index: 100;
+    box-sizing: border-box;
+    width: max-content;
+    max-width: min(22rem, 100vw - var(--rp-spacing-6));
+    padding: var(--rp-spacing-4);
+    color: var(--rp-color-text);
+    font-family: var(--rp-font-family);
+    font-size: var(--rp-font-size-md);
+    line-height: var(--rp-line-height-md);
+    overflow-wrap: anywhere;
+    background-color: var(--rp-color-default);
+    border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
+    border-radius: var(--_rp-hover-card-radius);
+    box-shadow: var(--rp-shadow-base);
+}
+.rp-hover-card--target[data-v-55e74041] {
+    display: contents;
+}
+.rp-hover-card__arrow[data-v-55e74041] {
+    background-color: inherit;
+    border: inherit;
+    rotate: 45deg;
+}
+.rp-hover-card__arrow[data-side=top][data-v-55e74041] {
+    border-top-color: transparent;
+    border-left-color: transparent;
+}
+.rp-hover-card__arrow[data-side=right][data-v-55e74041] {
+    border-top-color: transparent;
+    border-right-color: transparent;
+}
+.rp-hover-card__arrow[data-side=bottom][data-v-55e74041] {
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+}
+.rp-hover-card__arrow[data-side=left][data-v-55e74041] {
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+}
+.rp-hover-card__arrow[data-v-55e74041] {
+    position: absolute;
+    box-sizing: border-box;
+    width: var(--_rp-hover-card-arrow-size);
+    height: var(--_rp-hover-card-arrow-size);
+    pointer-events: none;
+}
+.rp-hover-card__arrow[data-side=top][data-v-55e74041] {
+    bottom: calc(-1 * var(--_rp-hover-card-arrow-size) / 2);
+}
+.rp-hover-card__arrow[data-side=right][data-v-55e74041] {
+    left: calc(-1 * var(--_rp-hover-card-arrow-size) / 2);
+}
+.rp-hover-card__arrow[data-side=bottom][data-v-55e74041] {
+    top: calc(-1 * var(--_rp-hover-card-arrow-size) / 2);
+}
+.rp-hover-card__arrow[data-side=left][data-v-55e74041] {
+    right: calc(-1 * var(--_rp-hover-card-arrow-size) / 2);
+}
+.rp-hover-card-content-enter-active[data-v-55e74041],
+  .rp-hover-card-content-leave-active[data-v-55e74041] {
+    transition: opacity var(--rp-transition-fast);
+}
+.rp-hover-card-content-enter-from[data-v-55e74041],
+  .rp-hover-card-content-leave-to[data-v-55e74041] {
+    opacity: 0;
+}
+}