ropav 0.1.7 → 0.1.9

package/dist/tags-input.js

@@ -0,0 +1,380 @@
+import './tags-input.css';
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.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 { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
+import { t as useControlState } from "./useControlState.js";
+import { i as isNodeWithinElement } from "./events.js";
+import { t as isInteractiveElement } from "./interactive.js";
+import { i as useHiddenSelectChoiceTransaction, r as createStringListNativeChoiceAdapter } from "./nativeChoice.js";
+import { child, computed, createComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, next, nextTick, on, ref, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, setText, template, toDisplayString, unref, withModifiers } from "vue";
+//#region src/components/tags-input/tagsInputModel.ts
+function normalizeTagsInputValue(value) {
+	return value.trim();
+}
+function addTagsInputValues(values, candidates, options) {
+	const nextValues = [...values];
+	const maxTags = options.maxTags === void 0 ? Number.POSITIVE_INFINITY : Math.max(0, options.maxTags);
+	for (const candidate of candidates) {
+		const value = normalizeTagsInputValue(candidate);
+		if (value === "" || nextValues.length >= maxTags) continue;
+		if (!options.allowDuplicates && nextValues.includes(value)) continue;
+		if (options.validate && !options.validate(value)) continue;
+		nextValues.push(value);
+	}
+	return nextValues;
+}
+function splitTagsInputValue(value, splitChars) {
+	const delimiters = new Set(splitChars);
+	const tags = [];
+	let remainder = "";
+	let wasSplit = false;
+	for (const character of Array.from(value)) {
+		if (!delimiters.has(character)) {
+			remainder += character;
+			continue;
+		}
+		tags.push(remainder);
+		remainder = "";
+		wasSplit = true;
+	}
+	return {
+		tags: wasSplit ? tags : [],
+		remainder: wasSplit ? remainder : value
+	};
+}
+//#endregion
+//#region src/components/tags-input/useTagsInput.ts
+function useTagsInputTransaction(props, emitUpdate, inputRef, onFormReset) {
+	const transaction = useHiddenSelectChoiceTransaction({
+		value: {
+			modelValue: () => props.modelValue,
+			defaultValue: () => [...props.defaultValue ?? []],
+			onChange: emitUpdate
+		},
+		native: {
+			adapter: createStringListNativeChoiceAdapter(),
+			className: "rp-tags-input__native",
+			focusVisible: () => inputRef.value?.focus(),
+			validationMessage: () => props.readonly ? void 0 : props.validationMessage
+		},
+		onFormReset
+	});
+	return {
+		nativeSelectRef: transaction.nativeSelectRef,
+		nativeSelectAttrs: transaction.nativeSelectAttrs,
+		requestValueUpdate: transaction.requestValueUpdate,
+		values: transaction.value
+	};
+}
+function areTagValuesEqual(left, right) {
+	return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+function useTagsInput(props, emitUpdate) {
+	const rootRef = ref(null);
+	const inputRef = ref(null);
+	const searchValue = ref("");
+	function updateSearch(value) {
+		searchValue.value = value;
+		if (inputRef.value && inputRef.value.value !== value) inputRef.value.value = value;
+	}
+	const transaction = useTagsInputTransaction(props, emitUpdate, inputRef, () => updateSearch(""));
+	const values = transaction.values;
+	const control = useControlState(props);
+	const rootClass = computed(() => bem("rp-tags-input", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		disabled: control.disabled,
+		readonly: props.readonly,
+		invalid: control.invalid
+	}));
+	const canClear = computed(() => Boolean(props.clearable && values.value.length > 0 && !control.disabled && !props.readonly));
+	function addValues(candidates) {
+		if (control.disabled || props.readonly) return false;
+		const nextValues = addTagsInputValues(values.value, candidates, {
+			allowDuplicates: props.allowDuplicates ?? false,
+			maxTags: props.maxTags,
+			validate: props.validate
+		});
+		if (areTagValuesEqual(nextValues, values.value)) return false;
+		transaction.requestValueUpdate(nextValues);
+		return true;
+	}
+	function commitSearch() {
+		if (searchValue.value.trim() === "") return false;
+		const wasAdded = addValues([searchValue.value]);
+		if (wasAdded) updateSearch("");
+		return wasAdded;
+	}
+	function removeTag(index) {
+		if (control.disabled || props.readonly || index < 0 || index >= values.value.length) return;
+		transaction.requestValueUpdate(values.value.filter((_, valueIndex) => valueIndex !== index));
+		nextTick(() => inputRef.value?.focus());
+	}
+	function clear() {
+		if (!canClear.value) return;
+		transaction.requestValueUpdate([]);
+		updateSearch("");
+		nextTick(() => inputRef.value?.focus());
+	}
+	function focusInput(event) {
+		if (control.disabled) return;
+		if (event && isInteractiveElement(event.target, ".rp-tags-input__input")) return;
+		inputRef.value?.focus();
+	}
+	function onInput(event) {
+		if (control.disabled || props.readonly || event.isComposing) return;
+		const inputValue = event.currentTarget.value;
+		const { tags, remainder } = splitTagsInputValue(inputValue, props.splitChars ?? [","]);
+		if (tags.length > 0) addValues(tags);
+		updateSearch(remainder);
+	}
+	function onInputBlur(event) {
+		if (isNodeWithinElement(event.relatedTarget, rootRef.value)) return;
+		if (props.acceptValueOnBlur) commitSearch();
+	}
+	function onInputKeydown(event) {
+		if (control.disabled || props.readonly || event.isComposing) return;
+		if (event.key === "Enter" && searchValue.value.trim() !== "") {
+			event.preventDefault();
+			commitSearch();
+			return;
+		}
+		if (event.key === "Backspace" && searchValue.value === "") {
+			const lastIndex = values.value.length - 1;
+			if (lastIndex >= 0) removeTag(lastIndex);
+		}
+	}
+	return {
+		templateRefs: {
+			root: rootRef,
+			input: inputRef,
+			native: transaction.nativeSelectRef
+		},
+		nativeSelectAttrs: transaction.nativeSelectAttrs,
+		control,
+		rootClass,
+		values,
+		searchValue,
+		canClear,
+		removeTag,
+		clear,
+		focusInput,
+		onInput,
+		onInputBlur,
+		onInputKeydown
+	};
+}
+//#endregion
+//#region src/components/tags-input/tags-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<button data-v-9fbac28f></button>");
+var t2 = template("<span data-v-9fbac28f><span data-v-9fbac28f></span>");
+var t3 = template("<button data-v-9fbac28f>");
+var t4 = template("<div data-v-9fbac28f><select data-v-9fbac28f></select><div data-v-9fbac28f><input data-v-9fbac28f></div>", 1);
+//#endregion
+//#region src/components/tags-input/tags-input.vue
+var tags_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpTagsInput",
+	inheritAttrs: false,
+	__name: "tags-input",
+	props: {
+		id: {},
+		name: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: () => [] },
+		maxTags: { default: void 0 },
+		allowDuplicates: {
+			type: Boolean,
+			default: false
+		},
+		splitChars: { default: () => [","] },
+		acceptValueOnBlur: {
+			type: Boolean,
+			default: false
+		},
+		validate: {
+			type: Function,
+			default: void 0
+		},
+		size: {},
+		radius: {},
+		placeholder: { default: "Enter tags..." },
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		clearLabel: { default: "Clear tags" },
+		removeLabel: { default: "Remove" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { templateRefs, nativeSelectAttrs, control, rootClass, values, searchValue, canClear, removeTag, clear, focusInput, onInput, onInputBlur, onInputKeydown } = useTagsInput(props, (value) => emit("update:modelValue", value));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			onMousedown: focusInput,
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-readonly": toPresenceAttribute(props.readonly),
+			"data-invalid": toPresenceAttribute(control.invalid)
+		}));
+		const visibleInputAttrs = computed(() => {
+			const attrs = props.inputAttrs ?? {};
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(attrs);
+			return {
+				...forwardedAttributes,
+				...getPartAttrs("input", {
+					class: "rp-tags-input__input",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				id: control.id,
+				name: void 0,
+				form: "",
+				type: "text",
+				value: searchValue.value,
+				placeholder: values.value.length === 0 ? props.placeholder : void 0,
+				disabled: control.disabled || void 0,
+				readonly: props.readonly || void 0,
+				required: void 0,
+				autocomplete: forwardedAttributes.autocomplete ?? "off",
+				"aria-disabled": control.disabled || void 0,
+				"aria-invalid": control.invalid || void 0,
+				"aria-required": control.required || void 0,
+				"aria-label": control.ariaLabelledby ? void 0 : props.ariaLabel || void 0,
+				"aria-labelledby": control.ariaLabelledby,
+				"aria-describedby": control.ariaDescribedby,
+				"data-disabled": toPresenceAttribute(control.disabled),
+				"data-readonly": toPresenceAttribute(props.readonly),
+				"data-invalid": toPresenceAttribute(control.invalid),
+				onInput: composeEventHandlers(onInput, attrs.onInput),
+				onBlur: composeEventHandlers(onInputBlur, attrs.onBlur),
+				onKeydown: composeEventHandlers(onInputKeydown, attrs.onKeydown)
+			};
+		});
+		__expose({
+			nativeElement: templateRefs.native,
+			inputElement: templateRefs.input,
+			focus: () => templateRefs.input.value?.focus()
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n18 = t4();
+		const n0 = child(n18);
+		const n13 = next(n0, 1);
+		const n12 = child(n13, 1);
+		renderEffect(() => {
+			const _control = unref(control);
+			setDynamicProps(n18, [rootAttrs.value]);
+			setDynamicProps(n0, [unref(nativeSelectAttrs), {
+				name: __props.name,
+				form: _control.form,
+				disabled: _control.disabled || void 0,
+				required: _control.required && !__props.readonly || void 0,
+				multiple: "",
+				tabindex: "-1",
+				"aria-hidden": "true"
+			}]);
+			_setTemplateRef(n0, unref(templateRefs).native);
+			setDynamicProps(n13, [unref(getPartAttrs)("tags", { class: "rp-tags-input__tags" })]);
+		});
+		setInsertionState(n13, 0);
+		createFor(() => unref(values), (_for_item0, _for_key0) => {
+			const n11 = t2();
+			const n6 = child(n11);
+			renderEffect(() => {
+				const _getPartAttrs = unref(getPartAttrs);
+				setDynamicProps(n11, [_getPartAttrs("tag", { class: "rp-tags-input__tag" })]);
+				setDynamicProps(n6, [_getPartAttrs("tagLabel", { class: "rp-tags-input__tag-label" })]);
+			});
+			setInsertionState(n6, null, 0);
+			createSlot("tag", { value: () => _for_item0.value }, () => {
+				const n5 = t0();
+				renderEffect(() => setText(n5, toDisplayString(_for_item0.value)));
+				return n5;
+			}, 1);
+			setInsertionState(n11, null, 1);
+			createIf(() => !__props.readonly, () => {
+				const n10 = t1();
+				renderEffect(() => setDynamicProps(n10, [
+					{ type: "button" },
+					unref(getPartAttrs)("tagRemove", { class: "rp-tags-input__tag-remove" }),
+					{
+						"aria-label": `${__props.removeLabel} ${_for_item0.value}`,
+						disabled: unref(control).disabled || void 0,
+						tabindex: "-1"
+					}
+				]));
+				setInsertionState(n10, null, 0);
+				createComponent(unref(x_default));
+				on(n10, "mousedown", withModifiers(() => {}, ["prevent"]));
+				on(n10, "click", withModifiers(() => unref(removeTag)(_for_key0.value), ["stop"]));
+				return n10;
+			});
+			return n11;
+		}, (value, index) => `${value}-${index}`, 8);
+		renderEffect(() => {
+			setDynamicProps(n12, [visibleInputAttrs.value]);
+			_setTemplateRef(n12, unref(templateRefs).input);
+		});
+		setInsertionState(n18, null, 2);
+		createIf(() => unref(canClear), () => {
+			const n17 = t3();
+			renderEffect(() => setDynamicProps(n17, [
+				{ type: "button" },
+				unref(getPartAttrs)("clear", { class: "rp-tags-input__clear" }),
+				{
+					"aria-label": __props.clearLabel,
+					tabindex: "-1"
+				}
+			]));
+			setInsertionState(n17, null, 0);
+			createComponent(unref(x_default));
+			on(n17, "mousedown", withModifiers(() => {}, ["prevent"]));
+			on(n17, "click", withModifiers((e) => unref(clear)(e), ["stop"]));
+			return n17;
+		});
+		setTemplateRefBinding(n18, () => unref(templateRefs).root);
+		return n18;
+	}
+}), [["__scopeId", "data-v-9fbac28f"]]);
+//#endregion
+//#region src/components/tags-input/types.ts
+var tagsInputParts = [
+	"root",
+	"tags",
+	"tag",
+	"tagLabel",
+	"tagRemove",
+	"input",
+	"clear"
+];
+//#endregion
+export { tags_input_default as n, tagsInputParts as t };

