refactor(forms)!: move :user-valid, :user-invalid into a new packag…

…e `@form-validation` (#41)

app/mod.html

@@ -254,6 +254,10 @@ <h1 id="layouts"><a href="#layouts">Layouts</a></h1>
           <h1 id="utilities"><a href="#utilities">Utilities</a></h1>
           <!--/styles/@utilities/mod.html-->
         </section>
+        <section>
+          <h1 id="form-validation"><a href="#form-validation">Form validation</a></h1>
+          <!--/styles/@form-validation/mod.html-->
+        </section>
         <section>
           <h1 id="syntax-highlighting"><a href="#syntax-highlighting">Syntax highlighting</a></h1>
           <!--/styles/@syntax-highlighting/mod.html-->

app/sections/custom-build.html

@@ -121,6 +121,11 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
         Istanbul coverage reports<br>
         <small>Additional classes intended to be used with the <a href="https://istanbul.js.org/" target="_blank">istanbul.js</a> coverage reports.</small>
       </label>
+      <label>
+        <input type="checkbox" name="extra" value="@form-validation" checked>
+        Form validation<br>
+        <small>Style <code data-hl="css">:user-valid, :user-invalid</code> states for inputs-like elements.</small>
+      </label>
       <label>
         <input type="checkbox" name="extra" value="@discrete-scrollbars" checked>
         Discrete scrollbars<br>
@@ -368,7 +373,6 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
       </fieldset>
     </details>
     <fieldset>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
       <legend>Customization</legend>
       <label class="width">
         Extra CSS content

styles/@form-validation/mod.css

@@ -0,0 +1,11 @@
+textarea:user-invalid,
+select:user-invalid,
+input:not([type="radio"],[type="checkbox"],[type="range"],[type="submit"],[type="image"]):user-invalid {
+  border: 1px solid var(--danger);
+}
+
+textarea:user-valid,
+select:user-valid,
+input:not([type="radio"],[type="checkbox"],[type="range"],[type="submit"],[type="image"]):user-valid {
+  border: 1px solid var(--success);
+}

styles/@form-validation/mod.html

@@ -0,0 +1,17 @@
+<p>
+  <em>matcha.css</em> provides rules that automatically colors the borders of inputs based on their validation status.
+</p>
+<ul>
+  <li><code data-hl="css">:user-valid</code> has <code><span class="success">◉</span> --success</code> borders.</li>
+  <li><code data-hl="css">:user-invalid</code> has <code><span class="danger">◉</span> --danger</code> borders.</li>
+</ul>
+<div class="example">
+  <p class="note">*No validation except the ones operated by the browser are performed.</p>
+  <form method="get" onsubmit="event.preventDefault()">
+    <label>
+      URL:
+      <small>Type an URL below. If it is valid, it'll appear in <code><span class="success">◉</span> --success</code> while it'll appear in <code><span class="danger">◉</span> --danger</code> if not.</small>
+      <input required type="url" placeholder="https://example.com">
+    </label>
+  </form>
+</div>

styles/forms/input.html

@@ -7,8 +7,6 @@ <h2 id="input">
   </p>
   <ul>
     <li><code data-hl="css">:disabled</code> has a muted background and a <code data-hl="css">not-allowed</code> cursor.</li>
-    <li><code data-hl="css">:user-valid</code> has <code><span class="success">◉</span> --success</code> borders.</li>
-    <li><code data-hl="css">:user-invalid</code> has <code><span class="danger">◉</span> --danger</code> borders.</li>
   </ul>
   <div class="example">
     <p class="note">*No validation except the ones operated by the browser are performed.</p>
@@ -138,4 +136,9 @@ <h2 id="input">
       </fieldset>
     </form>
   </div>
-</section>
+</section>
+<div class="flash variant">
+  <p>
+    <em>matcha.css</em> provides rules that automatically colors the borders of inputs based on their validation status.
+  </p>
+</div>

styles/forms/mod.css

@@ -103,18 +103,6 @@ textarea {
   cursor: not-allowed;
 }
 
-textarea:user-invalid,
-select:user-invalid,
-input:not([type="radio"],[type="checkbox"],[type="range"],[type="submit"],[type="image"]):user-invalid {
-  border: 1px solid var(--danger);
-}
-
-textarea:user-valid,
-select:user-valid,
-input:not([type="radio"],[type="checkbox"],[type="range"],[type="submit"],[type="image"]):user-valid {
-  border: 1px solid var(--success);
-}
-
 /* Select */
 select {
   width: 100%;

styles/forms/select.html

@@ -7,8 +7,6 @@ <h2 id="select">
   </p>
   <ul>
     <li><code data-hl="css">:disabled</code> has a muted background and a <code data-hl="css">not-allowed</code> cursor.</li>
-    <li><code data-hl="css">:user-valid</code> has <code><span class="success">◉</span> --success</code> borders.</li>
-    <li><code data-hl="css">:user-invalid</code> has <code><span class="danger">◉</span> --danger</code> borders.</li>
   </ul>
   <div class="example">
     <form method="get" onsubmit="event.preventDefault()">

styles/forms/textarea.html

@@ -7,8 +7,6 @@ <h2 id="textarea">
   </p>
   <ul>
     <li><code data-hl="css">:disabled</code> has a muted background and a <code data-hl="css">not-allowed</code> cursor.</li>
-    <li><code data-hl="css">:user-valid</code> has <code><span class="success">◉</span> --success</code> borders.</li>
-    <li><code data-hl="css">:user-invalid</code> has <code><span class="danger">◉</span> --danger</code> borders.</li>
   </ul>
   <div class="example">
     <form method="get" onsubmit="event.preventDefault()">