semantic-forms 5.1.11 → 5.2.0

package/semanticForms.scss

@@ -14,12 +14,14 @@ form.semanticForms, form.semanticForms.light, table.semanticForms {
   --semanticFormsButtonGradientDark: #c0c0c0;
   --semanticFormsInvalid: #f00;
   --semanticFormsInvalidBorder: 1px solid var(--semanticFormsInvalid);
+  --semanticFormsWarn: #ffdd00;
+  --semanticFormsWarnBorder: 1px solid var(--semanticFormsWarn);
   --semanticFormsInputHeight: 38px;
   --semanticFormsInputFontSize: 16px;
   --semanticFormsInputTopMargin: 15px;
   --semanticFormsInputMinWidth: 250px;
   --semanticFormsBorderRadius: 10px;
-  --semanticFormsNestedFieldsetBgColor: rgba(0, 0, 0, .05);
+  --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.3 c h / 0.05);
   --semanticFormsNestedFieldsetBorder: 1px rgba(0, 0, 0, .2) solid;
   --semanticFormsNestedInputBgColor: #fff;
   --semanticFormsBorder: 1px var(--semanticFormsBorderColor) solid;
@@ -45,7 +47,7 @@ form.semanticForms, form.semanticForms.light, table.semanticForms {
   --semanticFormsClearButtonColor: #fff;
   --semanticFormsButtonGradientLight: #6f6f6f;
   --semanticFormsButtonGradientDark: #373737;
-  --semanticFormsNestedFieldsetBgColor: rgba(255, 255, 255, .05);
+  --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.9 c h / 0.05);
   --semanticFormsNestedFieldsetBorder: 1px rgba(255, 255, 255, .1) solid;
   --semanticFormsNestedInputBgColor: rgba(255, 255, 255, .15);
   --semanticFormsBorder: none;