package/dist/toolbar.css

@@ -0,0 +1,15 @@
+@layer ropav.components {
+.rp-toolbar[data-v-34ce03a4] {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--rp-spacing-2);
+    min-width: 0;
+    font-family: var(--rp-font-family);
+}
+.rp-toolbar--vertical[data-v-34ce03a4] {
+    flex-direction: column;
+    align-items: stretch;
+    min-height: 0;
+}
+}

package/dist/toolbar.js

@@ -0,0 +1,143 @@
+import './toolbar.css';
+import { t as useStylesApi } from "./styles-api.js";
+import { t as bem } from "./bem.js";
+import { t as isElement } from "./query.js";
+import { n as setFocusNavigationTabStop, t as getFocusNavigationTarget } from "./focusNavigation.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createSlot, defineVaporComponent, onBeforeUnmount, onMounted, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, shallowRef, template } from "vue";
+//#region src/components/toolbar/useToolbar.ts
+var TOOLBAR_SELECTOR = "[role=\"toolbar\"]";
+var TOOLBAR_ITEM_SELECTOR = [
+	"button",
+	"a[href]",
+	"input:not([type=\"hidden\"])",
+	"select",
+	"textarea",
+	"[contenteditable=\"true\"]",
+	"[role=\"button\"]",
+	"[role=\"checkbox\"]",
+	"[role=\"combobox\"]",
+	"[role=\"link\"]",
+	"[role=\"radio\"]",
+	"[role=\"slider\"]",
+	"[role=\"spinbutton\"]",
+	"[role=\"switch\"]",
+	"[tabindex]"
+].join(",");
+var TOOLBAR_NAVIGATION_OPTIONS = {
+	itemSelector: TOOLBAR_ITEM_SELECTOR,
+	collectionSelector: TOOLBAR_SELECTOR
+};
+function useToolbar(root, getOrientation) {
+	const activeItem = shallowRef(null);
+	let observer = null;
+	function setTabStop(item) {
+		const toolbar = root.value;
+		if (!toolbar) return null;
+		const nextItem = setFocusNavigationTabStop(toolbar, item, TOOLBAR_NAVIGATION_OPTIONS);
+		activeItem.value = nextItem;
+		return nextItem;
+	}
+	function syncTabStop() {
+		setTabStop(activeItem.value);
+	}
+	function onFocusin(event) {
+		const toolbar = root.value;
+		if (!toolbar || !isElement(event.target)) return;
+		const item = event.target.closest(TOOLBAR_ITEM_SELECTOR);
+		if (item?.closest(TOOLBAR_SELECTOR) === toolbar) setTabStop(item);
+	}
+	function onKeydown(event) {
+		const toolbar = root.value;
+		if (!toolbar) return;
+		const nextItem = getFocusNavigationTarget(event, toolbar, {
+			...TOOLBAR_NAVIGATION_OPTIONS,
+			orientation: getOrientation()
+		});
+		if (!nextItem) return;
+		event.preventDefault();
+		setTabStop(nextItem);
+		nextItem.focus();
+	}
+	function focus() {
+		setTabStop(activeItem.value)?.focus();
+	}
+	onMounted(() => {
+		const toolbar = root.value;
+		if (!toolbar) return;
+		syncTabStop();
+		const MutationObserverConstructor = toolbar.ownerDocument.defaultView?.MutationObserver;
+		if (!MutationObserverConstructor) return;
+		observer = new MutationObserverConstructor(syncTabStop);
+		observer.observe(toolbar, {
+			attributes: true,
+			attributeFilter: [
+				"disabled",
+				"hidden",
+				"inert"
+			],
+			childList: true,
+			subtree: true
+		});
+	});
+	onBeforeUnmount(() => observer?.disconnect());
+	return {
+		focus,
+		onFocusin,
+		onKeydown
+	};
+}
+//#endregion
+//#region src/components/toolbar/toolbar.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-34ce03a4>", 1);
+//#endregion
+//#region src/components/toolbar/toolbar.vue
+var toolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpToolbar",
+	inheritAttrs: false,
+	__name: "toolbar",
+	props: {
+		id: {},
+		orientation: { default: "horizontal" },
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		classNames: {},
+		styles: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const root = shallowRef(null);
+		const { focus, onFocusin, onKeydown } = useToolbar(root, () => props.orientation);
+		const rootClass = computed(() => bem("rp-toolbar", { vertical: props.orientation === "vertical" }));
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			id: props.id,
+			class: rootClass.value,
+			role: "toolbar",
+			"data-orientation": props.orientation,
+			"aria-orientation": props.orientation,
+			"aria-label": props.ariaLabel || void 0,
+			"aria-labelledby": props.labelledby,
+			"aria-describedby": props.describedby,
+			onFocusin,
+			onKeydown
+		}));
+		__expose({
+			nativeElement: root,
+			focus
+		});
+		const n1 = t0();
+		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
+		setInsertionState(n1, null, 0);
+		createSlot("default", null, null, 1);
+		setStaticTemplateRef(n1, root, null, "root");
+		return n1;
+	}
+}), [["__scopeId", "data-v-34ce03a4"]]);
+//#endregion
+//#region src/components/toolbar/types.ts
+var toolbarParts = ["root"];
+var toolbarOrientations = ["horizontal", "vertical"];
+//#endregion
+export { toolbarParts as n, toolbar_default as r, toolbarOrientations as t };

