[Feature Request] Support for the `<dialog/>` HTML element

[linkdd]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.9.4] My browser is: Google Chrome

Description

I'm discovering the <dialog/> HTML element (see specification).

It would be nice if Bulma could provide a default styling so that we can use it with the modal component:

<dialog class="modal" id="mymodal">
  ...
</dialog>

const dialog = document.getElementById('mymodal');
dialog.showModal();
// ...
dialog.close();

[diomed]

you can use bulma classes to style. for example

  <dialog class="notification is-link is-light" open>
  <p>Greetings, small bird!</p>
  <form method="dialog">
    <button class="button">OK</button>
  </form>
</dialog>

but yeah, it would be good to include some original element styling, instead, if you dont want border you can go and add border: none; or .notification {border:1px dashed } to make is fancy dashed

[Ijee]

https://caniuse.com/dialog

The dialog element is now basically supported everywhere* and thus it would be a good idea to have it work by default.

When I tried to change to the dialog element with the bulma modal markup on v1.0.0 the overlay/backdrop and height/width seemed to be the biggest problems but I don't have a minimal setup or screenshot of that at hand at the moment.

Sorry for the ping but maybe this is something to look into once you find the time for it @jgthms or someone else because I am not even sure where I'd start on this.