ropav 0.1.7 → 0.1.8

package/dist/useNativeChoiceTransaction.js

@@ -0,0 +1,46 @@
+import { t as useControllableValue } from "./useControllableValue.js";
+import { i as useFormControl } from "./useFormControl.js";
+import { nextTick, watchEffect } from "vue";
+//#region src/internal/composables/useNativeChoiceTransaction.ts
+function useNativeChoiceTransaction(options) {
+	const controllable = useControllableValue(options.value);
+	function syncNativeValue(value) {
+		options.adapter.syncValue(value, controllable.initialValue);
+	}
+	function restoreControlledValue() {
+		if (!controllable.isControlled.value) return;
+		queueMicrotask(() => syncNativeValue(controllable.value.value));
+	}
+	function requestValueUpdate(value) {
+		options.adapter.commitValue(value, controllable.initialValue, () => controllable.setValue(value));
+		restoreControlledValue();
+	}
+	useFormControl({
+		elements: options.adapter.controls,
+		isControlled: () => controllable.isControlled.value,
+		validationMessage: options.adapter.validationMessage,
+		readResetValue(controls) {
+			controllable.resetValue(options.adapter.readResetValue(controls, controllable.initialValue));
+			syncNativeValue(controllable.value.value);
+			options.onFormReset?.();
+		},
+		syncControlledValue() {
+			syncNativeValue(controllable.value.value);
+			options.onFormReset?.();
+		}
+	});
+	watchEffect(() => {
+		const currentValue = controllable.value.value;
+		const reconciledValue = options.adapter.reconcileValue?.(currentValue, controllable.initialValue, controllable.isControlled.value) ?? currentValue;
+		if (!controllable.isControlled.value && !Object.is(reconciledValue, currentValue)) controllable.resetValue(reconciledValue);
+		syncNativeValue(controllable.value.value);
+		nextTick(() => syncNativeValue(controllable.value.value));
+	}, { flush: "post" });
+	return {
+		isControlled: controllable.isControlled,
+		requestValueUpdate,
+		value: controllable.value
+	};
+}
+//#endregion
+export { useNativeChoiceTransaction as t };

package/dist/useNativeFileSelection.js

@@ -0,0 +1,86 @@
+import { t as useControllableValue } from "./useControllableValue.js";
+import { i as useFormControl } from "./useFormControl.js";
+import { computed, nextTick, ref, watchEffect } from "vue";
+//#region src/utils/dom/files.ts
+function normalizeSelectedFiles(files, multiple) {
+	const selectedFiles = Array.from(files);
+	return multiple ? selectedFiles : selectedFiles.slice(0, 1);
+}
+function haveSameFiles(fileList, files) {
+	if (!fileList || fileList.length !== files.length) return false;
+	return files.every((file, index) => fileList.item(index) === file);
+}
+function replaceInputFiles(input, files) {
+	if (haveSameFiles(input.files, files)) return true;
+	if (files.length === 0) {
+		input.value = "";
+		return true;
+	}
+	const DataTransferConstructor = input.ownerDocument.defaultView?.DataTransfer;
+	if (!DataTransferConstructor) return false;
+	const transfer = new DataTransferConstructor();
+	for (const file of files) transfer.items.add(file);
+	try {
+		input.files = transfer.files;
+		return true;
+	} catch {
+		return false;
+	}
+}
+//#endregion
+//#region src/internal/composables/useNativeFileSelection.ts
+function useNativeFileSelection(options) {
+	const inputRef = ref(null);
+	const controllable = useControllableValue({
+		modelValue: options.modelValue,
+		defaultValue: () => [],
+		onChange: options.onChange
+	});
+	const files = computed(() => normalizeSelectedFiles(controllable.value.value, options.multiple()));
+	function syncNativeFiles(nextFiles = files.value) {
+		const input = inputRef.value;
+		if (input) replaceInputFiles(input, nextFiles);
+	}
+	function settleSelection(outcome) {
+		if (outcome.status === "accepted") {
+			const nextFiles = normalizeSelectedFiles(outcome.files, options.multiple());
+			syncNativeFiles(nextFiles);
+			controllable.setValue(nextFiles);
+		} else syncNativeFiles();
+		nextTick(() => syncNativeFiles());
+	}
+	function clear() {
+		settleSelection({
+			status: "accepted",
+			files: []
+		});
+	}
+	function focus(focusOptions) {
+		inputRef.value?.focus(focusOptions);
+	}
+	function open() {
+		if (options.disabled()) return;
+		inputRef.value?.click();
+	}
+	watchEffect(() => syncNativeFiles(files.value), { flush: "post" });
+	useFormControl({
+		elements: () => [inputRef.value],
+		isControlled: () => controllable.isControlled.value,
+		validationMessage: options.validationMessage,
+		readResetValue() {
+			controllable.resetValue([]);
+			settleSelection({ status: "rejected" });
+		},
+		syncControlledValue: () => settleSelection({ status: "rejected" })
+	});
+	return {
+		inputRef,
+		files,
+		settleSelection,
+		clear,
+		focus,
+		open
+	};
+}
+//#endregion
+export { useNativeFileSelection as t };

