Dialog

<mdc-basic-dialog id="form-dialog">
    <span slot="headline">Edit Profile</span>
    <form slot="content" id="profile-form" method="dialog" style="display: flex; flex-direction: column; gap: 16px;">
        <label>
            <span>Name</span>
            <input type="text" name="name" value="Kai" style="width: 100%; box-sizing: border-box;" />
        </label>
        <label>
            <span>Email</span>
            <input type="email" name="email" value="kai@example.com" style="width: 100%; box-sizing: border-box;" />
        </label>
    </form>
    <mdc-button slot="actions" variant="text" onclick="document.getElementById('profile-form').reset()"><span>Reset</span></mdc-button>
    <mdc-button slot="actions" variant="text" onclick="this.closest('mdc-basic-dialog').close('cancel')"><span>Cancel</span></mdc-button>
    <mdc-button slot="actions" variant="filled" form="profile-form" value="submit"><span>Submit</span></mdc-button>
</mdc-basic-dialog>

<mdc-button onclick="this.getRootNode().querySelector('#form-dialog').show()"><span>Form Dialog</span></mdc-button>

<mdc-basic-dialog id="icon-dialog">
    <mdc-icon slot="icon">info</mdc-icon>
    <span slot="headline">With Icon</span>
    <p slot="content">This dialog has an icon in the headline area.</p>
    <mdc-button slot="actions" variant="text" onclick="this.closest('mdc-basic-dialog').close('ok')"><span>OK</span></mdc-button>
</mdc-basic-dialog>

<mdc-basic-dialog id="no-icon-dialog">
    <span slot="headline">Without Icon</span>
    <p slot="content">This dialog has no icon.</p>
    <mdc-button slot="actions" variant="text" onclick="this.closest('mdc-basic-dialog').close('ok')"><span>OK</span></mdc-button>
</mdc-basic-dialog>

<mdc-button onclick="this.getRootNode().querySelector('#icon-dialog').show()"><span>With Icon</span></mdc-button>
<mdc-button onclick="this.getRootNode().querySelector('#no-icon-dialog').show()"><span>Without Icon</span></mdc-button>

<mdc-basic-dialog id="no-actions-dialog">
    <span slot="headline">No Actions</span>
    <p slot="content">This dialog has no action buttons. Click the scrim or press Escape to close.</p>
</mdc-basic-dialog>

<mdc-button onclick="this.getRootNode().querySelector('#no-actions-dialog').show()"><span>No Actions</span></mdc-button>

<mdc-basic-dialog id="animated-dialog">
    <span slot="headline">Animated</span>
    <p slot="content">This dialog plays open/close animations.</p>
    <mdc-button slot="actions" variant="text" onclick="this.closest('mdc-basic-dialog').close('ok')"><span>OK</span></mdc-button>
</mdc-basic-dialog>

<mdc-basic-dialog id="quick-dialog" quick>
    <span slot="headline">Quick (No Animation)</span>
    <p slot="content">This dialog skips animations.</p>
    <mdc-button slot="actions" variant="text" onclick="this.closest('mdc-basic-dialog').close('ok')"><span>OK</span></mdc-button>
</mdc-basic-dialog>

<mdc-button onclick="this.getRootNode().querySelector('#animated-dialog').show()"><span>Animated</span></mdc-button>
<mdc-button onclick="this.getRootNode().querySelector('#quick-dialog').show()"><span>Quick</span></mdc-button>

<mdc-basic-dialog id="scrollable-dialog">
    <span slot="headline">Scrollable Content</span>
    <div slot="content" style="height: 5000px; background: linear-gradient(to bottom, var(--md-sys-color-surface-container), var(--md-sys-color-primary-container));">
        <p>This content is 5000px tall. Scroll dividers appear at the top and bottom edges when scrolled.</p>
    </div>
    <mdc-button slot="actions" variant="text" onclick="this.closest('mdc-basic-dialog').close('ok')"><span>OK</span></mdc-button>
</mdc-basic-dialog>

<mdc-button onclick="this.getRootNode().querySelector('#scrollable-dialog').show()"><span>Scrollable</span></mdc-button>

<mdc-basic-dialog id="submit-dialog">
    <span slot="headline">Confirm Action</span>
    <p slot="content">Are you sure you want to proceed? This action cannot be undone.</p>
    <mdc-button slot="actions" variant="text" onclick="this.closest('mdc-basic-dialog').close('cancel')"><span>Cancel</span></mdc-button>
    <mdc-button slot="actions" variant="filled" onclick="this.closest('mdc-basic-dialog').close('confirm')"><span>Confirm</span></mdc-button>
</mdc-basic-dialog>

<mdc-button onclick="this.getRootNode().querySelector('#submit-dialog').show()"><span>Confirm Dialog</span></mdc-button>

<mdc-basic-dialog id="basic-dialog" type="">
    <span slot="headline">Basic Dialog</span>
    <p slot="content">This is a basic dialog with no special type.</p>
    <mdc-button slot="actions" variant="text" onclick="this.closest('mdc-basic-dialog').close('ok')"><span>OK</span></mdc-button>
</mdc-basic-dialog>

<mdc-basic-dialog id="alert-dialog" type="alert">
    <span slot="headline">Alert Dialog</span>
    <p slot="content">This is an alert dialog with role="alertdialog".</p>
    <mdc-button slot="actions" variant="text" onclick="this.closest('mdc-basic-dialog').close('ok')"><span>OK</span></mdc-button>
</mdc-basic-dialog>

<mdc-button onclick="this.getRootNode().querySelector('#basic-dialog').show()"><span>Basic Dialog</span></mdc-button>
<mdc-button onclick="this.getRootNode().querySelector('#alert-dialog').show()"><span>Alert Dialog</span></mdc-button>