From 1ecbb972cb032e84d47f9f09ce3d3ccf3e97b85f Mon Sep 17 00:00:00 2001
From: Simon Lecoq <22963968+lowlighter@users.noreply.github.com>
Date: Tue, 9 Jul 2024 21:22:14 -0400
Subject: [PATCH] refactor(forms)!: move `:user-valid, :user-invalid` into a
 new package `@form-validation` (#41)

---
 app/mod.html                     |  4 ++++
 app/sections/custom-build.html   |  6 +++++-
 styles/@form-validation/mod.css  | 11 +++++++++++
 styles/@form-validation/mod.html | 17 +++++++++++++++++
 styles/forms/input.html          |  9 ++++++---
 styles/forms/mod.css             | 12 ------------
 styles/forms/select.html         |  2 --
 styles/forms/textarea.html       |  2 --
 8 files changed, 43 insertions(+), 20 deletions(-)
 create mode 100644 styles/@form-validation/mod.css
 create mode 100644 styles/@form-validation/mod.html

diff --git a/app/mod.html b/app/mod.html
index af6c02d..910bbb0 100644
--- a/app/mod.html
+++ b/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-->
diff --git a/app/sections/custom-build.html b/app/sections/custom-build.html
index 745be39..fa6157f 100644
--- a/app/sections/custom-build.html
+++ b/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
diff --git a/styles/@form-validation/mod.css b/styles/@form-validation/mod.css
new file mode 100644
index 0000000..ef3c213
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/styles/@form-validation/mod.html b/styles/@form-validation/mod.html
new file mode 100644
index 0000000..8ec9b57
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/styles/forms/input.html b/styles/forms/input.html
index 4927063..ada35fe 100644
--- a/styles/forms/input.html
+++ b/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>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/styles/forms/mod.css b/styles/forms/mod.css
index 53395c9..a26f7a5 100644
--- a/styles/forms/mod.css
+++ b/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%;
diff --git a/styles/forms/select.html b/styles/forms/select.html
index 64faa8c..ccc9a10 100644
--- a/styles/forms/select.html
+++ b/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()">
diff --git a/styles/forms/textarea.html b/styles/forms/textarea.html
index cdaca3d..f458721 100644
--- a/styles/forms/textarea.html
+++ b/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()">