feat(overlay) use popover in overlay service

[wnvko]

Use popover global attribute to show the overlay. We are adding the attribute to overlay wrapper element and show the overlay by calling showPopover.

Closes #16824

Additional information (check all that apply):

• Bug fix
• New functionality
• Documentation
• Demos
• CI/CD

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code (test guidelines)
• This PR includes API docs for newly added methods/properties (api docs guidelines)
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes (migrations guidelines)
• This PR includes behavioral changes and the feature specification has been updated with them

[Copilot]

Pull request overview

This PR modernizes the overlay service by adopting the native Popover API to manage element layering, replacing the traditional z-index approach. The implementation adds the popover="manual" attribute to overlay wrapper elements and uses showPopover()/hidePopover() methods to control visibility in the browser's top layer.

Changes:

• Added Popover API integration with showPopover() call before positioning and hidePopover() during cleanup
• Removed z-index styling in favor of browser-managed top layer positioning
• Added comprehensive style overrides to reset browser default popover styles while maintaining custom overlay positioning

Reviewed changes

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

File	Description
projects/igniteui-angular/core/src/services/overlay/overlay.ts	Implements Popover API calls in show/hide logic with proper error handling and browser compatibility checks
projects/igniteui-angular/core/src/core/styles/components/overlay/_overlay-theme.scss	Removes z-index properties and adds popover attribute styles to override browser defaults

[coveralls]

coverage: 91.585%. first build
when pulling 5d24d46 on mvenkov/use-popover-in-overlay
into 5b681a1 on master.

[gedinakova]

@wnvko When a dialog is open, when resizing smaller the browser, the first time the dialog briefly goes above the nav-drawer before going under. In addition, when the nav-drawer is open, initially the dialog remains in its previous position, it moves only after the resizing starts.

screen-capture.9.webm

[damyanpetev]

Could probably fight to inch some smoother frames when doing animated moves, tough that's likely not too critical of a scenario. With the limited observer feedback likely not worth it, so I'd like to focus on CSS anchors that should be natively smooth and this LGTM.

[damyanpetev]

@wnvko When a dialog is open, when resizing smaller the browser, the first time the dialog briefly goes above the nav-drawer before going under. In addition, when the nav-drawer is open, initially the dialog remains in its previous position, it moves only after the resizing starts.

screen-capture.9.webm

Um, the drawer is initially pinned (not in overlay mode), so pretty sure the dialog going on top is before the drawer unpins, after which the drawer goes on top as expected.

[wnvko]

@wnvko When a dialog is open, when resizing smaller the browser, the first time the dialog briefly goes above the nav-drawer before going under. In addition, when the nav-drawer is open, initially the dialog remains in its previous position, it moves only after the resizing starts.

screen-capture.9.webm

This how it is works on 21.0.12 branch

I am not even sure where this dialog should be positioned. It is using connected position strategy, but actually is trying to position in the middle of the grid. And then it is draggable so can be moved around. IMO this was not working correctly and before the changes introduced in this PR and in nav-drawer related to popover attribute.