ropav 0.0.10 → 0.0.11

package/dist/toast.js

@@ -1,9 +1,11 @@
 import './toast.css';
 import { t as x_default } from "./x.js";
 import { t as bem } from "./bem.js";
+import { n as useStylesApi } from "./styles-api.js";
 import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { VaporTeleport, VaporTransition, VaporTransitionGroup, computed, createComponent, createFor, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, extend, inject, nextTick, on, onBeforeUnmount, onMounted, provide, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, toValue, txt, unref, useId, useSlots, watch } from "vue";
+import { n as useTeleportTarget } from "./useTeleportTarget.js";
+import { VaporTeleport, VaporTransition, VaporTransitionGroup, computed, createComponent, createFor, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, extend, inject, nextTick, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, toValue, txt, unref, useId, useSlots, watch } from "vue";
 //#region src/components/toast/defaults.ts
 var DEFAULT_TOAST_DURATION = 5e3;
 var DEFAULT_TOAST_ROLE = "status";
@@ -30,20 +32,17 @@ function getToastColorStyle(color, variant, autoContrast) {
 }
 //#endregion
 //#region src/components/toast/toast.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<div data-v-face18fc class=rp-toast__icon aria-hidden=true>");
+var t0$1 = template("<div data-v-6944ac43>");
 var t1 = template(" ");
-var t2 = template("<div data-v-face18fc class=rp-toast__title>");
-var t3 = template("<p data-v-face18fc class=rp-toast__description> ");
-var t4 = template("<div data-v-face18fc class=rp-toast__body>");
-var t5 = template("<div data-v-face18fc class=rp-toast__content>");
-var t6 = template("<div data-v-face18fc class=rp-toast__action>");
-var t7 = template("<button data-v-face18fc class=rp-toast__close type=button>");
-var t8 = template("<div data-v-face18fc>");
-delegateEvents("click", "focusin", "focusout");
+var t2 = template("<p data-v-6944ac43> ");
+var t3 = template("<div data-v-6944ac43 class=rp-toast__content>");
+var t4 = template("<button data-v-6944ac43>");
+delegateEvents("click");
 //#endregion
 //#region src/components/toast/toast.vue
 var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpToast",
+	inheritAttrs: false,
 	__name: "toast",
 	props: {
 		open: {
@@ -70,7 +69,9 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			type: Boolean,
 			default: true
 		},
-		closeLabel: { default: DEFAULT_TOAST_CLOSE_LABEL }
+		closeLabel: { default: DEFAULT_TOAST_CLOSE_LABEL },
+		classNames: {},
+		styles: {}
 	},
 	emits: [
 		"update:open",
@@ -114,6 +115,16 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			[`radius-${props.radius}`]: Boolean(props.radius)
 		}));
 		const rootStyle = computed(() => getToastColorStyle(props.color, props.variant, props.autoContrast));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			style: rootStyle.value,
