Dialog

Load @dg/ui/styles.css once in the root layout. Keep a reference with bind:this and open the dialog from a button.

<script>
  import { Button, Dialog } from "@dg/ui";
  /** @type {ReturnType<typeof Dialog>} */
  let dialog;
  let expanded = $state(false);
</script>

<Button
  label="Filters"
  aria-haspopup="dialog"
  aria-controls="filters"
  aria-expanded={expanded}
  onclick={(event) => {
    expanded = true;
    dialog.open(event);
  }}
/>
<Dialog bind:this={dialog} id="filters" title="Filters" placement="start" onclose={(event) => (expanded = event.currentTarget.open)}>
  <p>Choose the works to display.</p>
</Dialog>

The media placement shows an image or other media over the blurred page. Controls placed in the content, such as previous and next buttons, take absolute positions in the band kept free around it.

<script>
  import { Dialog } from "@dg/ui";
  let { images } = $props();
  let current = $state(0);
  /** @type {ReturnType<typeof Dialog>} */
  let dialog;

  /** @param {number} index @param {MouseEvent} event */
  function show(index, event) {
    current = index;
    dialog.open(event);
  }
</script>

{#each images as image, index (image.src)}
  <button type="button" onclick={(event) => show(index, event)}><img src={image.src} alt={image.alt} /></button>
{/each}
<Dialog
  bind:this={dialog}
  title="Gallery"
  placement="media"
  onkeydown={(event) => {
    if (event.key === "ArrowRight") current = (current + 1) % images.length;
  }}
>
  <img src={images[current].src} alt={images[current].alt} />
</Dialog>

• Native HTML attributes, DOM callbacks, class and style are forwarded to the dialog element. Use id with a trigger's aria-controls, and read event.currentTarget.open in onclose to follow the state: a dialog reopened right after closing can still receive the earlier close event.
• Forwarding uses native attribute types; unknown props are not supported. Pass class as a string. Dialog owns open and its accessible name.
• Panels and drawers scroll their content below a fixed bar. The full placement composes Page: pass framed sections as children, give the last one flex: 1 to carry the frame rails to the bottom, and let the page scroll.
• While the dialog is open, the document does not scroll. The backdrop is translucent and blurred, except in the full placement, which covers the page.
• The media placement is a transparent full-screen surface. Its title is visually hidden but still names the dialog, and the close button floats in a framed box at the top right. Content is centered and kept clear of a control-sized band on every side, reduced to a narrow inset at the inline edges below --narrow; size media with max-inline-size: 100% and max-block-size: 100%. A press beside the content, on the surface itself, closes the dialog.

Dialog uses the native modal dialog: content outside it is inert, Tab cycles inside it and Escape closes it. Its title names the dialog. Keyboard opening focuses the first control, normally the close button; pointer opening focuses the panel so the focus ring stays reserved for keyboard use. Closing returns focus to the trigger. When the content of a panel or drawer overflows, its scrolling body becomes a focusable region named by the title, so keyboard users can scroll long text that contains no controls; it draws its focus ring inside. The entry motion stops under reduced motion.