[FR]: Use built in Home Assistant dialog mechanism for popups

[dcapslock]

Using the built in Hass dialog mechanisn for popups. Most changes required will be in the PopupMixin class.

There will be lots of benefits to this and will fix some current Issues/FR.

1. z-index issues go away Hass makes sure to put the dialog as last child of <home-assistant>. Fixes all quirks of allowing for nested more-info dialogs (removes some style hacks). Fixes Style popup so form pickers correctly show on top without any manual styling. #845 without any z-index style hacks.
2. Should allow for multiple popups (Fixes Return to previous popup #547). Quick look at <browser-mod-popup> class suggests that multiple instances should be fine, its just the PopupMixin that uses one instance of <browser-mod-popup> for simplicity. Once we have Hass manage the popup order, then there should be little for PopupMixin to manage.
3. Following on from '2', some thought needs to be given to browser_mod.close_popup. Hass dialog should be able to help, and if the popup_card_id is available when this FR is released then we can use that as a parameter for selecting the popup to close. If omitted then either close top or all, to provide backwards compatability.
4. Look into popup stack options like provide by Hass. That is, whether a back or close button is shown for, and if an option to browser_mod.popup is required.

[dcapslock]

First cut of code has proven this should work well.

1. z-index no longer any issue. Hass more-info and form pickers work fine. Even when the more-info of a Date input is first selected and then its own form picker used for date all works well.
2. Multiple popups will work by defining tag for popup (UI or yaml) and then create a custom element based on that tag. Hass dialog manager always reuses current tag (removes and attached again which cases popup to close and reopen with new config. Having an extra customElement allows for multiple BrowserModPopup class to be instatiated by the different custom elemets. E.g. default will be <browser-mod-popup>. Using dialog_tag: mytag parameter will than make additional custom element of <broswer-mod-popup-mytag>. It is up to the user to use dialog_tag to structure their stack.
3. On reflection I think best that browser_mod.close_popup will take a parameter of all: true to close all popups. If not then just top will be closed.
4. Per 2, stack will be as to user using dialog_tag.

UPDATED with findings.

[dcapslock]

Multiple popups works extremely well! The only catch is that the only one class can be defined with one customElement, but dynamic on the fly class creation based on BrowserModPopup works fine.

Screen.Recording.2025-08-10.at.6.41.26.pm.mov

[dcapslock]

Image for documentation

[dcapslock]

PR #930 submitted.