+			role: resolvedRole.value,
+			onMouseenter,
+			onMouseleave,
+			onFocusin,
+			onFocusout
+		}));
 		watch([isOpen, () => props.duration], ([open], [wasOpen]) => {
 			if (!isMounted.value) return;
 			if (!open || !wasOpen) {
@@ -201,25 +212,23 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			onAfterLeave: () => _on_after_leave
 		}, extend(() => {
 			return createIf(() => isOpen.value, () => {
-				const n30 = t8();
-				renderEffect(() => {
-					setClass(n30, rootClass.value);
-					setStyle(n30, rootStyle.value);
-					setProp(n30, "role", resolvedRole.value);
-				});
+				const n30 = t0$1();
+				renderEffect(() => setDynamicProps(n30, [rootAttrs.value]));
 				setInsertionState(n30, null, 0);
 				createIf(() => hasIcon.value, () => {
 					const n5 = t0$1();
+					renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("icon", { class: "rp-toast__icon" }), { "aria-hidden": "true" }]));
 					setInsertionState(n5, null, 0);
 					createSlot("icon", null, null, 1);
 					return n5;
 				});
 				setInsertionState(n30, null, 1);
 				createIf(() => hasContent.value, () => {
-					const n21 = t5();
+					const n21 = t3();
 					setInsertionState(n21, null, 0);
 					createIf(() => hasTitle.value, () => {
-						const n13 = t2();
+						const n13 = t0$1();
+						renderEffect(() => setDynamicProps(n13, [unref(getPartAttrs)("title", { class: "rp-toast__title" })]));
 						setInsertionState(n13, null, 0);
 						createSlot("title", null, () => {
 							const n12 = t1();
@@ -230,14 +239,18 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					});
 					setInsertionState(n21, null, 1);
 					createIf(() => hasDescription.value, () => {
-						const n16 = t3();
+						const n16 = t2();
 						const x16 = txt(n16);
-						renderEffect(() => setText(x16, toDisplayString(__props.description)));
+						renderEffect(() => {
+							setDynamicProps(n16, [unref(getPartAttrs)("description", { class: "rp-toast__description" })]);
+							setText(x16, toDisplayString(__props.description));
+						});
 						return n16;
 					});
 					setInsertionState(n21, null, 2);
 					createIf(() => $slots.default, () => {
-						const n20 = t4();
+						const n20 = t0$1();
+						renderEffect(() => setDynamicProps(n20, [unref(getPartAttrs)("body", { class: "rp-toast__body" })]));
 						setInsertionState(n20, null, 0);
 						createSlot("default", null, null, 1);
 						return n20;
@@ -246,31 +259,51 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				});
 				setInsertionState(n30, null, 2);
 				createIf(() => $slots.action, () => {
-					const n25 = t6();
+					const n25 = t0$1();
+					renderEffect(() => setDynamicProps(n25, [unref(getPartAttrs)("action", { class: "rp-toast__action" })]));
 					setInsertionState(n25, null, 0);
 					createSlot("action", null, null, 1);
 					return n25;
 				});
 				setInsertionState(n30, null, 3);
 				createIf(() => __props.closable, () => {
-					const n29 = t7();
-					renderEffect(() => setAttr(n29, "aria-label", __props.closeLabel));
+					const n29 = t4();
+					renderEffect(() => setDynamicProps(n29, [unref(getPartAttrs)("close", { class: "rp-toast__close" }), {
+						type: "button",
+						"aria-label": __props.closeLabel
+					}]));
 					setInsertionState(n29, null, 0);
 					createComponent(unref(x_default), { "aria-hidden": "true" });
 					n29.$evtclick = createInvoker(() => closeToast("dismiss"));
 					return n29;
 				});
-				on(n30, "mouseenter", onMouseenter);
-				on(n30, "mouseleave", onMouseleave);
-				n30.$evtfocusin = createInvoker(onFocusin);
-				n30.$evtfocusout = createInvoker(onFocusout);
 				return n30;
 			}, null, 129);
 		}, { _: 8 }), true);
 	}
-}), [["__scopeId", "data-v-face18fc"]]);
+}), [["__scopeId", "data-v-6944ac43"]]);
 //#endregion
 //#region src/components/toast/types.ts
