Modal

  <wc-button id="open-modal-btn">Open Modal</wc-button>
  <wc-button id="open-modal-loader-btn" variant="outlined">Open with Loader</wc-button>
  <wc-button id="open-modal-fullscreen-btn" variant="tonal">Fullscreen</wc-button>

  <wc-modal id="sample-modal" heading="Create User" subheading="User management" size="sm">
    <p style="margin: 0 0 1rem;">Fill in the details below to create a new user account.</p>
    <wc-input label="Full name" style="display: block; margin-bottom: 1rem;"></wc-input>
    <wc-input label="Email address" type="email" style="display: block;"></wc-input>

    <div slot="footer" style="display: flex;">
      <wc-button id="modal-cancel" variant="tonal" color="secondary" style="flex: 1; --tonal-button-container-shape: var(--shape-corner-none);">
        Cancel
      </wc-button>
      <wc-button id="modal-save" style="flex: 1; --filled-button-container-shape: var(--shape-corner-none);">
        Save
      </wc-button>
    </div>
  </wc-modal>

  <wc-modal id="loader-modal" heading="Saving…" hide-close="true" show-loader="true" size="xs">
    <p style="margin: 0;">Please wait while we save your changes.</p>
  </wc-modal>

  <wc-modal id="fullscreen-modal" heading="Fullscreen Dialog" size="fullscreen">
    <p style="margin: 0;">This modal occupies the full viewport.</p>
    <div slot="footer" style="display: flex; justify-content: flex-end; padding: 1rem;">
      <wc-button id="fullscreen-close">Close</wc-button>
    </div>
  </wc-modal>

  <script>
    const modal = document.querySelector('#sample-modal');
    const loaderModal = document.querySelector('#loader-modal');
    const fullscreenModal = document.querySelector('#fullscreen-modal');

    document.querySelector('#open-modal-btn').addEventListener('click', () => {
      modal.show();
    });

    document.querySelector('#open-modal-loader-btn').addEventListener('click', () => {
      loaderModal.show();
      setTimeout(() => loaderModal.hide(), 2000);
    });

    document.querySelector('#open-modal-fullscreen-btn').addEventListener('click', () => {
      fullscreenModal.show();
    });

    document.querySelector('#modal-cancel').addEventListener('click', () => {
      modal.hide();
    });

    document.querySelector('#modal-save').addEventListener('click', () => {
      modal.showLoader = true;
      setTimeout(() => {
        modal.showLoader = false;
        modal.hide();
      }, 1200);
    });

    document.querySelector('#fullscreen-close').addEventListener('click', () => {
      fullscreenModal.hide();
    });
  </script>