semantic-forms 5.3.3 → 5.3.5

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 5.3.5
+
+- Fixed visual issues that occurred on standalone and nested `<details>` elements.
+- Updated various dependencies.
+
+## 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

@@ -1245,21 +1245,23 @@ form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .
   padding: 10px 10px 20px 10px;
   margin-bottom: 15px;
 }
-.semanticForms fieldset fieldset {
+.semanticForms fieldset fieldset, .semanticForms fieldset details {
   background-color: var(--semanticFormsNestedFieldsetBgColor);
   border: var(--semanticFormsNestedFieldsetBorder);
   margin: 0;
 }
 .semanticForms fieldset fieldset input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
 .semanticForms fieldset fieldset select,
-.semanticForms fieldset fieldset textarea {
+.semanticForms fieldset fieldset textarea, .semanticForms fieldset details input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
+.semanticForms fieldset details select,
+.semanticForms fieldset details textarea {
   background-color: var(--semanticFormsNestedInputBgColor);
 }
 .semanticForms details {
   box-sizing: border-box;
   position: relative;
-  background-color: var(--semanticFormsNestedFieldsetBgColor);
-  border: var(--semanticFormsNestedFieldsetBorder);
+  background-color: var(--semanticFormsFormSubBgColor);
+  border: 1px var(--semanticFormsSubBorderColor) solid;
   border-radius: var(--semanticFormsBorderRadius);
   display: flex;
   flex-direction: column;
@@ -1329,6 +1331,18 @@ form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .
   margin-top: 15px;
   margin-bottom: 15px;
 }
+.semanticForms details details,
+.semanticForms details fieldset {
+  margin-top: 10px;
+  background-color: var(--semanticFormsNestedFieldsetBgColor);
+  border: var(--semanticFormsNestedFieldsetBorder);
+}
+.semanticForms details details[open] summary::before {
+  transform: rotate(90deg);
+}
+.semanticForms details details:not([open]) summary::before {
+  transform: rotate(0deg);
+}
 .semanticForms dl {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
@@ -1352,9 +1366,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 +1467,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>
@@ -942,7 +943,7 @@
             </details>
 
             <details>
-              <summary>Another detail element with a nested fieldset</summary>
+              <summary>Another detail element with a nested fieldset and details element</summary>
               <dl>
                 <div>
                   <dt><label for="another-detail-input-1">Detail input</label></dt>
@@ -960,9 +961,30 @@
                   </div>
                 </dl>
               </fieldset>
+
+              <details>
+                <summary>Some details</summary>
+                <dl>
+                  <div>
+                    <dt><label for="another-detail-input-3">Nested detail input</label></dt>
+                    <dd><input type="text" name="another-detail-input-3" id="another-detail-input-3"></dd>
+                  </div>
+                </dl>
+              </details>
             </details>
           </fieldset>
 
+          <details>
+            <summary>Standalone details</summary>
+
+            <dl>
+              <div>
+                <dt><label for="another-detail-input-4">Nested detail input 2</label></dt>
+                <dd><input type="text" name="another-detail-input-4" id="another-detail-input-4"></dd>
+              </div>
+            </dl>
+          </details>
+
           <fieldset id="buttons">
             <legend>Buttons</legend>
             <dl>
@@ -2326,6 +2348,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.5",
   "files": [
     "dist",
     "semanticForms.scss",
@@ -30,13 +30,13 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@playwright/test": "1.57.0",
-    "eslint": "9.39.1",
-    "eslint-plugin-html": "8.1.3",
+    "@playwright/test": "1.58.2",
+    "eslint": "10.0.0",
+    "eslint-plugin-html": "8.1.4",
     "express": "5.2.1",
     "nodemon": "3.1.11",
     "nyc": "17.1.0",
-    "sass": "1.96.0",
+    "sass": "1.97.3",
     "http-server": "14.1.1",
     "standard": "17.1.2",
     "webpack-cli": "6.0.1"

package/semanticForms.scss

@@ -15,8 +15,8 @@
     padding: 10px 10px 20px 10px;
     margin-bottom: 15px;
 
-    // nested fieldsets are darkened
-    fieldset {
+    // nested fieldsets and details are darkened
+    fieldset, details {
       background-color: var(--semanticFormsNestedFieldsetBgColor);
       border: var(--semanticFormsNestedFieldsetBorder);
       margin: 0;
@@ -33,8 +33,8 @@
   details {
     box-sizing: border-box; // ensure sizings match across browsers
     position: relative;
-    background-color: var(--semanticFormsNestedFieldsetBgColor);
-    border: var(--semanticFormsNestedFieldsetBorder);
+    background-color: var(--semanticFormsFormSubBgColor);
+    border: 1px var(--semanticFormsSubBorderColor) solid;
     border-radius: var(--semanticFormsBorderRadius);
     display: flex;
     flex-direction: column;
@@ -118,6 +118,21 @@
     }
   }
 
+  details details,
+  details fieldset {
+    margin-top: 10px;
+    background-color: var(--semanticFormsNestedFieldsetBgColor);
+    border: var(--semanticFormsNestedFieldsetBorder);
+  }
+
+  details details[open] summary::before {
+    transform: rotate(90deg);
+  }
+
+  details details:not([open]) summary::before {
+    transform: rotate(0deg);
+  }
+
   dl {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
@@ -145,11 +160,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 +299,11 @@
     flex-wrap: wrap;
     gap: 10px;
     list-style-type: none;
+
+    li {
+      display: flex;
+      align-items: center;
+    }
   }
 
   div:has(.align-start) {