semantic-forms 5.3.5 → 5.3.6

package/dist/semantic-forms.css

@@ -23,7 +23,22 @@ table.semanticForms {
   --semanticFormsInputTopMargin: 15px;
   --semanticFormsInputMinWidth: 250px;
   --semanticFormsInputMaxWidth: 365px;
+  --semanticFormsInputColumnMaxWidth: 1fr;
   --semanticFormsBorderRadius: 10px;
+  --semanticFormsSwitchOnColor: #2196f3;
+}
+@supports (color: AccentColor) {
+  form.semanticForms,
+  form.semanticForms.light,
+  table.semanticForms {
+    --semanticFormsSwitchOnColor: AccentColor;
+  }
+}
+form.semanticForms,
+form.semanticForms.light,
+table.semanticForms {
+  --semanticFormsSwitchOffColor: #c0c0c0;
+  --semanticFormsSwitchThumbColor: #fff;
   --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.3 c h / 0.05);
   --semanticFormsNestedFieldsetBorder: 1px rgba(0, 0, 0, .2) solid;
   --semanticFormsNestedInputBgColor: #fff;
@@ -136,6 +151,16 @@ table.semanticForms dd > p {
     --semanticFormsClearButtonColor: #fff;
     --semanticFormsButtonGradientLight: #6f6f6f;
     --semanticFormsButtonGradientDark: #373737;
+    --semanticFormsSwitchOnColor: #2196f3;
+  }
+  @supports (color: AccentColor) {
+    html:not(.light) body:not(.light) form.semanticForms:not(.light), html:not(.light) body:not(.light) table.semanticForms:not(.light) {
+      --semanticFormsSwitchOnColor: AccentColor;
+    }
+  }
+  html:not(.light) body:not(.light) form.semanticForms:not(.light), html:not(.light) body:not(.light) table.semanticForms:not(.light) {
+    --semanticFormsSwitchOffColor: #656565;
+    --semanticFormsSwitchThumbColor: #fff;
     --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);
@@ -166,6 +191,16 @@ html:not(.light) body:not(.light) form.semanticForms.dark, html:not(.light) body
   --semanticFormsClearButtonColor: #fff;
   --semanticFormsButtonGradientLight: #6f6f6f;
   --semanticFormsButtonGradientDark: #373737;
+  --semanticFormsSwitchOnColor: #2196f3;
+}
+@supports (color: AccentColor) {
+  html:not(.light) body:not(.light) form.semanticForms.dark, html:not(.light) body:not(.light) table.semanticForms.dark {
+    --semanticFormsSwitchOnColor: AccentColor;
+  }
+}
+html:not(.light) body:not(.light) form.semanticForms.dark, html:not(.light) body:not(.light) table.semanticForms.dark {
+  --semanticFormsSwitchOffColor: #656565;
+  --semanticFormsSwitchThumbColor: #fff;
   --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);
@@ -197,6 +232,18 @@ table.semanticForms.dark {
   --semanticFormsClearButtonColor: #fff;
   --semanticFormsButtonGradientLight: #6f6f6f;
   --semanticFormsButtonGradientDark: #373737;
+  --semanticFormsSwitchOnColor: #2196f3;
+}
+@supports (color: AccentColor) {
+  form.semanticForms.dark,
+  table.semanticForms.dark {
+    --semanticFormsSwitchOnColor: AccentColor;
+  }
+}
+form.semanticForms.dark,
+table.semanticForms.dark {
+  --semanticFormsSwitchOffColor: #656565;
+  --semanticFormsSwitchThumbColor: #fff;
   --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);
@@ -230,6 +277,47 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
 .semanticForms input[type=radio] ~ label:first-of-type {
   color: var(--semanticFormsTextColor);
 }
