semantic-forms 5.2.0 → 5.2.2

package/semanticForms.scss

@@ -95,8 +95,6 @@ table.semanticForms.light {
   font-family: var(--semanticFormsFontFamily);
   font-size: var(--semanticFormsFontSize);
   width: 100%;
-  container-type: inline-size;
-  container-name: semanticForm;
 
   // https://caniuse.com/wf-interpolate-size
   @supports (interpolate-size: allow-keywords) {
@@ -140,6 +138,11 @@ table.semanticForms.light {
   }
 
   // #region input styling
+  input:not([type='submit'], [type='reset'], [type='image'], [type=checkbox], [type=radio]),
+  select {
+    height: var(--semanticFormsInputHeight);
+  }
+
   input:not([type='submit'], [type='reset'], [type='image'], [type=checkbox], [type=radio]),
   select,
   textarea {
@@ -151,23 +154,71 @@ table.semanticForms.light {
     touch-action: manipulation;
     outline: none;
 
-    &:not([type="range"]):placeholder-shown {
-      padding: 6px 20px;
-    }
-
     &:not([type="range"]) {
       padding: 6px 30px 6px 20px;
     }
 
+    // custom focus highlight
+    input:not([type='submit'], [type='reset'], [type='image']),
+    select,
+    textarea {
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 1px var(--semanticFormsBorderColor);
+      }
+    }
+
+    // input type styling
     &[type="password"], &[type="text"]:has(~ button.show) {
       padding: 6px 55px 6px 20px;
     }
 
+    &[type="search"] {
+      padding: 6px 20px 6px 32px;
+      background: var(--semanticFormsSearchIcon) no-repeat 10px;
+      background-color: var(--semanticFormsFormBgColor);
+      background-size: 18px;
+
+      &:focus,
+      &:not(:placeholder-shown) {
+        & + label.floatLabelFormAnimatedLabel {
+          left: 20px;
+        }
+      }
+
+      // hide native cancel button
+      &::-webkit-search-cancel-button {
+        display: none;
+      }
+    }
+
+    &[type="checkbox"],
+    &[type="radio"] {
+      width: 18px;
+      height: 18px;
+      margin: 3px 0;
+      cursor: pointer;
+
+      & ~ label:first-of-type {
+        color: var(--semanticFormsTextColor);
+      }
+    }
+
     &[type="range"],
     &[type="color"] {
       cursor: pointer;
     }
 
+    &[type="color"] {
+      height: var(--semanticFormsInputHeight);
+      padding: 4px 30px 4px 10px;
+    }
+
+    &[type="file"] {
+      cursor: pointer;
+      font-size: var(--semanticFormsInputFontSize);
+    }
+
     &[disabled] {
       cursor: not-allowed;
       opacity: 0.5;
@@ -182,50 +233,10 @@ table.semanticForms.light {
     }
   }
 
-  // focused styles
-  input:not([type='submit'], [type='reset'], [type='image']),
-  select,
-  textarea {
-    // custom focus highlight
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 1px var(--semanticFormsBorderColor);
-    }
-  }
-
-  input:not([type='submit'], [type='reset'], [type='image'], [type=checkbox], [type=radio]),
-  select {
-    height: var(--semanticFormsInputHeight);
-  }
-
-  // specific styling for color input
-  input[type=color] {
-    height: var(--semanticFormsInputHeight);
-    padding: 4px !important;
-    padding-right: 30px !important;
-  }
-
-  input[type=checkbox],
-  input[type=radio] {
-    // 30% larger based on parent font size
-    width: 18px;
-    height: 18px;
-    margin: 3px 0;
-    cursor: pointer;
-
-    & ~ label:first-of-type {
-      color: var(--semanticFormsTextColor) !important;
-    }
-  }
-
-  input[type=file] {
-    cursor: pointer;
-    font-size: var(--semanticFormsInputFontSize);
-  }
-
   select {
     cursor: pointer;
 
+    // single selects
     &:not([multiple]) {
       // custom dropdown graphic on select element
       background-image: var(--semanticFormsSelectIcon);
@@ -237,10 +248,11 @@ table.semanticForms.light {
       appearance: none;
     }
 
+    // multi-selects
     &[multiple] {
       min-height: 38px;
       height: 100px;
-      padding: 0 !important;
+      padding: 0;
 
       option {
         padding: 6px 20px;
@@ -266,29 +278,6 @@ table.semanticForms.light {
       field-sizing: content;
     }
   }
-
-  input[type="search"] {
-    background: var(--semanticFormsSearchIcon) no-repeat 10px;
-    background-color: var(--semanticFormsFormBgColor);
-    background-size: 18px;
-    padding-left: 32px !important; // shift values to the right
-
-    & + label.floatLabelFormAnimatedLabel {
-      left: 32px !important; // override float label
-    }
-
-    &:focus,
-    &:not(:placeholder-shown) {
-      & + label.floatLabelFormAnimatedLabel {
-        left: 20px !important;
-      }
-    }
-
-    // hide native cancel button
-    &::-webkit-search-cancel-button {
-      display: none;
-    }
-  }
   // #endregion
 
   // #region buttons
@@ -333,7 +322,7 @@ table.semanticForms.light {
   // button styling
   input[type='submit'],
   input[type='reset'],
-  button:not(.clear):not(.show),
+  button:not(.clear, .show),
   .button-link {
     appearance: none;
     -moz-appearance: none;
@@ -376,7 +365,7 @@ table.semanticForms.light {
 
     &:visited,
     &:link {
-      color: var(--semanticFormsTextColor) !important;
+      color: var(--semanticFormsTextColor);
     }
   }
   // #endregion
@@ -392,10 +381,10 @@ table.semanticForms.light {
   textarea {
     &.invalid,
     &:user-invalid {
-      border: var(--semanticFormsInvalidBorder) !important;
+      border: var(--semanticFormsInvalidBorder);
 
       ~ label:nth-of-type(2) {
-        color: var(--semanticFormsInvalid) !important;
+        color: var(--semanticFormsInvalid);
       }
 
       ~ [data-invalid-text] {
@@ -405,10 +394,10 @@ table.semanticForms.light {
     }
 
     &.warn {
-      border: var(--semanticFormsWarnBorder) !important;
+      border: var(--semanticFormsWarnBorder);
 
       ~ label:nth-of-type(2) {
-        color: var(--semanticFormsWarn) !important;
+        color: var(--semanticFormsWarn);
       }
 
       ~ [data-invalid-text] {
@@ -438,6 +427,7 @@ table.semanticForms.light {
     transition-property: background-color, color;
   }
 
+  // #region fieldset
   fieldset {
     border-radius: var(--semanticFormsBorderRadius);
     background: var(--semanticFormsFormSubBgColor);
@@ -461,6 +451,7 @@ table.semanticForms.light {
       }
     }
   }
+  // #endregion
 
   // #region details
   details {
@@ -540,6 +531,10 @@ table.semanticForms.light {
           transform: rotate(90deg);
         }
       }
+
+      & > dl:first-of-type {
+        margin-top: 15px;
+      }
     }
   }
 
@@ -569,7 +564,6 @@ table.semanticForms.light {
   }
 
   // #region container layout
-
   dl:has(dt > label, dd > input, dd > select, dd > textarea) {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
@@ -578,105 +572,94 @@ table.semanticForms.light {
 
     dd {
       position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      max-width: 100%;
 
-      &.checkboxes, &.radios {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
+      // checkbox/radio
+      &.singleCheckbox, 
+      &.singleRadio {
+        display: grid;
+        grid-template-columns: 15px 1fr;
+        align-items: center;
+        padding-left: 11px;
+
+        // anything that is not the radio/checkbox and its label
+        & > :not(input[type='checkbox'], input[type='radio'], label) {
+          grid-column: 1 / -1;
+        }
 
-        // checkbox subtext
-        & > label {
-          padding-left: 20px;
+        // additional label takes up entire width
+        label:nth-of-type(2) {
+          grid-column: 1 / -1;
+          padding: 0 10px;
           font-size: small;
           color: var(--semanticFormsTextColor);
         }
       }
 
-      &:not(.checkboxes, .radios) {
-        gap: 10px;
-        max-width: 100%;
+      &.singleRadio > input {
+        margin: 0;
+      }
 
-        // places all items within the <dd> vertically
-        &:not(.singleCheckbox, .singleRadio) {
+      // checkbox/radio groups
+      &.checkboxes, &.radios {
+        ul {
           display: flex;
           flex-direction: column;
+          margin-top: var(--semanticFormsInputTopMargin);
+          padding-left: 10px;
+          gap: 5px;
 
-          // 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;
-            }
+          li {
+            display: flex;
+            align-items: center;
+            gap: 5px;
           }
         }
 
-        &.singleCheckbox,
-        &.singleRadio {
-          display: grid;
-          grid-template-columns: 15px 1fr;
-          align-items: center;
-          padding-left: 11px;
+        // checkbox subtext
+        & > label {
+          padding-left: 20px;
+          font-size: small;
+          color: var(--semanticFormsTextColor);
+        }
+      }
 
-          & > :not(input[type='checkbox'], input[type='radio'], label) {
-            grid-column: 1 / -1;
-          }
+      // place buttons next to input
+      &:has(button:not(.clear, .show), input[type="submit"]:not(.clear, .show)) {
+        display: grid;
+        grid-template-columns: 2fr 1fr;
 
-          // single checkbox subtext
-          label:nth-of-type(2) {
-            grid-column: 1 / -1;
-            padding: 0 10px;
-            font-size: small;
-            color: var(--semanticFormsTextColor);
-          }
+        button.clear, button.show {
+          right: 36%; // adjust clear/show button to grid
         }
 
-        &.singleRadio {
-          input {
-            margin: 0;
-          }
+        input:not([type="submit"]), select, textarea {
+          grid-row: 1 / 2;
+          grid-column: 1 / 2;
         }
-      }
 
-      &.checkboxes ul, &.radios ul {
-        display: flex;
-        flex-direction: column;
-        margin-top: var(--semanticFormsInputTopMargin);
-        padding-left: 10px;
-        gap: 5px;
+        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
+          height: var(--semanticFormsInputHeight);
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          display: inline-block;
+        }
 
-        li {
-          display: flex;
-          align-items: center;
-          gap: 5px;
+        label:nth-of-type(2),
+        label:not(.floatLabelFormAnimatedLabel) {
+          grid-row: 2 / 3;
+          grid-column: 1 / -1;
         }
       }
 
@@ -684,7 +667,7 @@ table.semanticForms.light {
       &:has(span.focus-key) {
         // make room for focus key span
         label:first-of-type {
-          width: calc(100% - 95px) !important;
+          width: calc(100% - 95px);
         }
 
         span.focus-key {
@@ -778,7 +761,7 @@ table.semanticForms.light {
         textarea {
           &: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;
+            color: var(--semanticFormsTextColor);
             transform: translateY(-150%) scale(0.7);
             width: 100%;
           }
@@ -796,18 +779,26 @@ table.semanticForms.light {
 
         select ~ label:first-of-type {
           // force label to be correct color
-          color: var(--semanticFormsTextColor) !important;
+          color: var(--semanticFormsTextColor);
+        }
+
+        button:not(.clear, .show), 
+        input[type=submit]:not(.clear, .show) {
+          margin-top: var(--semanticFormsInputTopMargin);
         }
 
+        // input label
         label:first-of-type {
+          position: absolute;
+          top: calc(var(--semanticFormsInputTopMargin) + 10px);
+          left: 20px;
+          display: flex;
+          align-items: center;
+          gap: 5px;
           line-height: 1.2;
           font-size: var(--semanticFormsInputFontSize);
-          position: absolute;
           transform-origin: left center;
           pointer-events: none;
-          // when the label is positioned within the input it needs a buffer
-          top: calc(var(--semanticFormsInputTopMargin) + 10px);
-          left: 20px;
           transition: transform 250ms;
           cursor: text;
           flex: 1;
@@ -816,9 +807,29 @@ table.semanticForms.light {
           text-overflow: ellipsis;
           min-width: 0;
           width: calc(100% - 35px);
+          user-select: none;
+          color: var(--semanticFormsPlaceholderColor);
+          touch-action: manipulation;
+
+          span.required {
+            cursor: help;
+            pointer-events: auto;
+            color: red;
+          }
+
+          span.help {
+            display: grid;
+            place-items: center;
+            cursor: help;
+            pointer-events: auto;
+
+            svg {
+              width: 80%;
+            }
+          }
         }
 
-        // subtext
+        // subtext label
         label:nth-of-type(2) {
           margin-top: -5px;
           padding: 0 10px;
@@ -835,6 +846,7 @@ table.semanticForms.light {
         input,
         textarea {
           transition: opacity 250ms;
+
           // hide placeholder content until input is focused
           &::placeholder {
             opacity: 0;
@@ -876,33 +888,8 @@ table.semanticForms.light {
           }
         }
 
-        label:first-of-type {
-          user-select: none;
-          color: var(--semanticFormsPlaceholderColor);
-          touch-action: manipulation;
-          display: flex;
-          align-items: center;
-          gap: 5px;
-
-          span.required {
-            cursor: help;
-            pointer-events: auto;
-            color: red;
-          }
-
-          span.help {
-            display: grid;
-            place-items: center;
-            cursor: help;
-            pointer-events: auto;
-
-            svg {
-              width: 80%;
-            }
-          }
-        }
-
-        .focus-key {
+        // keyboard shortcut indicator
+        span.focus-key {
           color: var(--semanticFormsPlaceholderColor);
           position: absolute;
           top: calc(var(--semanticFormsInputTopMargin) + 11px);
@@ -918,6 +905,12 @@ table.semanticForms.light {
             right: 45px;
           }
         }
+
+        &:has(input[type="search"]) {
+          label:first-of-type {
+            left: 32px;
+          }
+        }
       }
 
       // top level label for checkbox and radio groups
@@ -1048,7 +1041,6 @@ table.semanticForms.light {
     grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr));
   }
 
-
   fieldset.colspan-3 dl,
   dl.colspan-3 {
     grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr));
@@ -1063,270 +1055,94 @@ table.semanticForms.light {
   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;
-        }
-
-        & dt:nth-of-type(6n + 2),
-        & dd:nth-of-type(6n + 2) {
-          grid-column: 2;
-        }
-
-        & dt:nth-of-type(6n + 3),
-        & dd:nth-of-type(6n + 3) {
-          grid-column: 3;
-        }
-
-        & dt:nth-of-type(6n + 4),
-        & dd:nth-of-type(6n + 4) {
-          grid-column: 4;
-        }
-
-        & dt:nth-of-type(6n + 5),
-        & dd:nth-of-type(6n + 5) {
-          grid-column: 5;
-        }
 
-        & dt:nth-of-type(6n + 6),
-        & dd:nth-of-type(6n + 6) {
-          grid-column: 6;
-        }
-      }
+  fieldset.colspan-1 dl,
+  dl.colspan-1 {
+    dt:nth-of-type(n + 1),
+    dd:nth-of-type(n + 1) {
+      grid-column: 1;
     }
   }
 
-  // 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;
-      }
+  fieldset.colspan-2 dl,
+  dl.colspan-2 {
+    dt:nth-of-type(2n + 1),
+    dd:nth-of-type(2n + 1) {
+      grid-column: 1;
     }
-    
-    &.lowFlow,
-    &:not(.semanticFormsActive) {
-      & fieldset dl,
-      & dl {
-        & dt:nth-of-type(5n + 1),
-        & dd:nth-of-type(5n + 1) {
-          grid-column: 1;
-        }
 
-        & dt:nth-of-type(5n + 2),
-        & dd:nth-of-type(5n + 2) {
-          grid-column: 2;
-        }
-
-        & dt:nth-of-type(5n + 3),
-        & dd:nth-of-type(5n + 3) {
-          grid-column: 3;
-        }
-
-        & dt:nth-of-type(5n + 4),
-        & dd:nth-of-type(5n + 4) {
-          grid-column: 4;
-        }
-
-        & dt:nth-of-type(5n + 5),
-        & dd:nth-of-type(5n + 5) {
-          grid-column: 5;
-        }
-      }
+    dt:nth-of-type(2n + 2),
+    dd:nth-of-type(2n + 2) {
+      grid-column: 2;
     }
   }
 
-  @container semanticForm (width < 1400px) {
-    fieldset dl,
-    dl,
-    fieldset.colspan-5 dl,
-    dl.colspan-5 {
-      grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr)) !important;
+  fieldset.colspan-3 dl,
+  dl.colspan-3 {
+    dt:nth-of-type(3n + 1),
+    dd:nth-of-type(3n + 1) {
+      grid-column: 1;
     }
 
-    div.colspan-5 {
-      grid-column: span 4 !important;
+    dt:nth-of-type(3n + 2),
+    dd:nth-of-type(3n + 2) {
+      grid-column: 2;
     }
 
-    &.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;
-        }
-
-        & dt:nth-of-type(4n + 2),
-        & dd:nth-of-type(4n + 2) {
-          grid-column: 2;
-        }
-
-        & dt:nth-of-type(4n + 3),
-        & dd:nth-of-type(4n + 3) {
-          grid-column: 3;
-        }
-
-        & dt:nth-of-type(4n + 4),
-        & dd:nth-of-type(4n + 4) {
-          grid-column: 4;
-        }
-      }
+    dt:nth-of-type(3n + 3),
+    dd:nth-of-type(3n + 3) {
+      grid-column: 3;
     }
   }
 
-  // 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,
-    &: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;
-        }
-
-        & dt:nth-of-type(3n + 2),
-        & dd:nth-of-type(3n + 2) {
-          grid-column: 2;
-        }
-
-        & dt:nth-of-type(3n + 3),
-        & dd:nth-of-type(3n + 3) {
-          grid-column: 3;
-        }
-      }
+  fieldset.colspan-4 dl,
+  dl.colspan-4 {
+    dt:nth-of-type(4n + 1),
+    dd:nth-of-type(4n + 1) {
+      grid-column: 1;
     }
-  }
 
-  // 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;
+    dt:nth-of-type(4n + 2),
+    dd:nth-of-type(4n + 2) {
+      grid-column: 2;
     }
 
-    div {
-      max-width: 100% !important;
-    }
-
-    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;
-        }
+    dt:nth-of-type(4n + 3),
+    dd:nth-of-type(4n + 3) {
+      grid-column: 3;
+    }
 
-        & dt:nth-of-type(2n + 2),
-        & dd:nth-of-type(2n + 2) {
-          grid-column: 2;
-        }
-      }
+    dt:nth-of-type(4n + 4),
+    dd:nth-of-type(4n + 4) {
+      grid-column: 4;
     }
   }
 
-  // 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;
+  fieldset.colspan-5 dl,
+  dl.colspan-5 {
+    dt:nth-of-type(5n + 1),
+    dd:nth-of-type(5n + 1) {
+      grid-column: 1;
     }
 
-    div {
-      max-width: 100% !important;
+    dt:nth-of-type(5n + 2),
+    dd:nth-of-type(5n + 2) {
+      grid-column: 2;
     }
 
-    div.colspan-2, div.colspan-3, div.colspan-4, div.colspan-5 {
-      grid-column: span 1 !important;
+    dt:nth-of-type(5n + 3),
+    dd:nth-of-type(5n + 3) {
+      grid-column: 3;
     }
 
-    &.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;
-        }
-      }
+    dt:nth-of-type(5n + 4),
+    dd:nth-of-type(5n + 4) {
+      grid-column: 4;
+    }
+
+    dt:nth-of-type(5n + 5),
+    dd:nth-of-type(5n + 5) {
+      grid-column: 5;
     }
   }
   // #endregion
@@ -1355,7 +1171,7 @@ table.semanticForms.light {
     }
 
     dt {
-      min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
+      min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */
 
       label {
         position: absolute;
@@ -1363,7 +1179,7 @@ table.semanticForms.light {
         height: 11px;
         transform: scale(0.7);
         transform-origin: left center;
-        padding-left: 29px;
+        padding-left: 22px;
         margin-top: -1px;
       }
 
@@ -1392,7 +1208,7 @@ table.semanticForms.light {
         &:has(+ dd input[type=checkbox]) {
           label {
             transform: scale(1);
-            margin-top: 4px;
+            margin-top: 0;
             margin-left: 8px;
           }
         }
@@ -1400,7 +1216,7 @@ table.semanticForms.light {
         &:has(+ dd input[type=radio]) {
           label {
             transform: scale(1);
-            margin-top: 2px;
+            margin-top: 0;
             margin-left: 8px;
           }
         }
@@ -1412,7 +1228,7 @@ table.semanticForms.light {
       // margin-bottom: 10px;
       margin-top: var(--semanticFormsInputTopMargin);
       margin-bottom: 10px;
-      min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
+      min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */
 
       // checkbox/radio groups
       &.checkboxes,
@@ -1444,14 +1260,11 @@ table.semanticForms.light {
           margin-top: 0;
           padding-left: 10px;
 
-          input[type=checkbox] {
-            margin-left: 1px;
-            margin-top: 2px;
-          }
-
+          input[type=checkbox],
           input[type=radio] {
             margin-left: 1px;
             margin-top: 1px;
+            margin-right: auto;
           }
 
           // additional info text
@@ -1486,7 +1299,7 @@ table.semanticForms.light {
       button:not(.clear, .show),
       input[type="submit"]:not(.clear, .show), 
       input[type="button"]:not(.clear, .show)  {
-        margin-top: 0 !important;
+        margin-top: 0;
       }
     }
   }
@@ -1551,3 +1364,391 @@ table.semanticForms {
   }
 }
 // #endregion
+
+// #region container queries
+form.semanticForms,
+fieldset {
+  container: semanticForm / inline-size;
+
+  // max 7 columns
+  @container semanticForm (width >= 1810px) {
+    & fieldset dl,
+    & dl {
+      grid-template-columns: repeat(7, minmax(var(--semanticFormsInputMinWidth), 1fr));
+
+      &:has(:not(div)) {
+        & dt:nth-of-type(7n + 1), 
+        & dd:nth-of-type(7n + 1) {
+          grid-column: 1;
+        }
+
+        & dt:nth-of-type(7n + 2), 
+        & dd:nth-of-type(7n + 2) {
+          grid-column: 2;
+        }
+
+        & dt:nth-of-type(7n + 3), 
+        & dd:nth-of-type(7n + 3) {
+          grid-column: 3;
+        }
+
+        & dt:nth-of-type(7n + 4), 
+        & dd:nth-of-type(7n + 4) {
+          grid-column: 4;
+        }
+
+        & dt:nth-of-type(7n + 5), 
+        & dd:nth-of-type(7n + 5) {
+          grid-column: 5;
+        }
+
+        & dt:nth-of-type(7n + 6), 
+        & dd:nth-of-type(7n + 6) {
+          grid-column: 6;
+        }
+
+        & dt:nth-of-type(7n + 7), 
+        & dd:nth-of-type(7n + 7) {
+          grid-column: 7;
+        }
+
+        & dt:has(+ dd.colspan-5),
+        & dt:has(+ dd.colspan-full),
+        & dd.colspan-5,
+        & dd.colspan-full {
+          grid-column: span 5;
+        }
+
+        & dt:has(+ dd.colspan-4), 
+        & dd.colspan-4 {
+          grid-column: span 4;
+        }
+
+        & dt:has(+ dd.colspan-3), 
+        & dd.colspan-3 {
+          grid-column: span 3;
+        }
+
+        & dt:has(+ dd.colspan-2), 
+        & dd.colspan-2 {
+          grid-column: span 2;
+        }
+      }
+    }
+  }
+
+  // max 6 columns
+  @container semanticForm (width >= 1550px) and (width < 1810px) {
+    & fieldset dl,
+    & dl {
+      grid-template-columns: repeat(6, minmax(var(--semanticFormsInputMinWidth), 1fr));
+
+      &:has(:not(div)) {
+        & dt:nth-of-type(6n + 1), 
+        & dd:nth-of-type(6n + 1) {
+          grid-column: 1;
+        }
+  
+        & dt:nth-of-type(6n + 2), 
+        & dd:nth-of-type(6n + 2) {
+          grid-column: 2;
+        }
+  
+        & dt:nth-of-type(6n + 3), 
+        & dd:nth-of-type(6n + 3) {
+          grid-column: 3;
+        }
+  
+        & dt:nth-of-type(6n + 4), 
+        & dd:nth-of-type(6n + 4) {
+          grid-column: 4;
+        }
+  
+        & dt:nth-of-type(6n + 5), 
+        & dd:nth-of-type(6n + 5) {
+          grid-column: 5;
+        }
+  
+        & dt:nth-of-type(6n + 6), 
+        & dd:nth-of-type(6n + 6) {
+          grid-column: 6;
+        }
+
+        & dt:has(+ dd.colspan-5),
+        & dt:has(+ dd.colspan-full),
+        & dd.colspan-5,
+        & dd.colspan-full {
+          grid-column: span 5;
+        }
+
+        & dt:has(+ dd.colspan-4), 
+        & dd.colspan-4 {
+          grid-column: span 4;
+        }
+
+        & dt:has(+ dd.colspan-3), 
+        & dd.colspan-3 {
+          grid-column: span 3;
+        }
+
+        & dt:has(+ dd.colspan-2), 
+        & dd.colspan-2 {
+          grid-column: span 2;
+        }
+      }
+    }
+  }
+
+  // max 5 columns
+  @container semanticForm (width >= 1290px) and (width < 1550px) {
+    & fieldset dl,
+    & dl {
+      grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
+
+      &:has(:not(div)) {
+        & dt:nth-of-type(5n + 1), 
+        & dd:nth-of-type(5n + 1) {
+          grid-column: 1;
+        }
+  
+        & dt:nth-of-type(5n + 2), 
+        & dd:nth-of-type(5n + 2) {
+          grid-column: 2;
+        }
+  
+        & dt:nth-of-type(5n + 3), 
+        & dd:nth-of-type(5n + 3) {
+          grid-column: 3;
+        }
+  
+        & dt:nth-of-type(5n + 4), 
+        & dd:nth-of-type(5n + 4) {
+          grid-column: 4;
+        }
+  
+        & dt:nth-of-type(5n + 5), 
+        & dd:nth-of-type(5n + 5) {
+          grid-column: 5;
+        }
+
+        & dt:has(+ dd.colspan-5),
+        & dt:has(+ dd.colspan-full),
+        & dd.colspan-5,
+        & dd.colspan-full {
+          grid-column: span 5;
+        }
+
+        & dt:has(+ dd.colspan-4), 
+        & dd.colspan-4 {
+          grid-column: span 4;
+        }
+
+        & dt:has(+ dd.colspan-3), 
+        & dd.colspan-3 {
+          grid-column: span 3;
+        }
+
+        & dt:has(+ dd.colspan-2), 
+        & dd.colspan-2 {
+          grid-column: span 2;
+        }
+      }
+    }
+  }
+
+  // max 4 columns
+  @container semanticForm (width >= 1030px) and (width < 1290px) {
+    & fieldset dl,
+    & fieldset.colspan-5 dl,
+    & dl,
+    & dl.colspan-5 {
+      grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr));
+
+      div.colspan-5 {
+        grid-column: span 4;
+      }
+
+      &:has(:not(div)) { 
+        & dt:nth-of-type(4n + 1), 
+        & dd:nth-of-type(4n + 1) {
+          grid-column: 1;
+        }
+  
+        & dt:nth-of-type(4n + 2), 
+        & dd:nth-of-type(4n + 2) {
+          grid-column: 2;
+        }
+  
+        & dt:nth-of-type(4n + 3), 
+        & dd:nth-of-type(4n + 3) {
+          grid-column: 3;
+        }
+  
+        & dt:nth-of-type(4n + 4), 
+        & dd:nth-of-type(4n + 4) {
+          grid-column: 4;
+        }
+
+        & dt:has(+ dd.colspan-4), 
+        & dt:has(+ dd.colspan-5),
+        & dt:has(+ dd.colspan-full),
+        & dd.colspan-4,
+        & dd.colspan-5,
+        & dd.colspan-full {
+          grid-column: span 4;
+        }
+
+        & dt:has(+ dd.colspan-3), 
+        & dd.colspan-3 {
+          grid-column: span 3;
+        }
+
+        & dt:has(+ dd.colspan-2), 
+        & dd.colspan-2 {
+          grid-column: span 2;
+        }
+      }
+    }
+  }
+
+  // max 3 columns
+  @container semanticForm (width >= 850px) and (width < 1030px) {  
+    & 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));
+
+      div.colspan-4,
+      div.colspan-5 {
+        grid-column: span 3;
+      }
+
+      &:has(:not(div)) { 
+        & dt:nth-of-type(3n + 1), 
+        & dd:nth-of-type(3n + 1) {
+          grid-column: 1;
+        }
+        
+        & dt:nth-of-type(3n + 2), 
+        & dd:nth-of-type(3n + 2) {
+          grid-column: 2;
+        }
+        
+        & dt:nth-of-type(3n + 3), 
+        & dd:nth-of-type(3n + 3) {
+          grid-column: 3;
+        }
+
+        & dt:has(+ dd.colspan-3), 
+        & dt:has(+ dd.colspan-4), 
+        & dt:has(+ dd.colspan-5),
+        & dt:has(+ dd.colspan-full),
+        & dd.colspan-3,
+        & dd.colspan-4,
+        & dd.colspan-5,
+        & dd.colspan-full {
+          grid-column: span 3;
+        }
+
+        & dt:has(+ dd.colspan-2), 
+        & dd.colspan-2 {
+          grid-column: span 2;
+        }
+      }
+    }
+  }
+
+  // max 2 columns
+  @container semanticForm (width >= 510px) and (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));
+
+      div.colspan-3,
+      div.colspan-4,
+      div.colspan-5 {
+        grid-column: span 2;
+      }
+
+      &:has(:not(div)) { 
+        & dt:nth-of-type(2n + 1), 
+        & dd:nth-of-type(2n + 1) {
+          grid-column: 1;
+        }
+  
+        & dt:nth-of-type(2n + 2), 
+        & dd:nth-of-type(2n + 2) {
+          grid-column: 2;
+        }
+
+        & dt:has(+ dd.colspan-2),
+        & dt:has(+ dd.colspan-3), 
+        & dt:has(+ dd.colspan-4), 
+        & dt:has(+ dd.colspan-5),
+        & dt:has(+ dd.colspan-full),
+        & dd.colspan-2,
+        & dd.colspan-3,
+        & dd.colspan-4,
+        & dd.colspan-5,
+        & dd.colspan-full {
+          grid-column: span 2;
+        }
+      }
+    }
+  }
+
+  // max 1 column
+  @container semanticForm (width < 510px) {
+    & 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 {
+      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;
+      }
+
+      &:has(:not(div)) {
+        & dt:nth-of-type(n + 1),
+        & dd:nth-of-type(n + 1) {
+          grid-column: 1;
+        }
+
+        & dt:has(+ dd.colspan-1),
+        & dt:has(+ dd.colspan-2),
+        & dt:has(+ dd.colspan-3), 
+        & dt:has(+ dd.colspan-4), 
+        & dt:has(+ dd.colspan-5),
+        & dt:has(+ dd.colspan-full),
+        & dd.colspan-1,
+        & dd.colspan-2,
+        & dd.colspan-3,
+        & dd.colspan-4,
+        & dd.colspan-5,
+        & dd.colspan-full {
+          grid-column: span 1;
+        }
+      }
+    }
+  }
+}
+// #endregion