Better Validation

:valid and :invalid are eager, :user-valid and :user-invalid are lazy

:user-valid {
  outline-color: green;
}

:user-invalid {
  outline-color: red;
}

input {
  label:has(+ &:user-invalid) {
    text-decoration: underline wavy red;
  }
}

input {
  label:has(+ &:user-valid)::after {
    color: green;
    content: " ✓";
  }
}