ropav 0.0.11 → 0.0.13

package/dist/textarea.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-textarea[data-v-1654f805] {
+.rp-textarea[data-v-f2ee1457] {
     --_rp-textarea-padding-y: 7px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-md);
@@ -17,58 +17,58 @@
     cursor: text;
     transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-textarea[data-v-1654f805]:hover:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
+.rp-textarea[data-v-f2ee1457]:hover:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
     border-color: var(--rp-color-control-border-hover);
 }
-.rp-textarea[data-v-1654f805]:focus-within:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
+.rp-textarea[data-v-f2ee1457]:focus-within:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--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-textarea[data-v-1654f805] {
+.rp-textarea[data-v-f2ee1457] {
     font-size: var(--_rp-textarea-font-size);
     border-radius: var(--_rp-textarea-radius);
 }
-.rp-textarea--size-xs[data-v-1654f805] {
+.rp-textarea--size-xs[data-v-f2ee1457] {
     --_rp-textarea-padding-y: 4.5px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-xs) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-xs);
 }
-.rp-textarea--size-sm[data-v-1654f805] {
+.rp-textarea--size-sm[data-v-f2ee1457] {
     --_rp-textarea-padding-y: 5.5px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-sm) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-sm);
 }
-.rp-textarea--size-md[data-v-1654f805] {
+.rp-textarea--size-md[data-v-f2ee1457] {
     --_rp-textarea-padding-y: 7px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-md);
 }
-.rp-textarea--size-lg[data-v-1654f805] {
+.rp-textarea--size-lg[data-v-f2ee1457] {
     --_rp-textarea-padding-y: 9.5px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-lg) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-lg);
 }
-.rp-textarea--size-xl[data-v-1654f805] {
+.rp-textarea--size-xl[data-v-f2ee1457] {
     --_rp-textarea-padding-y: 13px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-xl) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-xl);
 }