@@ -96,6 +98,11 @@ table.semanticForms.light {
   container-type: inline-size;
   container-name: semanticForm;
 
+  // https://caniuse.com/wf-interpolate-size
+  @supports (interpolate-size: allow-keywords) {
+    interpolate-size: allow-keywords;
+  }
+
   // due to the specificity of some of these rules, [hidden] won't actually hide things, so we're forcing the issue
   [hidden] {
     display: none !important;
@@ -201,8 +208,8 @@ table.semanticForms.light {
   input[type=checkbox],
   input[type=radio] {
     // 30% larger based on parent font size
-    width: 1.4em;
-    height: 1.4em;
+    width: 18px;
+    height: 18px;
     margin: 3px 0;
     cursor: pointer;
 
@@ -254,6 +261,10 @@ table.semanticForms.light {
     line-height: 1.5;
     width: 100%;
     min-height: 38px;
+
+    &[data-auto-grow] {
+      field-sizing: content;
+    }
   }
 
   input[type="search"] {
@@ -393,6 +404,18 @@ table.semanticForms.light {
       }
     }
 
+    &.warn {
+      border: var(--semanticFormsWarnBorder) !important;
+
+      ~ label:nth-of-type(2) {
+        color: var(--semanticFormsWarn) !important;
+      }
+
+      ~ [data-invalid-text] {
+        font-size: small;
+        display: flex;
+      }
+    }
   }
   // #endregion
 
@@ -439,11 +462,11 @@ table.semanticForms.light {
     }
   }
 
-  // #region summary
+  // #region details
   details {
     box-sizing: border-box; // ensure sizings match across browsers
     position: relative;
-    background-color: var(--semanticFormsNestedFieldsetBgColor); // TODO: check if this is right
+    background-color: var(--semanticFormsNestedFieldsetBgColor);
     border: var(--semanticFormsNestedFieldsetBorder);
     border-radius: var(--semanticFormsBorderRadius);
     display: flex;
@@ -452,14 +475,26 @@ table.semanticForms.light {
     padding: 20px 10px 10px 10px;
     margin-bottom: 15px;
     min-height: calc(var(--semanticFormsFontSize) + 20px);
-
+    
     &::details-content {
       visibility: hidden;
       opacity: 0;
       transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
     }
+    
+    @supports (interpolate-size: allow-keywords) { // https://caniuse.com/wf-interpolate-size
+      transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms, height 250ms;
+
+      &::details-content {
+        height: 0;
+        overflow: hidden;
+        transition: height 250ms, content-visibility 250ms;
+        transition-behavior: allow-discrete;
+      }
+    }
 
     summary {
+      cursor: pointer;
       margin: 0;
       line-height: 1;
       position: absolute;
@@ -486,20 +521,24 @@ table.semanticForms.light {
         transition: 250ms transform ease;
       }
     }
-  }
 
-  details[open] {
-    padding-top: 35px; // TODO: remove this when animated detail label is reintroduced
+    &[open] {
+      &::details-content {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
+      }
 
-    &::details-content {
-      visibility: visible;
-      opacity: 1;
-      transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
-    }
+      @supports (interpolate-size: allow-keywords) {
+        &::details-content {
+          height: auto;
+        }
+      }
 
-    summary {
-      &::after {
-        transform: rotate(90deg);
+      summary {
+        &::before {
+          transform: rotate(90deg);
+        }
       }
     }
   }
@@ -507,10 +546,6 @@ table.semanticForms.light {
   details[open], summary {
     margin-bottom: 10px;
   }
-
-  summary {
-    cursor: pointer;
-  }
   // #endregion
 
   // update for scrollbars
@@ -565,6 +600,43 @@ table.semanticForms.light {
         &:not(.singleCheckbox, .singleRadio) {
           display: flex;
           flex-direction: column;
+
+          // unless there is a button present, which will be placed beside the input
+          &:has(button:not(.clear, .show), input[type="submit"]:not(.clear, .show)) {
+            display: grid;
+            grid-template-columns: 2fr 1fr;
+
+            button.clear, button.show {
+              right: 36%; // adjust clear/show button to grid
+            }
+
+            input:not([type="submit"]), select, textarea {
+              grid-row: 1 / 2;
+              grid-column: 1 / 2;
+            }
+
+            button:not(.clear, .show),
+            input[type="submit"]:not(.clear, .show), 
+            input[type="button"]:not(.clear, .show) {
+              grid-row: 1 / 2;
+              grid-column: 2 / 3;
+              width: 100%;
+              max-width: 100%;
+              padding: 10px; // reduce default padding to allow more button text to show
+              margin-top: var(--semanticFormsInputTopMargin);
+              height: var(--semanticFormsInputHeight);
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              display: inline-block;
+            }
+
+            label:nth-of-type(2),
+            label:not(.floatLabelFormAnimatedLabel) {
+              grid-row: 2 / 3;
+              grid-column: 1 / -1;
+            }
+          }
         }
 
         &.singleCheckbox,
@@ -581,7 +653,7 @@ table.semanticForms.light {
           // single checkbox subtext
           label:nth-of-type(2) {
             grid-column: 1 / -1;
-            padding-left: 20px;
+            padding: 0 10px;
             font-size: small;
             color: var(--semanticFormsTextColor);
           }
@@ -607,6 +679,29 @@ table.semanticForms.light {
           gap: 5px;
         }
       }
+
+      // focus-key styles
+      &:has(span.focus-key) {
+        // make room for focus key span
+        label:first-of-type {
+          width: calc(100% - 95px) !important;
+        }
+
+        span.focus-key {
+          display: block;
+          
+          kbd {
+            font-family: sans-serif;
+          }
+        }
+
+        &:has(input:focus, select:focus, textarea:focus),
+        &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) {
+          span.focus-key {
+            display: none;
+          }
+        }
+      }
     }
   }
 
@@ -656,6 +751,8 @@ table.semanticForms.light {
     }
 
     span.help {
+      display: grid;
+      place-items: center;
       cursor: help;
       pointer-events: auto;
 
@@ -682,16 +779,8 @@ table.semanticForms.light {
           &:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
           &:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type {
             color: var(--semanticFormsTextColor) !important;
-            // TODO: finish this work on making the help icon responsive
-            // width: 100%;
-            // width: calc(100% + 20px);
             transform: translateY(-150%) scale(0.7);
-
-            // span.required,
-            // span.help {
-            //   position: static;
-            //   right: auto;
-            // }
+            width: 100%;
           }
         }
 
@@ -732,7 +821,7 @@ table.semanticForms.light {
         // subtext
         label:nth-of-type(2) {
           margin-top: -5px;
-          padding-left: 20px;
+          padding: 0 10px;
           font-size: small;
           color: var(--semanticFormsTextColor);
         }
@@ -795,30 +884,15 @@ table.semanticForms.light {
           align-items: center;
           gap: 5px;
 
-          // TODO: same as below
-          // &:has(span.help) {
-          //   width: 80%;
-          //   padding-right: 20px;
-          // }
-
-          // &:has(span.required) {
-          //   width: 80%;
-          //   padding-right: 10px;
-          // }
-
           span.required {
-            // TODO: this places the required asterisk too far to the right when the float label is shrunk
-            // position: absolute;
-            // right: 0;
             cursor: help;
             pointer-events: auto;
             color: red;
           }
 
           span.help {
-            // TODO: this places the help icon too far to the right when the float label is shrunk
-            // position: absolute;
-            // right: 0;
+            display: grid;
+            place-items: center;
             cursor: help;
             pointer-events: auto;
 
@@ -826,16 +900,23 @@ table.semanticForms.light {
               width: 80%;
             }
           }
+        }
 
-          // // TODO: cover the case where an input is required AND has help text
-          // &:has(span.required, span.help) {
-          //   width: 80%;
-          //   padding-right: 30px;
+        .focus-key {
+          color: var(--semanticFormsPlaceholderColor);
+          position: absolute;
+          top: calc(var(--semanticFormsInputTopMargin) + 11px);
+          right: 20px;
 
-          //   span.required {
-          //     right: 18px;
-          //   }
-          // }
+          kbd {
+            line-height: 1;
+          }
+        }
+
+        &:has(input[type="number"]) {
+          .focus-key {
+            right: 45px;
+          }
         }
       }
 
@@ -844,6 +925,9 @@ table.semanticForms.light {
         position: relative;
 
         label {
+          display: flex;
+          align-items: center;
+          gap: 5px;
           z-index: 2; // ensure the hoverable icon is interactable
           user-select: auto;
           color: var(--semanticFormsTextColor);
@@ -857,16 +941,11 @@ table.semanticForms.light {
           overflow: hidden;
           text-overflow: ellipsis;
           min-width: 0;
-          width: calc(100% + 20px);
-
-          // TODO: remove this? // &:has(span.help) {
-            // width: 100%;
-            // padding-right: 20px;
-          // }
+          width: 100%;
 
           span.help {
-            // TODO: remove this? // position: absolute;
-            // right: 0;
+            display: grid;
+            place-items: center;
             cursor: help;
             pointer-events: auto;
           }
@@ -881,14 +960,28 @@ table.semanticForms.light {
           }
 
           label > span {
-            // TODO: remove this? // position: absolute;
-            // right: 0;
             margin-left: 5px;
             cursor: help;
             pointer-events: auto;
             color: red;
           }
+        }
+      }
+
+      // data-max-content CSS
+      &:has([data-max-content]) {
+        max-width: max-content;
+        min-width: 150px;
 
+        dd {
+          width: max-content;
+
+          input, select {
+            // this is not currently supported in FireFox or Safari, and is progressively enhanced with JS
+            field-sizing: content; 
+            min-width: 150px;
+            max-width: max-content;
+          }
         }
       }
     }
@@ -902,84 +995,92 @@ table.semanticForms.light {
     // #endregion
   }
 
-  &.semanticFormsActive {
-    // #region colspan classes
-    div {
-      &[class^='colspan-'] {
-        max-width: 100%;
-      }
-
-      &.colspan-full {
-        grid-column: 1 / -1;
-      }
-
-      &.colspan-5 {
-        grid-column: span 5;
-      }
-
-      &.colspan-4 {
-        grid-column: span 4;
-      }
+  // #region colspan classes
+  div {
+    &[class^='colspan-'] {
+      max-width: 100%;
+    }
 
-      &.colspan-3 {
-        grid-column: span 3;
-      }
+    &.colspan-full {
+      grid-column: 1 / -1;
+    }
 
-      &.colspan-2 {
-        grid-column: span 2;
-      }
+    &.colspan-5 {
+      grid-column: span 5;
+    }
 
-      &.colspan-1 {
-        grid-column: span 1;
-      }
+    &.colspan-4 {
+      grid-column: span 4;
     }
 
-    fieldset[class^='colspan-'] dl,
-    dl[class^='colspan-'] {
-      div {
-        max-width: 100%;
-      }
+    &.colspan-3 {
+      grid-column: span 3;
     }
 
-    fieldset.colspan-full dl,
-    dl.colspan-full {
-      grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
+    &.colspan-2 {
+      grid-column: span 2;
     }
 
-    fieldset.colspan-5 dl,
-    dl.colspan-5 {
-      grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
+    &.colspan-1 {
+      grid-column: span 1;
     }
+  }
 
-    fieldset.colspan-4 dl,
-    dl.colspan-4 {
-      grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  fieldset[class^='colspan-'] dl,
+  dl[class^='colspan-'] {
+    div {
+      max-width: 100%;
     }
+  }
 
+  fieldset.colspan-full dl,
+  dl.colspan-full {
+    grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  }
 
-    fieldset.colspan-3 dl,
-    dl.colspan-3 {
-      grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr));
-    }
+  fieldset.colspan-5 dl,
+  dl.colspan-5 {
+    grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  }
 
-    fieldset.colspan-2 dl,
-    dl.colspan-2 {
-      grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr));
-    }
+  fieldset.colspan-4 dl,
+  dl.colspan-4 {
+    grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  }
 
-    fieldset.colspan-1 dl,
-    dl.colspan-1 {
-      grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr));
-    }
-    // #endregion
 
-    // #region container queries
-    // The container is the <fieldset> element
-    @container semanticForm (width > 2250px) {
-      &.lowFlow fieldset dl,
-      &.lowFlow dl {
-        grid-template-columns: repeat(6, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  fieldset.colspan-3 dl,
+  dl.colspan-3 {
+    grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  }
+
+  fieldset.colspan-2 dl,
+  dl.colspan-2 {
+    grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  }
+
+  fieldset.colspan-1 dl,
+  dl.colspan-1 {
+    grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  }
+  // #endregion
+
+  // #region container queries
+  // The container is the <fieldset> element
+  @container semanticForm (width > 2250px) {
+    fieldset dl,
+    dl {
+      grid-template-columns: repeat(6, minmax(var(--semanticFormsInputMinWidth), 1fr)) !important;
+
+      div {
+        max-width: 100% !important;
+      }
+    }
 
+    &.lowFlow,
+    &:not(.semanticFormsActive) {
+      & fieldset dl,
+      & dl {
         & dt:nth-of-type(6n + 1),
         & dd:nth-of-type(6n + 1) {
           grid-column: 1;
@@ -1011,12 +1112,23 @@ table.semanticForms.light {
         }
       }
     }
+  }
 
-    @container semanticForm (width < 2250px) {
-      &.lowFlow fieldset dl,
-      &.lowFlow dl {
-        grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  // max 5 columns
+  @container semanticForm (width < 2250px) {
+    fieldset dl,
+    dl {
+      grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr)) !important;
 
+      div {
+        max-width: 100% !important;
+      }
+    }
+    
+    &.lowFlow,
+    &:not(.semanticFormsActive) {
+      & fieldset dl,
+      & dl {
         & dt:nth-of-type(5n + 1),
         & dd:nth-of-type(5n + 1) {
           grid-column: 1;
@@ -1043,23 +1155,26 @@ table.semanticForms.light {
         }
       }
     }
+  }
 
-    @container semanticForm (width < 1300px) {
-      fieldset.colspan-5 dl,
-      dl.colspan-5 {
-        grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr)) !important;
-      }
-
-      div.colspan-5 {
-        grid-column: span 4 !important;
-      }
+  @container semanticForm (width < 1400px) {
+    fieldset dl,
+    dl,
+    fieldset.colspan-5 dl,
+    dl.colspan-5 {
+      grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr)) !important;
+    }
 
-      &.lowFlow fieldset dl,
-      &.lowFlow dl,
-      &.lowFlow fieldset.colspan-5 dl,
-      &.lowFlow dl.colspan-5 {
-        grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr));
+    div.colspan-5 {
+      grid-column: span 4 !important;
+    }
 
+    &.lowFlow,
+    &:not(.semanticFormsActive) {
+      & fieldset dl,
+      & fieldset.colspan-5 dl,
+      & dl,
+      & dl.colspan-5 {
         & dt:nth-of-type(4n + 1),
         & dd:nth-of-type(4n + 1) {
           grid-column: 1;
@@ -1081,27 +1196,32 @@ table.semanticForms.light {
         }
       }
     }
+  }
 
-    @container semanticForm (width < 1050px) {
-      fieldset.colspan-4 dl,
-      fieldset.colspan-5 dl,
-      dl.colspan-4,
-      dl.colspan-5 {
-        grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr)) !important;
-      }
+  // max 3 columns
+  @container semanticForm (width < 1120px) {
+    fieldset dl, 
+    fieldset.colspan-4 dl,
+    fieldset.colspan-5 dl,
+    dl,
+    dl.colspan-4,
+    dl.colspan-5 {
+      grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr)) !important;
+    }
 
-      div.colspan-4, div.colspan-5 {
-        grid-column: span 3 !important;
-      }
 
-      &.lowFlow fieldset dl,
-      &.lowFlow dl,
-      &.lowFlow fieldset.colspan-4 dl,
-      &.lowFlow dl.colspan-4,
-      &.lowFlow fieldset.colspan-5 dl,
-      &.lowFlow dl.colspan-5 {
-        grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr));
+    div.colspan-4, div.colspan-5 {
+      grid-column: span 3 !important;
+    }
 
+    &.lowFlow,
+    &:not(.semanticFormsActive) {
+      & fieldset dl,
+      & fieldset.colspan-4 dl,
+      & fieldset.colspan-5 dl,
+      & dl,
+      & dl.colspan-4,
+      & dl.colspan-5 {
         & dt:nth-of-type(3n + 1),
         & dd:nth-of-type(3n + 1) {
           grid-column: 1;
@@ -1118,33 +1238,41 @@ table.semanticForms.light {
         }
       }
     }
+  }
 
-    @container semanticForm (width < 800px) {
-      fieldset.colspan-3 dl,
-      fieldset.colspan-4 dl,
-      fieldset.colspan-5 dl,
-      dl.colspan-3,
-      dl.colspan-4,
-      dl.colspan-5 {
-        grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr)) !important;
-      }
+  // max 2 columns
+  @container semanticForm (width < 850px) {
+    fieldset dl,
+    fieldset.colspan-3 dl,
+    fieldset.colspan-4 dl,
+    fieldset.colspan-5 dl,
+    dl,
+    dl.colspan-3,
+    dl.colspan-4,
+    dl.colspan-5 {
+      grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr)) !important;
+    }
 
-      div.colspan-3,
-      div.colspan-4,
-      div.colspan-5 {
-        grid-column: span 2 !important;
-      }
+    div {
+      max-width: 100% !important;
+    }
 
-      &.lowFlow fieldset dl,
-      &.lowFlow dl,
-      &.lowFlow fieldset.colspan-3 dl,
-      &.lowFlow dl.colspan-3,
-      &.lowFlow fieldset.colspan-4 dl,
-      &.lowFlow dl.colspan-4,
-      &.lowFlow fieldset.colspan-5 dl,
-      &.lowFlow dl.colspan-5 {
-        grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr));
+    div.colspan-3,
+    div.colspan-4,
+    div.colspan-5 {
+      grid-column: span 2 !important;
+    }
 
+    &.lowFlow,
+    &:not(.semanticFormsActive) {
+      & fieldset dl,
+      & fieldset.colspan-3 dl,
+      & fieldset.colspan-4 dl,
+      & fieldset.colspan-5 dl,
+      & dl,
+      & dl.colspan-3,
+      & dl.colspan-4,
+      & dl.colspan-5 {
         & dt:nth-of-type(2n + 1),
         & dd:nth-of-type(2n + 1) {
           grid-column: 1;
@@ -1156,112 +1284,220 @@ table.semanticForms.light {
         }
       }
     }
+  }
 
-    @container semanticForm (width < 550px) {
-      fieldset.colspan-2 dl,
-      fieldset.colspan-3 dl,
-      fieldset.colspan-4 dl,
-      fieldset.colspan-5 dl,
-      dl.colspan-2,
-      dl.colspan-3,
-      dl.colspan-4,
-      dl.colspan-5,
-      dl {
-        grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr)) !important;
-      }
+  // max 1 column
+  @container semanticForm (width < 615px) {
+    fieldset dl,
+    fieldset.colspan-2 dl,
+    fieldset.colspan-3 dl,
+    fieldset.colspan-4 dl,
+    fieldset.colspan-5 dl,
+    dl,
+    dl.colspan-2,
+    dl.colspan-3,
+    dl.colspan-4,
+    dl.colspan-5,
+    dl {
+      grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr)) !important;
+    }
 
