semantic-forms 5.3.3 → 5.3.4

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 5.3.4
+
+- Reverted a change to single radio and checkbox inputs.
+- Added sample forms to the demo page.
+
 ## 5.3.3
 
 - Fixed a bug where radio and checkbox inputs would be moved to the end of the parent `<dl>`.

package/dist/semantic-forms.css

@@ -1352,9 +1352,6 @@ form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .
   min-width: 150px;
   max-width: max-content;
 }
-.semanticForms dl div:not(:has(ul, ol)):has(dd input[type=radio]:only-of-type, dd input[type=checkbox]:only-of-type) {
-  padding-top: 22px;
-}
 .semanticForms dl div:has(dd > button:only-child, dd > input[type=button]:only-child, dd > input[type=submit]:only-child, dd > input[type=reset]:only-child) dt label {
   display: none;
 }
@@ -1456,6 +1453,11 @@ form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .
   gap: 10px;
   list-style-type: none;
 }
+.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea) li,
+.semanticForms ul:has(li > input, li > label, li > button, li > select, li > textarea) li {
+  display: flex;
+  align-items: center;
+}
 .semanticForms div:has(.align-start) {
   display: flex;
   justify-content: start;

package/docs/statics/pages/fullDemo.html

@@ -76,6 +76,7 @@
                 <li><a href="#low-flow-p_tag_elements">P tag elements</a></li>
               </ul>
             </li>
+            <li><a href="#sample_forms">Sample forms</a></li>
             <li><a href="#non_form_related_elements">Non-form related HTML elements</a></li>
           </ul>
         </details>
@@ -2326,6 +2327,71 @@
           </fieldset>
         </form>
 
+        <hr>
+
+        <h2 id="sample_forms">Sample forms</h2>
+
+        <section style="display: flex; flex-wrap: wrap; gap: 20px;">
+          <article id="form1" style="width: 370px;">
+            <form action="/somewhere" method="post" class="semanticForms">
+              <fieldset>
+                <legend>One column form</legend>
+
+                <dl>
+                  <div>
+                    <dt><label for="form1-name">Name</label></dt>
+                    <dd><input type="text" name="form1-name" id="form1-name"></dd>
+                  </div>
+
+                  <div>
+                    <dt><label for="form1-email">Email</label></dt>
+                    <dd><input type="text" name="form1-email" id="form1-email"></dd>
+                  </div>
+
+                  <div>
+                    <dt><label for="form1-agree">I agree to the Terms and Conditions</label></dt>
+                    <dd><input type="checkbox" name="form1-agree" id="form1-agree"></dd>
+                  </div>
+
+                  <div>
+                    <dt><label for="form1-receive-emails">I want to sign up for the weekly newsletter</label></dt>
+                    <dd><input type="checkbox" name="form1-receive-emails" id="form1-receive-emails"></dd>
+                  </div>
+                </dl>
+                <menu>
+                  <li><button type="submit">Sign up</button></li>
+                </menu>
+              </fieldset>
+            </form>
+          </article>
+
+          <article id="form2" style="width: 550px;">
+            <form action="/somewhere" method="post" class="semanticForms">
+              <fieldset>
+                <legend>Two column form</legend>
+
+                <dl class="colspan-2">
+                  <div>
+                    <dt><label for="form2-username">Username</label></dt>
+                    <dd><input type="text" name="form2-username" id="form2-username"></dd>
+                  </div>
+
+                  <div>
+                    <dt><label for="form2-password">Password</label></dt>
+                    <dd><input type="password" name="form2-password" id="form2-password"></dd>
+                  </div>
+                </dl>
+                <menu>
+                  <li><button type="submit">Sign in</button></li>
+                  <li><a href="/somewhere">Forgot password?</a></li>
+                </menu>
+              </fieldset>
+            </form>
+          </article>
+        </section>
+
+        <hr>
+
         <h2 id="non_form_related_elements">Non-form related HTML elements</h2>
         <form action="/somewhere" method="post" class="semanticForms">
           <p>This is some regular HTML that should not be affected by any semantic forms styles</p>

package/package.json

@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/semantic-forms/graphs/contributors"
     }
   ],
-  "version": "5.3.3",
+  "version": "5.3.4",
   "files": [
     "dist",
     "semanticForms.scss",

package/semanticForms.scss

@@ -145,11 +145,6 @@
         }
       }
 
-      &:not(:has(ul, ol)):has(dd input[type=radio]:only-of-type, dd input[type=checkbox]:only-of-type) {
-        // place in line with other inputs w/ labels
-        padding-top: 22px;
-      }
-
       // hide labels for singular buttons
       &:has(dd > button:only-child, dd > input[type=button]:only-child, dd > input[type=submit]:only-child, dd > input[type=reset]:only-child) {
         dt label {
@@ -289,6 +284,11 @@
     flex-wrap: wrap;
     gap: 10px;
     list-style-type: none;
+
+    li {
+      display: flex;
+      align-items: center;
+    }
   }
 
   div:has(.align-start) {