Add headless dialog (modal) component

[rameel]

This PR introduces a new Alpine.js directive, x-dialog, providing a fully declarative abstraction over native <dialog>.

The directive is designed to minimize imperative code and enable composition through HTML semantics and custom events, while preserving native dialog behavior.

Key Features

• Declarative dialog composition
  Dialog structure and behavior are expressed entirely in markup using sub-directives:

  • x-dialog / x-dialog:modal
  • x-dialog:panel
  • x-dialog:trigger
  • x-dialog:action

• Event-based lifecycle and intent signaling
  The directive emits a set of custom events:

  • open,requestclose, close
  • value-scoped events (e.g. close:yes)

• Native <dialog> semantics preserved

  • Fully compatible with method="dialog" forms
  • Correct handling of ESC, cancel, and close events
  • Modal and non-modal dialogs supported
  • Browser quirks (Chromium / Safari) handled internally

• Seamless htmx integration
  Since all state transitions are surfaced as DOM events, dialogs integrate naturally with htmx:

  • htmx triggers can listen to dialog events
  • Accept actions can directly initiate htmx requests
  • No glue code or adapters required

  Example:

  hx-trigger="close:yes"

Example Usage

<div x-dialog:modal 
     hx-trigger="close:yes"
     hx-get="/update.html">
  <button x-dialog:trigger>
    Delete
  </button>

  <dialog x-dialog:panel closedby="closerequest">
    Are you sure you want to continue?

    <button x-dialog:action value="yes">Yes</button>
    <button x-dialog:action value="no">No</button>
    <button x-dialog:action>Cancel</button>
  </dialog>
</div>