ropav 0.2.0 → 0.3.0

package/dist/composables/use-overlay-position.js

@@ -0,0 +1,232 @@
+import { calculatePosition, getRect, translateRTL } from "../utils/position.js";
+import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
+//#region src/composables/use-overlay-position.ts
+/** Overlays sit above the page; matched to what the React build renders. */
+var OVERLAY_Z_INDEX = 1e5;
+/** Whether an element or one of its descendants holds focus. */
+var isFocusWithin = (element) => {
+	const active = document.activeElement;
+	return Boolean(active && element.contains(active));
+};
+/**
+* Position an overlay next to its trigger and keep it there, ported from React Aria's
+* `useOverlayPosition`.
+*
+* The position is written straight to the element's inline style as well as being returned,
+* which looks redundant but is not: a render pass would land a frame late, and for one frame
+* the overlay would be visible at the wrong place — long enough to see as a jump, and long
+* enough for an auto-focused item to scroll the page to the wrong spot.
+*
+* The height cap is reset before every measurement. Otherwise a previous, smaller cap would
+* still be in force while the overlay is measured, and a menu whose items register a tick after
+* it opens would be measured at the wrong height and never recover.
+*
+* @example
+* ```ts
+* const {overlayStyle, placement} = useOverlayPosition({
+*   isOpen: () => state.isOpen.value,
+*   offset: 8,
+*   overlayRef: popoverElement,
+*   placement: "bottom start",
+*   targetRef: triggerElement,
+* });
+* ```
+*/
+var useOverlayPosition = (options) => {
+	const position = shallowRef(null);
+	const triggerWidth = shallowRef(null);
+	const isOpen = computed(() => toValue(options.isOpen) ?? true);
+	const placement = computed(() => toValue(options.placement) ?? "bottom");
+	const containerPadding = computed(() => toValue(options.containerPadding) ?? 12);
+	const offset = computed(() => toValue(options.offset) ?? 0);
+	const crossOffset = computed(() => toValue(options.crossOffset) ?? 0);
+	const shouldFlip = computed(() => toValue(options.shouldFlip) ?? true);
+	const maxHeight = computed(() => toValue(options.maxHeight));
+	const arrowBoundaryOffset = computed(() => toValue(options.arrowBoundaryOffset) ?? 0);
+	const getTarget = () => toValue(options.targetRef) ?? null;
+	const getOverlay = () => toValue(options.overlayRef) ?? null;
+	const getScrollElement = () => toValue(options.scrollRef) ?? getOverlay();
+	const getBoundary = () => toValue(options.boundaryElement) ?? (typeof document === "undefined" ? null : document.body);
+	const getArrow = () => toValue(options.arrowRef) ?? null;
+	/**
+	* Measured without its scale transform: an entering overlay is animating from a smaller size,
+	* and a scaled-down arrow would reserve too little room on the cross axis.
+	*/
+	const getArrowSize = () => {
+		const declared = toValue(options.arrowSize);
+		if (declared !== void 0) return declared;
+		const arrow = getArrow();
+		return arrow ? getRect(arrow, true).width : 0;
+	};
+	const updatePosition = () => {
+		const overlay = getOverlay();
+		const target = getTarget();
+		const boundary = getBoundary();
+		if (!isOpen.value || !overlay || !target || !boundary) return;
+		const scrollElement = getScrollElement();
+		let anchor = null;
+		if (scrollElement && isFocusWithin(scrollElement)) {
+			const anchorRect = document.activeElement?.getBoundingClientRect();
+			const scrollRect = scrollElement.getBoundingClientRect();
+			anchor = {
+				offset: (anchorRect?.top ?? 0) - scrollRect.top,
+				type: "top"
+			};
+			if (anchor.offset > scrollRect.height / 2) anchor = {
+				offset: (anchorRect?.bottom ?? 0) - scrollRect.bottom,
+				type: "bottom"
+			};
+		}
+		if (maxHeight.value === void 0) {
+			overlay.style.top = "0px";
+			overlay.style.bottom = "";
+			overlay.style.maxHeight = `${window.visualViewport?.height ?? window.innerHeight}px`;
+		}
+		/**
+		* The trigger's width, written onto the element **before** the overlay is measured.
+		*
+		* The stylesheet turns this into the overlay's `min-width` for a picker, so publishing it
+		* only through the reactive style below would measure the overlay at its content width and
+		* place it there — and nothing repositions it once the rule widens it a flush later. Written
+		* imperatively for the same reason `top` and `maxHeight` are above: the measurement has to
+		* happen under the constraints the overlay will actually be laid out with.
+		*/
+		const width = target.getBoundingClientRect().width;
+		overlay.style.setProperty("--trigger-width", `${width}px`);
+		triggerWidth.value = width;
+		const direction = getComputedStyle(overlay).direction === "rtl" ? "rtl" : "ltr";
+		const next = calculatePosition({
+			arrowBoundaryOffset: arrowBoundaryOffset.value,
+			arrowSize: getArrowSize(),
+			boundaryElement: boundary,
+			crossOffset: crossOffset.value,
+			maxHeight: maxHeight.value,
+			offset: offset.value,
+			overlayNode: overlay,
+			padding: containerPadding.value,
+			placement: translateRTL(placement.value, direction),
+			shouldFlip: shouldFlip.value,
+			targetNode: target
+		});
+		overlay.style.top = "";
+		overlay.style.bottom = "";
+		overlay.style.left = "";
+		overlay.style.right = "";
+		for (const [key, value] of Object.entries(next.position)) overlay.style[key] = `${value}px`;
+		overlay.style.maxHeight = next.maxHeight != null ? `${next.maxHeight}px` : "";
+		if (anchor && document.activeElement && scrollElement) {
+			const anchorRect = document.activeElement.getBoundingClientRect();
+			const scrollRect = scrollElement.getBoundingClientRect();
+			scrollElement.scrollTop += anchorRect[anchor.type] - scrollRect[anchor.type] - anchor.offset;
+		}
+		position.value = next;
+	};
+	const observers = [];
+	const observe = (element) => {
+		if (!element || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => updatePosition());
+		observer.observe(element);
+		observers.push(() => observer.disconnect());
+	};
+	const stopObserving = () => {
+		for (const stop of observers.splice(0)) stop();
+	};
+	watch([
+		() => getOverlay(),
+		() => getTarget(),
+		isOpen,
+		() => getArrow()
+	], ([overlay, target, open]) => {
+		stopObserving();
+		if (!overlay) {
+			position.value = null;
+			return;
+		}
+		if (!open) return;
+		updatePosition();
+		observe(overlay);
+		observe(target);
+		observe(getArrow());
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch([
+		placement,
+		containerPadding,
+		offset,
+		crossOffset,
+		shouldFlip,
+		maxHeight,
+		arrowBoundaryOffset
+	], () => updatePosition(), { flush: "post" });
+	const onWindowResize = () => updatePosition();
+	if (typeof window !== "undefined") window.addEventListener("resize", onWindowResize, false);
+	/**
+	* Scrolling a scrollable ancestor of the trigger moves the trigger out from under the
+	* overlay, and there is no sane position left to take, so the overlay closes instead. The
+	* document itself is excluded: page scroll is either blocked while the overlay is open, or
+	* the overlay scrolls with it.
+	*/
+	const scrollListeners = [];
+	const attachCloseOnScroll = () => {
+		const onClose = options.onClose;
+		const target = getTarget();
+		if (!onClose || !isOpen.value || !target) return;
+		const onScroll = (event) => {
+			const scrollable = event.target;
+			if (!(scrollable instanceof Element) || scrollable === document.documentElement || scrollable === document.body || !scrollable.contains(target)) return;
+			onClose();
+		};
+		window.addEventListener("scroll", onScroll, true);
+		scrollListeners.push(() => window.removeEventListener("scroll", onScroll, true));
+	};
+	const detachCloseOnScroll = () => {
+		for (const remove of scrollListeners.splice(0)) remove();
+	};
+	watch([isOpen, () => getTarget()], () => {
+		detachCloseOnScroll();
+		attachCloseOnScroll();
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	onScopeDispose(() => {
+		stopObserving();
+		detachCloseOnScroll();
+		if (typeof window !== "undefined") window.removeEventListener("resize", onWindowResize, false);
+	}, true);
+	return {
+		arrowStyle: computed(() => {
+			const resolved = position.value;
+			if (!resolved) return {};
+			const style = {};
+			if (resolved.arrowOffsetLeft !== void 0) style["left"] = `${resolved.arrowOffsetLeft}px`;
+			if (resolved.arrowOffsetTop !== void 0) style["top"] = `${resolved.arrowOffsetTop}px`;
+			return style;
+		}),
+		overlayStyle: computed(() => {
+			const resolved = position.value;
+			if (!resolved) return {
+				left: "0px",
+				"max-height": "100vh",
+				position: "fixed",
+				top: "0px",
+				"z-index": String(OVERLAY_Z_INDEX)
+			};
+			const style = {
+				"max-height": `${resolved.maxHeight}px`,
+				position: "absolute",
+				"z-index": String(OVERLAY_Z_INDEX)
+			};
+			for (const [key, value] of Object.entries(resolved.position)) style[key] = `${value}px`;
+			style["--trigger-anchor-point"] = `${resolved.triggerAnchorPoint.x}px ${resolved.triggerAnchorPoint.y}px`;
+			if (triggerWidth.value !== null) style["--trigger-width"] = `${triggerWidth.value}px`;
+			return style;
+		}),
+		placement: computed(() => position.value?.placement ?? null),
+		updatePosition
+	};
+};
+//#endregion
+export { useOverlayPosition };

package/dist/composables/use-overlay-trigger-state.d.ts

@@ -0,0 +1,89 @@
+import type { CollectionKey } from "./use-collection";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+/** Which end of a collection receives focus when an overlay opens. */
+export type FocusStrategy = "first" | "last";
+export interface UseOverlayTriggerStateOptions {
+    isOpen?: MaybeRefOrGetter<boolean | undefined>;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+export interface OverlayTriggerState {
+    isOpen: ComputedRef<boolean>;
+    setOpen: (isOpen: boolean) => void;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+/**
+ * Open state for an overlay trigger, ported from React Stately's `useOverlayTriggerState`.
+ *
+ * @example
+ * ```ts
+ * const state = useOverlayTriggerState({
+ *   isOpen: () => props.isOpen,
+ *   onOpenChange: (isOpen) => emit("openChange", isOpen),
+ * });
+ * ```
+ */
+export declare const useOverlayTriggerState: (options?: UseOverlayTriggerStateOptions) => OverlayTriggerState;
+export interface MenuTriggerState extends OverlayTriggerState {
+    /** Which item the menu focuses when it opens, or `null` to focus the menu itself. */
+    focusStrategy: ComputedRef<FocusStrategy | null>;
+    open: (focusStrategy?: FocusStrategy | null) => void;
+    toggle: (focusStrategy?: FocusStrategy | null) => void;
+}
+export interface RootMenuTriggerState extends MenuTriggerState {
+    /**
+     * The open submenu trigger keys, one per level: index 0 is the submenu opened from the root
+     * menu, index 1 the submenu opened from that one, and so on.
+     */
+    expandedKeysStack: ComputedRef<CollectionKey[]>;
+    openSubmenu: (triggerKey: CollectionKey, level: number) => void;
+    closeSubmenu: (triggerKey: CollectionKey, level: number) => void;
+}
+/**
+ * Open state for a menu trigger, ported from React Stately's `useMenuTriggerState`.
+ *
+ * Adds two things to a plain overlay trigger. A focus strategy, because how a menu was opened
+ * decides where focus lands: ArrowUp opens it focused on the last item, a mouse click opens it
+ * focused on the menu itself. And the stack of open submenus, held here on the root rather
+ * than in each submenu, which is what makes "only one path through the menu tree is open at a
+ * time" true by construction — opening a submenu at level N truncates the stack to N.
+ *
+ * @example
+ * ```ts
+ * const state = useMenuTriggerState({isOpen: () => props.isOpen});
+ * state.open("last"); // ArrowUp on the trigger
+ * ```
+ */
+export declare const useMenuTriggerState: (options?: UseOverlayTriggerStateOptions) => RootMenuTriggerState;
+export interface SubmenuTriggerState extends OverlayTriggerState {
+    focusStrategy: ComputedRef<FocusStrategy | null>;
+    open: (focusStrategy?: FocusStrategy | null) => void;
+    toggle: (focusStrategy?: FocusStrategy | null) => void;
+    /** Closes every menu in the tree, which is what selecting an item does. */
+    closeAll: () => void;
+    /** How deep this submenu sits, counting the root menu as level 0. */
+    submenuLevel: number;
+}
+export interface UseSubmenuTriggerStateOptions {
+    /**
+     * The key of the item that opens this submenu.
+     *
+     * Read reactively, because the item is declared beside the submenu rather than around it: the
+     * submenu exists before it has been told which item it belongs to, and is closed until it has.
+     */
+    triggerKey: MaybeRefOrGetter<CollectionKey | null>;
+}
+/**
+ * Open state for one submenu, ported from React Stately's `useSubmenuTriggerState`.
+ *
+ * Holds no open flag of its own — it derives one by asking the root whether its own trigger
+ * key is the one expanded at its level. That is what makes opening a sibling submenu close
+ * this one with no coordination between the two.
+ *
+ * The level is captured once, when the submenu trigger is created, and deliberately not
+ * recomputed: it describes where this trigger sits in the tree, which does not change, whereas
+ * the stack it was read from changes constantly.
+ */
+export declare const useSubmenuTriggerState: (options: UseSubmenuTriggerStateOptions, root: RootMenuTriggerState) => SubmenuTriggerState;

package/dist/composables/use-overlay-trigger-state.js

@@ -0,0 +1,115 @@
+import { useControllableState } from "./use-controllable-state.js";
+import { computed, shallowRef, toValue } from "vue";
+//#region src/composables/use-overlay-trigger-state.ts
+/**
+* Open state for an overlay trigger, ported from React Stately's `useOverlayTriggerState`.
+*
+* @example
+* ```ts
+* const state = useOverlayTriggerState({
+*   isOpen: () => props.isOpen,
+*   onOpenChange: (isOpen) => emit("openChange", isOpen),
+* });
+* ```
+*/
+var useOverlayTriggerState = (options = {}) => {
+	const { setState, state } = useControllableState({
+		defaultValue: options.defaultOpen ?? false,
+		onValueChange: options.onOpenChange,
+		value: options.isOpen
+	});
+	return {
+		close: () => setState(false),
+		isOpen: computed(() => state.value),
+		open: () => setState(true),
+		setOpen: setState,
+		toggle: () => setState(!state.value)
+	};
+};
+/**
+* Open state for a menu trigger, ported from React Stately's `useMenuTriggerState`.
+*
+* Adds two things to a plain overlay trigger. A focus strategy, because how a menu was opened
+* decides where focus lands: ArrowUp opens it focused on the last item, a mouse click opens it
+* focused on the menu itself. And the stack of open submenus, held here on the root rather
+* than in each submenu, which is what makes "only one path through the menu tree is open at a
+* time" true by construction — opening a submenu at level N truncates the stack to N.
+*
+* @example
+* ```ts
+* const state = useMenuTriggerState({isOpen: () => props.isOpen});
+* state.open("last"); // ArrowUp on the trigger
+* ```
+*/
+var useMenuTriggerState = (options = {}) => {
+	const overlay = useOverlayTriggerState(options);
+	const focusStrategy = shallowRef(null);
+	const expandedKeys = shallowRef([]);
+	return {
+		close: () => {
+			expandedKeys.value = [];
+			overlay.close();
+		},
+		closeSubmenu: (triggerKey, level) => {
+			if (expandedKeys.value[level] === triggerKey) expandedKeys.value = expandedKeys.value.slice(0, level);
+		},
+		expandedKeysStack: computed(() => expandedKeys.value),
+		focusStrategy: computed(() => focusStrategy.value),
+		isOpen: overlay.isOpen,
+		open: (strategy = null) => {
+			focusStrategy.value = strategy;
+			overlay.open();
+		},
+		openSubmenu: (triggerKey, level) => {
+			if (level > expandedKeys.value.length) return;
+			expandedKeys.value = [...expandedKeys.value.slice(0, level), triggerKey];
+		},
+		setOpen: overlay.setOpen,
+		toggle: (strategy = null) => {
+			focusStrategy.value = strategy;
+			overlay.toggle();
+		}
+	};
+};
+/**
+* Open state for one submenu, ported from React Stately's `useSubmenuTriggerState`.
+*
+* Holds no open flag of its own — it derives one by asking the root whether its own trigger
+* key is the one expanded at its level. That is what makes opening a sibling submenu close
+* this one with no coordination between the two.
+*
+* The level is captured once, when the submenu trigger is created, and deliberately not
+* recomputed: it describes where this trigger sits in the tree, which does not change, whereas
+* the stack it was read from changes constantly.
+*/
+var useSubmenuTriggerState = (options, root) => {
+	const submenuLevel = root.expandedKeysStack.value.length;
+	const focusStrategy = shallowRef(null);
+	const triggerKey = computed(() => toValue(options.triggerKey));
+	const isOpen = computed(() => triggerKey.value !== null && root.expandedKeysStack.value[submenuLevel] === triggerKey.value);
+	const close = () => {
+		focusStrategy.value = null;
+		if (triggerKey.value === null) return;
+		root.closeSubmenu(triggerKey.value, submenuLevel);
+	};
+	const open = (strategy = null) => {
+		focusStrategy.value = strategy;
+		if (triggerKey.value === null) return;
+		root.openSubmenu(triggerKey.value, submenuLevel);
+	};
+	return {
+		close,
+		closeAll: root.close,
+		focusStrategy: computed(() => focusStrategy.value),
+		isOpen,
+		open,
+		setOpen: (next) => next ? open() : close(),
+		submenuLevel,
+		toggle: (strategy = null) => {
+			if (isOpen.value) close();
+			else open(strategy);
+		}
+	};
+};
+//#endregion
+export { useMenuTriggerState, useOverlayTriggerState, useSubmenuTriggerState };

package/dist/composables/use-overlay-trigger.d.ts

@@ -0,0 +1,35 @@
+import type { OverlayTriggerState } from "./use-overlay-trigger-state";
+import type { ComputedRef } from "vue";
+/** What the trigger opens, which decides how `aria-haspopup` is announced. */
+export type OverlayType = "dialog" | "menu" | "listbox" | "tree" | "grid";
+export interface UseOverlayTriggerOptions {
+    type: OverlayType;
+}
+export interface TriggerAriaAttributes {
+    "aria-haspopup": boolean | "listbox" | undefined;
+    "aria-expanded": boolean;
+    "aria-controls": string | undefined;
+}
+export interface UseOverlayTriggerReturn {
+    /** Attributes the trigger element renders. */
+    triggerAttributes: ComputedRef<TriggerAriaAttributes>;
+    /** The overlay's id, which the trigger points `aria-controls` at while open. */
+    overlayId: ComputedRef<string>;
+}
+/**
+ * Accessibility wiring between a trigger and the overlay it opens, ported from React Aria's
+ * `useOverlayTrigger`.
+ *
+ * `aria-haspopup` is only set for a menu and a listbox: ARIA 1.1 allows more values, but screen
+ * readers announce most of them as "menu" anyway, which would be worse than saying nothing.
+ *
+ * `aria-controls` is present only while the overlay is open, because the element it names does
+ * not exist otherwise — an idref pointing at nothing is worse than no idref.
+ *
+ * @example
+ * ```ts
+ * const {overlayId, triggerAttributes} = useOverlayTrigger({type: "menu"}, state);
+ * // <button v-bind="triggerAttributes.value">
+ * ```
+ */
+export declare const useOverlayTrigger: (options: UseOverlayTriggerOptions, state: OverlayTriggerState) => UseOverlayTriggerReturn;

package/dist/composables/use-overlay-trigger.js

@@ -0,0 +1,36 @@
+import { useId as useId$1 } from "./use-id.js";
+import { computed } from "vue";
+//#region src/composables/use-overlay-trigger.ts
+/**
+* Accessibility wiring between a trigger and the overlay it opens, ported from React Aria's
+* `useOverlayTrigger`.
+*
+* `aria-haspopup` is only set for a menu and a listbox: ARIA 1.1 allows more values, but screen
+* readers announce most of them as "menu" anyway, which would be worse than saying nothing.
+*
+* `aria-controls` is present only while the overlay is open, because the element it names does
+* not exist otherwise — an idref pointing at nothing is worse than no idref.
+*
+* @example
+* ```ts
+* const {overlayId, triggerAttributes} = useOverlayTrigger({type: "menu"}, state);
+* // <button v-bind="triggerAttributes.value">
+* ```
+*/
+var useOverlayTrigger = (options, state) => {
+	const overlayId = useId$1();
+	const hasPopup = computed(() => {
+		if (options.type === "menu") return true;
+		if (options.type === "listbox") return "listbox";
+	});
+	return {
+		overlayId,
+		triggerAttributes: computed(() => ({
+			"aria-controls": state.isOpen.value ? overlayId.value : void 0,
+			"aria-expanded": state.isOpen.value,
+			"aria-haspopup": hasPopup.value
+		}))
+	};
+};
+//#endregion
+export { useOverlayTrigger };

package/dist/composables/use-password-manager-badge.d.ts

@@ -0,0 +1,39 @@
+import type { ComputedRef, MaybeRefOrGetter, ShallowRef } from "vue";
+declare const PWM_BADGE_SPACE_WIDTH: "40px";
+/** Whether the input gives up room for a badge at all. */
+export type PushPasswordManagerStrategy = "increase-width" | "none";
+export interface UsePasswordManagerBadgeOptions {
+    /** The element a badge would be placed over. */
+    container: ShallowRef<HTMLElement | null>;
+    /** The control a password manager would attach itself to. */
+    input: ShallowRef<HTMLInputElement | null>;
+    pushPasswordManagerStrategy?: MaybeRefOrGetter<PushPasswordManagerStrategy | undefined>;
+    isFocused: MaybeRefOrGetter<boolean>;
+}
+export interface UsePasswordManagerBadgeReturn {
+    /** Whether a badge was detected over the container. */
+    hasPWMBadge: ComputedRef<boolean>;
+    /** Whether the input should actually widen: a badge was found *and* there is room for it. */
+    willPushPWMBadge: ComputedRef<boolean>;
+    /** How much room to give up, as a CSS length. */
+    PWM_BADGE_SPACE_WIDTH: typeof PWM_BADGE_SPACE_WIDTH;
+}
+/**
+ * Detects a password manager's badge sitting over the OTP control and reports whether the
+ * control should shrink to get out from under it, ported from `input-otp@1.4.2`
+ * (`src/use-pwm-badge.tsx`).
+ *
+ * A password manager cannot be asked whether it put a badge somewhere, so this guesses twice:
+ * first by looking for the markers the well-known ones leave behind, then — finding none — by
+ * hit-testing the point where a badge would be. The hit test answering "the container itself"
+ * is read as *no badge*, which is a guess and stays a guess; that is why the search runs again
+ * on a delay and then gives up for good rather than watching forever.
+ *
+ * @example
+ * ```ts
+ * const badge = usePasswordManagerBadge({container, input, isFocused});
+ * // badge.willPushPWMBadge.value === true → narrow the control by badge.PWM_BADGE_SPACE_WIDTH
+ * ```
+ */
+export declare const usePasswordManagerBadge: (options: UsePasswordManagerBadgeOptions) => UsePasswordManagerBadgeReturn;
+export {};

package/dist/composables/use-password-manager-badge.js

@@ -0,0 +1,94 @@
+import { computed, shallowRef, toValue, watchEffect } from "vue";
+//#region src/composables/use-password-manager-badge.ts
+/**
+* How far in from the container's right edge a badge is expected to sit, and how much room the
+* input gives up to make space for one.
+*/
+var PWM_BADGE_MARGIN_RIGHT = 18;
+var PWM_BADGE_SPACE_WIDTH_PX = 40;
+var PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px`;
+/**
+* Markers the well-known password managers leave on the elements they inject. Cheaper and more
+* reliable than hit-testing, so they are tried first.
+*/
+var PASSWORD_MANAGERS_SELECTORS = [
+	"[data-lastpass-icon-root]",
+	"com-1password-button",
+	"[data-dashlanecreated]",
+	"[style$=\"2147483647 !important;\"]"
+].join(",");
+/**
+* Detects a password manager's badge sitting over the OTP control and reports whether the
+* control should shrink to get out from under it, ported from `input-otp@1.4.2`
+* (`src/use-pwm-badge.tsx`).
+*
+* A password manager cannot be asked whether it put a badge somewhere, so this guesses twice:
+* first by looking for the markers the well-known ones leave behind, then — finding none — by
+* hit-testing the point where a badge would be. The hit test answering "the container itself"
+* is read as *no badge*, which is a guess and stays a guess; that is why the search runs again
+* on a delay and then gives up for good rather than watching forever.
+*
+* @example
+* ```ts
+* const badge = usePasswordManagerBadge({container, input, isFocused});
+* // badge.willPushPWMBadge.value === true → narrow the control by badge.PWM_BADGE_SPACE_WIDTH
+* ```
+*/
+var usePasswordManagerBadge = (options) => {
+	const { container, input } = options;
+	const hasPWMBadge = shallowRef(false);
+	const hasPWMBadgeSpace = shallowRef(false);
+	const done = shallowRef(false);
+	const strategy = computed(() => toValue(options.pushPasswordManagerStrategy) ?? "increase-width");
+	const willPushPWMBadge = computed(() => {
+		if (strategy.value === "none") return false;
+		return hasPWMBadge.value && hasPWMBadgeSpace.value;
+	});
+	const trackPWMBadge = () => {
+		const containerEl = container.value;
+		if (!containerEl || !input.value || done.value || strategy.value === "none") return;
+		const rect = containerEl.getBoundingClientRect();
+		const x = rect.left + containerEl.offsetWidth - PWM_BADGE_MARGIN_RIGHT;
+		const y = rect.top + containerEl.offsetHeight / 2;
+		if (document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS).length === 0) {
+			if (document.elementFromPoint(x, y) === containerEl) return;
+		}
+		hasPWMBadge.value = true;
+		done.value = true;
+	};
+	watchEffect((onCleanup) => {
+		const containerEl = container.value;
+		if (!containerEl || strategy.value === "none") return;
+		const checkHasSpace = () => {
+			const distanceToRightEdge = window.innerWidth - containerEl.getBoundingClientRect().right;
+			hasPWMBadgeSpace.value = distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX;
+		};
+		checkHasSpace();
+		const interval = setInterval(checkHasSpace, 1e3);
+		onCleanup(() => clearInterval(interval));
+	}, { flush: "post" });
+	/**
+	* The badge only exists once the field has focus, and it does not appear instantly, so the
+	* search runs three times over five seconds and then stops for good.
+	*/
+	watchEffect((onCleanup) => {
+		const isFocused = toValue(options.isFocused) || document.activeElement === input.value;
+		if (strategy.value === "none" || !isFocused || done.value) return;
+		const timers = [
+			setTimeout(trackPWMBadge, 0),
+			setTimeout(trackPWMBadge, 2e3),
+			setTimeout(trackPWMBadge, 5e3),
+			setTimeout(() => {
+				done.value = true;
+			}, 6e3)
+		];
+		onCleanup(() => timers.forEach(clearTimeout));
+	}, { flush: "post" });
+	return {
+		PWM_BADGE_SPACE_WIDTH,
+		hasPWMBadge: computed(() => hasPWMBadge.value),
+		willPushPWMBadge
+	};
+};
+//#endregion
+export { usePasswordManagerBadge };