-      div.colspan-2, div.colspan-3, div.colspan-4, div.colspan-5 {
-        grid-column: span 1 !important;
-      }
+    div {
+      max-width: 100% !important;
+    }
 
-      &.lowFlow fieldset dl,
-      &.lowFlow dl,
-      &.lowFlow fieldset.colspan-2 dl,
-      &.lowFlow dl.colspan-2,
-      &.lowFlow fieldset.colspan-3 dl,
-      &.lowFlow dl.colspan-3,
-      &.lowFlow fieldset.colspan-4 dl,
-      &.lowFlow dl.colspan-4,
-      &.lowFlow fieldset.colspan-5 dl,
-      &.lowFlow dl.colspan-5 {
-        grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr));
+    div.colspan-2, div.colspan-3, div.colspan-4, div.colspan-5 {
+      grid-column: span 1 !important;
+    }
 
+    &.lowFlow,
+    &:not(.semanticFormsActive) {
+      & fieldset dl,
+      & fieldset.colspan-2 dl,
+      & fieldset.colspan-3 dl,
+      & fieldset.colspan-4 dl,
+      & fieldset.colspan-5 dl,
+      & dl,
+      & dl.colspan-2,
+      & dl.colspan-3,
+      & dl.colspan-4,
+      & dl.colspan-5 {
         & dt:nth-of-type(n + 1),
         & dd:nth-of-type(n + 1) {
           grid-column: 1;
         }
       }
     }
