drab - dialog

import "drab/dialog/define";

<div class="mb-4">
	<drab-dialog click-outside-close class="contents">
		<button data-trigger type="button">Right</button>
		<dialog
			data-content
			class="bg-background my-0 mr-0 ml-auto h-full max-h-screen w-full max-w-screen p-6 backdrop:backdrop-blur sm:max-w-96"
		>
			<div class="mb-4 flex items-center justify-between">
				<h2 class="my-0">Dialog</h2>
				<button data-trigger class="ghost" aria-label="Close">
					<!-- x-mark -->
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
						class="size-5"
					>
						<path
							d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
						/>
					</svg>
				</button>
			</div>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
				velit esse cillum dolore eu fugiat nulla pariatur.
			</p>
		</dialog>
	</drab-dialog>
</div>

<drab-dialog remove-body-scroll class="contents">
	<button data-trigger type="button">Center</button>
	<dialog
		data-content
		class="bg-background m-auto rounded-md border p-6 opacity-0 transition-[display,opacity] transition-discrete duration-500 backdrop:opacity-0 backdrop:backdrop-blur backdrop:transition-[display,opacity] backdrop:transition-discrete backdrop:duration-500 open:opacity-100 open:backdrop:opacity-100 sm:max-w-96 starting:open:opacity-0 starting:open:backdrop:opacity-0"
	>
		<div class="mb-4 flex items-center justify-between">
			<h2 class="my-0">Dialog</h2>
			<button data-trigger class="ghost" aria-label="Close">
				<!-- x-mark -->
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
					fill="currentColor"
					class="size-5"
				>
					<path
						d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
					/>
				</svg>
			</button>
		</div>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
			veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
			commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
			velit esse cillum dolore eu fugiat nulla pariatur.
		</p>
	</dialog>
</drab-dialog>

Overview

Defined in: dialog/index.ts:21

Provides triggers for the HTMLDialogElement.

click-outside-close

By default, the HTMLDialogElement doesn’t close if the user clicks outside of it. Add a click-outside-close attribute to close when the user clicks outside.

remove-body-scroll

Add the remove-body-scroll attribute to remove the scroll from document.body when the dialog is open.

Constructors

new Dialog()

new Dialog(): Dialog

Defined in: dialog/index.ts:27

Accessors

dialog

Get Signature

get dialog(): HTMLDialogElement

Defined in: dialog/index.ts:32

The HTMLDialogElement within the element.

event

Set Signature

set event(value): void

Defined in: base/index.ts:46

Methods

announce()

announce(message): void

Defined in: base/index.ts:53

Parameters

message

string

message to announce to screen readers

close()

close(): Promise<void>

Defined in: dialog/index.ts:58

HTMLDialogElement.close() with animation.

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:171

Called when custom element is added to the page.

destroy()

destroy(): void

Defined in: base/index.ts:178

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:181

Called when custom element is removed from the page.

mount()

mount(): void

Defined in: dialog/index.ts:69

Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.

The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.