ropav 0.1.4 → 0.1.6

package/dist/textarea.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-textarea[data-v-f2ee1457] {
+.rp-textarea[data-v-b604b69c] {
     --_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-f2ee1457]:hover:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
+.rp-textarea[data-v-b604b69c]: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-f2ee1457]:focus-within:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
+.rp-textarea[data-v-b604b69c]: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-f2ee1457] {
+.rp-textarea[data-v-b604b69c] {
     font-size: var(--_rp-textarea-font-size);
     border-radius: var(--_rp-textarea-radius);
 }
-.rp-textarea--size-xs[data-v-f2ee1457] {
+.rp-textarea--size-xs[data-v-b604b69c] {
     --_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-f2ee1457] {
+.rp-textarea--size-sm[data-v-b604b69c] {
     --_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-f2ee1457] {
+.rp-textarea--size-md[data-v-b604b69c] {
     --_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-f2ee1457] {
+.rp-textarea--size-lg[data-v-b604b69c] {
     --_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-f2ee1457] {
+.rp-textarea--size-xl[data-v-b604b69c] {
     --_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-f2ee1457] {
+.rp-textarea--radius-xs[data-v-b604b69c] {
     --_rp-textarea-radius: var(--rp-radius-xs);
 }
-.rp-textarea--radius-sm[data-v-f2ee1457] {
+.rp-textarea--radius-sm[data-v-b604b69c] {
     --_rp-textarea-radius: var(--rp-radius-sm);
 }
-.rp-textarea--radius-md[data-v-f2ee1457] {
+.rp-textarea--radius-md[data-v-b604b69c] {
     --_rp-textarea-radius: var(--rp-radius-md);
 }
-.rp-textarea--radius-lg[data-v-f2ee1457] {
+.rp-textarea--radius-lg[data-v-b604b69c] {
     --_rp-textarea-radius: var(--rp-radius-lg);
 }
-.rp-textarea--radius-xl[data-v-f2ee1457] {
+.rp-textarea--radius-xl[data-v-b604b69c] {
     --_rp-textarea-radius: var(--rp-radius-xl);
 }
-html.dark .rp-textarea[data-v-f2ee1457], [data-rp-color-scheme=dark] .rp-textarea[data-v-f2ee1457] {
+html.dark .rp-textarea[data-v-b604b69c], [data-rp-color-scheme=dark] .rp-textarea[data-v-b604b69c] {
     --_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-f2ee1457], [data-rp-color-scheme=dark] .rp-textare
         transparent
     );
 }
-.rp-textarea--disabled[data-v-f2ee1457] {
+.rp-textarea--disabled[data-v-b604b69c] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-textarea--valid[data-v-f2ee1457] {
+.rp-textarea--valid[data-v-b604b69c] {
     border-color: var(--_rp-textarea-valid-border);
 }
-.rp-textarea--valid[data-v-f2ee1457]:focus-within:not(.rp-textarea--disabled) {
+.rp-textarea--valid[data-v-b604b69c]: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-f2ee1457] {
+.rp-textarea--invalid[data-v-b604b69c] {
     border-color: var(--_rp-textarea-invalid-border);
 }
-.rp-textarea--invalid[data-v-f2ee1457]:focus-within:not(.rp-textarea--disabled) {
+.rp-textarea--invalid[data-v-b604b69c]: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-f2ee1457] {
+.rp-textarea--readonly[data-v-b604b69c] {
     background-color: var(--rp-color-control-readonly-bg);
 }
-.rp-textarea--resize-vertical .rp-textarea__native[data-v-f2ee1457] {
+.rp-textarea--resize-vertical .rp-textarea__native[data-v-b604b69c] {
     resize: vertical;
 }
-.rp-textarea--resize-both .rp-textarea__native[data-v-f2ee1457] {
+.rp-textarea--resize-both .rp-textarea__native[data-v-b604b69c] {
     resize: both;
 }
-.rp-textarea__native[data-v-f2ee1457] {
+.rp-textarea__native[data-v-b604b69c] {
     box-sizing: border-box;
     flex: 1;
     width: 100%;
@@ -124,10 +124,10 @@ html.dark .rp-textarea[data-v-f2ee1457], [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-f2ee1457]::placeholder {
+.rp-textarea__native[data-v-b604b69c]::placeholder {
     color: var(--rp-color-control-placeholder);
 }
-.rp-textarea__native[data-v-f2ee1457]:disabled {
+.rp-textarea__native[data-v-b604b69c]:disabled {
     cursor: not-allowed;
 }
 }

package/dist/textarea.js

@@ -1,8 +1,9 @@
 import './textarea.css';
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as bem } from "./bem.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 { a as useTextFormControl } 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
@@ -137,7 +138,7 @@ function useTextarea(props, emitUpdate, getValue = () => props.modelValue ?? "")
 }
 //#endregion
 //#region src/components/textarea/textarea.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-f2ee1457><textarea data-v-f2ee1457>", 1);
+var t0 = template("<div data-v-b604b69c><textarea data-v-b604b69c>", 1);
 //#endregion
 //#region src/components/textarea/textarea.vue
 var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -259,7 +260,7 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return n1;
 	}
-}), [["__scopeId", "data-v-f2ee1457"]]);
+}), [["__scopeId", "data-v-b604b69c"]]);
 //#endregion
 //#region src/components/textarea/types.ts
 var textareaParts = ["root", "input"];

package/dist/toast.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-toast[data-v-6944ac43] {
+.rp-toast[data-v-782b93e5] {
     --_rp-toast-bg: var(--rp-color-default);
     --_rp-toast-fg: var(--rp-color-text);
     --_rp-toast-title-fg: var(--rp-color-text);
@@ -24,25 +24,25 @@
     box-shadow: var(--rp-shadow-md);
     transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-toast--radius-none[data-v-6944ac43] {
+.rp-toast--radius-none[data-v-782b93e5] {
     --_rp-toast-radius: var(--rp-radius-none);
 }
-.rp-toast--radius-xs[data-v-6944ac43] {
+.rp-toast--radius-xs[data-v-782b93e5] {
     --_rp-toast-radius: var(--rp-radius-xs);
 }
-.rp-toast--radius-sm[data-v-6944ac43] {
+.rp-toast--radius-sm[data-v-782b93e5] {
     --_rp-toast-radius: var(--rp-radius-sm);
 }
-.rp-toast--radius-md[data-v-6944ac43] {
+.rp-toast--radius-md[data-v-782b93e5] {
     --_rp-toast-radius: var(--rp-radius-md);
 }
-.rp-toast--radius-lg[data-v-6944ac43] {
+.rp-toast--radius-lg[data-v-782b93e5] {
     --_rp-toast-radius: var(--rp-radius-lg);
 }
-.rp-toast--radius-xl[data-v-6944ac43] {
+.rp-toast--radius-xl[data-v-782b93e5] {
     --_rp-toast-radius: var(--rp-radius-xl);
 }
-.rp-toast__icon[data-v-6944ac43] {
+.rp-toast__icon[data-v-782b93e5] {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -51,37 +51,37 @@
     color: var(--_rp-toast-icon-fg);
     line-height: 0;
 }
-.rp-toast__icon[data-v-6944ac43] >  svg {
+.rp-toast__icon[data-v-782b93e5] >  svg {
     display: block;
     width: 1rem;
     height: 1rem;
 }
-.rp-toast__content[data-v-6944ac43] {
+.rp-toast__content[data-v-782b93e5] {
     display: grid;
     flex: 1 1 auto;
     min-width: 0;
     gap: var(--rp-spacing-1);
 }
-.rp-toast__title[data-v-6944ac43] {
+.rp-toast__title[data-v-782b93e5] {
     color: var(--_rp-toast-title-fg);
     font-size: var(--rp-font-size-md);
     font-weight: var(--rp-font-weight-semibold);
     line-height: var(--rp-line-height-xs);
 }
-.rp-toast__description[data-v-6944ac43] {
+.rp-toast__description[data-v-782b93e5] {
     margin: 0;
 }
-.rp-toast__body[data-v-6944ac43], .rp-toast__description[data-v-6944ac43] {
+.rp-toast__body[data-v-782b93e5], .rp-toast__description[data-v-782b93e5] {
     min-width: 0;
     color: var(--_rp-toast-fg);
 }
-.rp-toast__action[data-v-6944ac43] {
+.rp-toast__action[data-v-782b93e5] {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     margin-left: auto;
 }
-.rp-toast__close[data-v-6944ac43] {
+.rp-toast__close[data-v-782b93e5] {
     box-sizing: border-box;
     display: inline-flex;
     flex: 0 0 auto;
@@ -98,36 +98,36 @@
     cursor: pointer;
     transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
 }
-.rp-toast__close[data-v-6944ac43]:hover {
+.rp-toast__close[data-v-782b93e5]:hover {
     background-color: color-mix(in srgb, var(--_rp-toast-icon-fg) 12%, transparent);
 }
-.rp-toast__close[data-v-6944ac43]:focus-visible {
+.rp-toast__close[data-v-782b93e5]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: 2px;
 }
-.rp-toast__close[data-v-6944ac43] >  svg {
+.rp-toast__close[data-v-782b93e5] >  svg {
     display: block;
     width: 1rem;
     height: 1rem;
 }
-.rp-toast-enter-active[data-v-6944ac43],
-  .rp-toast-leave-active[data-v-6944ac43] {
+.rp-toast-enter-active[data-v-782b93e5],
+  .rp-toast-leave-active[data-v-782b93e5] {
     will-change: opacity, transform;
 }
-.rp-toast-enter-active[data-v-6944ac43] {
+.rp-toast-enter-active[data-v-782b93e5] {
     transition: opacity 180ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.rp-toast-leave-active[data-v-6944ac43] {
+.rp-toast-leave-active[data-v-782b93e5] {
     transition: opacity 120ms ease-in, transform 180ms cubic-bezier(0.4, 0, 1, 1);
 }
-.rp-toast-enter-from[data-v-6944ac43],
-  .rp-toast-leave-to[data-v-6944ac43] {
+.rp-toast-enter-from[data-v-782b93e5],
+  .rp-toast-leave-to[data-v-782b93e5] {
     opacity: 0;
     transform: translate3d(0, calc(var(--rp-spacing-2) * -1), 0) scale(0.98);
 }
 @media (prefers-reduced-motion: reduce) {
-.rp-toast-enter-active[data-v-6944ac43],
-    .rp-toast-leave-active[data-v-6944ac43] {
+.rp-toast-enter-active[data-v-782b93e5],
+    .rp-toast-leave-active[data-v-782b93e5] {
       transition: none;
 }
 }

package/dist/toast.js

@@ -1,9 +1,10 @@
 import './toast.css';
-import { t as x_default } from "./x.js";
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi } from "./styles-api.js";
-import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as x_default } from "./x.js";
+import { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
 import { n as useOverlayZIndex } from "./useOverlayZIndex.js";
 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";
@@ -13,14 +14,15 @@ var DEFAULT_TOAST_ROLE = "status";
 var DEFAULT_TOAST_CLOSE_LABEL = "Close toast";
 //#endregion
 //#region src/components/toast/useToastColor.ts
-function getToastColorStyle(color, variant, autoContrast) {
+function getToastColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const resolvedVariant = variant ?? "surface";
 	const roles = getComponentVariantColorRoles({
 		color,
 		variant: resolvedVariant,
 		defaultColor: "cyan",
-		autoContrast
+		autoContrast,
+		contrastColor
 	});
 	if (!roles) return void 0;
 	return {
@@ -33,11 +35,11 @@ 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-6944ac43>");
+var t0$1 = template("<div data-v-782b93e5>");
 var t1 = template(" ");
-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>");
+var t2 = template("<p data-v-782b93e5> ");
+var t3 = template("<div data-v-782b93e5 class=rp-toast__content>");
+var t4 = template("<button data-v-782b93e5>");
 delegateEvents("click");
 //#endregion
 //#region src/components/toast/toast.vue
@@ -54,7 +56,11 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		description: { default: "" },
 		variant: {},
 		color: {},
-		autoContrast: { type: Boolean },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
 		radius: {},
 		role: { default: DEFAULT_TOAST_ROLE },
 		duration: { default: DEFAULT_TOAST_DURATION },
@@ -83,7 +89,12 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
-		const localOpen = ref(props.open ?? true);
+		const controllableOpen = useControllableValue({
+			modelValue: () => props.open,
+			defaultValue: () => true,
+			onChange: (open) => emit("update:open", open)
+		});
+		const isOpen = controllableOpen.value;
 		const isMounted = ref(false);
 		const pausedByHover = ref(false);
 		const pausedByFocus = ref(false);
@@ -92,7 +103,6 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		let timerStartedAt = 0;
 		let remainingDuration = 0;
 		watch(() => props.open, (open) => {
-			if (open !== void 0) localOpen.value = open;
 			if (open) closePending = false;
 		});
 		watch(() => props.pauseOnHover, (pauseOnHover) => {
@@ -105,7 +115,6 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			pausedByFocus.value = false;
 			resumeTimer();
 		});
-		const isOpen = computed(() => props.open ?? localOpen.value);
 		const hasTitle = computed(() => Boolean(props.title || slots.title));
 		const hasDescription = computed(() => Boolean(props.description));
 		const hasContent = computed(() => Boolean(hasTitle.value || hasDescription.value || slots.default));
@@ -115,7 +124,7 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			[props.variant ?? ""]: Boolean(props.variant),
 			[`radius-${props.radius}`]: Boolean(props.radius)
 		}));
-		const rootStyle = computed(() => getToastColorStyle(props.color, props.variant, props.autoContrast));
+		const rootStyle = computed(() => getToastColorStyle(props.color, props.variant, props.autoContrast, props.contrastColor));
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
@@ -197,8 +206,7 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			if (closePending) return;
 			closePending = true;
 			clearTimer();
-			localOpen.value = false;
-			emit("update:open", false);
+			controllableOpen.setValue(false);
 			emit("close", reason);
 			if (isOpen.value) {
 				resetTimer();
@@ -212,7 +220,7 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			name: "rp-toast",
 			onAfterLeave: () => _on_after_leave
 		}, extend(() => {
-			return createIf(() => isOpen.value, () => {
+			return createIf(() => unref(isOpen), () => {
 				const n30 = t0$1();
 				renderEffect(() => setDynamicProps(n30, [rootAttrs.value]));
 				setInsertionState(n30, null, 0);
@@ -282,7 +290,7 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			}, null, 129);
 		}, { _: 8 }), true);
 	}
-}), [["__scopeId", "data-v-6944ac43"]]);
+}), [["__scopeId", "data-v-782b93e5"]]);
 //#endregion
 //#region src/components/toast/toast-store.ts
 var TYPE_DEFAULTS = {
@@ -327,6 +335,7 @@ function getStoreDefaults(options) {
 		variant: options.variant,
 		color: options.color,
 		autoContrast: options.autoContrast,
+		contrastColor: options.contrastColor,
 		radius: options.radius,
 		role: options.role,
 		pauseOnHover: options.pauseOnHover ?? true,
@@ -560,6 +569,7 @@ var toast_provider_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: void 0
 		},
+		contrastColor: { default: void 0 },
 		radius: { default: void 0 },
 		role: { default: void 0 },
 		pauseOnHover: {
@@ -704,14 +714,17 @@ function optionValue(value) {
 	return toValue(value);
 }
 function useToastState(options = {}) {
-	const uncontrolledOpen = ref(options.defaultOpen ?? false);
 	const closeReason = ref(null);
 	const controlledOpen = computed(() => optionValue(options.open));
-	const isOpen = computed(() => controlledOpen.value ?? uncontrolledOpen.value);
+	const controllableOpen = useControllableValue({
+		modelValue: () => controlledOpen.value,
+		defaultValue: () => options.defaultOpen ?? false,
+		onChange: (nextOpen) => options.onOpenChange?.(nextOpen)
+	});
+	const isOpen = controllableOpen.value;
 	const lastCloseReason = computed(() => closeReason.value);
 	watch(controlledOpen, (nextOpen) => {
 		if (nextOpen === void 0) return;
-		uncontrolledOpen.value = nextOpen;
 		if (nextOpen) closeReason.value = null;
 	}, {
 		flush: "sync",
@@ -724,9 +737,8 @@ function useToastState(options = {}) {
 	}));
 	function setOpen(nextOpen) {
 		if (nextOpen === isOpen.value) return;
-		if (controlledOpen.value === void 0) uncontrolledOpen.value = nextOpen;
 		if (nextOpen) closeReason.value = null;
-		options.onOpenChange?.(nextOpen);
+		controllableOpen.setValue(nextOpen);
 	}
 	function open() {
 		setOpen(true);

package/dist/tooltip.css

@@ -1,11 +1,11 @@
 @layer ropav.components {
-.rp-tooltip[data-v-38bfcb12] {
+.rp-tooltip[data-v-9457a843] {
     position: relative;
     display: inline-flex;
     font-family: var(--rp-font-family);
     vertical-align: middle;
 }
-.rp-tooltip__content[data-v-38bfcb12] {
+.rp-tooltip__content[data-v-9457a843] {
     --_rp-tooltip-main-axis-offset: var(--rp-spacing-2);
     --_rp-tooltip-cross-axis-offset: 0px;
     --_rp-tooltip-arrow-size: 0.4375rem;
@@ -29,10 +29,10 @@
     border-radius: var(--rp-radius-sm);
     box-shadow: var(--rp-shadow-md);
 }
-.rp-tooltip--target[data-v-38bfcb12] {
+.rp-tooltip--target[data-v-9457a843] {
     display: contents;
 }
-.rp-tooltip__arrow[data-v-38bfcb12] {
+.rp-tooltip__arrow[data-v-9457a843] {
     position: absolute;
     width: var(--_rp-tooltip-arrow-size);
     height: var(--_rp-tooltip-arrow-size);
@@ -40,24 +40,24 @@
     background-color: inherit;
     rotate: 45deg;
 }
-.rp-tooltip__arrow[data-side=top][data-v-38bfcb12] {
+.rp-tooltip__arrow[data-side=top][data-v-9457a843] {
     bottom: calc(-1 * var(--_rp-tooltip-arrow-size) / 2);
 }
-.rp-tooltip__arrow[data-side=right][data-v-38bfcb12] {
+.rp-tooltip__arrow[data-side=right][data-v-9457a843] {
     left: calc(-1 * var(--_rp-tooltip-arrow-size) / 2);
 }
-.rp-tooltip__arrow[data-side=bottom][data-v-38bfcb12] {
+.rp-tooltip__arrow[data-side=bottom][data-v-9457a843] {
     top: calc(-1 * var(--_rp-tooltip-arrow-size) / 2);
 }
-.rp-tooltip__arrow[data-side=left][data-v-38bfcb12] {
+.rp-tooltip__arrow[data-side=left][data-v-9457a843] {
     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] {
+.rp-tooltip-content-enter-active[data-v-9457a843],
+  .rp-tooltip-content-leave-active[data-v-9457a843] {
     transition: opacity var(--rp-transition-fast);
 }
-.rp-tooltip-content-enter-from[data-v-38bfcb12],
-  .rp-tooltip-content-leave-to[data-v-38bfcb12] {
+.rp-tooltip-content-enter-from[data-v-9457a843],
+  .rp-tooltip-content-leave-to[data-v-9457a843] {
     opacity: 0;
 }
 }

package/dist/tooltip.js

@@ -1,13 +1,14 @@
 import './tooltip.css';
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
-import { i as getComponentVariantColorRoles } from "./componentColors.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { a as getComponentVariantColorRoles } from "./componentColors.js";
 import { n as useOverlayZIndex } from "./useOverlayZIndex.js";
 import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
 import { n as useTeleportPositioningKey, r as useTeleportTarget } from "./useTeleportTarget.js";
 import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, onBeforeUnmount, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
-//#region src/composables/useDelayedOpen.ts
+//#region src/internal/composables/useDelayedOpen.ts
 function readOption(value, fallback) {
 	return typeof value === "function" ? value() ?? fallback : value ?? fallback;
 }
@@ -15,9 +16,13 @@ function readOptional(value) {
 	return typeof value === "function" ? value() : value;
 }
 function useDelayedOpen(options = {}) {
-	const uncontrolledOpen = ref(false);
+	const controllableOpen = useControllableValue({
+		modelValue: () => readOptional(options.open),
+		defaultValue: () => false,
+		onChange: (nextOpen) => options.onOpenChange?.(nextOpen)
+	});
 	let openTimer = null;
-	const isOpen = computed(() => readOptional(options.open) ?? uncontrolledOpen.value);
+	const isOpen = controllableOpen.value;
 	function clearTimers() {
 		if (openTimer) {
 			clearTimeout(openTimer);
@@ -28,9 +33,7 @@ function useDelayedOpen(options = {}) {
 		return readOption(options.disabled, false);
 	}
 	function setOpen(nextOpen) {
-		const previousOpen = isOpen.value;
-		if (readOptional(options.open) === void 0) uncontrolledOpen.value = nextOpen;
-		if (previousOpen !== nextOpen) options.onOpenChange?.(nextOpen);
+		if (isOpen.value !== nextOpen) controllableOpen.setValue(nextOpen);
 	}
 	function open() {
 		if (isDisabled()) return;
@@ -66,12 +69,13 @@ function resolveTooltipOffsetStyle(offset) {
 	if (offset.crossAxis != null) style["--_rp-tooltip-cross-axis-offset"] = `${offset.crossAxis}px`;
 	return Object.keys(style).length > 0 ? style : void 0;
 }
-function resolveTooltipColorStyleWithContrast(color, autoContrast) {
+function resolveTooltipColorStyleWithContrast(color, autoContrast, contrastColor) {
 	if (!color) return void 0;
 	const roles = getComponentVariantColorRoles({
 		color,
 		variant: "solid",
-		autoContrast
+		autoContrast,
+		contrastColor
 	});
 	if (!roles) return void 0;
 	return {
@@ -140,7 +144,7 @@ function useTooltip(props, emitOpenChange) {
 	const contentStyle = computed(() => ({
 		...floating.floatingStyle.value,
 		...resolveTooltipOffsetStyle(props.offset),
-		...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast),
+		...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast, props.contrastColor),
 		zIndex: zIndex.value
 	}));
 	function openTooltip() {
@@ -212,10 +216,10 @@ function useTooltip(props, emitOpenChange) {
 }
 //#endregion
 //#region src/components/tooltip/tooltip.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-38bfcb12 class=rp-tooltip__arrow aria-hidden=true>");
+var t0 = template("<span data-v-9457a843 class=rp-tooltip__arrow aria-hidden=true>");
 var t1 = template(" ");
-var t2 = template("<span data-v-38bfcb12>");
-var t3 = template("<span data-v-38bfcb12>", 1);
+var t2 = template("<span data-v-9457a843>");
+var t3 = template("<span data-v-9457a843>", 1);
 //#endregion
 //#region src/components/tooltip/tooltip.vue
 var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -227,7 +231,11 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		baseZIndex: {},
 		content: { default: "" },
 		color: {},
-		autoContrast: { type: Boolean },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
 		open: {
 			type: Boolean,
 			default: void 0
@@ -354,6 +362,6 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		setStaticTemplateRef(n14, rootRef, null, "rootRef");
 		return n14;
 	}
-}), [["__scopeId", "data-v-38bfcb12"]]);
+}), [["__scopeId", "data-v-9457a843"]]);
 //#endregion
 export { useDelayedOpen as i, resolveTooltipColorStyleWithContrast as n, resolveTooltipOffsetStyle as r, tooltip_default as t };