+.semanticForms input[type=checkbox][switch] {
+  appearance: none;
+  box-sizing: border-box;
+  width: 34px;
+  height: 18px;
+  border-radius: 999px;
+  background-color: var(--semanticFormsSwitchOffColor);
+  border: 1px solid var(--semanticFormsSwitchOffColor);
+  background-image: radial-gradient(circle 7px at center, var(--semanticFormsSwitchThumbColor) 6px, transparent 7px);
+  background-size: 16px 16px;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+  transition: background-color 200ms ease-in-out, background-position 200ms ease-in-out, border-color 200ms ease-in-out;
+  touch-action: none;
+}
+.semanticForms input[type=checkbox][switch]:checked {
+  background-color: var(--semanticFormsSwitchOnColor);
+  border-color: var(--semanticFormsSwitchOnColor);
+  background-position: 16px center;
+}
+.semanticForms input[type=checkbox][switch]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--semanticFormsFocusColor);
+}
+.semanticForms input[type=checkbox][switch]:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+@media (forced-colors: active) {
+  .semanticForms input[type=checkbox][switch] {
+    forced-color-adjust: none;
+    background-color: Canvas;
+    border-color: ButtonText;
+    background-image: radial-gradient(circle 7px at center, ButtonText 6px, transparent 7px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .semanticForms input[type=checkbox][switch] {
+    transition: none;
+  }
+}
 .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
 .semanticForms select,
 .semanticForms textarea {
@@ -245,24 +333,24 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
 .semanticForms select:focus,
 .semanticForms textarea:focus {
   outline: none;
-  box-shadow: 0 0 0 1px var(--semanticFormsFocusColor);
+  box-shadow: inset 0 0 0 1px var(--semanticFormsFocusColor);
 }
-.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]):not([type=range]),
-.semanticForms select:not([type=range]),
-.semanticForms textarea:not([type=range]) {
-  padding: 6px 30px 6px 20px;
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]):not([type=range], textarea, select),
+.semanticForms select:not([type=range], textarea, select),
+.semanticForms textarea:not([type=range], textarea, select) {
+  padding: calc(6px - var(--semanticFormsFieldTextInkOffset, 0px)) 30px calc(6px + var(--semanticFormsFieldTextInkOffset, 0px)) 20px;
 }
 .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=password], .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=text]:has(~ button.show),
 .semanticForms select[type=password],
 .semanticForms select[type=text]:has(~ button.show),
 .semanticForms textarea[type=password],
 .semanticForms textarea[type=text]:has(~ button.show) {
-  padding: 6px 55px 6px 20px;
+  padding: calc(6px - var(--semanticFormsFieldTextInkOffset, 0px)) 55px calc(6px + var(--semanticFormsFieldTextInkOffset, 0px)) 20px;
 }
 .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=search],
 .semanticForms select[type=search],
 .semanticForms textarea[type=search] {
-  padding: 6px 20px 6px 32px;
+  padding: calc(6px - var(--semanticFormsFieldTextInkOffset, 0px)) 20px calc(6px + var(--semanticFormsFieldTextInkOffset, 0px)) 32px;
   background: var(--semanticFormsSearchIcon) no-repeat 10px;
   background-color: var(--semanticFormsFormBgColor);
   background-size: 18px;
@@ -317,6 +405,7 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
 }
 .semanticForms select {
   cursor: pointer;
+  padding: calc(6px - var(--semanticFormsTextInkOffset, 0px)) 30px calc(6px + var(--semanticFormsTextInkOffset, 0px)) 20px;
 }
 .semanticForms select:not([multiple]) {
   background-image: var(--semanticFormsSelectIcon);
@@ -342,6 +431,7 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
   border-bottom-left-radius: var(--semanticFormsBorderRadius);
 }
 .semanticForms textarea {
+  padding: 6px 30px 6px 20px;
   resize: vertical;
   line-height: 1.5;
   width: 100%;
@@ -355,8 +445,7 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
   appearance: none;
   -webkit-appearance: none;
   position: absolute;
-  height: min-content;
-  top: calc(var(--semanticFormsInputTopMargin) + 6px);
+  top: calc(var(--semanticFormsInputTopMargin) + (var(--semanticFormsInputHeight) - 25px) / 2);
   right: 0;
   width: 25px;
   height: 25px;
@@ -384,6 +473,10 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
 .semanticForms input[type=file] ~ .clear {
   display: none;
 }
+.semanticForms input:read-only ~ .clear,
+.semanticForms textarea:read-only ~ .clear {
+  display: none;
+}
 .semanticForms input[type=submit],
 .semanticForms input[type=reset],
 .semanticForms input[type=button],
@@ -399,7 +492,7 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
   border: 1px var(--semanticFormsButtonGradientDark) solid;
   corner-shape: squircle;
   border-radius: 20px;
-  padding: 5px 25px;
+  padding: calc(5px - var(--semanticFormsFieldTextInkOffset, 0px)) 25px calc(5px + var(--semanticFormsFieldTextInkOffset, 0px));
   font-size: 100%;
   line-height: 1;
   user-select: none;
@@ -515,7 +608,7 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
 
 .semanticForms input[type=checkbox] + label:first-of-type,
 .semanticForms input[type=radio] + label:first-of-type {
-  padding-top: 2px;
+  padding-top: calc(2px - var(--semanticFormsTextInkOffset, 0px));
   font-size: var(--semanticFormsInputFontSize);
   cursor: pointer;
   display: flex;
@@ -583,9 +676,12 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type {
   color: var(--semanticFormsTextColor);
-  transform: translateY(-150%) scale(0.7);
+  transform: translateY(-120%) scale(0.7);
   width: 100%;
 }
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:placeholder-shown:not(.no-float-label) ~ label:first-of-type {
+  width: calc(100% - 20px);
+}
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=button], [type=image]):focus.no-float-label ~ label:first-of-type, .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=button], [type=image]):not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus.no-float-label ~ label:first-of-type,
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
@@ -602,12 +698,12 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
 }
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type {
   position: absolute;
-  top: calc(var(--semanticFormsInputTopMargin) + 10px);
+  top: calc(var(--semanticFormsInputTopMargin) + (var(--semanticFormsInputHeight) - var(--semanticFormsInputFontSize) * 1.5) / 2 - var(--semanticFormsTextInkOffset, 0px));
   left: 20px;
   display: flex;
   align-items: center;
   gap: 5px;
-  line-height: 1.2;
+  line-height: 1.5;
   font-size: var(--semanticFormsInputFontSize);
   transform-origin: left center;
   pointer-events: none;
@@ -641,7 +737,7 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
   width: calc(100% - 95px);
 }
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key) span.focus-key {
-  display: block;
+  display: flex;
 }
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key) span.focus-key kbd {
   font-family: sans-serif;
@@ -703,14 +799,18 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key {
   color: var(--semanticFormsPlaceholderColor);
   position: absolute;
-  top: calc(var(--semanticFormsInputTopMargin) + 11px);
+  top: calc(var(--semanticFormsInputTopMargin) - var(--semanticFormsTextInkOffset, 0px));
+  height: var(--semanticFormsInputHeight);
+  display: flex;
+  align-items: center;
+  pointer-events: none;
   right: 20px;
 }
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd {
   line-height: 1;
 }
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key {
-  right: 45px;
+  right: 60px;
 }
 .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type {
   left: 32px;
@@ -732,54 +832,69 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
   opacity: 1;
 }
 
-.semanticForms div[class^=colspan-] {
+.semanticForms div[class*=colspan-] {
   max-width: 100% !important;
 }
 .semanticForms div.colspan-full {
   grid-column: 1/-1;
 }
 .semanticForms div.colspan-5 {
-  grid-column: span 5;
+  grid-column-end: span 5;
 }
 .semanticForms div.colspan-4 {
-  grid-column: span 4;
+  grid-column-end: span 4;
 }
 .semanticForms div.colspan-3 {
-  grid-column: span 3;
+  grid-column-end: span 3;
 }
 .semanticForms div.colspan-2 {
-  grid-column: span 2;
+  grid-column-end: span 2;
 }
 .semanticForms div.colspan-1 {
-  grid-column: span 1;
+  grid-column-end: span 1;
+}
+.semanticForms div.col-5 {
+  grid-column-start: 5;
+}
+.semanticForms div.col-4 {
+  grid-column-start: 4;
+}
+.semanticForms div.col-3 {
+  grid-column-start: 3;
 }
-.semanticForms fieldset[class^=colspan-] dl div,
-.semanticForms dl[class^=colspan-] div {
+.semanticForms div.col-2 {
+  grid-column-start: 2;
+}
+.semanticForms div.col-1 {
+  grid-column-start: 1;
+}
+.semanticForms fieldset[class*=colspan-] dl div,
+.semanticForms dl[class*=colspan-] div {
   max-width: 100% !important;
 }
 .semanticForms fieldset.colspan-full dl,
 .semanticForms dl.colspan-full {
-  grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
 }
 .semanticForms fieldset.colspan-5 dl,
 .semanticForms dl.colspan-5 {
-  grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
 }
 .semanticForms fieldset.colspan-4 dl,
 .semanticForms dl.colspan-4 {
-  grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
 }
 .semanticForms fieldset.colspan-3 dl,
 .semanticForms dl.colspan-3 {
-  grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
 }
 .semanticForms fieldset.colspan-2 dl,
 .semanticForms dl.colspan-2 {
-  grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
 }
 .semanticForms fieldset.colspan-1 dl,
 .semanticForms dl.colspan-1 {
-  grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
 }
 .semanticForms fieldset.colspan-1 dl dt:nth-of-type(n + 1),
 .semanticForms fieldset.colspan-1 dl dd:nth-of-type(n + 1),
@@ -873,55 +988,62 @@ table.semanticForms.dark input::-webkit-calendar-picker-indicator {
 }
 
 form.semanticForms,
-fieldset {
+form.semanticForms fieldset {
   container: semanticForm/inline-size;
 }
 @container semanticForm (width >= 1810px) {
   form.semanticForms fieldset dl, form.semanticForms dl,
-  fieldset fieldset dl,
-  fieldset dl {
-    grid-template-columns: repeat(7, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  form.semanticForms fieldset fieldset dl,
+  form.semanticForms fieldset dl {
+    grid-template-columns: repeat(7, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
   }
 }
 @container semanticForm (width >= 1550px) and (width < 1810px) {
   form.semanticForms fieldset dl, form.semanticForms dl,
-  fieldset fieldset dl,
-  fieldset dl {
-    grid-template-columns: repeat(6, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  form.semanticForms fieldset fieldset dl,
+  form.semanticForms fieldset dl {
+    grid-template-columns: repeat(6, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
   }
 }
 @container semanticForm (width >= 1290px) and (width < 1550px) {
   form.semanticForms fieldset dl, form.semanticForms dl,
-  fieldset fieldset dl,
-  fieldset dl {
-    grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  form.semanticForms fieldset fieldset dl,
+  form.semanticForms fieldset dl {
+    grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
   }
 }
 @container semanticForm (width >= 1030px) and (width < 1290px) {
   form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-5,
-  fieldset fieldset dl,
-  fieldset fieldset.colspan-5 dl,
-  fieldset dl,
-  fieldset dl.colspan-5 {
-    grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  form.semanticForms fieldset fieldset dl,
+  form.semanticForms fieldset fieldset.colspan-5 dl,
+  form.semanticForms fieldset dl,
+  form.semanticForms fieldset dl.colspan-5 {
+    grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
   }
   form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-5,
-  fieldset fieldset dl div.colspan-5,
-  fieldset fieldset.colspan-5 dl div.colspan-5,
-  fieldset dl div.colspan-5,
-  fieldset dl.colspan-5 div.colspan-5 {
-    grid-column: span 4;
+  form.semanticForms fieldset fieldset dl div.colspan-5,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.colspan-5,
+  form.semanticForms fieldset dl div.colspan-5,
+  form.semanticForms fieldset dl.colspan-5 div.colspan-5 {
+    grid-column-end: span 4;
+  }
+  form.semanticForms fieldset dl div.col-5, form.semanticForms fieldset.colspan-5 dl div.col-5, form.semanticForms dl div.col-5, form.semanticForms dl.colspan-5 div.col-5,
+  form.semanticForms fieldset fieldset dl div.col-5,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.col-5,
+  form.semanticForms fieldset dl div.col-5,
+  form.semanticForms fieldset dl.colspan-5 div.col-5 {
+    grid-column-start: auto;
   }
 }
 @container semanticForm (width >= 850px) and (width < 1030px) {
   form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5,
-  fieldset fieldset dl,
-  fieldset fieldset.colspan-4 dl,
-  fieldset fieldset.colspan-5 dl,
-  fieldset dl,
-  fieldset dl.colspan-4,
-  fieldset dl.colspan-5 {
-    grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  form.semanticForms fieldset fieldset dl,
+  form.semanticForms fieldset fieldset.colspan-4 dl,
+  form.semanticForms fieldset fieldset.colspan-5 dl,
+  form.semanticForms fieldset dl,
+  form.semanticForms fieldset dl.colspan-4,
+  form.semanticForms fieldset dl.colspan-5 {
+    grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
   }
   form.semanticForms fieldset dl div.colspan-4,
   form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-4 dl div.colspan-4,
@@ -930,32 +1052,53 @@ fieldset {
   form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-4 div.colspan-4,
   form.semanticForms dl.colspan-4 div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-4,
   form.semanticForms dl.colspan-5 div.colspan-5,
-  fieldset fieldset dl div.colspan-4,
-  fieldset fieldset dl div.colspan-5,
-  fieldset fieldset.colspan-4 dl div.colspan-4,
-  fieldset fieldset.colspan-4 dl div.colspan-5,
-  fieldset fieldset.colspan-5 dl div.colspan-4,
-  fieldset fieldset.colspan-5 dl div.colspan-5,
-  fieldset dl div.colspan-4,
-  fieldset dl div.colspan-5,
-  fieldset dl.colspan-4 div.colspan-4,
-  fieldset dl.colspan-4 div.colspan-5,
-  fieldset dl.colspan-5 div.colspan-4,
-  fieldset dl.colspan-5 div.colspan-5 {
-    grid-column: span 3;
+  form.semanticForms fieldset fieldset dl div.colspan-4,
+  form.semanticForms fieldset fieldset dl div.colspan-5,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.colspan-4,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.colspan-5,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.colspan-4,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.colspan-5,
+  form.semanticForms fieldset dl div.colspan-4,
+  form.semanticForms fieldset dl div.colspan-5,
+  form.semanticForms fieldset dl.colspan-4 div.colspan-4,
+  form.semanticForms fieldset dl.colspan-4 div.colspan-5,
+  form.semanticForms fieldset dl.colspan-5 div.colspan-4,
+  form.semanticForms fieldset dl.colspan-5 div.colspan-5 {
+    grid-column-end: span 3;
+  }
+  form.semanticForms fieldset dl div.col-4,
+  form.semanticForms fieldset dl div.col-5, form.semanticForms fieldset.colspan-4 dl div.col-4,
+  form.semanticForms fieldset.colspan-4 dl div.col-5, form.semanticForms fieldset.colspan-5 dl div.col-4,
+  form.semanticForms fieldset.colspan-5 dl div.col-5, form.semanticForms dl div.col-4,
+  form.semanticForms dl div.col-5, form.semanticForms dl.colspan-4 div.col-4,
+  form.semanticForms dl.colspan-4 div.col-5, form.semanticForms dl.colspan-5 div.col-4,
+  form.semanticForms dl.colspan-5 div.col-5,
+  form.semanticForms fieldset fieldset dl div.col-4,
+  form.semanticForms fieldset fieldset dl div.col-5,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.col-4,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.col-5,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.col-4,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.col-5,
+  form.semanticForms fieldset dl div.col-4,
+  form.semanticForms fieldset dl div.col-5,
+  form.semanticForms fieldset dl.colspan-4 div.col-4,
+  form.semanticForms fieldset dl.colspan-4 div.col-5,
+  form.semanticForms fieldset dl.colspan-5 div.col-4,
+  form.semanticForms fieldset dl.colspan-5 div.col-5 {
+    grid-column-start: auto;
   }
 }
 @container semanticForm (width >= 510px) and (width < 850px) {
   form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-3 dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-3, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5,
-  fieldset fieldset dl,
-  fieldset fieldset.colspan-3 dl,
-  fieldset fieldset.colspan-4 dl,
-  fieldset fieldset.colspan-5 dl,
-  fieldset dl,
-  fieldset dl.colspan-3,
-  fieldset dl.colspan-4,
-  fieldset dl.colspan-5 {
-    grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  form.semanticForms fieldset fieldset dl,
+  form.semanticForms fieldset fieldset.colspan-3 dl,
+  form.semanticForms fieldset fieldset.colspan-4 dl,
+  form.semanticForms fieldset fieldset.colspan-5 dl,
+  form.semanticForms fieldset dl,
+  form.semanticForms fieldset dl.colspan-3,
+  form.semanticForms fieldset dl.colspan-4,
+  form.semanticForms fieldset dl.colspan-5 {
+    grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
   }
   form.semanticForms fieldset dl div.colspan-3,
   form.semanticForms fieldset dl div.colspan-4,
@@ -974,45 +1117,88 @@ fieldset {
   form.semanticForms dl.colspan-4 div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-3,
   form.semanticForms dl.colspan-5 div.colspan-4,
   form.semanticForms dl.colspan-5 div.colspan-5,
-  fieldset fieldset dl div.colspan-3,
-  fieldset fieldset dl div.colspan-4,
-  fieldset fieldset dl div.colspan-5,
-  fieldset fieldset.colspan-3 dl div.colspan-3,
-  fieldset fieldset.colspan-3 dl div.colspan-4,
-  fieldset fieldset.colspan-3 dl div.colspan-5,
-  fieldset fieldset.colspan-4 dl div.colspan-3,
-  fieldset fieldset.colspan-4 dl div.colspan-4,
-  fieldset fieldset.colspan-4 dl div.colspan-5,
-  fieldset fieldset.colspan-5 dl div.colspan-3,
-  fieldset fieldset.colspan-5 dl div.colspan-4,
-  fieldset fieldset.colspan-5 dl div.colspan-5,
-  fieldset dl div.colspan-3,
-  fieldset dl div.colspan-4,
-  fieldset dl div.colspan-5,
-  fieldset dl.colspan-3 div.colspan-3,
-  fieldset dl.colspan-3 div.colspan-4,
-  fieldset dl.colspan-3 div.colspan-5,
-  fieldset dl.colspan-4 div.colspan-3,
-  fieldset dl.colspan-4 div.colspan-4,
-  fieldset dl.colspan-4 div.colspan-5,
-  fieldset dl.colspan-5 div.colspan-3,
-  fieldset dl.colspan-5 div.colspan-4,
-  fieldset dl.colspan-5 div.colspan-5 {
-    grid-column: span 2;
+  form.semanticForms fieldset fieldset dl div.colspan-3,
+  form.semanticForms fieldset fieldset dl div.colspan-4,
+  form.semanticForms fieldset fieldset dl div.colspan-5,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.colspan-3,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.colspan-4,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.colspan-5,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.colspan-3,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.colspan-4,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.colspan-5,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.colspan-3,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.colspan-4,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.colspan-5,
+  form.semanticForms fieldset dl div.colspan-3,
+  form.semanticForms fieldset dl div.colspan-4,
+  form.semanticForms fieldset dl div.colspan-5,
+  form.semanticForms fieldset dl.colspan-3 div.colspan-3,
+  form.semanticForms fieldset dl.colspan-3 div.colspan-4,
+  form.semanticForms fieldset dl.colspan-3 div.colspan-5,
+  form.semanticForms fieldset dl.colspan-4 div.colspan-3,
+  form.semanticForms fieldset dl.colspan-4 div.colspan-4,
+  form.semanticForms fieldset dl.colspan-4 div.colspan-5,
+  form.semanticForms fieldset dl.colspan-5 div.colspan-3,
+  form.semanticForms fieldset dl.colspan-5 div.colspan-4,
+  form.semanticForms fieldset dl.colspan-5 div.colspan-5 {
+    grid-column-end: span 2;
+  }
+  form.semanticForms fieldset dl div.col-3,
+  form.semanticForms fieldset dl div.col-4,
+  form.semanticForms fieldset dl div.col-5, form.semanticForms fieldset.colspan-3 dl div.col-3,
+  form.semanticForms fieldset.colspan-3 dl div.col-4,
+  form.semanticForms fieldset.colspan-3 dl div.col-5, form.semanticForms fieldset.colspan-4 dl div.col-3,
+  form.semanticForms fieldset.colspan-4 dl div.col-4,
+  form.semanticForms fieldset.colspan-4 dl div.col-5, form.semanticForms fieldset.colspan-5 dl div.col-3,
+  form.semanticForms fieldset.colspan-5 dl div.col-4,
+  form.semanticForms fieldset.colspan-5 dl div.col-5, form.semanticForms dl div.col-3,
+  form.semanticForms dl div.col-4,
+  form.semanticForms dl div.col-5, form.semanticForms dl.colspan-3 div.col-3,
+  form.semanticForms dl.colspan-3 div.col-4,
+  form.semanticForms dl.colspan-3 div.col-5, form.semanticForms dl.colspan-4 div.col-3,
+  form.semanticForms dl.colspan-4 div.col-4,
+  form.semanticForms dl.colspan-4 div.col-5, form.semanticForms dl.colspan-5 div.col-3,
+  form.semanticForms dl.colspan-5 div.col-4,
+  form.semanticForms dl.colspan-5 div.col-5,
+  form.semanticForms fieldset fieldset dl div.col-3,
+  form.semanticForms fieldset fieldset dl div.col-4,
+  form.semanticForms fieldset fieldset dl div.col-5,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.col-3,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.col-4,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.col-5,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.col-3,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.col-4,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.col-5,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.col-3,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.col-4,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.col-5,
+  form.semanticForms fieldset dl div.col-3,
+  form.semanticForms fieldset dl div.col-4,
+  form.semanticForms fieldset dl div.col-5,
+  form.semanticForms fieldset dl.colspan-3 div.col-3,
+  form.semanticForms fieldset dl.colspan-3 div.col-4,
+  form.semanticForms fieldset dl.colspan-3 div.col-5,
+  form.semanticForms fieldset dl.colspan-4 div.col-3,
+  form.semanticForms fieldset dl.colspan-4 div.col-4,
+  form.semanticForms fieldset dl.colspan-4 div.col-5,
+  form.semanticForms fieldset dl.colspan-5 div.col-3,
+  form.semanticForms fieldset dl.colspan-5 div.col-4,
+  form.semanticForms fieldset dl.colspan-5 div.col-5 {
+    grid-column-start: auto;
   }
 }
 @container semanticForm (width < 510px) {
   form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-2 dl, form.semanticForms fieldset.colspan-3 dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-2, form.semanticForms dl.colspan-3, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5,
-  fieldset fieldset dl,
-  fieldset fieldset.colspan-2 dl,
-  fieldset fieldset.colspan-3 dl,
-  fieldset fieldset.colspan-4 dl,
-  fieldset fieldset.colspan-5 dl,
-  fieldset dl,
-  fieldset dl.colspan-2,
-  fieldset dl.colspan-3,
-  fieldset dl.colspan-4,
-  fieldset dl.colspan-5 {
+  form.semanticForms fieldset fieldset dl,
+  form.semanticForms fieldset fieldset.colspan-2 dl,
+  form.semanticForms fieldset fieldset.colspan-3 dl,
+  form.semanticForms fieldset fieldset.colspan-4 dl,
+  form.semanticForms fieldset fieldset.colspan-5 dl,
+  form.semanticForms fieldset dl,
+  form.semanticForms fieldset dl.colspan-2,
+  form.semanticForms fieldset dl.colspan-3,
+  form.semanticForms fieldset dl.colspan-4,
+  form.semanticForms fieldset dl.colspan-5 {
     grid-template-columns: 1fr;
   }
   form.semanticForms fieldset dl div.colspan-2,
@@ -1046,50 +1232,176 @@ fieldset {
   form.semanticForms dl.colspan-5 div.colspan-3,
   form.semanticForms dl.colspan-5 div.colspan-4,
   form.semanticForms dl.colspan-5 div.colspan-5,
-  fieldset fieldset dl div.colspan-2,
-  fieldset fieldset dl div.colspan-3,
-  fieldset fieldset dl div.colspan-4,
-  fieldset fieldset dl div.colspan-5,
-  fieldset fieldset.colspan-2 dl div.colspan-2,
-  fieldset fieldset.colspan-2 dl div.colspan-3,
-  fieldset fieldset.colspan-2 dl div.colspan-4,
-  fieldset fieldset.colspan-2 dl div.colspan-5,
-  fieldset fieldset.colspan-3 dl div.colspan-2,
-  fieldset fieldset.colspan-3 dl div.colspan-3,
-  fieldset fieldset.colspan-3 dl div.colspan-4,
-  fieldset fieldset.colspan-3 dl div.colspan-5,
-  fieldset fieldset.colspan-4 dl div.colspan-2,
-  fieldset fieldset.colspan-4 dl div.colspan-3,
-  fieldset fieldset.colspan-4 dl div.colspan-4,
-  fieldset fieldset.colspan-4 dl div.colspan-5,
-  fieldset fieldset.colspan-5 dl div.colspan-2,
-  fieldset fieldset.colspan-5 dl div.colspan-3,
-  fieldset fieldset.colspan-5 dl div.colspan-4,
-  fieldset fieldset.colspan-5 dl div.colspan-5,
-  fieldset dl div.colspan-2,
-  fieldset dl div.colspan-3,
-  fieldset dl div.colspan-4,
-  fieldset dl div.colspan-5,
-  fieldset dl.colspan-2 div.colspan-2,
-  fieldset dl.colspan-2 div.colspan-3,
-  fieldset dl.colspan-2 div.colspan-4,
-  fieldset dl.colspan-2 div.colspan-5,
-  fieldset dl.colspan-3 div.colspan-2,
-  fieldset dl.colspan-3 div.colspan-3,
-  fieldset dl.colspan-3 div.colspan-4,
-  fieldset dl.colspan-3 div.colspan-5,
-  fieldset dl.colspan-4 div.colspan-2,
-  fieldset dl.colspan-4 div.colspan-3,
-  fieldset dl.colspan-4 div.colspan-4,
-  fieldset dl.colspan-4 div.colspan-5,
-  fieldset dl.colspan-5 div.colspan-2,
-  fieldset dl.colspan-5 div.colspan-3,
-  fieldset dl.colspan-5 div.colspan-4,
-  fieldset dl.colspan-5 div.colspan-5 {
-    grid-column: span 1;
+  form.semanticForms fieldset fieldset dl div.colspan-2,
+  form.semanticForms fieldset fieldset dl div.colspan-3,
+  form.semanticForms fieldset fieldset dl div.colspan-4,
+  form.semanticForms fieldset fieldset dl div.colspan-5,
+  form.semanticForms fieldset fieldset.colspan-2 dl div.colspan-2,
+  form.semanticForms fieldset fieldset.colspan-2 dl div.colspan-3,
+  form.semanticForms fieldset fieldset.colspan-2 dl div.colspan-4,
+  form.semanticForms fieldset fieldset.colspan-2 dl div.colspan-5,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.colspan-2,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.colspan-3,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.colspan-4,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.colspan-5,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.colspan-2,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.colspan-3,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.colspan-4,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.colspan-5,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.colspan-2,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.colspan-3,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.colspan-4,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.colspan-5,
+  form.semanticForms fieldset dl div.colspan-2,
+  form.semanticForms fieldset dl div.colspan-3,
+  form.semanticForms fieldset dl div.colspan-4,
+  form.semanticForms fieldset dl div.colspan-5,
+  form.semanticForms fieldset dl.colspan-2 div.colspan-2,
+  form.semanticForms fieldset dl.colspan-2 div.colspan-3,
+  form.semanticForms fieldset dl.colspan-2 div.colspan-4,
+  form.semanticForms fieldset dl.colspan-2 div.colspan-5,
+  form.semanticForms fieldset dl.colspan-3 div.colspan-2,
+  form.semanticForms fieldset dl.colspan-3 div.colspan-3,
+  form.semanticForms fieldset dl.colspan-3 div.colspan-4,
+  form.semanticForms fieldset dl.colspan-3 div.colspan-5,
+  form.semanticForms fieldset dl.colspan-4 div.colspan-2,
+  form.semanticForms fieldset dl.colspan-4 div.colspan-3,
+  form.semanticForms fieldset dl.colspan-4 div.colspan-4,
+  form.semanticForms fieldset dl.colspan-4 div.colspan-5,
+  form.semanticForms fieldset dl.colspan-5 div.colspan-2,
+  form.semanticForms fieldset dl.colspan-5 div.colspan-3,
+  form.semanticForms fieldset dl.colspan-5 div.colspan-4,
+  form.semanticForms fieldset dl.colspan-5 div.colspan-5 {
+    grid-column-end: span 1;
+  }
+  form.semanticForms fieldset dl div.col-2,
+  form.semanticForms fieldset dl div.col-3,
+  form.semanticForms fieldset dl div.col-4,
+  form.semanticForms fieldset dl div.col-5, form.semanticForms fieldset.colspan-2 dl div.col-2,
+  form.semanticForms fieldset.colspan-2 dl div.col-3,
+  form.semanticForms fieldset.colspan-2 dl div.col-4,
+  form.semanticForms fieldset.colspan-2 dl div.col-5, form.semanticForms fieldset.colspan-3 dl div.col-2,
+  form.semanticForms fieldset.colspan-3 dl div.col-3,
+  form.semanticForms fieldset.colspan-3 dl div.col-4,
+  form.semanticForms fieldset.colspan-3 dl div.col-5, form.semanticForms fieldset.colspan-4 dl div.col-2,
+  form.semanticForms fieldset.colspan-4 dl div.col-3,
+  form.semanticForms fieldset.colspan-4 dl div.col-4,
+  form.semanticForms fieldset.colspan-4 dl div.col-5, form.semanticForms fieldset.colspan-5 dl div.col-2,
+  form.semanticForms fieldset.colspan-5 dl div.col-3,
+  form.semanticForms fieldset.colspan-5 dl div.col-4,
+  form.semanticForms fieldset.colspan-5 dl div.col-5, form.semanticForms dl div.col-2,
+  form.semanticForms dl div.col-3,
+  form.semanticForms dl div.col-4,
+  form.semanticForms dl div.col-5, form.semanticForms dl.colspan-2 div.col-2,
+  form.semanticForms dl.colspan-2 div.col-3,
+  form.semanticForms dl.colspan-2 div.col-4,
+  form.semanticForms dl.colspan-2 div.col-5, form.semanticForms dl.colspan-3 div.col-2,
+  form.semanticForms dl.colspan-3 div.col-3,
+  form.semanticForms dl.colspan-3 div.col-4,
+  form.semanticForms dl.colspan-3 div.col-5, form.semanticForms dl.colspan-4 div.col-2,
+  form.semanticForms dl.colspan-4 div.col-3,
+  form.semanticForms dl.colspan-4 div.col-4,
+  form.semanticForms dl.colspan-4 div.col-5, form.semanticForms dl.colspan-5 div.col-2,
+  form.semanticForms dl.colspan-5 div.col-3,
+  form.semanticForms dl.colspan-5 div.col-4,
+  form.semanticForms dl.colspan-5 div.col-5,
+  form.semanticForms fieldset fieldset dl div.col-2,
+  form.semanticForms fieldset fieldset dl div.col-3,
+  form.semanticForms fieldset fieldset dl div.col-4,
+  form.semanticForms fieldset fieldset dl div.col-5,
+  form.semanticForms fieldset fieldset.colspan-2 dl div.col-2,
+  form.semanticForms fieldset fieldset.colspan-2 dl div.col-3,
+  form.semanticForms fieldset fieldset.colspan-2 dl div.col-4,
+  form.semanticForms fieldset fieldset.colspan-2 dl div.col-5,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.col-2,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.col-3,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.col-4,
+  form.semanticForms fieldset fieldset.colspan-3 dl div.col-5,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.col-2,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.col-3,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.col-4,
+  form.semanticForms fieldset fieldset.colspan-4 dl div.col-5,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.col-2,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.col-3,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.col-4,
+  form.semanticForms fieldset fieldset.colspan-5 dl div.col-5,
+  form.semanticForms fieldset dl div.col-2,
+  form.semanticForms fieldset dl div.col-3,
+  form.semanticForms fieldset dl div.col-4,
+  form.semanticForms fieldset dl div.col-5,
+  form.semanticForms fieldset dl.colspan-2 div.col-2,
+  form.semanticForms fieldset dl.colspan-2 div.col-3,
+  form.semanticForms fieldset dl.colspan-2 div.col-4,
+  form.semanticForms fieldset dl.colspan-2 div.col-5,
+  form.semanticForms fieldset dl.colspan-3 div.col-2,
+  form.semanticForms fieldset dl.colspan-3 div.col-3,
+  form.semanticForms fieldset dl.colspan-3 div.col-4,
+  form.semanticForms fieldset dl.colspan-3 div.col-5,
+  form.semanticForms fieldset dl.colspan-4 div.col-2,
+  form.semanticForms fieldset dl.colspan-4 div.col-3,
+  form.semanticForms fieldset dl.colspan-4 div.col-4,
+  form.semanticForms fieldset dl.colspan-4 div.col-5,
+  form.semanticForms fieldset dl.colspan-5 div.col-2,
+  form.semanticForms fieldset dl.colspan-5 div.col-3,
+  form.semanticForms fieldset dl.colspan-5 div.col-4,
+  form.semanticForms fieldset dl.colspan-5 div.col-5 {
+    grid-column-start: auto;
   }
 }
 
+.semanticForms .tabs.semanticFormsTabsActive {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+}
+.semanticForms .tabs.semanticFormsTabsActive .tabList {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 3px;
+  margin-bottom: -1px;
+}
+.semanticForms .tabs.semanticFormsTabsActive button[role=tab] {
+  appearance: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--semanticFormsInputFontSize);
+  line-height: 1;
+  color: var(--semanticFormsTextColor);
+  margin: 0;
+  padding: 9px 20px;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background-image: linear-gradient(to bottom, var(--semanticFormsButtonGradientLight) 0%, var(--semanticFormsButtonGradientDark) 100%);
+  background-origin: border-box;
+  border: 1px solid var(--semanticFormsSubBorderColor);
+  border-radius: var(--semanticFormsBorderRadius) var(--semanticFormsBorderRadius) 0 0;
+  transition: padding 120ms ease-out;
+}
+.semanticForms .tabs.semanticFormsTabsActive button[role=tab]:hover:not([aria-selected=true]) {
+  padding-bottom: 12px;
+}
+.semanticForms .tabs.semanticFormsTabsActive button[role=tab][aria-selected=true] {
+  background-image: none;
+  background-color: var(--semanticFormsFormSubBgColor);
+  border-bottom-color: var(--semanticFormsFormSubBgColor);
+  padding-bottom: 12px;
+}
+.semanticForms .tabs.semanticFormsTabsActive button[role=tab]:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--semanticFormsFocusColor);
+}
+.semanticForms .tabs.semanticFormsTabsActive fieldset {
+  margin: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.semanticForms .tabs.semanticFormsTabsActive fieldset[hidden] {
+  display: none;
+}
+
 form.semanticForms.lowFlow,
 form.semanticForms:not(.semanticFormsActive) {
   gap: 10px;
@@ -1099,26 +1411,30 @@ form.semanticForms:not(.semanticFormsActive) dl {
   gap: 10px;
   margin-bottom: 0px;
 }
-form.semanticForms.lowFlow div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]),
-form.semanticForms:not(.semanticFormsActive) div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) {
+form.semanticForms.lowFlow div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]),
+form.semanticForms:not(.semanticFormsActive) div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]) {
   padding-left: 11px;
 }
-form.semanticForms.lowFlow div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]):has(dd > input[type=radio]),
-form.semanticForms:not(.semanticFormsActive) div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]):has(dd > input[type=radio]) {
+form.semanticForms.lowFlow div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]):has(> dd > input[type=radio]),
+form.semanticForms:not(.semanticFormsActive) div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]):has(> dd > input[type=radio]) {
   margin-top: -2px;
 }
-form.semanticForms.lowFlow div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dt label,
-form.semanticForms:not(.semanticFormsActive) div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dt label {
+form.semanticForms.lowFlow div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]) dt label,
+form.semanticForms:not(.semanticFormsActive) div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]) dt label {
   transform: scale(1);
   margin-top: 4px;
   margin-left: -4px;
 }
-form.semanticForms.lowFlow div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dd,
-form.semanticForms:not(.semanticFormsActive) div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dd {
+form.semanticForms.lowFlow div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]):has(dd > input[type=checkbox][switch]) dt label,
+form.semanticForms:not(.semanticFormsActive) div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]):has(dd > input[type=checkbox][switch]) dt label {
+  padding-left: 45px;
+}
+form.semanticForms.lowFlow div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]) dd,
+form.semanticForms:not(.semanticFormsActive) div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]) dd {
   margin-top: 0;
 }
