Native dialog component

[inwardmovement]

Are there plans to use the HTML5 <dialog> tag for modal?

[GrimLink]

@inwardmovement not sure how the plans are for native support.
But if your looking for a solution, I made a alpine plugin for adding support to the html dialog -> https://github.com/fylgja/alpinejs-dialog

[3PSY0N]

Adding this to the Alpine core would be great 🤩

[jackielii]

I found this works great with native component, no alpine involved:

/* Animated dialog with entry/exit transitions */
.animate-dialog {
  /* Base state (closed) */
  @apply opacity-0 scale-95 translate-y-4;
  @apply transition-all duration-200 ease-in;
  transition-behavior: allow-discrete;
  
  /* Open state */
  &[open] {
    @apply opacity-100 scale-100 translate-y-0;
    @apply duration-300 ease-out;
    
    /* Starting style for entry animation */
    @starting-style {
      @apply opacity-0 scale-95 translate-y-4;
    }
  }
  
  /* Backdrop styling */
  &::backdrop {
    /* Exit state - transparent */
    @apply bg-gray-500/0 backdrop-blur-none;
    @apply transition-all duration-200 ease-in;
    transition-behavior: allow-discrete;
  }
  
  &[open]::backdrop {
    /* Open state - visible */
    @apply bg-gray-500/75 backdrop-blur-sm;
    @apply duration-300 ease-out;
    
    /* Starting style for backdrop entry */
    @starting-style {
      @apply bg-gray-500/0 backdrop-blur-none;
    }
  }
}

this is so clean, and native...

[GrimLink]

Yeah CSS has resolved this issue 👍