import { Feature } from "../../feature.mjs";
import { addDomEvent } from "motion-dom";
import { pipe } from "motion-utils";
//#region src/features/gestures/focus/index.ts
var FocusGesture = class extends Feature {
	static {
		this.key = "focus";
	}
	constructor(state) {
		super(state);
		this.isFocused = false;
	}
	onFocus() {
		let isFocusVisible = false;
		/**
		* If this element doesn't match focus-visible then don't
		* apply whileFocus. But, if matches throws that focus-visible
		* is not a valid selector then in that browser outline styles will be applied
		* to the element by default and we want to match that behaviour with whileFocus.
		*/
		try {
			isFocusVisible = this.state.element.matches(":focus-visible");
		} catch {
			isFocusVisible = true;
		}
		if (!isFocusVisible) return;
		this.state.setActive("whileFocus", true);
		this.isFocused = true;
	}
	onBlur() {
		if (!this.isFocused) return;
		this.state.setActive("whileFocus", false);
		this.isFocused = false;
	}
	mount() {
		const element = this.state.element;
		this.removeFocus = pipe(addDomEvent(element, "focus", () => this.onFocus()), addDomEvent(element, "blur", () => this.onBlur()));
	}
	unmount() {
		this.removeFocus?.();
		this.removeFocus = void 0;
	}
};
//#endregion
export { FocusGesture };