Migrate IgxOverlayService to native Popover API

[Copilot]

Overview

Replaces manual overlay DIV management with browser's native Popover API. Elements now stay in DOM at original position, wrapped in-place with popover="manual", eliminating z-index conflicts and leveraging the browser's top layer.

Changes

Core Implementation (overlay.ts)

• moveElementToOverlay(): Wraps element at current DOM position instead of moving to overlay container. Sets popover="manual" on wrapper.
• playOpenAnimation() / show(): Calls showPopover() before animation starts, ensuring element is in top layer first.
• closeAnimationDone() / closeDone(): Calls hidePopover() after close animation completes (or immediately if no animation).
• cleanUp(): Unwraps element, restores to original position using hook marker, removes wrapper. Includes state checking via :popover-open pseudo-class.

Animation Timing

// Open: show → animate
showPopover() → visibility = '' → play animation

// Close: animate → hide  
play animation → hidePopover() (in animationDone)

// Interruption handling preserved: position tracking continues to work

Styling (_overlay-theme.scss)

&[popover] {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: fixed !important;
    inset: 0 !important;
    
    &:popover-open {
        background: inherit;
        pointer-events: inherit;
    }
}

Removed z-index (top layer handles stacking). Important flags override UA defaults.

Behavior Preservation

• Wrapper structure unchanged (wrapper → content → element)
• Position strategies apply styles to wrapper/content as before
• Click handling works identically (wrapper structure preserved)
• Modal backdrop via fixed positioning + background color
• All public APIs unchanged

Browser Support

Chrome/Edge 114+, Safari 17+, Firefox 125+

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Update the overlay to use the new browser popover API</issue_title>
<issue_description>https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover</issue_description>

<agent_instructions>We have IgxOverlayService which is able to take an HTML element and show it above all elements in the page. To do this the service takes the element from its place in the markup, wrap it in a DIV and move it to special overlay DIV placed as last element in the markup. What I need is to change this and to use build in popover HTML attribute. In my opinion it will work if we skip generating the special overlay DIV. We still need to wrap the element overlay needs to show in a DIV. This will help with sizing and positioning of the element. As a final result I need to be able to show unlimited amount of elements in the overlay following the rules in overlay settings and applying the same styling to the backdrop. Do this for me.

Also the target element has to retains its place in the DOM and just to be wrapped in the DIV in order to be more easy positioned. Note, when closing the overlay the wrapper should be removed and the target element should be returned to its original location with no changes in its properties or styles.

Additionally the click handler should be able to handle click over the entire page and should prevent click reaching the DOM elements.

Note how position strategies work, e.g. global one use display flex.

And finally the opening animation should start after element is shown, while close animation should start before element is hidden and element should be hidden after close animation finishes. Note if during the close animation element should be shown the animation should stop at and open animation should start from the point close one was stopped at, and vise versa..</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@damyanpetev There's also a [dedicated doc section for ESF overlapping suggesting to use overlay outlets to resolve](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/excel-style-filtering#external-outlet), though I'd still wager the `z-index` will be less friction in the future and we should probably drop the section after this is implemented.

• Fixes Update the overlay to use the new browser popover API #14665

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.