-form.semanticForms.lowFlow div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dd label,
-form.semanticForms:not(.semanticFormsActive) div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dd label {
+form.semanticForms.lowFlow div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]) dd label,
+form.semanticForms:not(.semanticFormsActive) div:not(:has(> dd > ul)):has(> dd > input[type=checkbox], > dd > input[type=radio]) dd label {
   font-size: small;
   margin-top: -2px;
   padding-left: 10px;
@@ -1156,7 +1472,7 @@ form.semanticForms:not(.semanticFormsActive) div:has(.align-end) dd {
 }
 form.semanticForms.lowFlow dt,
 form.semanticForms:not(.semanticFormsActive) dt {
-  min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */
+  min-width: var(--semanticFormsInputMinWidth);
 }
 form.semanticForms.lowFlow dt label,
 form.semanticForms:not(.semanticFormsActive) dt label {
@@ -1178,10 +1494,16 @@ form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label,
 form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.radios) label {
   padding-left: 15px;
 }
+form.semanticForms.lowFlow .checkboxes ul,
+form.semanticForms.lowFlow .radios ul,
+form.semanticForms:not(.semanticFormsActive) .checkboxes ul,
+form.semanticForms:not(.semanticFormsActive) .radios ul {
+  margin-top: var(--semanticFormsInputTopMargin);
+}
 form.semanticForms.lowFlow dd,
 form.semanticForms:not(.semanticFormsActive) dd {
   margin-top: var(--semanticFormsInputTopMargin);
-  min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */
+  min-width: var(--semanticFormsInputMinWidth);
 }
 form.semanticForms.lowFlow dd.checkboxes, form.semanticForms.lowFlow dd.radios,
 form.semanticForms:not(.semanticFormsActive) dd.checkboxes,
@@ -1230,11 +1552,6 @@ form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .
   margin-top: 0;
 }
 
