refactor Dialog to use <dialog> internally

app/components/primer/alpha/dialog.html.erb

@@ -1,5 +1,5 @@
 <%= show_button %>
-<div class="Overlay--hidden <%= @backdrop_classes %>" data-modal-dialog-overlay>
+<dialog-helper>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <%= header %>
     <% if content.present? %>
@@ -9,4 +9,4 @@
       <%= footer %>
     <% end %>
   <% end %>
-</div>
+</dialog-helper>

app/components/primer/alpha/dialog.rb

@@ -125,8 +125,7 @@ def initialize(
         @position_narrow = position_narrow
         @visually_hide_title = visually_hide_title
 
-        @system_arguments[:tag] = "modal-dialog"
-        @system_arguments[:role] = "dialog"
+        @system_arguments[:tag] = "dialog"
         @system_arguments[:id] = @id
         @system_arguments[:aria] = { modal: true }
         @system_arguments[:aria] = merge_aria(

app/components/primer/alpha/overlay.pcss

@@ -9,8 +9,13 @@ anchored-position[popover] {
 
 .Overlay {
   display: flex;
+  border-width: 0;
 }
 
-anchored-position.not-anchored::backdrop {
+anchored-position.not-anchored::backdrop, dialog::backdrop {
   background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
 }
+
+dialog.Overlay:not([open]) {
+  display: none;
+}

app/components/primer/dialog_helpers.ts

@@ -0,0 +1,77 @@
+function dialogInvokerButtonHandler(event: Event) {
+  const target = event.target as HTMLElement
+  const button = target?.closest('button')
+
+  if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true') return
+
+  // If the user is clicking a valid dialog trigger
+  let dialogId = button?.getAttribute('data-show-dialog-id')
+  if (dialogId) {
+    event.stopPropagation()
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof HTMLDialogElement) {
+      dialog.showModal()
+      // A buttons default behaviour in some browsers it to send a pointer event
+      // If the behaviour is allowed through the dialog will be shown but then
+      // quickly hidden- as if it were never shown. This prevents that.
+      event.preventDefault()
+    }
+  }
+
+  dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id')
+  if (dialogId) {
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof HTMLDialogElement && dialog.open) {
+      dialog.close()
+    }
+  }
+}
+
+export class DialogHelperElement extends HTMLElement {
+  get dialog() {
+    return this.querySelector('dialog')
+  }
+
+  #abortController: AbortController | null = null
+  connectedCallback() {
+    const {signal} = (this.#abortController = new AbortController())
+    document.addEventListener('click', dialogInvokerButtonHandler)
+    document.addEventListener('click', this)
+  }
+
+  disconnectedCallback() {
+    this.#abortController?.abort()
+  }
+
+  handleEvent(event) {
+    const target = event.target as HTMLElement
+    const dialog = this.dialog
+    if (!dialog.open) return
+    if (target?.closest('dialog') !== dialog) return
+
+    const rect = dialog.getBoundingClientRect()
+    const clickWasInsideDialog =
+      rect.top <= event.clientY &&
+      event.clientY <= rect.top + rect.height &&
+      rect.left <= event.clientX &&
+      event.clientX <= rect.left + rect.width
+
+    if (!clickWasInsideDialog) {
+      dialog.close()
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    DialogHelperElement: typeof DialogHelperElement
+  }
+  interface HTMLElementTagNameMap {
+    'dialog-helper': DialogHelperElement
+  }
+}
+
+if (!window.customElements.get('dialog-helper')) {
+  window.ModalDialogElement = DialogHelperElement
+  window.customElements.define('dialog-helper', DialogHelperElement)
+}

app/components/primer/primer.ts

@@ -2,9 +2,9 @@ import '@github/include-fragment-element'
 import './alpha/action_bar_element'
 import './alpha/dropdown'
 import './anchored_position'
+import './dialog_helpers'
 import './focus_group'
 import './alpha/image_crop'
-import './alpha/modal_dialog'
 import './beta/nav_list'
 import './alpha/segmented_control'
 import './alpha/toggle_switch'