+var toastParts = [
+	"root",
+	"icon",
+	"title",
+	"description",
+	"body",
+	"action",
+	"close"
+];
+var toastViewportParts = [
+	"root",
+	"item",
+	"toast",
+	"toastIcon",
+	"toastTitle",
+	"toastDescription",
+	"toastBody",
+	"toastAction",
+	"toastClose"
+];
 var toastColors = componentColors;
 var toastVariants = [
 	"subtle",
@@ -539,11 +572,12 @@ var toast_provider_default = /* @__PURE__ */ defineVaporComponent({
 });
 //#endregion
 //#region src/components/toast/toast-viewport.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<li data-v-e4c0bb63 class=rp-toast-viewport__item>");
+var t0 = template("<li data-v-e14bb4e0>");
 //#endregion
 //#region src/components/toast/toast-viewport.vue
 var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpToastViewport",
+	inheritAttrs: false,
 	__name: "toast-viewport",
 	props: {
 		position: { default: "top-right" },
@@ -552,38 +586,64 @@ var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			type: Boolean,
 			default: true
 		},
-		teleportTo: { default: "body" }
+		teleportTo: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props, { slots: $slots }) {
 		const props = __props;
+		const resolvedTeleportTo = useTeleportTarget(() => props.teleportTo);
 		const context = useToastContext("<ToastViewport>");
 		function reverseToasts(toasts) {
 			return toasts.map((_, index) => toasts[toasts.length - index - 1]);
 		}
 		const orderedToasts = computed(() => props.position.startsWith("top") ? reverseToasts(context.toasts.value) : context.toasts.value);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: [
+				"rp-toast-viewport",
+				`rp-toast-viewport--${props.position}`,
+				{ "rp-toast-viewport--empty": orderedToasts.value.length === 0 }
+			],
+			"data-position": props.position,
+			"aria-label": props.label
+		}));
+		const viewportToastPartMap = {
+			root: "toast",
+			icon: "toastIcon",
+			title: "toastTitle",
+			description: "toastDescription",
+			body: "toastBody",
+			action: "toastAction",
+			close: "toastClose"
+		};
+		function getToastClassNames(toast) {
+			return Object.fromEntries(Object.entries(viewportToastPartMap).map(([toastPart, viewportPart]) => [toastPart, [toast.props.classNames?.[toastPart], props.classNames?.[viewportPart]]]));
+		}
+		function getToastStyles(toast) {
+			return Object.fromEntries(Object.entries(viewportToastPartMap).map(([toastPart, viewportPart]) => [toastPart, [toast.props.styles?.[toastPart], props.styles?.[viewportPart]]]));
+		}
 		function dismiss(toast) {
 			context.dismissInstance(toast.instanceId);
 		}
 		return createComponent(VaporTeleport, {
-			to: () => __props.teleportTo,
+			to: () => unref(resolvedTeleportTo),
 			disabled: () => !__props.teleport
 		}, () => {
 			return createComponent(VaporTransitionGroup, {
 				tag: "ol",
 				name: "rp-toast-viewport-item",
-				class: () => [
-					"rp-toast-viewport",
-					`rp-toast-viewport--${__props.position}`,
-					{ "rp-toast-viewport--empty": orderedToasts.value.length === 0 }
-				],
-				"data-position": () => __props.position,
-				"aria-label": () => __props.label
+				$: [() => rootAttrs.value]
 			}, extend(() => {
 				return createFor(() => orderedToasts.value, (_for_item0) => {
 					const n10 = t0();
+					renderEffect(() => setDynamicProps(n10, [unref(getPartAttrs)("item", { class: "rp-toast-viewport__item" }), { "data-type": _for_item0.value.type }]));
 					setInsertionState(n10, null, 0);
 					createComponent(toast_default, { $: [() => _for_item0.value.props, {
 						open: true,
+						"class-names": () => getToastClassNames(_for_item0.value),
+						styles: () => getToastStyles(_for_item0.value),
+						"data-type": () => _for_item0.value.type,
 						onClose: () => ($event) => unref(context).dismissInstance(_for_item0.value.instanceId, $event)
 					}] }, { $: [
 						() => $slots.icon ? {
@@ -618,7 +678,7 @@ var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			}, { _: 8 }));
 		}, true);
 	}
-}), [["__scopeId", "data-v-e4c0bb63"]]);
+}), [["__scopeId", "data-v-e14bb4e0"]]);
 //#endregion
 //#region src/components/toast/useToastState.ts
 function optionValue(value) {
@@ -676,4 +736,4 @@ function useToastState(options = {}) {
 	};
 }
 //#endregion