-.checkboxes ul,
-.radios ul {
-  margin-top: var(--semanticFormsInputTopMargin);
-}
-
 .semanticForms fieldset {
   border-radius: var(--semanticFormsBorderRadius);
   background: var(--semanticFormsFormSubBgColor);
@@ -1292,7 +1609,7 @@ form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .
   margin-bottom: 10px;
   line-height: 1;
   position: absolute;
-  top: 10px;
+  top: calc(10px - var(--semanticFormsTextInkOffset, 0px));
   left: 22px;
   transition: top 250ms;
 }
@@ -1306,7 +1623,7 @@ form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .
   border-color: transparent transparent transparent var(--semanticFormsTextColor);
   position: absolute;
   top: 0;
-  left: -10px;
+  left: -14px;
   transform: rotate(0);
   transform-origin: 0.2rem 50%;
   transition: 250ms transform ease;
@@ -1345,7 +1662,7 @@ form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .
 }
 .semanticForms dl {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
   gap: 10px;
   margin: 0;
 }
@@ -1383,6 +1700,9 @@ form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .
   padding-left: 11px;
   gap: 5px 10px;
 }
+.semanticForms dl div dd.singleCheckbox:has(input[type=checkbox][switch]), .semanticForms dl div dd.singleRadio:has(input[type=checkbox][switch]) {
+  grid-template-columns: 34px 1fr;
+}
 .semanticForms dl div dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label), .semanticForms dl div dd.singleRadio > :not(input[type=checkbox], input[type=radio], label) {
   grid-column: 1/-1;
 }
@@ -1436,7 +1756,7 @@ form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .
   grid-column: 2/3;
   width: 100%;
   max-width: 100%;
-  padding: 10px;
+  padding: calc(10px - var(--semanticFormsFieldTextInkOffset, 0px)) 10px calc(10px + var(--semanticFormsFieldTextInkOffset, 0px));
   height: var(--semanticFormsInputHeight);
   text-overflow: ellipsis;
   white-space: nowrap;