-.rp-textarea--radius-xs[data-v-1654f805] {
+.rp-textarea--radius-xs[data-v-f2ee1457] {
     --_rp-textarea-radius: var(--rp-radius-xs);
 }
-.rp-textarea--radius-sm[data-v-1654f805] {
+.rp-textarea--radius-sm[data-v-f2ee1457] {
     --_rp-textarea-radius: var(--rp-radius-sm);
 }
-.rp-textarea--radius-md[data-v-1654f805] {
+.rp-textarea--radius-md[data-v-f2ee1457] {
     --_rp-textarea-radius: var(--rp-radius-md);
 }
-.rp-textarea--radius-lg[data-v-1654f805] {
+.rp-textarea--radius-lg[data-v-f2ee1457] {
     --_rp-textarea-radius: var(--rp-radius-lg);
 }
-.rp-textarea--radius-xl[data-v-1654f805] {
+.rp-textarea--radius-xl[data-v-f2ee1457] {
     --_rp-textarea-radius: var(--rp-radius-xl);
 }
-html.dark .rp-textarea[data-v-1654f805], [data-rp-color-scheme=dark] .rp-textarea[data-v-1654f805] {
+html.dark .rp-textarea[data-v-f2ee1457], [data-rp-color-scheme=dark] .rp-textarea[data-v-f2ee1457] {
     --_rp-textarea-valid-border: var(--rp-color-green-light-color);
     --_rp-textarea-valid-ring: color-mix(
         in srgb,
@@ -82,34 +82,34 @@ html.dark .rp-textarea[data-v-1654f805], [data-rp-color-scheme=dark] .rp-textare
         transparent
     );
 }
-.rp-textarea--disabled[data-v-1654f805] {
+.rp-textarea--disabled[data-v-f2ee1457] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-textarea--valid[data-v-1654f805] {
+.rp-textarea--valid[data-v-f2ee1457] {
     border-color: var(--_rp-textarea-valid-border);
 }
-.rp-textarea--valid[data-v-1654f805]:focus-within:not(.rp-textarea--disabled) {
+.rp-textarea--valid[data-v-f2ee1457]:focus-within:not(.rp-textarea--disabled) {
     border-color: var(--_rp-textarea-valid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-valid-ring);
 }
-.rp-textarea--invalid[data-v-1654f805] {
+.rp-textarea--invalid[data-v-f2ee1457] {
     border-color: var(--_rp-textarea-invalid-border);
 }
-.rp-textarea--invalid[data-v-1654f805]:focus-within:not(.rp-textarea--disabled) {
+.rp-textarea--invalid[data-v-f2ee1457]:focus-within:not(.rp-textarea--disabled) {
     border-color: var(--_rp-textarea-invalid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-invalid-ring);
 }
-.rp-textarea--readonly[data-v-1654f805] {
+.rp-textarea--readonly[data-v-f2ee1457] {
     background-color: var(--rp-color-control-readonly-bg);
 }
-.rp-textarea--resize-vertical .rp-textarea__native[data-v-1654f805] {
+.rp-textarea--resize-vertical .rp-textarea__native[data-v-f2ee1457] {
     resize: vertical;
 }
-.rp-textarea--resize-both .rp-textarea__native[data-v-1654f805] {
+.rp-textarea--resize-both .rp-textarea__native[data-v-f2ee1457] {
     resize: both;
 }
-.rp-textarea__native[data-v-1654f805] {
+.rp-textarea__native[data-v-f2ee1457] {
     box-sizing: border-box;
     flex: 1;
     width: 100%;
@@ -124,10 +124,10 @@ html.dark .rp-textarea[data-v-1654f805], [data-rp-color-scheme=dark] .rp-textare
     color: var(--rp-color-control-fg);
     line-height: var(--rp-line-height-md);
 }
-.rp-textarea__native[data-v-1654f805]::placeholder {
+.rp-textarea__native[data-v-f2ee1457]::placeholder {
     color: var(--rp-color-control-placeholder);
 }
-.rp-textarea__native[data-v-1654f805]:disabled {
+.rp-textarea__native[data-v-f2ee1457]:disabled {
     cursor: not-allowed;
 }
 }

package/dist/textarea.js

@@ -2,6 +2,7 @@ import './textarea.css';
 import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { a as useTextFormControl, o as useControllableValue } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, defineVaporComponent, nextTick, onMounted, ref, renderEffect, setDynamicProps, setStaticTemplateRef, template, unref, watch } from "vue";
 //#region src/components/textarea/useTextarea.ts
@@ -56,7 +57,7 @@ function resetTextareaHeight(textarea) {
 	textarea.style.height = "";
 	textarea.style.overflowY = "";
 }
-function useTextarea(props, emitUpdate) {
+function useTextarea(props, emitUpdate, getValue = () => props.modelValue ?? "") {
 	const textareaRef = ref(null);
 	const control = useControlState(props);
 	let heightSyncPending = false;
@@ -80,7 +81,7 @@ function useTextarea(props, emitUpdate) {
 		readonly: props.readonly
 	}));
 	const autosizeWatchSource = computed(() => [
-		props.modelValue,
+		getValue(),
 		props.autosize,
 		props.minRows,
 		props.maxRows,
@@ -136,7 +137,7 @@ function useTextarea(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/textarea/textarea.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-1654f805><textarea data-v-1654f805>", 1);
+var t0 = template("<div data-v-f2ee1457><textarea data-v-f2ee1457>", 1);
 //#endregion
 //#region src/components/textarea/textarea.vue
 var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -146,7 +147,9 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: "" },
 		size: {},
 		radius: {},
 		resize: { default: "none" },
@@ -182,6 +185,7 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		describedby: {},
 		labelledby: {},
 		inputAttrs: {},
+		validationMessage: {},
 		classNames: {},
 		styles: {}
 	},
@@ -189,9 +193,13 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { textareaRef, control, rootClass, nativeRows, onInput, focusTextarea, focus } = useTextarea(props, (value) => {
-			emit("update:modelValue", value);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
 		});
+		const { textareaRef, control, rootClass, nativeRows, onInput, focusTextarea, focus } = useTextarea(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		useTextFormControl(() => textareaRef.value, controllable, () => props.validationMessage);
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
@@ -223,15 +231,17 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const n0 = child(n1);
 		setStaticTemplateRef(n0, textareaRef, null, "textareaRef");
 		renderEffect(() => {
+			const _nativeInputAttrs = nativeInputAttrs.value;
 			const _control = unref(control);
 			const _readonly = __props.readonly;
 			const _presence = unref(presence);
 			const _control_required = _control.required;
 			setDynamicProps(n1, [rootAttrs.value]);
-			setDynamicProps(n0, [nativeInputAttrs.value, {
+			setDynamicProps(n0, [_nativeInputAttrs, {
 				id: _control.id,
 				name: __props.name,
-				value: __props.modelValue,
+				form: _control.form ?? _nativeInputAttrs.form,
+				value: unref(controllable).value.value,
 				placeholder: __props.placeholder,
 				rows: unref(nativeRows),
 				disabled: _control.disabled || void 0,
@@ -249,7 +259,7 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return n1;
 	}
-}), [["__scopeId", "data-v-1654f805"]]);
+}), [["__scopeId", "data-v-f2ee1457"]]);
 //#endregion
 //#region src/components/textarea/types.ts
 var textareaParts = ["root", "input"];

package/dist/toast.js

@@ -4,8 +4,8 @@ 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 { 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";
+import { r 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, useSlots, watch } from "vue";
 //#region src/components/toast/defaults.ts
 var DEFAULT_TOAST_DURATION = 5e3;
 var DEFAULT_TOAST_ROLE = "status";
@@ -283,60 +283,7 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 	}
 }), [["__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",
-	"surface",
-	"outline",
-	"solid"
-];
-var toastRadiuses = [
-	"none",
-	"xs",
-	"sm",
-	"md",
-	"lg",
-	"xl"
-];
-var toastPositions = [
-	"top-left",
-	"top-center",
-	"top-right",
-	"bottom-left",
-	"bottom-center",
-	"bottom-right"
-];
-var toastTypes = [
-	"default",
-	"success",
-	"error",
-	"warning",
-	"info"
-];
-var toastProviderKey = Symbol("toast-provider");
-//#endregion
-//#region src/components/toast/useToast.ts
+//#region src/components/toast/toast-store.ts
 var TYPE_DEFAULTS = {
 	default: {},
 	success: { color: "green" },
@@ -373,18 +320,18 @@ function splitOptions(options) {
 		toastProps: withoutUndefined(toastProps)
 	};
 }
-function getProviderDefaults(props) {
+function getStoreDefaults(options) {
 	return withoutUndefined({
-		duration: props.duration ?? 5e3,
-		variant: props.variant,
-		color: props.color,
-		autoContrast: props.autoContrast,
-		radius: props.radius,
-		role: props.role,
-		pauseOnHover: props.pauseOnHover ?? true,
-		pauseOnFocus: props.pauseOnFocus ?? true,
-		closable: props.closable ?? true,
-		closeLabel: props.closeLabel ?? "Close toast"
+		duration: options.duration ?? 5e3,
+		variant: options.variant,
+		color: options.color,
+		autoContrast: options.autoContrast,
+		radius: options.radius,
+		role: options.role,
+		pauseOnHover: options.pauseOnHover ?? true,
+		pauseOnFocus: options.pauseOnFocus ?? true,
+		closable: options.closable ?? true,
+		closeLabel: options.closeLabel ?? "Close toast"
 	});
 }
 function replaceAt(items, index, value) {
@@ -406,15 +353,14 @@ function partitionOverflow(items, max) {
 		evicted: items.slice(0, overflow)
 	};
 }
-function provideToast(props) {
-	const scopeId = useId();
+function createToastStore(options = {}) {
 	const items = ref([]);
 	const toasts = computed(() => items.value);
 	const records = /* @__PURE__ */ new Map();
 	let sequence = 0;
 	function createInstanceId() {
 		sequence += 1;
-		return `${scopeId}-toast-${sequence}`;
+		return `rp-toast-${sequence}`;
 	}
 	function resolveItem(id, instanceId, record) {
 		return {
@@ -423,7 +369,7 @@ function provideToast(props) {
 			type: record.type,
 			props: {
 				...TYPE_DEFAULTS[record.type],
-				...getProviderDefaults(props),
+				...getStoreDefaults(options),
 				...record.props
 			},
 			onClose: record.onClose
@@ -435,8 +381,8 @@ function provideToast(props) {
 	function notifyAll(removedItems, reason) {
 		for (const item of removedItems) notify(item, reason);
 	}
-	function create(type, input, options) {
-		const split = splitOptions(normalizeInput(input, options));
+	function create(type, input, createOptions) {
+		const split = splitOptions(normalizeInput(input, createOptions));
 		const instanceId = createInstanceId();
 		const id = split.id ?? instanceId;
 		const record = {
@@ -446,42 +392,43 @@ function provideToast(props) {
 		};
 		const item = resolveItem(id, instanceId, record);
 		const replaced = items.value.filter((current) => current.id === id);
-		const { kept, evicted } = partitionOverflow([...items.value.filter((current) => current.id !== id), item], normalizeMax(props.max));
+		const { kept, evicted } = partitionOverflow([...items.value.filter((current) => current.id !== id), item], normalizeMax(options.max));
 		records.set(instanceId, record);
 		forget([...replaced, ...evicted]);
 		items.value = kept;
-		notifyAll([...replaced, ...evicted], "dismiss");
+		notifyAll(replaced, "replace");
+		notifyAll(evicted, "overflow");
 		return id;
 	}
-	function show(input, options) {
-		return create("default", input, options);
+	function show(input, createOptions) {
+		return create("default", input, createOptions);
 	}
-	function success(input, options) {
-		return create("success", input, options);
+	function success(input, createOptions) {
+		return create("success", input, createOptions);
 	}
-	function error(input, options) {
-		return create("error", input, options);
+	function error(input, createOptions) {
+		return create("error", input, createOptions);
 	}
-	function warning(input, options) {
-		return create("warning", input, options);
+	function warning(input, createOptions) {
+		return create("warning", input, createOptions);
 	}
-	function info(input, options) {
-		return create("info", input, options);
+	function info(input, createOptions) {
+		return create("info", input, createOptions);
 	}
-	function update(id, options) {
+	function update(id, updateOptions) {
 		const index = items.value.findIndex((item) => item.id === id);
 		if (index === -1) return;
 		const current = items.value[index];
 		const record = records.get(current.instanceId);
 		if (!record) return;
-		const { type, onClose, ...toastProps } = options;
+		const { type, onClose, ...toastProps } = updateOptions;
 		const nextRecord = {
 			type: type ?? record.type,
 			props: {
 				...record.props,
 				...withoutUndefined(toastProps)
 			},
-			onClose: Object.hasOwn(options, "onClose") ? onClose : record.onClose
+			onClose: Object.hasOwn(updateOptions, "onClose") ? onClose : record.onClose
 		};
 		records.set(current.instanceId, nextRecord);
 		items.value = replaceAt(items.value, index, resolveItem(current.id, current.instanceId, nextRecord));
@@ -496,16 +443,13 @@ function provideToast(props) {
 	function dismiss(id, reason = "dismiss") {
 		closeAt(items.value.findIndex((item) => item.id === id), reason);
 	}
-	function dismissInstance(instanceId, reason = "dismiss") {
-		closeAt(items.value.findIndex((item) => item.instanceId === instanceId), reason);
-	}
 	function dismissAll(reason = "dismiss") {
 		const dismissed = items.value;
 		records.clear();
 		items.value = [];
 		notifyAll(dismissed, reason);
 	}
-	const context = {
+	const store = {
 		toasts,
 		show,
 		success,
@@ -514,17 +458,82 @@ function provideToast(props) {
 		info,
 		update,
 		dismiss,
-		dismissAll,
-		dismissInstance
+		dismissAll
 	};
-	provide(toastProviderKey, context);
-	watch(() => normalizeMax(props.max), (max) => {
+	watch(() => normalizeMax(options.max), (max) => {
 		const { kept, evicted } = partitionOverflow(items.value, max);
 		if (evicted.length === 0) return;
 		forget(evicted);
 		items.value = kept;
-		notifyAll(evicted, "dismiss");
+		notifyAll(evicted, "overflow");
 	}, { flush: "sync" });
+	return store;
+}
+//#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",
+	"surface",
+	"outline",
+	"solid"
+];
+var toastRadiuses = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var toastPositions = [
+	"top-left",
+	"top-center",
+	"top-right",
+	"bottom-left",
+	"bottom-center",
+	"bottom-right"
+];
+var toastTypes = [
+	"default",
+	"success",
+	"error",
+	"warning",
+	"info"
+];
+var toastProviderKey = Symbol("toast-provider");
+//#endregion
+//#region src/components/toast/useToast.ts
+function provideToast(store) {
+	function dismissInstance(instanceId, reason = "dismiss") {
+		const item = store.toasts.value.find((current) => current.instanceId === instanceId);
+		if (item) store.dismiss(item.id, reason);
+	}
+	const context = {
+		...store,
+		dismissInstance
+	};
+	provide(toastProviderKey, context);
 	return context;
 }
 function useToastContext(consumer) {
@@ -541,6 +550,7 @@ var toast_provider_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpToastProvider",
 	__name: "toast-provider",
 	props: {
+		store: {},
 		max: { default: 5 },
 		duration: { default: DEFAULT_TOAST_DURATION },
 		variant: { default: void 0 },
@@ -566,7 +576,8 @@ var toast_provider_default = /* @__PURE__ */ defineVaporComponent({
 		closeLabel: { default: DEFAULT_TOAST_CLOSE_LABEL }
 	},
 	setup(__props) {
-		provideToast(__props);
+		const props = __props;
+		provideToast(props.store ?? createToastStore(props));
 		return createSlot();
 	}
 });
@@ -736,4 +747,4 @@ function useToastState(options = {}) {
 	};
 }
 //#endregion
-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 };
+export { toastColors as a, toastRadiuses as c, toastViewportParts as d, createToastStore as f, useToast as i, toastTypes as l, toast_viewport_default as n, toastParts as o, toast_default as p, toast_provider_default as r, toastPositions as s, useToastState as t, toastVariants as u };

package/dist/tooltip.css

@@ -1,16 +1,16 @@
 @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] {
+    --_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: absolute;
     z-index: 1000;
     box-sizing: border-box;
@@ -29,84 +29,9 @@
     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);