[Integration] useClickOutside system composable

[johnleider]

Summary

Integration improvements for useClickOutside with the v0 system.

Research Findings

v0 Implementation (Production-Ready)

Advanced Features:

• Two-Phase Detection: pointerdown → pointerup prevents false positives when dragging
• Touch Scroll Handling: 30px threshold ignores swipes/scrolls
• Capture Phase: Works even when inner elements call stopPropagation()
• Ignore Targets: CSS selectors + element refs, mixed in same array
• Bounds Mode: For native <dialog> backdrop clicks
• Iframe Detection: Optional focus monitoring for iframes
• State Control: isActive, isPaused, pause(), resume(), stop()

Vuetify 3 Comparison

Feature	v0	Vuetify 3 v-click-outside
Two-phase detection	✅ pointerdown/pointerup	⚠️ mousedown/click only
Touch scroll handling	✅ 30px threshold	❌ No
Iframe detection	✅ Optional	❌ No
Bounds mode	✅ For <dialog>	❌ No
Pause/resume	✅ Full control	❌ No
State tracking	✅ isActive, isPaused	❌ No
Shadow DOM	✅ composedPath()	⚠️ Limited

Vuetify 3 Usage

Used in: VOverlay, VMenu, VAutocomplete, VCombobox, VSelect

Current V3 Pattern (directive):

el._clickOutside = {
  lastMousedownWasOutside: false,
  [binding.instance!.$.uid]: { onClick, onMousedown }
}

v0 Pattern (composable):

const { pause, resume } = useClickOutside(dropdownRef, onClose, {
  ignore: [triggerRef],
  bounds: true
})

Integration Points

• Two-phase detection with pointerdown/pointerup
• Touch scroll threshold handling
• Iframe focus detection
• Bounds mode for dialog backdrop

Status

✅ Production-ready - No changes needed for v0.2.0

[johnleider]

Closed — production-ready, all integration points complete.