feat: use popover API, add safe polygon utility

[luwes]

This pull request refactors the tooltip and popover components to improve pointer event handling, update the popover markup for better accessibility and maintainability, and enhance DOM utility functions for Shadow DOM support. The changes also include style updates and dependency additions to support these improvements.

Pointer event handling and DOM utilities:

• Refactored MediaTooltipRoot in media-tooltip.ts to use pointer events (pointerenter, pointerleave, pointermove) instead of mouse events, ensuring better compatibility with various input devices and updating all related handler methods and position calculations to use #pointerPosition instead of #mousePosition. [1] [2] [3]
• Added new DOM utility functions in element.ts for Shadow DOM support, including getDocumentOrShadowRoot, isElement, contains, getTarget, isShadowRoot, and helpers for working with floating nodes.
• Exported the new safe-polygon module from dom/index.ts to make polygon-based pointer event handling available throughout the codebase.

Popover markup and accessibility:

• Updated popover markup in both frosted/index.ts and minimal/index.ts to use the native popover attribute and popovertarget for accessibility, simplifying the structure and removing unnecessary wrapper elements. [1] [2]

Styling improvements:

• Changed CSS selectors from media-popover-popup to media-popover and updated styles to remove margin, border, box-shadow, and background, making popovers visually cleaner and more consistent. [1] [2]

Dependency updates:

• Added @floating-ui/core as a new dependency in package.json and pnpm-lock.yaml to support advanced floating UI positioning logic. [1] [2]

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
vjs-10-demo-html	Ready	Preview	Comment	Oct 29, 2025 2:28am
vjs-10-demo-react	Ready	Preview	Comment	Oct 29, 2025 2:28am
vjs-10-website	Ready	Preview	Comment	Oct 29, 2025 2:28am

[Copilot]

Pull Request Overview

This pull request refactors tooltip and popover components to improve pointer event handling, updates popover markup to use native HTML popover API for better accessibility, and adds a safe polygon utility for enhanced pointer event management. The changes modernize the codebase with better device compatibility and simplified DOM structure.

• Migrated from mouse events to pointer events for better multi-device support
• Simplified popover markup using native popover attribute and popovertarget
• Added safe polygon utility for sophisticated hover behavior management

Reviewed Changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/utils/src/dom/safe-polygon.ts	New safe polygon utility for managing pointer events within defined geometric areas
packages/utils/src/dom/index.ts	Exports the new safe-polygon module
packages/utils/src/dom/element.ts	Enhanced DOM utilities with Shadow DOM support and floating node helpers
packages/html/src/skins/minimal/styles.css	Updated CSS selectors from media-popover-popup to media-popover with cleaner styling
packages/html/src/skins/minimal/index.ts	Refactored popover markup to use native popover API
packages/html/src/skins/frosted/styles.css	Updated CSS selectors matching the minimal skin changes
packages/html/src/skins/frosted/index.ts	Refactored popover markup to use native popover API
packages/html/src/components/media-tooltip.ts	Migrated from mouse events to pointer events with hover detection
packages/html/src/components/media-popover.ts	Complete rewrite using native popover API and safe polygon utility
packages/html/package.json	Added @floating-ui/core dependency

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The TypeScript error suppression comment indicates a type safety issue. Consider using proper type guards or casting to handle the host property safely instead of suppressing the error.

Suggested change

	// @ts-expect-error - next.host is not defined in the type
	next = next.parentNode || next.host;
	// Use type guard to safely access next.host if next is a ShadowRoot
	next = next.parentNode || (isShadowRoot(next) ? next.host : null);

[Copilot]

The node parameter uses any type which reduces type safety. Consider using a more specific type like Node | Element | null to improve type checking.

Suggested change

	export function getWindow(node: any): typeof window {
	export function getWindow(node: Node | Element | null): typeof window {