Dialog

The content of an overlay that people act on, such as a Popover or a Modal.

<script>
  import Button from '@brumate/ui/Button.brm';
  import Dialog from '@brumate/ui/Dialog.brm';
  import DialogTrigger from '@brumate/ui/DialogTrigger.brm';
  import Heading from '@brumate/ui/Heading.brm';
  import Popover from '@brumate/ui/Popover.brm';
</script>

<DialogTrigger>
  <Button class="ui-button">About</Button>
  <Popover class="ui-popover" transition>
    <Dialog class="ui-dialog">
      <Heading slot="title" level=(4)>About this page</Heading>
      <p>A dialog takes focus, and its title names it.</p>
      <Button slot="close" class="ui-button">Close</Button>
    </Dialog>
  </Popover>
</DialogTrigger>

• It is a dialog, or an alertdialog with role="alertdialog". A Heading with slot="title" names it.
• A Button with slot="close" closes the overlay around it.
• When the overlay opens, focus moves to the element of the dialog with autofocus, or to the dialog itself, so a screen reader reads its title.

DialogTrigger

Opens an overlay from a Button inside it.

• It holds a Button and an overlay, such as a Popover or a Modal. The button gets aria-expanded and aria-controls, and a press toggles the overlay. It gets no aria-haspopup, as in React Aria, because screen readers read a popup button as a menu.
• isOpen is the state. See State.
• It renders only its children.
• An overlay inside another one needs a DialogTrigger of its own, or its own isOpen.