[dialog] Use native HTML dialog tag instead of custom markup

[astronautintheocean]

Description

We can now use native HTML dialog tag in order to create modals.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Why do you need this feature or component?

Using the native HTML dialog component means we can create modals without using a lot of custom markup (like a bunch of div elements). It comes standard with a backdrop customizable via CSS and accessibility features like focus and closing on ESC.

Additional context

This is how Spectrum creates modals:

<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
  <div class="spectrum-Modal is-open">
    <div class="spectrum-Dialog spectrum-Dialog--small" role="dialog" tabindex="-1" aria-modal="true">
      <div class="spectrum-Dialog-grid">
        <h1 class="spectrum-Dialog-heading">Disclaimer</h1>
        <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
        <section class="spectrum-Dialog-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.</section>
      </div>
    </div>
  </div>
</div>

With native HTML dialog above code could be simplified to:

<dialog>
 // dialog content + buttons goes here
</dialog>

The backdrop is customizable with CSS:

dialog::backdrop { /* example */
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(15px);
  }