semantic-forms 5.3.4 → 5.3.5

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 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.

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));

package/docs/statics/pages/fullDemo.html

@@ -943,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>
@@ -961,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>

package/package.json

@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/semantic-forms/graphs/contributors"
     }
   ],
-  "version": "5.3.4",
+  "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));