package/dist/tooltip.js

@@ -3,15 +3,14 @@ import { t as useControllableValue } from "./useControllableValue.js";
 import { t as useStylesApi } from "./styles-api.js";
 import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
-import { t as isElement } from "./query.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { r as normalizeDelay } from "./number.js";
 import { a as getComponentVariantColorRoles } from "./componentColors.js";
-import { a as snapshotAttributes, i as restoreAttributes } from "./attributes2.js";
 import { n as mergeAriaIdRefs } from "./aria.js";
 import { n as useOverlayZIndex } from "./useOverlayZIndex.js";
 import { t as getFloatingOffsetStyle } from "./floatingOffset.js";
-import { n as useFloatingTarget, t as useFloatingPosition } from "./useFloatingPosition.js";
+import { t as useFloatingPosition } from "./useFloatingPosition.js";
+import { t as useFloatingTargetLifecycle } from "./useFloatingTargetLifecycle.js";
 import { n as useTeleportTarget } from "./useTeleportTarget.js";
 import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, onBeforeUnmount, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
 //#region src/internal/composables/useDelayedOpen.ts
@@ -66,6 +65,27 @@ function useDelayedOpen(options = {}) {
 	};
 }
 //#endregion
+//#region src/components/tooltip/useTooltipTargetBindings.ts
+var TARGET_ATTRIBUTES = ["aria-describedby"];
+function useTooltipTargetBindings({ targetLifecycle, shouldDescribeContent, tooltipId, openTooltip, closeTooltip, onKeydown }) {
+	targetLifecycle.bindTarget({
+		listeners: [
+			["mouseenter", openTooltip],
+			["mouseleave", closeTooltip],
+			["focusin", openTooltip],
+			["focusout", closeTooltip],
+			["keydown", onKeydown]
+		],
+		attributes: {
+			names: TARGET_ATTRIBUTES,
+			isActive: () => shouldDescribeContent.value,
+			apply: (target, snapshot) => {
+				target.setAttribute("aria-describedby", mergeAriaIdRefs(snapshot.get("aria-describedby"), tooltipId.value) ?? "");
+			}
+		}
+	});
+}
+//#endregion
 //#region src/components/tooltip/useTooltip.ts
 var TOOLTIP_OFFSET_PROPERTIES = {
 	mainAxis: "--_rp-tooltip-main-axis-offset",
@@ -99,8 +119,11 @@ function useTooltip(props, emitOpenChange) {
 	const shouldRenderContent = computed(() => !isDisabled.value);
 	const shouldDescribeContent = computed(() => shouldRenderContent.value && !isDecorative.value);
 	const teleportTo = useTeleportTarget(() => props.teleportTo);
-	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
-	const targetElement = computed(() => isElement(resolvedTarget.value) ? resolvedTarget.value : null);
+	const targetLifecycle = useFloatingTargetLifecycle({
+		target: () => props.target,
+		fallback: rootRef
+	});
+	const { isExplicitTarget, reference } = targetLifecycle;
 	const zIndex = useOverlayZIndex({
 		baseZIndex: () => props.baseZIndex,
 		defaultBaseZIndex: 1e3
@@ -155,32 +178,14 @@ function useTooltip(props, emitOpenChange) {
 	watch(isDisabled, (disabled) => {
 		if (disabled) closeTooltip();
 	});
-	watch([isExplicitTarget, targetElement], ([explicit, target], _previous, onCleanup) => {
-		if (!explicit || !target) return;
-		target.addEventListener("mouseenter", openTooltip);
-		target.addEventListener("mouseleave", closeTooltip);
-		target.addEventListener("focusin", openTooltip);
-		target.addEventListener("focusout", closeTooltip);
-		target.addEventListener("keydown", onKeydown);
-		onCleanup(() => {
-			target.removeEventListener("mouseenter", openTooltip);
-			target.removeEventListener("mouseleave", closeTooltip);
-			target.removeEventListener("focusin", openTooltip);
-			target.removeEventListener("focusout", closeTooltip);
-			target.removeEventListener("keydown", onKeydown);
-		});
-	}, { flush: "sync" });
-	watch([
-		isExplicitTarget,
-		targetElement,
+	useTooltipTargetBindings({
+		targetLifecycle,
 		shouldDescribeContent,
-		tooltipId
-	], ([explicit, target, shouldDescribe, id], _previous, onCleanup) => {
-		if (!explicit || !target || !shouldDescribe) return;
-		const snapshot = snapshotAttributes(target, ["aria-describedby"]);
-		target.setAttribute("aria-describedby", mergeAriaIdRefs(snapshot.get("aria-describedby"), id) ?? "");
-		onCleanup(() => restoreAttributes(target, snapshot));
-	}, { flush: "sync" });
+		tooltipId,
+		openTooltip,
+		closeTooltip,
+		onKeydown
+	});
 	return {
 		rootRef,
 		contentRef,