-    // #endregion
+  }
+  // #endregion
 
-    // #region low flow form
-    &.lowFlow {
-        gap: 5px;
+  // #region low flow form
+  &.lowFlow,
+  &:not(.semanticFormsActive) {
+    gap: 10px;
+
+    dl {
+      grid-auto-flow: dense;
+      gap: 0 10px;
+      margin-bottom: 0px;
+    }
+
+    // 1, 4, 7, ...
+    & > dt:nth-of-type(2n + 1),
+    & > dd:nth-of-type(2n + 1) {
+      grid-column: 1;
+    }
+
+    // 2, 5, 8, ...
+    & > dt:nth-of-type(2n + 2),
+    & > dd:nth-of-type(2n + 2) {
+      grid-column: 2;
+    }
+
+    dt {
+      min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
 
-        dl {
-          grid-auto-flow: dense;
+      label {
+        position: absolute;
+        display: block;
+        height: 11px;
+        transform: scale(0.7);
+        transform-origin: left center;
+        padding-left: 29px;
+        margin-top: -1px;
+      }
+
+      // add required asterisk
+      &:has(+ dd input:required) {
+        label::after {
+          content: ' *';
+          color: red;
         }
+      }
+    }
 
-        // 1, 4, 7, ...
-        & > dt:nth-of-type(2n + 1),
-        & > dd:nth-of-type(2n + 1) {
-          grid-column: 1;
+    // checkbox/radio groups
+    dt {
+      &:has(+ dd.checkboxes),
+      &:has(+ dd.radios) {
+        label {
+          padding-left: 15px;
         }
+      }
+    }
 
-        // 2, 5, 8, ...
-        & > dt:nth-of-type(2n + 2),
-        & > dd:nth-of-type(2n + 2) {
-          grid-column: 2;
+    // single checkbox label
+    dt {
+      &:not(:has(+ dd ul)){
+        &:has(+ dd input[type=checkbox]) {
+          label {
+            transform: scale(1);
+            margin-top: 4px;
+            margin-left: 8px;
+          }
         }
 
-        dt {
-           min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
+        &:has(+ dd input[type=radio]) {
+          label {
+            transform: scale(1);
+            margin-top: 2px;
+            margin-left: 8px;
+          }
+        }
+      }
+    } 
 
-          // add required asterisk
-          &:has(+ dd input:required) {
-            label::after {
-              content: ' *';
-              color: red;
-            }
+
+    dd {
+      // margin-bottom: 10px;
+      margin-top: var(--semanticFormsInputTopMargin);
+      margin-bottom: 10px;
+      min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
+
+      // checkbox/radio groups
+      &.checkboxes,
+      &.radios {
+        margin-top: 0;
+
+        ul {
+          input[type=radio] {
+            margin-top: 3px;
+          }
+
+          label {
+            padding-top: 7px;
+            padding-left: 0;
+            font-size: var(--semanticFormsFontSize);
           }
         }
 
+        // additional text
+        ul + label {
+          margin-top: 0;
+          font-size: small;
+        }
+      }
 
-        dd {
-          margin-bottom: 10px;
-          min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
+      // single checkbox/radio
+      &:not(:has(ul)){
+        &:has(input[type=checkbox], input[type=radio]) {
+          margin-top: 0;
+          padding-left: 10px;
 
-          // nudge single checkboxes to match checkbox groups
-          &:not(.checkboxes) {
-            input[type=checkbox] {
-              margin-left: 10px;
-            }
+          input[type=checkbox] {
+            margin-left: 1px;
+            margin-top: 2px;
           }
 
-          // remove "x" padding
-          input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-          select,
-          textarea {
-            padding-right: 6px;
+          input[type=radio] {
+            margin-left: 1px;
+            margin-top: 1px;
           }
 
-          // subtext
+          // additional info text
           label {
-            margin-top: -5px;
             font-size: small;
-            color: var(--semanticFormsPlaceholderColor);
+            margin-top: -1px;
+            padding-left: 11px;
+          }
+
+          input[type=radio] + label {
+            margin-top: -4px;
           }
         }
       }
 
-      .checkboxes ul,
-      .radios ul {
-        margin-top: var(--semanticFormsInputTopMargin);
+      // remove "x" padding
+      input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
+      select,
+      textarea {
+        padding-right: 6px;
+      }
+
+      // subtext
+      label {
+        padding-left: 10px;
+        margin-top: -5px;
+        font-size: small;
+        color: var(--semanticFormsPlaceholderColor);
+      }
+
+      // inline buttons
+      button:not(.clear, .show),
+      input[type="submit"]:not(.clear, .show), 
+      input[type="button"]:not(.clear, .show)  {
+        margin-top: 0 !important;
       }
     }
-    // #endregion
   }
 
+  .checkboxes ul,
+  .radios ul {
+    margin-top: var(--semanticFormsInputTopMargin);
+  }
+  // #endregion
+}
+
 // #region tables
 
 .semanticForms table,