Dialog Modal

<button type="button" class="toggle-button" data-dialog-toggle="terms-dialog">Read Terms of Service</button>

<sv-dialog id="terms-dialog" aria-label="Terms of Service" close-button>
  <h2 class="dialog-title">Terms of Service & Privacy Policy</h2>

52 collapsed lines
  <div class="dialog-section">
    <p><strong>Last Updated: January 2026</strong></p>
    <p>
      Please read these terms carefully before using our service. By accessing the application, you agree to be bound by the
      following conditions. This document ensures that both the provider and the user understand their rights and
      responsibilities.
    </p>
  </div>

  <div class="dialog-section">
    <h3>1. Acceptance of Terms</h3>
    <p>
      The services provided by staticview Components are subject to the following Terms of Use. We reserve the right to update
      these terms at any time without notice to you. The most current version can be reviewed by clicking on the "Terms of Use"
      hypertext link located at the bottom of our Web pages.
    </p>
  </div>

  <div class="dialog-section">
    <h3>2. Privacy and Protection of Personal Information</h3>
    <p>
      See the Privacy Policy disclosures relating to the collection and use of your information. We prioritize data encryption and
      ensure that your personal identifiers are never shared with third-party advertisers without explicit consent.
    </p>
  </div>

  <div class="dialog-section">
    <h3>3. User Conduct</h3>
    <p>
      As a condition of your use of the Services, you will not use the Services for any purpose that is unlawful or prohibited by
      these terms, conditions, and notices. You may not use the Services in any manner that could damage, disable, overburden, or
      impair any server, or the network(s) connected to any server.
    </p>
  </div>

  <div class="dialog-section">
    <h3>4. Limitation of Liability</h3>
    <p>
      In no event shall staticview be liable for any special, indirect, or consequential damages or any damages whatsoever
      resulting from loss of use, data, or profits, whether in an action of contract, negligence, or other tortious action,
      arising out of or in connection with the use or performance of software or documents.
    </p>
  </div>

  <div class="dialog-section">
    <h3>5. Termination of Use</h3>
    <p>
      We may terminate your access to all or any part of the Service at any time, with or without cause, with or without notice,
      effective immediately, which may result in the forfeiture and destruction of all information associated with your
      membership.
    </p>
  </div>

  <div class="dialog-footer">
    <!-- Just an example no functionality -->
    <button type="button" class="button-secondary" data-dialog-close="terms-dialog">Decline</button>
    <button type="button" class="button-primary" data-dialog-close="terms-dialog">I Accept</button>
  </div>
</sv-dialog>

<style>
44 collapsed lines
  .toggle-button {
    display: block;
    padding: 0.8em 1.5em;
    margin: 0.5em auto;
    font-weight: bold;
    color: var(--sv-accent-content);
    cursor: pointer;
    background-color: var(--sv-accent);
    border: none;
    border-radius: var(--sv-bdr-rad-md);
  }

  .dialog-title {
    padding-block-end: 10px;
    margin-block-start: 0;
    border-block-end: 1px solid var(--sv-gray-2);
  }

  .dialog-section {
    margin-block-end: 1.5rem;
    line-height: 1.6;
  }

  .dialog-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-block-start: 1rem;
    margin-block-start: 2rem;
    border-block-start: 1px solid var(--sv-gray-2);
  }

  .button-primary,
  .button-secondary {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: none;
    border-radius: 4px;
  }

  .button-primary {
    color: var(--sv-accent-content);
    background: var(--sv-accent);
  }
</style>