<wa-dialog label="Dialog" id="dialog-overview">
  This is a standard dialog. You can put any content you want in here!
  <wa-button appearance="filled" slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

<wa-button appearance="filled">Open Dialog</wa-button>

<script>
  const dialog = document.querySelector('#dialog-overview');
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener('click', () => (dialog.open = true));
</script>

<wa-dialog label="Dialog" without-header class="dialog-without-header">
  Look ma, no header! Sometimes you just need a clean, simple dialog.
  <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

<wa-button appearance="filled">Open Dialog</wa-button>

<script>
  const dialog = document.querySelector('.dialog-without-header');
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener('click', () => (dialog.open = true));
</script>

<wa-dialog label="Dialog" class="dialog-footer">
  Check out the footer below — it's a great place for actions and buttons.
  <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

<wa-button appearance="filled">Open Dialog</wa-button>

<script>
  const dialog = document.querySelector('.dialog-footer');
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener('click', () => (dialog.open = true));
</script>

<wa-dialog label="Dialog" id="dialog-opening">
  This dialog was opened declaratively — no JavaScript required!
  <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

<wa-button appearance="filled" data-dialog="open dialog-opening">Open Dialog</wa-button>

<wa-dialog label="Dialog" id="dialog-dismiss">
  Click the button in the footer to close this dialog declaratively.
  <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

<wa-button appearance="filled" data-dialog="open dialog-dismiss">Open Dialog</wa-button>

<wa-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
  This dialog is wider than the default — handy when you need more room for content.
  <wa-button appearance="filled" slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

<wa-button appearance="filled">Open Dialog</wa-button>

<script>
  const dialog = document.querySelector('.dialog-width');
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener('click', () => (dialog.open = true));
</script>

<wa-dialog label="Dialog" class="dialog-scrolling">
  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-border); padding: 0 1rem;">
    <p>Scroll down and give it a try! 👇</p>
  </div>
  <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

<wa-button appearance="filled">Open Dialog</wa-button>

<script>
  const dialog = document.querySelector('.dialog-scrolling');
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener('click', () => (dialog.open = true));
</script>

<wa-dialog label="Dialog" class="dialog-header-actions">
  <wa-button class="new-window" slot="header-actions" appearance="plain">
    <wa-icon name="arrow-up-right-from-square" variant="solid" label="Open in new window"></wa-icon>
  </wa-button>
  You can add custom actions to the header, like the icon button up there!
  <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

<wa-button appearance="filled">Open Dialog</wa-button>

<script>
  const dialog = document.querySelector('.dialog-header-actions');
  const openButton = dialog.nextElementSibling;
  const newWindowButton = dialog.querySelector('.new-window');

  openButton.addEventListener('click', () => (dialog.open = true));
  newWindowButton.addEventListener('click', () => window.open(location.href));
</script>

<wa-dialog label="Dialog" light-dismiss class="dialog-light-dismiss">
  This dialog will close when you click on the overlay.
  <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

<wa-button appearance="filled">Open Dialog</wa-button>

<script>
  const dialog = document.querySelector('.dialog-light-dismiss');
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener('click', () => (dialog.open = true));
</script>

<wa-dialog label="Dialog" class="dialog-deny-close">
  This dialog will only close when you click the button below.
  <wa-button slot="footer" variant="brand" data-dialog="close">Only this button will close it</wa-button>
</wa-dialog>

<wa-button appearance="filled">Open Dialog</wa-button>

<script>
  const dialog = document.querySelector('.dialog-deny-close');
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector('wa-button[slot="footer"]');

  openButton.addEventListener('click', () => (dialog.open = true));

  // Prevent the dialog from closing unless the close button was clicked
  dialog.addEventListener('wa-hide', event => {
    if (event.detail.source !== closeButton) {
      event.preventDefault();
    }
  });
</script>

<wa-dialog label="Dialog" class="dialog-focus">
  <wa-input autofocus placeholder="I will have focus when the dialog is opened"></wa-input>
  <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

<wa-button appearance="filled">Open Dialog</wa-button>

<script>
  const dialog = document.querySelector('.dialog-focus');
  const input = dialog.querySelector('wa-input');
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener('click', () => (dialog.open = true));
</script>