semantic-forms 5.1.0 → 5.1.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 5.1.1
+
+- Fixed broken low flow styling.
+- Fixed a visual bug on button gradients in Firefox.
+- Fixed background styling on nested fieldsets within `<detail>` elements.
+- Updated dependencies.
+
 ## 5.1.0
 
 - Added ability to more conveniently override default CSS via additional CSS variables.

package/dist/semantic-forms.css

@@ -262,6 +262,7 @@ form.semanticForms.light button:not(.clear):not(.show) {
   cursor: pointer;
   max-width: max-content;
   background-image: linear-gradient(to bottom, var(--semanticFormsButtonGradientLight) 0%, var(--semanticFormsButtonGradientDark) 100%);
+  background-origin: border-box;
   border: 2px var(--semanticFormsButtonGradientDark) solid;
   border-radius: 20px;
   padding: 5px 25px;
@@ -369,15 +370,15 @@ form.semanticForms fieldset, form.semanticForms.light fieldset {
   padding: 10px 10px 20px 10px;
   margin-bottom: 15px;
 }
-form.semanticForms fieldset > fieldset, form.semanticForms.light fieldset > fieldset {
+form.semanticForms fieldset fieldset, form.semanticForms.light fieldset fieldset {
   background-color: var(--semanticFormsNestedFieldsetBgColor);
   border: var(--semanticFormsNestedFieldsetBorder);
 }
-form.semanticForms fieldset > fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-form.semanticForms fieldset > fieldset select,
-form.semanticForms fieldset > fieldset textarea, form.semanticForms.light fieldset > fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-form.semanticForms.light fieldset > fieldset select,
-form.semanticForms.light fieldset > fieldset textarea {
+form.semanticForms fieldset fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
+form.semanticForms fieldset fieldset select,
+form.semanticForms fieldset fieldset textarea, form.semanticForms.light fieldset fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
+form.semanticForms.light fieldset fieldset select,
+form.semanticForms.light fieldset fieldset textarea {
   background-color: var(--semanticFormsNestedInputBgColor);
 }
 form.semanticForms details[open], form.semanticForms summary, form.semanticForms.light details[open], form.semanticForms.light summary {
@@ -839,40 +840,47 @@ form.semanticForms.light.semanticFormsActive dl.colspan-1 {
     grid-column: 1;
   }
 }
-form.semanticForms:not(.semanticFormsActive) dl, form.semanticForms.light:not(.semanticFormsActive) dl {
-  display: flex;
-  flex-direction: column;
+form.semanticForms.semanticFormsActive.lowFlow, form.semanticForms.light.semanticFormsActive.lowFlow {
   gap: 5px;
 }
-form.semanticForms:not(.semanticFormsActive) dl dt, form.semanticForms.light:not(.semanticFormsActive) dl dt {
-  max-width: 365px !important; /* this matches the max-width of js-enabled inputs */
+form.semanticForms.semanticFormsActive.lowFlow dl, form.semanticForms.light.semanticFormsActive.lowFlow dl {
+  grid-auto-flow: dense;
+}
+form.semanticForms.semanticFormsActive.lowFlow > dt:nth-of-type(2n + 1), form.semanticForms.semanticFormsActive.lowFlow > dd:nth-of-type(2n + 1), form.semanticForms.light.semanticFormsActive.lowFlow > dt:nth-of-type(2n + 1), form.semanticForms.light.semanticFormsActive.lowFlow > dd:nth-of-type(2n + 1) {
+  grid-column: 1;
+}
+form.semanticForms.semanticFormsActive.lowFlow > dt:nth-of-type(2n + 2), form.semanticForms.semanticFormsActive.lowFlow > dd:nth-of-type(2n + 2), form.semanticForms.light.semanticFormsActive.lowFlow > dt:nth-of-type(2n + 2), form.semanticForms.light.semanticFormsActive.lowFlow > dd:nth-of-type(2n + 2) {
+  grid-column: 2;
+}
+form.semanticForms.semanticFormsActive.lowFlow dt, form.semanticForms.light.semanticFormsActive.lowFlow dt {
+  min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
 }
-form.semanticForms:not(.semanticFormsActive) dl dt:has(+ dd input:required) label::after, form.semanticForms.light:not(.semanticFormsActive) dl dt:has(+ dd input:required) label::after {
+form.semanticForms.semanticFormsActive.lowFlow dt:has(+ dd input:required) label::after, form.semanticForms.light.semanticFormsActive.lowFlow dt:has(+ dd input:required) label::after {
   content: " *";
   color: red;
 }
-form.semanticForms:not(.semanticFormsActive) dl dd, form.semanticForms.light:not(.semanticFormsActive) dl dd {
+form.semanticForms.semanticFormsActive.lowFlow dd, form.semanticForms.light.semanticFormsActive.lowFlow dd {
   margin-bottom: 10px;
-  max-width: 365px !important; /* this matches the max-width of js-enabled inputs */
+  min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
 }
-form.semanticForms:not(.semanticFormsActive) dl dd:not(.checkboxes) input[type=checkbox], form.semanticForms.light:not(.semanticFormsActive) dl dd:not(.checkboxes) input[type=checkbox] {
+form.semanticForms.semanticFormsActive.lowFlow dd:not(.checkboxes) input[type=checkbox], form.semanticForms.light.semanticFormsActive.lowFlow dd:not(.checkboxes) input[type=checkbox] {
   margin-left: 10px;
 }
-form.semanticForms:not(.semanticFormsActive) dl dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-form.semanticForms:not(.semanticFormsActive) dl dd select,
-form.semanticForms:not(.semanticFormsActive) dl dd textarea, form.semanticForms.light:not(.semanticFormsActive) dl dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-form.semanticForms.light:not(.semanticFormsActive) dl dd select,
-form.semanticForms.light:not(.semanticFormsActive) dl dd textarea {
+form.semanticForms.semanticFormsActive.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
+form.semanticForms.semanticFormsActive.lowFlow dd select,
+form.semanticForms.semanticFormsActive.lowFlow dd textarea, form.semanticForms.light.semanticFormsActive.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
+form.semanticForms.light.semanticFormsActive.lowFlow dd select,
+form.semanticForms.light.semanticFormsActive.lowFlow dd textarea {
   padding-right: 6px;
 }
-form.semanticForms:not(.semanticFormsActive) dl dd label, form.semanticForms.light:not(.semanticFormsActive) dl dd label {
+form.semanticForms.semanticFormsActive.lowFlow dd label, form.semanticForms.light.semanticFormsActive.lowFlow dd label {
   margin-top: -5px;
   font-size: small;
   color: var(--semanticFormsPlaceholderColor);
 }
-form.semanticForms:not(.semanticFormsActive) .checkboxes ul,
-form.semanticForms:not(.semanticFormsActive) .radios ul, form.semanticForms.light:not(.semanticFormsActive) .checkboxes ul,
-form.semanticForms.light:not(.semanticFormsActive) .radios ul {
+form.semanticForms.semanticFormsActive .checkboxes ul,
+form.semanticForms.semanticFormsActive .radios ul, form.semanticForms.light.semanticFormsActive .checkboxes ul,
+form.semanticForms.light.semanticFormsActive .radios ul {
   margin-top: calc(var(--semanticFormsInputTopMargin) / 2);
 }
 

package/dist/semantic-forms.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../semanticForms.scss"],"names":[],"mappings":"AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA2BF;EAGM;IA1BJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAgBA;EAnCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAuBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAYE;EACA;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;AAUJ;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAIJ;AAAA;AAAA;EAEE;;AAIF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIF;EACE;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAIF;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;E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","file":"semantic-forms.css"}
+{"version":3,"sourceRoot":"","sources":["../semanticForms.scss"],"names":[],"mappings":"AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA2BF;EAGM;IA1BJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAgBA;EAnCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAuBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAYE;EACA;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;AAUJ;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAIJ;AAAA;AAAA;EAEE;;AAIF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIF;EACE;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAIF;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;E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","file":"semantic-forms.css"}

package/package.json

@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/semantic-forms/graphs/contributors"
     }
   ],
-  "version": "5.1.0",
+  "version": "5.1.1",
   "files": [
     "dist",
     "semanticForms.scss",
@@ -21,8 +21,8 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@playwright/test": "1.53.2",
-    "eslint": "9.30.1",
+    "@playwright/test": "1.54.1",
+    "eslint": "9.31.0",
     "eslint-plugin-html": "8.1.3",
     "express": "5.1.0",
     "nodemon": "3.1.10",

package/semanticForms.scss

@@ -247,6 +247,7 @@ form.semanticForms, form.semanticForms.light {
     cursor: pointer;
     max-width: max-content;
     background-image: linear-gradient(to bottom, var(--semanticFormsButtonGradientLight) 0%, var(--semanticFormsButtonGradientDark) 100%);
+    background-origin: border-box; // prevents graphical errors in Firefox
     border: 2px var(--semanticFormsButtonGradientDark) solid;
     border-radius: 20px;
     padding: 5px 25px;
@@ -326,7 +327,7 @@ form.semanticForms, form.semanticForms.light {
     margin-bottom: 15px;
 
     // nested fieldsets are darkened
-    > fieldset {
+    fieldset {
       background-color: var(--semanticFormsNestedFieldsetBgColor);
       border: var(--semanticFormsNestedFieldsetBorder);
 
@@ -967,59 +968,71 @@ form.semanticForms, form.semanticForms.light {
       }
     }
     // #endregion
-  }
-
-  // #region low flow form
-  &:not(.semanticFormsActive) {
-    dl {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
 
-      dt {
-         max-width: 365px !important; /* this matches the max-width of js-enabled inputs */
+    // #region low flow form
+    &.lowFlow {
+        gap: 5px;
 
-        // add required asterisk
-        &:has(+ dd input:required) {
-          label::after {
-            content: ' *';
-            color: red;
-          }
+        dl {
+          grid-auto-flow: dense;
         }
-      }
-
-
-      dd {
-        margin-bottom: 10px;
-        max-width: 365px !important; /* this matches the max-width of js-enabled inputs */
-
-        // nudge single checkboxes to match checkbox groups
-        &:not(.checkboxes) {
-          input[type=checkbox] {
-            margin-left: 10px;
-          }
+  
+        // 1, 4, 7, ...
+        & > dt:nth-of-type(2n + 1),
+        & > dd:nth-of-type(2n + 1) {
+          grid-column: 1;
         }
-
-        // remove "x" padding
-        input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-        select,
-        textarea {
-          padding-right: 6px;
+  
+        // 2, 5, 8, ...
+        & > dt:nth-of-type(2n + 2),
+        & > dd:nth-of-type(2n + 2) {
+          grid-column: 2;
         }
-
-        // subtext
-        label {
-          margin-top: -5px;
-          font-size: small;
-          color: var(--semanticFormsPlaceholderColor);
+  
+        dt {
+           min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
+  
+          // add required asterisk
+          &:has(+ dd input:required) {
+            label::after {
+              content: ' *';
+              color: red;
+            }
+          }
+        }
+  
+  
+        dd {
+          margin-bottom: 10px;
+          min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
+  
+          // nudge single checkboxes to match checkbox groups
+          &:not(.checkboxes) {
+            input[type=checkbox] {
+              margin-left: 10px;
+            }
+          }
+  
+          // remove "x" padding
+          input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
+          select,
+          textarea {
+            padding-right: 6px;
+          }
+  
+          // subtext
+          label {
+            margin-top: -5px;
+            font-size: small;
+            color: var(--semanticFormsPlaceholderColor);
+          }
         }
       }
+  
+      .checkboxes ul,
+      .radios ul {
+        margin-top: calc(var(--semanticFormsInputTopMargin) / 2);
+      }
     }
-
-    .checkboxes ul,
-    .radios ul {
-      margin-top: calc(var(--semanticFormsInputTopMargin) / 2);
-    }
+    // #endregion
   }
-  // #endregion
-}