No libraryTransitions

Native dialog

The backdrop fades in step, because overlay is in the transition list under allow-discrete and the element stays in the top layer for the whole exit.

MDN

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

withoutno attribute

with easefuldata-motion="scale-fade"

host writes

[open], and the top layer

easeful matches

[data-motion~="scale-fade"]dialog:not([open])

what runs

transition: opacity, scale, display, overlay

you write

<dialog data-motion="scale-fade">

Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

button
dialogdata-motion="scale-fade"

Source

apps/docs/components/demos/native/dialog.tsx

28 lines

"use client"

import { useRef } from "react"
import type { DemoProps } from "@/components/demos/props"

export function NativeDialog({ motion }: DemoProps) {
  const ref = useRef<HTMLDialogElement>(null)

  return (
    <>
      <button type="button" className="btn" onClick={() => ref.current?.showModal()}>
        Open dialog
      </button>
      <dialog ref={ref} className="modal" data-motion={motion}>
        <p className="panel__title">Top layer, with a backdrop</p>
        <p className="panel__body">
          The backdrop fades in step with the panel, because overlay is in the transition list
          under allow-discrete and the element stays in the top layer for the whole exit.
        </p>
        <div className="modal__actions">
          <button type="button" className="btn btn--primary" onClick={() => ref.current?.close()}>
            Close
          </button>
        </div>
      </dialog>
    </>
  )
}

The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.