Alert Basic

<div class="btn-container">
  <button id="info" type="button" class="btn">Show Info Alert</button>
  <button id="success" type="button" class="btn">Show Success Alert</button>
  <button id="warning" type="button" class="btn">Show Warning Alert</button>
  <button id="error" type="button" class="btn">Show Error Alert</button>
</div>

<sv-alert-stack swipe-dismiss></sv-alert-stack>

8 collapsed lines
<script>
  const alert = document.createElement("sv-alert-stack");
  alert.create({
    severity: "info",
    title: "New update available",
    description: "A newer version of this application is ready to install.",
  });
</script>

<script>
  const alertStack = document.querySelector("sv-alert-stack");
  const showInfoAlertButton = document.querySelector("#info");
  const showSuccessAlertButton = document.querySelector("#success");
  const showWarningAlertButton = document.querySelector("#warning");
  const showErrorAlertButton = document.querySelector("#error");

  showInfoAlertButton.addEventListener("click", () => {
    alertStack.create({
      severity: "info",
      title: "New update available",
      description: "A newer version of this application is ready to install.",
    });
  });

24 collapsed lines
  showSuccessAlertButton.addEventListener("click", () => {
    alertStack.create({
      severity: "success",
      title: "Changes saved",
      description: "Your settings have been successfully updated.",
    });
  });

  showWarningAlertButton.addEventListener("click", () => {
    alertStack.create({
      severity: "warning",
      title: "Unsaved changes",
      description: "You have unsaved changes. Leaving this page will discard them.",
    });
  });

  showErrorAlertButton.addEventListener("click", () => {
    alertStack.create({
      severity: "error",
      title: "Action failed",
      description: "Something went wrong while saving. Please try again.",
    });
  });
</script>

38 collapsed lines
<style>
  .btn-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }

  .btn {
    padding: 0.5em 1em;
    cursor: pointer;
    border: solid 1px gray;
    border-radius: 0.5em;

    &#info {
      color: var(--sb-note-text);
      background-color: var(--sb-note-background);
      border-color: var(--sb-note-border);
    }

    &#success {
      color: var(--sb-tip-text);
      background-color: var(--sb-tip-background);
      border-color: var(--sb-tip-border);
    }

    &#warning {
      color: var(--sb-warning-text);
      background-color: var(--sb-warning-background);
      border-color: var(--sb-warning-border);
    }

    &#error {
      color: var(--sb-caution-text);
      background-color: var(--sb-caution-background);
      border-color: var(--sb-caution-border);
    }
  }
</style>