package/dist/useOverlayZIndex.js

@@ -1,13 +1,40 @@
 import { n as isEventWithinElement } from "./events.js";
+import { n as observeComposedAncestry } from "./ancestry.js";
 import { computed, inject, onBeforeUnmount, provide, readonly, ref, shallowRef, toValue, watch } from "vue";
 //#region src/internal/composables/useOverlayLayer.ts
 var overlayLayerKey = Symbol("overlay-layer");
 var documentStates = /* @__PURE__ */ new WeakMap();
+var activeInteractionLayers = [];
+var interactionListenerDefinitions = {
+	escapeKeyDown: {
+		capture: false,
+		eventName: "keydown",
+		outside: false,
+		matches: (event) => event.key === "Escape"
+	},
+	pointerDownOutside: {
+		capture: true,
+		eventName: "pointerdown",
+		outside: true
+	},
+	focusOutside: {
+		capture: true,
+		eventName: "focusin",
+		outside: true
+	},
+	clickOutside: {
+		capture: true,
+		eventName: "click",
+		outside: true
+	}
+};
 var layerMetadata = /* @__PURE__ */ new WeakMap();
 function createState() {
 	return {
 		layers: [],
+		interactionLayers: [],
 		inertSnapshots: /* @__PURE__ */ new Map(),
+		interactionListeners: {},
 		originalBodyOverflow: "",
 		scrollLocked: false,
 		observer: null,
@@ -29,6 +56,24 @@ function isDescendantLayer(layer, ancestor) {
 	}
 	return false;
 }
+function insertLayer(layers, layer) {
+	const currentIndex = layers.indexOf(layer);
+	if (currentIndex >= 0) layers.splice(currentIndex, 1);
+	const descendantIndex = layers.findIndex((candidate) => isDescendantLayer(candidate, layer));
+	if (descendantIndex >= 0) layers.splice(descendantIndex, 0, layer);
+	else layers.push(layer);
+}
+function insertPhysicalLayer(layers, layer) {
+	removeLayerFromStack(layers, layer);
+	const layerIndex = activeInteractionLayers.indexOf(layer);
+	const nextIndex = layers.findIndex((candidate) => activeInteractionLayers.indexOf(candidate) > layerIndex);
+	if (nextIndex >= 0) layers.splice(nextIndex, 0, layer);
+	else layers.push(layer);
+}
+function removeLayerFromStack(layers, layer) {
+	const index = layers.indexOf(layer);
+	if (index >= 0) layers.splice(index, 1);
+}
 function syncLayerZIndices(state) {
 	let highestZIndex = Number.NEGATIVE_INFINITY;
 	for (const layer of state.layers) {
@@ -39,6 +84,65 @@ function syncLayerZIndices(state) {
 		highestZIndex = zIndex;
 	}
 }
+function syncDocumentInteractionLayers(document) {
+	const state = getState(document);
+	state.interactionLayers = activeInteractionLayers.filter((layer) => layerMetadata.get(layer)?.interactionDocuments.has(document));
+	syncInteractionListeners(document, state);
+}
+function reconcileInteractionDocuments(layer) {
+	const affectedDocuments = /* @__PURE__ */ new Set();
+	const layers = activeInteractionLayers.filter((candidate) => candidate === layer || isDescendantLayer(candidate, layer));
+	if (!layers.includes(layer)) layers.unshift(layer);
+	for (const candidate of layers) {
+		const metadata = layerMetadata.get(candidate);
+		if (!metadata) continue;
+		for (const document of metadata.interactionDocuments) affectedDocuments.add(document);
+		const nextDocuments = metadata.registered ? new Set(metadata.ownInteractionDocuments) : /* @__PURE__ */ new Set();
+		const parentDocuments = metadata.parent ? layerMetadata.get(metadata.parent)?.interactionDocuments : void 0;
+		if (metadata.registered && parentDocuments) for (const document of parentDocuments) nextDocuments.add(document);
+		metadata.interactionDocuments = nextDocuments;
+		for (const document of nextDocuments) affectedDocuments.add(document);
+	}
+	for (const document of affectedDocuments) syncDocumentInteractionLayers(document);
+}
+function hasInteractionHandler(state, name) {
+	return state.interactionLayers.some((layer) => [...layerMetadata.get(layer)?.interactions ?? []].some((interaction) => typeof interaction[name] === "function"));
+}
+function routeLayerInteraction(state, name, event) {
+	const layer = state.interactionLayers[state.interactionLayers.length - 1];
+	if (!layer) return;
+	const definition = interactionListenerDefinitions[name];
+	if (definition.matches && !definition.matches(event)) return;
+	const interactions = [...layerMetadata.get(layer)?.interactions ?? []];
+	for (const interaction of interactions) {
+		const handler = interaction[name];
+		if (!handler) continue;
+		const additionalInside = interaction.inside ? toValue(interaction.inside) : [];
+		if (definition.outside && layer.isInside(event, additionalInside)) continue;
+		handler(event);
+	}
+}
+function syncInteractionListeners(document, state) {
+	for (const name of Object.keys(interactionListenerDefinitions)) {
+		const existing = state.interactionListeners[name];
+		if (!hasInteractionHandler(state, name)) {
+			if (existing) {
+				document.removeEventListener(existing.eventName, existing.listener, existing.capture);
+				delete state.interactionListeners[name];
+			}
+			continue;
+		}
+		if (existing) continue;
+		const definition = interactionListenerDefinitions[name];
+		const listener = (event) => routeLayerInteraction(state, name, event);
+		document.addEventListener(definition.eventName, listener, definition.capture);
+		state.interactionListeners[name] = {
+			capture: definition.capture,
+			eventName: definition.eventName,
+			listener
+		};
+	}
+}
 function restoreInertBackground(state) {
 	for (const [element, snapshot] of state.inertSnapshots) {
 		element.inert = snapshot.inert;
@@ -123,11 +227,41 @@ function syncModalEffects(document, state) {
 	}
 }
 function removeLayer(layer, document, state) {
-	const index = state.layers.indexOf(layer);
-	if (index >= 0) state.layers.splice(index, 1);
+	removeLayerFromStack(state.layers, layer);
 	syncLayerZIndices(state);
 	syncModalEffects(document, state);
 }
+function createOverlayLayerAncestryObserver(options) {
+	let cleanups = [];
+	let disposed = false;
+	function stop() {
+		for (const cleanup of cleanups) cleanup();
+		cleanups = [];
+	}
+	function reset() {
+		stop();
+		if (disposed || !options.active.value) return;
+		const content = options.element.value;
+		if (content) cleanups.push(observeComposedAncestry(() => [content], options.onContentChange, { deferWhileDisconnected: true }));
+		const auxiliaryElements = new Set(options.branches);
+		for (const interaction of options.interactions) {
+			if (!interaction.inside) continue;
+			for (const element of toValue(interaction.inside)) if (element) auxiliaryElements.add(element);
+		}
+		if (content) auxiliaryElements.delete(content);
+		for (const element of auxiliaryElements) cleanups.push(observeComposedAncestry(() => [element], options.onAuxiliaryChange, {
+			deferWhileDisconnected: true,
+			notifyOnDisconnect: true
+		}));
+	}
+	return {
+		reset,
+		dispose() {
+			disposed = true;
+			stop();
+		}
+	};
+}
 function useOverlayLayer(options) {
 	const parent = inject(overlayLayerKey, null);
 	const active = computed(() => Boolean(toValue(options.active)));
@@ -138,14 +272,26 @@ function useOverlayLayer(options) {
 	const branchSet = /* @__PURE__ */ new Set();
 	const focusBranchSet = /* @__PURE__ */ new Set();
 	const insideBranchSet = /* @__PURE__ */ new Set();
+	const interactions = /* @__PURE__ */ new Set();
+	const interactionSetRevision = ref(0);
 	const baseZIndex = computed(() => toValue(options.baseZIndex ?? 100));
 	const zIndex = ref(baseZIndex.value);
 	let registeredDocument = null;
 	let registeredElement = null;
 	let parentBranchCleanup;
+	const ancestryObserver = createOverlayLayerAncestryObserver({
+		active,
+		element: options.element,
+		branches: branchSet,
+		interactions,
+		onContentChange: syncObservedAncestry,
+		onAuxiliaryChange: syncObservedAuxiliaryAncestry
+	});
 	function syncBranches() {
 		branches.value = [...branchSet];
 		focusBranches.value = [...focusBranchSet];
+		syncOwnInteractionDocuments();
+		ancestryObserver.reset();
 		if (registeredDocument) syncModalEffects(registeredDocument, getState(registeredDocument));
 	}
 	function registerBranch(element, branchOptions = {}) {
@@ -166,6 +312,36 @@ function useOverlayLayer(options) {
 		parentBranchCleanup?.();
 		parentBranchCleanup = element ? parent?.registerBranch(element) : void 0;
 	}
+	function connectInteraction(interaction) {
+		interactions.add(interaction);
+		interactionSetRevision.value += 1;
+		let connected = true;
+		return Object.assign(() => {
+			if (!connected) return;
+			connected = false;
+			interactions.delete(interaction);
+			interactionSetRevision.value += 1;
+		}, { refresh() {
+			if (!connected) return;
+			syncOwnInteractionDocuments();
+			ancestryObserver.reset();
+		} });
+	}
+	function readOwnInteractionDocuments() {
+		const documents = /* @__PURE__ */ new Set();
+		if (registeredElement) documents.add(registeredElement.ownerDocument);
+		for (const branch of branchSet) if (branch.isConnected) documents.add(branch.ownerDocument);
+		for (const interaction of interactions) if (interaction.inside) {
+			for (const element of toValue(interaction.inside)) if (element?.isConnected) documents.add(element.ownerDocument);
+		}
+		return [...documents];
+	}
+	function syncOwnInteractionDocuments(documents = readOwnInteractionDocuments()) {
+		const metadata = layerMetadata.get(context);
+		if (!metadata) return;
+		metadata.ownInteractionDocuments = new Set(documents);
+		reconcileInteractionDocuments(context);
+	}
 	const context = {
 		id: Symbol("overlay-layer"),
 		element: options.element,
@@ -188,49 +364,100 @@ function useOverlayLayer(options) {
 				...additional
 			].some((element) => element != null && isEventWithinElement(event, element));
 		},
-		registerBranch
+		registerBranch,
+		connectInteraction
 	};
 	layerMetadata.set(context, {
 		baseZIndex,
+		interactions,
+		interactionDocuments: /* @__PURE__ */ new Set(),
+		ownInteractionDocuments: /* @__PURE__ */ new Set(),
 		parent,
+		registered: false,
 		setZIndex(value) {
 			zIndex.value = value;
 		}
 	});
+	watch(() => {
+		interactionSetRevision.value;
+		return readOwnInteractionDocuments();
+	}, (documents) => {
+		syncOwnInteractionDocuments(documents);
+		ancestryObserver.reset();
+	}, {
+		flush: "sync",
+		immediate: true
+	});
 	function unregister() {
-		replaceParentBranch(null);
 		if (!registeredDocument) return;
 		const document = registeredDocument;
 		registeredDocument = null;
 		registeredElement = null;
+		const metadata = layerMetadata.get(context);
+		if (metadata) metadata.registered = false;
+		removeLayerFromStack(activeInteractionLayers, context);
+		syncOwnInteractionDocuments();
+		replaceParentBranch(null);
 		removeLayer(context, document, getState(document));
 	}
+	function moveRegistration(element) {
+		const previousDocument = registeredDocument;
+		if (!previousDocument) return;
+		registeredDocument = element.ownerDocument;
+		registeredElement = element;
+		removeLayer(context, previousDocument, getState(previousDocument));
+		const state = getState(registeredDocument);
+		insertPhysicalLayer(state.layers, context);
+		syncOwnInteractionDocuments();
+		replaceParentBranch(element);
+		syncLayerZIndices(state);
+		syncModalEffects(registeredDocument, state);
+	}
 	function register(element) {
 		const document = element.ownerDocument;
 		if (registeredDocument === document) {
 			if (registeredElement !== element) {
-				replaceParentBranch(element);
 				registeredElement = element;
+				syncOwnInteractionDocuments();
+				replaceParentBranch(element);
 				syncModalEffects(document, getState(document));
 			}
 			return;
 		}
-		unregister();
+		if (registeredDocument) {
+			moveRegistration(element);
+			return;
+		}
 		const state = getState(document);
-		const currentIndex = state.layers.indexOf(context);
-		if (currentIndex >= 0) state.layers.splice(currentIndex, 1);
-		const descendantIndex = state.layers.findIndex((layer) => isDescendantLayer(layer, context));
-		if (descendantIndex >= 0) state.layers.splice(descendantIndex, 0, context);
-		else state.layers.push(context);
 		registeredDocument = document;
 		registeredElement = element;
+		const metadata = layerMetadata.get(context);
+		if (metadata) metadata.registered = true;
+		insertLayer(activeInteractionLayers, context);
+		insertPhysicalLayer(state.layers, context);
+		syncOwnInteractionDocuments();
 		replaceParentBranch(element);
 		syncLayerZIndices(state);
 		syncModalEffects(document, state);
 	}
-	watch([active, options.element], ([isActive, element]) => {
-		if (isActive && element?.isConnected) register(element);
-		else unregister();
+	function syncRegistration() {
+		const element = options.element.value;
+		if (active.value && element?.isConnected) {
+			register(element);
+			syncOwnInteractionDocuments();
+		} else unregister();
+	}
+	function syncObservedAncestry() {
+		syncRegistration();
+		if (registeredDocument) syncModalEffects(registeredDocument, getState(registeredDocument));
+	}
+	function syncObservedAuxiliaryAncestry() {
+		syncOwnInteractionDocuments();
+		if (registeredDocument) syncModalEffects(registeredDocument, getState(registeredDocument));
+	}
+	watch([active, options.element], () => {
+		syncRegistration();
+		ancestryObserver.reset();
 	}, {
 		flush: "post",
 		immediate: true
@@ -242,7 +469,11 @@ function useOverlayLayer(options) {
 		if (registeredDocument) syncLayerZIndices(getState(registeredDocument));
 		else zIndex.value = value;
 	});
-	onBeforeUnmount(unregister);
+	onBeforeUnmount(() => {
+		ancestryObserver.dispose();
+		unregister();
+		interactions.clear();
+	});
 	provide(overlayLayerKey, context);
 	return context;
 }

package/dist/utils/date.d.ts

@@ -0,0 +1,13 @@
+export declare function isValidDate(value: unknown): value is Date;
+export declare function toLocalDate(value: Date): Date;
+export declare function normalizeDate(value: Date | null | undefined): Date | null;
+export declare function toDateKey(value: Date): string;
+export declare function parseDateKey(value: string): Date | null;
+export declare function compareDates(left: Date, right: Date): number;
+export declare function isSameDate(left: Date | null | undefined, right: Date | null | undefined): boolean;
+export declare function isSameMonth(left: Date, right: Date): boolean;
+export declare function startOfMonth(value: Date): Date;
+export declare function endOfMonth(value: Date): Date;
+export declare function addCalendarDays(value: Date, amount: number): Date;
+export declare function addCalendarMonths(value: Date, amount: number): Date;
+export declare function addCalendarYears(value: Date, amount: number): Date;

package/dist/utils/dateAvailability.d.ts

@@ -0,0 +1,7 @@
+export type DisabledDateRule = readonly Date[] | ((date: Date) => boolean);
+export interface DateAvailabilityOptions {
+    min?: Date;
+    max?: Date;
+    disabledDates?: DisabledDateRule;
+}
+export declare function isDateUnavailable(date: Date, options: DateAvailabilityOptions): boolean;

package/dist/utils/dom/ancestry.d.ts

@@ -1,5 +1,6 @@
 export interface ObserveComposedAncestryOptions {
     deferWhileDisconnected?: boolean;
+    notifyOnDisconnect?: boolean;
 }
 export declare function getComposedParent(node: Node): Node | null;
 export declare function getComposedAncestry(node: Node | null | undefined): Node[];

package/dist/utils/dom/direction.d.ts

@@ -0,0 +1,2 @@
+export type ElementDirection = 'ltr' | 'rtl';
+export declare function getElementDirection(element: Element): ElementDirection;

package/dist/utils/dom/files.d.ts

@@ -0,0 +1,3 @@
+export declare function normalizeSelectedFiles(files: Iterable<File>, multiple: boolean): File[];
+export declare function haveSameFiles(fileList: FileList | null, files: readonly File[]): boolean;
+export declare function replaceInputFiles(input: HTMLInputElement, files: readonly File[]): boolean;

package/dist/utils/dom/nativeChoice.d.ts

@@ -0,0 +1,17 @@
+export interface NativeChoiceOption<Value> {
+    value: Value;
+}
+export interface NativeSelectChoiceAdapter<Value> {
+    commit: (select: HTMLSelectElement, value: Value, defaultValue: Value, applyValue: () => void) => void;
+    read: (select: HTMLSelectElement) => Value;
+    resolveResetValue: (select: HTMLSelectElement, initialValue: Value) => Value;
+    sync: (select: HTMLSelectElement, value: Value, defaultValue: Value) => void;
+}
+interface SingleNativeChoiceAdapterOptions<Value> {
+    emptyValue: Value;
+    options: () => readonly NativeChoiceOption<Value>[] | undefined;
+}
+export declare function createSingleNativeChoiceAdapter<Value>(options: SingleNativeChoiceAdapterOptions<Value>): NativeSelectChoiceAdapter<Value>;
+export declare function createMultipleNativeChoiceAdapter<Value>(options: () => readonly NativeChoiceOption<Value>[] | undefined): NativeSelectChoiceAdapter<Value[]>;
+export declare function createStringListNativeChoiceAdapter(): NativeSelectChoiceAdapter<string[]>;
+export {};

package/dist/utils/dom/pointerSession.d.ts

@@ -0,0 +1,20 @@
+type PointerSessionEndUpdate = 'event' | 'none' | 'pending-pointerup';
+type PointerSessionUpdateMode = 'animation-frame' | 'immediate';
+interface PointerSessionAdapter<TState> {
+    endUpdate?: PointerSessionEndUpdate;
+    onStart?: (event: PointerEvent, state: TState) => void;
+    onStop?: (state: TState) => void;
+    onUpdate: (event: PointerEvent, state: TState) => void;
+    refreshGeometry?: (state: TState) => boolean;
+    updateMode?: PointerSessionUpdateMode;
+}
+interface PointerSessionStart<TState> {
+    geometryDirty?: boolean;
+    state: TState;
+    target: HTMLElement;
+}
+export declare function createPointerSession<TState>(adapter: PointerSessionAdapter<TState>): {
+    start: (event: PointerEvent, initialize: () => PointerSessionStart<TState> | undefined) => boolean;
+    stop: () => void;
+};
+export {};

package/dist/utils/dom/scroll.d.ts

@@ -1,5 +1,6 @@
+import { ElementDirection } from './direction.js';
 export type ScrollAxis = 'x' | 'y';
-export type ScrollDirection = 'ltr' | 'rtl';
+export type ScrollDirection = ElementDirection;
 export interface KeyboardScrollPositionOptions {
     axis: ScrollAxis;
     key: string;

package/dist/utils/optionFilter.d.ts

@@ -0,0 +1,5 @@
+export interface LabeledOption {
+    label: string;
+}
+export type OptionFilter<Option> = (option: Option, searchValue: string) => boolean;
+export declare function filterOptions<Option extends LabeledOption>(options: readonly Option[] | undefined, searchValue: string, filter: OptionFilter<Option> | false | undefined): Option[];

package/docs/public-floating-api.md

@@ -68,10 +68,10 @@ Use `autoUpdateOptions.animationFrame` sparingly. It checks the reference positi
 frame and is intended for references moving with CSS transforms or nested floating elements outside
 their ancestor's scrolling context. The animation-frame loop only runs while positioning is open.
 
-`Popover`, `Tooltip`, `DropdownMenu`, `DropdownMenuContent` and `DropdownMenuSubContent` accept the
-same `flipOptions` and `autoUpdateOptions` objects. On the data-driven `DropdownMenu`, the options
-also apply to its open submenus. Each open floating element using `animationFrame: true` runs its own
-animation-frame loop.
+`HoverCard`, `Popover`, `Tooltip`, `DropdownMenu`, `DropdownMenuContent` and
+`DropdownMenuSubContent` accept the same `flipOptions` and `autoUpdateOptions` objects. On the
+data-driven `DropdownMenu`, the options also apply to its open submenus. Each open floating element
+using `animationFrame: true` runs its own animation-frame loop.
 
 The return value contains readonly `actualPlacement`, `floatingStyle`, `arrowStyle` and
 `isPositioned` refs, plus an async `update()` method for content-driven layout changes.
@@ -92,6 +92,9 @@ for keyboard handling, focus management, roles, labels, outside interaction and
 coordinates the trigger and floating content, so a close delay started when the pointer leaves the
 trigger is cancelled when the pointer enters the content.
 
+`HoverCard` composes this behavior with positioning, Teleport and styled content. Use the composable
+directly when custom markup or a different visual treatment is required.
+
 ```vue
 <template>
   <a ref="reference" href="/people/ada" v-bind="triggerProps">Ada Lovelace</a>