-export { toastColors as a, toastTypes as c, useToast as i, toastVariants as l, toast_viewport_default as n, toastPositions as o, toast_provider_default as r, toastRadiuses as s, useToastState as t, toast_default as u };
+export { toastColors as a, toastRadiuses as c, toastViewportParts as d, toast_default as f, useToast as i, toastTypes as l, toast_viewport_default as n, toastParts as o, toast_provider_default as r, toastPositions as s, useToastState as t, toastVariants as u };

package/dist/tooltip.css

@@ -1,108 +1,138 @@
-.rp-tooltip[data-v-13c39164] {
-  --_rp-tooltip-main-axis-offset: var(--rp-spacing-2);
-  --_rp-tooltip-cross-axis-offset: 0px;
-  --_rp-tooltip-arrow-size: 0.4375rem;
-  --_rp-tooltip-bg: var(--rp-color-bright);
-  --_rp-tooltip-fg: var(--rp-color-default);
-  position: relative;
-  display: inline-flex;
-  font-family: var(--rp-font-family);
-  vertical-align: middle;
-}
-.rp-tooltip__content[data-v-13c39164] {
-  position: absolute;
-  z-index: 1000;
-  box-sizing: border-box;
-  width: max-content;
-  max-width: min(18rem, 100vw - var(--rp-spacing-6));
-  padding: 0.375rem 0.625rem;
-  color: var(--_rp-tooltip-fg);
-  font-size: 0.8125rem;
-  font-weight: var(--rp-font-weight-medium);
-  line-height: var(--rp-line-height-md);
-  text-align: center;
-  white-space: normal;
-  overflow-wrap: anywhere;
-  pointer-events: none;
-  background-color: var(--_rp-tooltip-bg);
-  border-radius: var(--rp-radius-sm);
-  box-shadow: var(--rp-shadow-md);
-}
-.rp-tooltip--arrow .rp-tooltip__content[data-v-13c39164]::before {
-  position: absolute;
-  width: var(--_rp-tooltip-arrow-size);
-  height: var(--_rp-tooltip-arrow-size);
-  content: "";
-  background-color: inherit;
-  rotate: 45deg;
-}
-.rp-tooltip--placement-top .rp-tooltip__content[data-v-13c39164] {
-  bottom: calc(100% + var(--_rp-tooltip-main-axis-offset));
-  left: calc(50% + var(--_rp-tooltip-cross-axis-offset));
-  translate: -50% 0;
-}
-.rp-tooltip--arrow.rp-tooltip--placement-top .rp-tooltip__content[data-v-13c39164]::before {
-  top: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
-  left: 50%;
-  translate: -50% 0;
-}
-.rp-tooltip--placement-right .rp-tooltip__content[data-v-13c39164] {
-  top: calc(50% + var(--_rp-tooltip-cross-axis-offset));
-  left: calc(100% + var(--_rp-tooltip-main-axis-offset));
-  translate: 0 -50%;
-}
-.rp-tooltip--arrow.rp-tooltip--placement-right .rp-tooltip__content[data-v-13c39164]::before {
-  top: 50%;
-  right: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
-  translate: 0 -50%;
-}
-.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-13c39164] {
-  top: calc(100% + var(--_rp-tooltip-main-axis-offset));
-  left: calc(50% + var(--_rp-tooltip-cross-axis-offset));
-  translate: -50% 0;
-}
-.rp-tooltip--arrow.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-13c39164]::before {
-  bottom: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
-  left: 50%;
-  translate: -50% 0;
-}
-.rp-tooltip--placement-left .rp-tooltip__content[data-v-13c39164] {
-  top: calc(50% + var(--_rp-tooltip-cross-axis-offset));
-  right: calc(100% + var(--_rp-tooltip-main-axis-offset));
-  translate: 0 -50%;
-}
-.rp-tooltip--arrow.rp-tooltip--placement-left .rp-tooltip__content[data-v-13c39164]::before {
-  top: 50%;
-  left: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
-  translate: 0 -50%;
-}
-.rp-tooltip--target[data-v-13c39164] {
-  display: contents;
-}
-.rp-tooltip--target .rp-tooltip__content[data-v-13c39164] {
-  position: fixed;
-  top: var(--_rp-tooltip-target-y, 0);
-  right: auto;
-  bottom: auto;
-  left: var(--_rp-tooltip-target-x, 0);
-}
-.rp-tooltip--target.rp-tooltip--placement-top .rp-tooltip__content[data-v-13c39164] {
-  translate: calc(-50% + var(--_rp-tooltip-cross-axis-offset)) calc(-100% - var(--_rp-tooltip-main-axis-offset));
-}
-.rp-tooltip--target.rp-tooltip--placement-right .rp-tooltip__content[data-v-13c39164] {
-  translate: var(--_rp-tooltip-main-axis-offset) calc(-50% + var(--_rp-tooltip-cross-axis-offset));
-}
-.rp-tooltip--target.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-13c39164] {
-  translate: calc(-50% + var(--_rp-tooltip-cross-axis-offset)) var(--_rp-tooltip-main-axis-offset);
-}
-.rp-tooltip--target.rp-tooltip--placement-left .rp-tooltip__content[data-v-13c39164] {
-  translate: calc(-100% - var(--_rp-tooltip-main-axis-offset)) calc(-50% + var(--_rp-tooltip-cross-axis-offset));
-}
-.rp-tooltip-content-enter-active[data-v-13c39164],
-.rp-tooltip-content-leave-active[data-v-13c39164] {
-  transition: opacity var(--rp-transition-fast);
-}
-.rp-tooltip-content-enter-from[data-v-13c39164],
-.rp-tooltip-content-leave-to[data-v-13c39164] {
-  opacity: 0;
+@layer ropav.components {
+.rp-tooltip[data-v-38bfcb12] {
+    --_rp-tooltip-main-axis-offset: var(--rp-spacing-2);
+    --_rp-tooltip-cross-axis-offset: 0px;
+    --_rp-tooltip-arrow-size: 0.4375rem;
+    --_rp-tooltip-bg: var(--rp-color-bright);
+    --_rp-tooltip-fg: var(--rp-color-default);
+    position: relative;
+    display: inline-flex;
+    font-family: var(--rp-font-family);
+    vertical-align: middle;
+}
+.rp-tooltip__content[data-v-38bfcb12] {
+    position: absolute;
+    z-index: 1000;
+    box-sizing: border-box;
+    width: max-content;
+    max-width: min(18rem, 100vw - var(--rp-spacing-6));
+    padding: 0.375rem 0.625rem;
+    color: var(--_rp-tooltip-fg);
+    font-size: 0.8125rem;
+    font-weight: var(--rp-font-weight-medium);
+    line-height: var(--rp-line-height-md);
+    text-align: center;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    pointer-events: none;
+    background-color: var(--_rp-tooltip-bg);
+    border-radius: var(--rp-radius-sm);
+    box-shadow: var(--rp-shadow-md);
+}
+.rp-tooltip--arrow .rp-tooltip__content[data-v-38bfcb12]:not([data-placement])::before {
+    position: absolute;
+    width: var(--_rp-tooltip-arrow-size);
+    height: var(--_rp-tooltip-arrow-size);
+    content: "";
+    background-color: inherit;
+    rotate: 45deg;
+}
+.rp-tooltip--placement-top .rp-tooltip__content[data-v-38bfcb12] {
+    bottom: calc(100% + var(--_rp-tooltip-main-axis-offset));
+    left: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+    translate: -50% 0;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-top .rp-tooltip__content[data-v-38bfcb12]:not([data-placement])::before {
+    top: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+    left: 50%;
+    translate: -50% 0;
+}
+.rp-tooltip--placement-right .rp-tooltip__content[data-v-38bfcb12] {
+    top: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+    left: calc(100% + var(--_rp-tooltip-main-axis-offset));
+    translate: 0 -50%;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-right .rp-tooltip__content[data-v-38bfcb12]:not([data-placement])::before {
+    top: 50%;
+    right: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+    translate: 0 -50%;
+}
+.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-38bfcb12] {
+    top: calc(100% + var(--_rp-tooltip-main-axis-offset));
+    left: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+    translate: -50% 0;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-38bfcb12]:not([data-placement])::before {
+    bottom: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+    left: 50%;
+    translate: -50% 0;
+}
+.rp-tooltip--placement-left .rp-tooltip__content[data-v-38bfcb12] {
+    top: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+    right: calc(100% + var(--_rp-tooltip-main-axis-offset));
+    translate: 0 -50%;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-left .rp-tooltip__content[data-v-38bfcb12]:not([data-placement])::before {
+    top: 50%;
+    left: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+    translate: 0 -50%;
+}
+.rp-tooltip--target[data-v-38bfcb12] {
+    display: contents;
+}
+.rp-tooltip--target .rp-tooltip__content[data-v-38bfcb12] {
+    position: fixed;
+    top: var(--_rp-tooltip-target-y, 0);
+    right: auto;
+    bottom: auto;
+    left: var(--_rp-tooltip-target-x, 0);
+}
+.rp-tooltip--target.rp-tooltip--placement-top .rp-tooltip__content[data-v-38bfcb12] {
+    translate: calc(-50% + var(--_rp-tooltip-cross-axis-offset)) calc(-100% - var(--_rp-tooltip-main-axis-offset));
+}
+.rp-tooltip--target.rp-tooltip--placement-right .rp-tooltip__content[data-v-38bfcb12] {
+    translate: var(--_rp-tooltip-main-axis-offset) calc(-50% + var(--_rp-tooltip-cross-axis-offset));
+}
+.rp-tooltip--target.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-38bfcb12] {
+    translate: calc(-50% + var(--_rp-tooltip-cross-axis-offset)) var(--_rp-tooltip-main-axis-offset);
+}
+.rp-tooltip--target.rp-tooltip--placement-left .rp-tooltip__content[data-v-38bfcb12] {
+    translate: calc(-100% - var(--_rp-tooltip-main-axis-offset)) calc(-50% + var(--_rp-tooltip-cross-axis-offset));
+}
+.rp-tooltip__content[data-placement][data-v-38bfcb12] {
+    position: absolute;
+    top: 0;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    translate: none;
+}
+.rp-tooltip__arrow[data-v-38bfcb12] {
+    position: absolute;
+    width: var(--_rp-tooltip-arrow-size);
+    height: var(--_rp-tooltip-arrow-size);
+    pointer-events: none;
+    background-color: inherit;
+    rotate: 45deg;
+}
+.rp-tooltip__arrow[data-side=top][data-v-38bfcb12] {
+    bottom: calc(-1 * var(--_rp-tooltip-arrow-size) / 2);
+}
+.rp-tooltip__arrow[data-side=right][data-v-38bfcb12] {
+    left: calc(-1 * var(--_rp-tooltip-arrow-size) / 2);
+}
+.rp-tooltip__arrow[data-side=bottom][data-v-38bfcb12] {
+    top: calc(-1 * var(--_rp-tooltip-arrow-size) / 2);
+}
+.rp-tooltip__arrow[data-side=left][data-v-38bfcb12] {
+    right: calc(-1 * var(--_rp-tooltip-arrow-size) / 2);
+}
+.rp-tooltip-content-enter-active[data-v-38bfcb12],
+  .rp-tooltip-content-leave-active[data-v-38bfcb12] {
+    transition: opacity var(--rp-transition-fast);
+}
+.rp-tooltip-content-enter-from[data-v-38bfcb12],
+  .rp-tooltip-content-leave-to[data-v-38bfcb12] {
+    opacity: 0;
+}
 }