(I had an issue with dvw not being supported but it was my browser not being on the version released on tuesday)

Windows Google Chrome xtd-editor articles
When I have a full list of articles I get a triple scroll bar

When I have a shorter list of articles I get a double scroll bar

Could do with some spacing etc on the title (edit - i missed your comment about the styling being basic)

Close/Select on the media modal

Something has broken the spacing on the toollbar

I will need some time to check it

I will need some time to check it

Might be easier to check the code here: https://github.com/dgrammatiko/joomla-modal/tree/main/src
Basically there are 2 custom elements: one for the dialog element and another for an opener (button or a element) but events and other parts are missing atm

For begining we should draw some concept, how it should work.
We need popup that able to show embed page, inline html, and probably media for image/video preview (optional).
Also we need something for dialogs (prompt replacement)

I imagine it like that (if we choose the custom element path):

// Iframe
const popup = document.createElement('joomla-modal');
popup.type = 'iframe';
popup.url = 'blabla/url/';
popup.show(); 

// inline
const popup = document.createElement('joomla-modal');
popup.type = 'inline';
popup.popupContent = '<strong>blabla very strong text</strong>';
popup.show(); 

// image
const popup = document.createElement('joomla-modal');
popup.type = 'image'; // or 'video'
popup.url = 'blabla/url-to-image.jpg'; // or video.webm 
popup.show(); 

// prompt, can be added later
const popup = document.createElement('joomla-modal');
popup.type = 'prompt';
popup.popupContent = '<strong>Are you sure?</strong>';
popup.buttons = [{label: 'Yes', onClick: blablaClaaback}, {label: 'Not', onClick: blablaClaaback2}] // click on any of this also destroys the popup.
popup.show(); 

// In theory we can detect 'type' based on url or popupContent property

Showing popup:

// show() method automaticaly append itself to the document.body, when popup.parent === null;
popup.show();  

// user append popup where he want then show
blablaElement.addChildren(popup); 
popup.show();  

Closing and destroing popup:

popup.close(); // Just hides the popup, allow to show it again later
popup.destroy(); // Close (when open) and remove from DOM , kind of optional, or we use popup.parent.removeChild()

Events:

const popup = document.createElement('joomla-modal');
// After popup opened
popup.addEventListener('joomla-modal:shown', (event) => {});
// After popup closed
popup.addEventListener('joomla-modal:closed', (event) => {});

popup.show();  

The popup should give access to its content, so User can interact with it, kind of:

console.log(popup.popupBody);

Other things:

• need an option to limit width height, for small/big popups
• need an option to show or not the X close button, when it applicable
• and something that I totaly forgot :)

All namings is subjective, can be changed, it just for ilustration.

One note I seen in code: do not use setAttribute, use propery instead:

popup.setAttribute('url', button.href); // This is potato
popup.url = button.href; // This is good

I also agree with all with only couple of remarks:

One note I seen in code: do not use setAttribute, use propery instead:

Everything should be properties but also attributes should be allowed for strings, bool, num if we want a declarative solution also (we can sync them), maybe the modal wrapper doesn't need any attributes and those should only be on the <joomla-modal-button>...

need an option to show or not the X close button, when it applicable

True, also option for closing it when clicking on the backdrop (dialog element doesn't support that ootb)
A method to stop scrolling of the background
Something that kills the multiple scrollbars on a modal with an iframe

need an option to limit width height, for small/big popups

Lets use classes for the styling/sizing, I think I left a dummy clamp() line there but probably it is wrong

About setAttribute, I just looking how native elements works, example when we do img:

// we do
const img = new Image() // or document.createElement('img');
img.src = 'path/to/image'

// but not
img.setAttribute('src',  'path/to/image');

Of course both is valid, but that more clear I think.

Of course both is valid, but that more clear I think.

I think you misunderstood me, what I meant was:

• in js world (imperative) img.src = 'path/to/image'
• in html (declarative) <joomla-modal-button iframe-src="path/to/iframe">

They both could exist in total harmony, it's just an added bonus if the property is named as the attribute and someone could use them interchangeably (eg input.type = 'bla' or input.setAttribute('type', 'bla'). But I won't fight for this as it's quite some work to reflect the values so let's use different names for props and attrs and call it a day.

@Fedik so I'm gonna prototype a class (and not a custom element wrapper) for the modal factory and tackle the declarative cases later. I will ping you when something is reviewable (will move the code to Joomla-projects/custom-elements to have some tests)