Modal

Name	Type	Description
guvam-input	element
.Modal	style
.type-outline	modifier
[disabled]	attribute

Modal styling

   <guvam-modal>
  <dialog class="Modal type-static" open data-target="modal-window">
    <div class="Modal-Window">
      <h1 class="Modal-Heading">
        <span>Modal Heading</span> <button class="Modal-Close" data-target="modal-close"> <i class="Icon x"></i> </button>
      </h1>
      <div class="Modal-Body type-bordered">
        Modal Body
        <button class="Button has-tooltip">
          Tooltip Test
          <span class="Tooltip right">tooltip</span>
        </button>
      </div>
      <div class="Modal-Footer">
        <button class="Button type-outline" data-target="modal-close">Close</button> <button class="Button">Save Changes</button>
      </div>
    </div>
  </dialog>
</guvam-modal>

Vertically Centered Modal

   <guvam-modal>
  <button class="Button" data-target="modal-opener">Click me</button>
  <dialog class="Modal type-centered" data-target="modal">
    <div class="Modal-Window">
      <h1 class="Modal-Heading">
        <span>Modal Heading</span> <button class="Modal-Close" data-target="modal-close"> <i class="Icon x"></i> </button>
      </h1>
      <div class="Modal-Body type-bordered">
        Modal Body
        <button class="Button has-tooltip">
          Tooltip Test
          <span class="Tooltip right">tooltip</span>
        </button>
      </div>
      <div class="Modal-Footer">
        <button class="Button type-outline" data-target="modal-close">Close</button> <button class="Button">Save Changes</button>
      </div>
    </div>
  </dialog>
</guvam-modal>

Modal with static backdrop

   <guvam-modal staticbackdrop="true">
  <button class="Button" data-target="modal-opener">Click me</button>
  <dialog class="Modal" data-target="modal">
    <div class="Modal-Window">
      <h1 class="Modal-Heading">
        <span>Modal Heading</span> <button class="Modal-Close" data-target="modal-close"> <i class="Icon x"></i> </button>
      </h1>
      <div class="Modal-Body type-bordered">
        Modal Body
        <button class="Button has-tooltip">
          Tooltip Test
          <span class="Tooltip right">tooltip</span>
        </button>
      </div>
      <div class="Modal-Footer">
        <button class="Button type-outline" data-target="modal-close">Close</button> <button class="Button">Save Changes</button>
      </div>
    </div>
  </dialog>
</guvam-modal>