diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..24a8e87
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 083920c..2f797ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 5.3.0
+
+- Added `align-start`, `align-center`, and `align-end` classes that align form inputs within their available space.
+- Added the ability to include individual buttons into the responsive form grid.
+- Updated the preferred form markup to wrap each `<dt>` and `<dd>` pair in a `<div>`.
+
 ## 5.2.2
 
 - Fixed a bug in `data-auto-grow` fields that would apply a scrollbar inappropriately.
diff --git a/dist/semantic-forms.css b/dist/semantic-forms.css
index 3c6b9ae..69af85f 100644
--- a/dist/semantic-forms.css
+++ b/dist/semantic-forms.css
@@ -1,10 +1,13 @@
-form.semanticForms, form.semanticForms.light, table.semanticForms {
+form.semanticForms,
+form.semanticForms.light,
+table.semanticForms {
   --semanticFormsFontFamily: sans-serif;
   --semanticFormsFontSize: 16px;
   --semanticFormsFormBgColor: #fff;
   --semanticFormsFormSubBgColor: #f5f5f5;
   --semanticFormsTextColor: #000;
   --semanticFormsBorderColor: #c0c0c0;
+  --semanticFormsFocusColor: #c0c0c0;
   --semanticFormsSubBorderColor: #c0c0c0;
   --semanticFormsPlaceholderColor: rgba(0, 0, 0, 0.75);
   --semanticFormsScrollbarColor: #c0c0c0;
@@ -19,6 +22,7 @@ form.semanticForms, form.semanticForms.light, table.semanticForms {
   --semanticFormsInputFontSize: 16px;
   --semanticFormsInputTopMargin: 15px;
   --semanticFormsInputMinWidth: 250px;
+  --semanticFormsInputMaxWidth: 365px;
   --semanticFormsBorderRadius: 10px;
   --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.3 c h / 0.05);
   --semanticFormsNestedFieldsetBorder: 1px rgba(0, 0, 0, .2) solid;
@@ -32,6 +36,95 @@ form.semanticForms, form.semanticForms.light, table.semanticForms {
   --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000'%3E%3Cpolygon points='0,0 100,0 50,50'/%3E%3C/svg%3E");
   --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E");
   --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
+  font-family: var(--semanticFormsFontFamily);
+  font-size: var(--semanticFormsFontSize);
+  width: 100%;
+  overflow-x: hidden;
+}
+form.semanticForms:not(table),
+form.semanticForms.light:not(table),
+table.semanticForms:not(table) {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+@supports (interpolate-size: allow-keywords) {
+  form.semanticForms,
+  form.semanticForms.light,
+  table.semanticForms {
+    interpolate-size: allow-keywords;
+  }
+}
+form.semanticForms [hidden],
+form.semanticForms.light [hidden],
+table.semanticForms [hidden] {
+  display: none !important;
+}
+form.semanticForms div:has(dd[hidden]),
+form.semanticForms.light div:has(dd[hidden]),
+table.semanticForms div:has(dd[hidden]) {
+  display: none !important;
+}
+form.semanticForms fieldset,
+form.semanticForms label,
+form.semanticForms input,
+form.semanticForms select,
+form.semanticForms textarea,
+form.semanticForms button,
+form.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
+form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea),
+form.semanticForms dt:has(> input, > select, > textarea),
+form.semanticForms dd:has(> input, > select, > textarea, > ul, > menu),
+form.semanticForms div:has(dt, dd),
+form.semanticForms dd > p,
+form.semanticForms.light fieldset,
+form.semanticForms.light label,
+form.semanticForms.light input,
+form.semanticForms.light select,
+form.semanticForms.light textarea,
+form.semanticForms.light button,
+form.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea),
+form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea),
+form.semanticForms.light dt:has(> input, > select, > textarea),
+form.semanticForms.light dd:has(> input, > select, > textarea, > ul, > menu),
+form.semanticForms.light div:has(dt, dd),
+form.semanticForms.light dd > p,
+table.semanticForms fieldset,
+table.semanticForms label,
+table.semanticForms input,
+table.semanticForms select,
+table.semanticForms textarea,
+table.semanticForms button,
+table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
+table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea),
+table.semanticForms dt:has(> input, > select, > textarea),
+table.semanticForms dd:has(> input, > select, > textarea, > ul, > menu),
+table.semanticForms div:has(dt, dd),
+table.semanticForms dd > p {
+  color: var(--semanticFormsTextColor);
+  font-family: var(--semanticFormsFontFamily);
+  box-sizing: border-box;
+}
+form.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
+form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea),
+form.semanticForms dt:has(> input, > select, > textarea),
+form.semanticForms dd:has(> input, > select, > textarea, > ul, > menu),
+form.semanticForms div:has(dt, dd),
+form.semanticForms dd > p,
+form.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea),
+form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea),
+form.semanticForms.light dt:has(> input, > select, > textarea),
+form.semanticForms.light dd:has(> input, > select, > textarea, > ul, > menu),
+form.semanticForms.light div:has(dt, dd),
+form.semanticForms.light dd > p,
+table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
+table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea),
+table.semanticForms dt:has(> input, > select, > textarea),
+table.semanticForms dd:has(> input, > select, > textarea, > ul, > menu),
+table.semanticForms div:has(dt, dd),
+table.semanticForms dd > p {
+  margin: 0;
+  padding: 0;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -41,6 +134,7 @@ form.semanticForms, form.semanticForms.light, table.semanticForms {
     --semanticFormsFormSubBgColor: #2f2f2f;
     --semanticFormsTextColor: #fff;
     --semanticFormsBorderColor: #656565;
+    --semanticFormsFocusColor: #656565;
     --semanticFormsSubBorderColor: #3f3f3f;
     --semanticFormsPlaceholderColor: rgba(255, 255, 255, 0.85);
     --semanticFormsScrollbarColor: #373737;
@@ -70,6 +164,7 @@ html:not(.light) body:not(.light) form.semanticForms.dark, html:not(.light) body
   --semanticFormsFormSubBgColor: #2f2f2f;
   --semanticFormsTextColor: #fff;
   --semanticFormsBorderColor: #656565;
+  --semanticFormsFocusColor: #656565;
   --semanticFormsSubBorderColor: #3f3f3f;
   --semanticFormsPlaceholderColor: rgba(255, 255, 255, 0.85);
   --semanticFormsScrollbarColor: #373737;
@@ -93,12 +188,14 @@ html:not(.light) body:not(.light) form.semanticForms.dark input::-webkit-calenda
   filter: invert(100%);
 }
 
-form.semanticForms.dark, table.semanticForms.dark {
+form.semanticForms.dark,
+table.semanticForms.dark {
   --semanticFormsFormBgColor: #555;
   --inputBackgroudColor: rgba(85,85,85,0.1);
   --semanticFormsFormSubBgColor: #2f2f2f;
   --semanticFormsTextColor: #fff;
   --semanticFormsBorderColor: #656565;
+  --semanticFormsFocusColor: #656565;
   --semanticFormsSubBorderColor: #3f3f3f;
   --semanticFormsPlaceholderColor: rgba(255, 255, 255, 0.85);
   --semanticFormsScrollbarColor: #373737;
@@ -118,122 +215,29 @@ form.semanticForms.dark, table.semanticForms.dark {
   --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E");
   --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
 }
-form.semanticForms.dark input::-webkit-calendar-picker-indicator, table.semanticForms.dark input::-webkit-calendar-picker-indicator {
+form.semanticForms.dark input::-webkit-calendar-picker-indicator,
+table.semanticForms.dark input::-webkit-calendar-picker-indicator {
   filter: invert(100%);
 }
 
-form.semanticForms,
-form.semanticForms.light,
-table.semanticForms,
-table.semanticForms.light {
-  font-family: var(--semanticFormsFontFamily);
-  font-size: var(--semanticFormsFontSize);
-  width: 100%;
-}
-@supports (interpolate-size: allow-keywords) {
-  form.semanticForms,
-  form.semanticForms.light,
-  table.semanticForms,
-  table.semanticForms.light {
-    interpolate-size: allow-keywords;
-  }
-}
-form.semanticForms [hidden],
-form.semanticForms.light [hidden],
-table.semanticForms [hidden],
-table.semanticForms.light [hidden] {
-  display: none !important;
-}
-form.semanticForms div:has(dd[hidden]),
-form.semanticForms.light div:has(dd[hidden]),
-table.semanticForms div:has(dd[hidden]),
-table.semanticForms.light div:has(dd[hidden]) {
-  display: none !important;
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
+.semanticForms select {
+  height: var(--semanticFormsInputHeight);
 }
-form.semanticForms:not(table),
-form.semanticForms.light:not(table),
-table.semanticForms:not(table),
-table.semanticForms.light:not(table) {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.semanticForms input[type=checkbox],
+.semanticForms input[type=radio] {
+  width: 18px;
+  height: 18px;
+  margin: 3px 0;
+  cursor: pointer;
 }
-form.semanticForms fieldset,
-form.semanticForms label,
-form.semanticForms input,
-form.semanticForms select,
-form.semanticForms textarea,
-form.semanticForms button,
-form.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea),
-form.semanticForms dt:has(> input, > select, > textarea),
-form.semanticForms dd:has(> input, > select, > textarea, > ul, > menu),
-form.semanticForms div:has(dt, dd),
-form.semanticForms dd > p,
-form.semanticForms.light fieldset,
-form.semanticForms.light label,
-form.semanticForms.light input,
-form.semanticForms.light select,
-form.semanticForms.light textarea,
-form.semanticForms.light button,
-form.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea),
-form.semanticForms.light dt:has(> input, > select, > textarea),
-form.semanticForms.light dd:has(> input, > select, > textarea, > ul, > menu),
-form.semanticForms.light div:has(dt, dd),
-form.semanticForms.light dd > p,
-table.semanticForms fieldset,
-table.semanticForms label,
-table.semanticForms input,
-table.semanticForms select,
-table.semanticForms textarea,
-table.semanticForms button,
-table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea),
-table.semanticForms dt:has(> input, > select, > textarea),
-table.semanticForms dd:has(> input, > select, > textarea, > ul, > menu),
-table.semanticForms div:has(dt, dd),
-table.semanticForms dd > p,
-table.semanticForms.light fieldset,
-table.semanticForms.light label,
-table.semanticForms.light input,
-table.semanticForms.light select,
-table.semanticForms.light textarea,
-table.semanticForms.light button,
-table.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea),
-table.semanticForms.light dt:has(> input, > select, > textarea),
-table.semanticForms.light dd:has(> input, > select, > textarea, > ul, > menu),
-table.semanticForms.light div:has(dt, dd),
-table.semanticForms.light dd > p {
+.semanticForms input[type=checkbox] ~ label:first-of-type,
+.semanticForms input[type=radio] ~ label:first-of-type {
   color: var(--semanticFormsTextColor);
-  font-family: var(--semanticFormsFontFamily);
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-form.semanticForms select,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-form.semanticForms.light select,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-table.semanticForms select,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-table.semanticForms.light select {
-  height: var(--semanticFormsInputHeight);
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-form.semanticForms select,
-form.semanticForms textarea,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-form.semanticForms.light select,
-form.semanticForms.light textarea,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-table.semanticForms select,
-table.semanticForms textarea,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-table.semanticForms.light select,
-table.semanticForms.light textarea {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
+.semanticForms select,
+.semanticForms textarea {
   font-size: var(--semanticFormsInputFontSize);
   background: var(--semanticFormsFormBgColor);
   border: var(--semanticFormsBorder);
@@ -242,301 +246,83 @@ table.semanticForms.light textarea {
   touch-action: manipulation;
   outline: none;
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]):not([type=range]),
-form.semanticForms select:not([type=range]),
-form.semanticForms textarea:not([type=range]),
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]):not([type=range]),
-form.semanticForms.light select:not([type=range]),
-form.semanticForms.light textarea:not([type=range]),
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]):not([type=range]),
-table.semanticForms select:not([type=range]),
-table.semanticForms textarea:not([type=range]),
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]):not([type=range]),
-table.semanticForms.light select:not([type=range]),
-table.semanticForms.light textarea:not([type=range]) {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]):focus,
+.semanticForms select:focus,
+.semanticForms textarea:focus {
+  outline: none;
+  box-shadow: 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;
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) input:not([type=submit], [type=reset], [type=image]):focus,
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) select:focus,
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) textarea:focus,
-form.semanticForms select input:not([type=submit], [type=reset], [type=image]):focus,
-form.semanticForms select select:focus,
-form.semanticForms select textarea:focus,
-form.semanticForms textarea input:not([type=submit], [type=reset], [type=image]):focus,
-form.semanticForms textarea select:focus,
-form.semanticForms textarea textarea:focus,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) input:not([type=submit], [type=reset], [type=image]):focus,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) select:focus,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) textarea:focus,
-form.semanticForms.light select input:not([type=submit], [type=reset], [type=image]):focus,
-form.semanticForms.light select select:focus,
-form.semanticForms.light select textarea:focus,
-form.semanticForms.light textarea input:not([type=submit], [type=reset], [type=image]):focus,
-form.semanticForms.light textarea select:focus,
-form.semanticForms.light textarea textarea:focus,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) input:not([type=submit], [type=reset], [type=image]):focus,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) select:focus,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) textarea:focus,
-table.semanticForms select input:not([type=submit], [type=reset], [type=image]):focus,
-table.semanticForms select select:focus,
-table.semanticForms select textarea:focus,
-table.semanticForms textarea input:not([type=submit], [type=reset], [type=image]):focus,
-table.semanticForms textarea select:focus,
-table.semanticForms textarea textarea:focus,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) input:not([type=submit], [type=reset], [type=image]):focus,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) select:focus,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]) textarea:focus,
-table.semanticForms.light select input:not([type=submit], [type=reset], [type=image]):focus,
-table.semanticForms.light select select:focus,
-table.semanticForms.light select textarea:focus,
-table.semanticForms.light textarea input:not([type=submit], [type=reset], [type=image]):focus,
-table.semanticForms.light textarea select:focus,
-table.semanticForms.light textarea textarea:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px var(--semanticFormsBorderColor);
-}
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=password], form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=text]:has(~ button.show),
-form.semanticForms select[type=password],
-form.semanticForms select[type=text]:has(~ button.show),
-form.semanticForms textarea[type=password],
-form.semanticForms textarea[type=text]:has(~ button.show),
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=password],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=text]:has(~ button.show),
-form.semanticForms.light select[type=password],
-form.semanticForms.light select[type=text]:has(~ button.show),
-form.semanticForms.light textarea[type=password],
-form.semanticForms.light textarea[type=text]:has(~ button.show),
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=password],
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=text]:has(~ button.show),
-table.semanticForms select[type=password],
-table.semanticForms select[type=text]:has(~ button.show),
-table.semanticForms textarea[type=password],
-table.semanticForms textarea[type=text]:has(~ button.show),
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=password],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=text]:has(~ button.show),
-table.semanticForms.light select[type=password],
-table.semanticForms.light select[type=text]:has(~ button.show),
-table.semanticForms.light textarea[type=password],
-table.semanticForms.light textarea[type=text]:has(~ button.show) {
+.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;
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search],
-form.semanticForms select[type=search],
-form.semanticForms textarea[type=search],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search],
-form.semanticForms.light select[type=search],
-form.semanticForms.light textarea[type=search],
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search],
-table.semanticForms select[type=search],
-table.semanticForms textarea[type=search],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search],
-table.semanticForms.light select[type=search],
-table.semanticForms.light textarea[type=search] {
+.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;
   background: var(--semanticFormsSearchIcon) no-repeat 10px;
   background-color: var(--semanticFormsFormBgColor);
   background-size: 18px;
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:focus + label.floatLabelFormAnimatedLabel, form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
-form.semanticForms select[type=search]:focus + label.floatLabelFormAnimatedLabel,
-form.semanticForms select[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
-form.semanticForms textarea[type=search]:focus + label.floatLabelFormAnimatedLabel,
-form.semanticForms textarea[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:focus + label.floatLabelFormAnimatedLabel,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
-form.semanticForms.light select[type=search]:focus + label.floatLabelFormAnimatedLabel,
-form.semanticForms.light select[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
-form.semanticForms.light textarea[type=search]:focus + label.floatLabelFormAnimatedLabel,
-form.semanticForms.light textarea[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:focus + label.floatLabelFormAnimatedLabel,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
-table.semanticForms select[type=search]:focus + label.floatLabelFormAnimatedLabel,
-table.semanticForms select[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
-table.semanticForms textarea[type=search]:focus + label.floatLabelFormAnimatedLabel,
-table.semanticForms textarea[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:focus + label.floatLabelFormAnimatedLabel,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
-table.semanticForms.light select[type=search]:focus + label.floatLabelFormAnimatedLabel,
-table.semanticForms.light select[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
-table.semanticForms.light textarea[type=search]:focus + label.floatLabelFormAnimatedLabel,
-table.semanticForms.light textarea[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=search]:focus + label.floatLabelFormAnimatedLabel, .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
+.semanticForms select[type=search]:focus + label.floatLabelFormAnimatedLabel,
+.semanticForms select[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
+.semanticForms textarea[type=search]:focus + label.floatLabelFormAnimatedLabel,
+.semanticForms textarea[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel {
   left: 20px;
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]::-webkit-search-cancel-button,
-form.semanticForms select[type=search]::-webkit-search-cancel-button,
-form.semanticForms textarea[type=search]::-webkit-search-cancel-button,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]::-webkit-search-cancel-button,
-form.semanticForms.light select[type=search]::-webkit-search-cancel-button,
-form.semanticForms.light textarea[type=search]::-webkit-search-cancel-button,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]::-webkit-search-cancel-button,
-table.semanticForms select[type=search]::-webkit-search-cancel-button,
-table.semanticForms textarea[type=search]::-webkit-search-cancel-button,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=search]::-webkit-search-cancel-button,
-table.semanticForms.light select[type=search]::-webkit-search-cancel-button,
-table.semanticForms.light textarea[type=search]::-webkit-search-cancel-button {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=search]::-webkit-search-cancel-button,
+.semanticForms select[type=search]::-webkit-search-cancel-button,
+.semanticForms textarea[type=search]::-webkit-search-cancel-button {
   display: none;
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox], form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio],
-form.semanticForms select[type=checkbox],
-form.semanticForms select[type=radio],
-form.semanticForms textarea[type=checkbox],
-form.semanticForms textarea[type=radio],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio],
-form.semanticForms.light select[type=checkbox],
-form.semanticForms.light select[type=radio],
-form.semanticForms.light textarea[type=checkbox],
-form.semanticForms.light textarea[type=radio],
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox],
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio],
-table.semanticForms select[type=checkbox],
-table.semanticForms select[type=radio],
-table.semanticForms textarea[type=checkbox],
-table.semanticForms textarea[type=radio],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio],
-table.semanticForms.light select[type=checkbox],
-table.semanticForms.light select[type=radio],
-table.semanticForms.light textarea[type=checkbox],
-table.semanticForms.light textarea[type=radio] {
-  width: 18px;
-  height: 18px;
-  margin: 3px 0;
-  cursor: pointer;
-}
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox] ~ label:first-of-type, form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio] ~ label:first-of-type,
-form.semanticForms select[type=checkbox] ~ label:first-of-type,
-form.semanticForms select[type=radio] ~ label:first-of-type,
-form.semanticForms textarea[type=checkbox] ~ label:first-of-type,
-form.semanticForms textarea[type=radio] ~ label:first-of-type,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox] ~ label:first-of-type,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio] ~ label:first-of-type,
-form.semanticForms.light select[type=checkbox] ~ label:first-of-type,
-form.semanticForms.light select[type=radio] ~ label:first-of-type,
-form.semanticForms.light textarea[type=checkbox] ~ label:first-of-type,
-form.semanticForms.light textarea[type=radio] ~ label:first-of-type,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox] ~ label:first-of-type,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio] ~ label:first-of-type,
-table.semanticForms select[type=checkbox] ~ label:first-of-type,
-table.semanticForms select[type=radio] ~ label:first-of-type,
-table.semanticForms textarea[type=checkbox] ~ label:first-of-type,
-table.semanticForms textarea[type=radio] ~ label:first-of-type,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=checkbox] ~ label:first-of-type,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=radio] ~ label:first-of-type,
-table.semanticForms.light select[type=checkbox] ~ label:first-of-type,
-table.semanticForms.light select[type=radio] ~ label:first-of-type,
-table.semanticForms.light textarea[type=checkbox] ~ label:first-of-type,
-table.semanticForms.light textarea[type=radio] ~ label:first-of-type {
-  color: var(--semanticFormsTextColor);
-}
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=range], form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color],
-form.semanticForms select[type=range],
-form.semanticForms select[type=color],
-form.semanticForms textarea[type=range],
-form.semanticForms textarea[type=color],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=range],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color],
-form.semanticForms.light select[type=range],
-form.semanticForms.light select[type=color],
-form.semanticForms.light textarea[type=range],
-form.semanticForms.light textarea[type=color],
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=range],
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color],
-table.semanticForms select[type=range],
-table.semanticForms select[type=color],
-table.semanticForms textarea[type=range],
-table.semanticForms textarea[type=color],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=range],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color],
-table.semanticForms.light select[type=range],
-table.semanticForms.light select[type=color],
-table.semanticForms.light textarea[type=range],
-table.semanticForms.light textarea[type=color] {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=range], .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=color],
+.semanticForms select[type=range],
+.semanticForms select[type=color],
+.semanticForms textarea[type=range],
+.semanticForms textarea[type=color] {
   cursor: pointer;
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color],
-form.semanticForms select[type=color],
-form.semanticForms textarea[type=color],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color],
-form.semanticForms.light select[type=color],
-form.semanticForms.light textarea[type=color],
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color],
-table.semanticForms select[type=color],
-table.semanticForms textarea[type=color],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=color],
-table.semanticForms.light select[type=color],
-table.semanticForms.light textarea[type=color] {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=color],
+.semanticForms select[type=color],
+.semanticForms textarea[type=color] {
   height: var(--semanticFormsInputHeight);
   padding: 4px 30px 4px 10px;
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=file],
-form.semanticForms select[type=file],
-form.semanticForms textarea[type=file],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=file],
-form.semanticForms.light select[type=file],
-form.semanticForms.light textarea[type=file],
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=file],
-table.semanticForms select[type=file],
-table.semanticForms textarea[type=file],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[type=file],
-table.semanticForms.light select[type=file],
-table.semanticForms.light textarea[type=file] {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=file],
+.semanticForms select[type=file],
+.semanticForms textarea[type=file] {
   cursor: pointer;
   font-size: var(--semanticFormsInputFontSize);
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled],
-form.semanticForms select[disabled],
-form.semanticForms textarea[disabled],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled],
-form.semanticForms.light select[disabled],
-form.semanticForms.light textarea[disabled],
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled],
-table.semanticForms select[disabled],
-table.semanticForms textarea[disabled],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled],
-table.semanticForms.light select[disabled],
-table.semanticForms.light textarea[disabled] {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[disabled],
+.semanticForms select[disabled],
+.semanticForms textarea[disabled] {
   cursor: not-allowed;
   opacity: 0.5;
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label:first-of-type,
-form.semanticForms select[disabled] ~ label:first-of-type,
-form.semanticForms textarea[disabled] ~ label:first-of-type,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label:first-of-type,
-form.semanticForms.light select[disabled] ~ label:first-of-type,
-form.semanticForms.light textarea[disabled] ~ label:first-of-type,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label:first-of-type,
-table.semanticForms select[disabled] ~ label:first-of-type,
-table.semanticForms textarea[disabled] ~ label:first-of-type,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label:first-of-type,
-table.semanticForms.light select[disabled] ~ label:first-of-type,
-table.semanticForms.light textarea[disabled] ~ label:first-of-type {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[disabled] ~ label:first-of-type,
+.semanticForms select[disabled] ~ label:first-of-type,
+.semanticForms textarea[disabled] ~ label:first-of-type {
   opacity: 0.5;
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label + button,
-form.semanticForms select[disabled] ~ label + button,
-form.semanticForms textarea[disabled] ~ label + button,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label + button,
-form.semanticForms.light select[disabled] ~ label + button,
-form.semanticForms.light textarea[disabled] ~ label + button,
-table.semanticForms input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label + button,
-table.semanticForms select[disabled] ~ label + button,
-table.semanticForms textarea[disabled] ~ label + button,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio])[disabled] ~ label + button,
-table.semanticForms.light select[disabled] ~ label + button,
-table.semanticForms.light textarea[disabled] ~ label + button {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[disabled] ~ label + button,
+.semanticForms select[disabled] ~ label + button,
+.semanticForms textarea[disabled] ~ label + button {
   display: none;
 }
-form.semanticForms select,
-form.semanticForms.light select,
-table.semanticForms select,
-table.semanticForms.light select {
+.semanticForms select {
   cursor: pointer;
 }
-form.semanticForms select:not([multiple]),
-form.semanticForms.light select:not([multiple]),
-table.semanticForms select:not([multiple]),
-table.semanticForms.light select:not([multiple]) {
+.semanticForms select:not([multiple]) {
   background-image: var(--semanticFormsSelectIcon);
   background-size: 14px;
   background-position: calc(100% - 8px) 16px;
@@ -545,54 +331,30 @@ table.semanticForms.light select:not([multiple]) {
   -moz-appearance: none;
   appearance: none;
 }
-form.semanticForms select[multiple],
-form.semanticForms.light select[multiple],
-table.semanticForms select[multiple],
-table.semanticForms.light select[multiple] {
+.semanticForms select[multiple] {
   min-height: 38px;
   height: 100px;
   padding: 0;
 }
-form.semanticForms select[multiple] option,
-form.semanticForms.light select[multiple] option,
-table.semanticForms select[multiple] option,
-table.semanticForms.light select[multiple] option {
+.semanticForms select[multiple] option {
   padding: 6px 20px;
 }
-form.semanticForms select[multiple] option:first-of-type,
-form.semanticForms.light select[multiple] option:first-of-type,
-table.semanticForms select[multiple] option:first-of-type,
-table.semanticForms.light select[multiple] option:first-of-type {
+.semanticForms select[multiple] option:first-of-type {
   border-top-left-radius: var(--semanticFormsBorderRadius);
 }
-form.semanticForms select[multiple] option:last-of-type,
-form.semanticForms.light select[multiple] option:last-of-type,
-table.semanticForms select[multiple] option:last-of-type,
-table.semanticForms.light select[multiple] option:last-of-type {
+.semanticForms select[multiple] option:last-of-type {
   border-bottom-left-radius: var(--semanticFormsBorderRadius);
 }
-form.semanticForms textarea,
-form.semanticForms.light textarea,
-table.semanticForms textarea,
-table.semanticForms.light textarea {
+.semanticForms textarea {
   resize: vertical;
   line-height: 1.5;
   width: 100%;
   min-height: 38px;
 }
-form.semanticForms textarea[data-auto-grow],
-form.semanticForms.light textarea[data-auto-grow],
-table.semanticForms textarea[data-auto-grow],
-table.semanticForms.light textarea[data-auto-grow] {
+.semanticForms textarea[data-auto-grow] {
   field-sizing: content;
 }
-form.semanticForms button.clear, form.semanticForms button.show,
-form.semanticForms.light button.clear,
-form.semanticForms.light button.show,
-table.semanticForms button.clear,
-table.semanticForms button.show,
-table.semanticForms.light button.clear,
-table.semanticForms.light button.show {
+.semanticForms button.clear, .semanticForms button.show {
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
@@ -611,52 +373,26 @@ table.semanticForms.light button.show {
   align-items: center;
   justify-content: center;
 }
-form.semanticForms button.show,
-form.semanticForms.light button.show,
-table.semanticForms button.show,
-table.semanticForms.light button.show {
+.semanticForms button.show {
   right: 25px;
 }
-form.semanticForms textarea ~ .clear,
-form.semanticForms.light textarea ~ .clear,
-table.semanticForms textarea ~ .clear,
-table.semanticForms.light textarea ~ .clear {
+.semanticForms button.show svg {
+  height: 100%;
+}
+.semanticForms textarea ~ .clear {
   bottom: auto;
 }
-form.semanticForms input:placeholder-shown ~ .clear,
-form.semanticForms input:placeholder-shown ~ .show,
-form.semanticForms textarea:placeholder-shown ~ .clear,
-form.semanticForms input[type=file] ~ .clear,
-form.semanticForms.light input:placeholder-shown ~ .clear,
-form.semanticForms.light input:placeholder-shown ~ .show,
-form.semanticForms.light textarea:placeholder-shown ~ .clear,
-form.semanticForms.light input[type=file] ~ .clear,
-table.semanticForms input:placeholder-shown ~ .clear,
-table.semanticForms input:placeholder-shown ~ .show,
-table.semanticForms textarea:placeholder-shown ~ .clear,
-table.semanticForms input[type=file] ~ .clear,
-table.semanticForms.light input:placeholder-shown ~ .clear,
-table.semanticForms.light input:placeholder-shown ~ .show,
-table.semanticForms.light textarea:placeholder-shown ~ .clear,
-table.semanticForms.light input[type=file] ~ .clear {
+.semanticForms input:placeholder-shown ~ .clear,
+.semanticForms input:placeholder-shown ~ .show,
+.semanticForms textarea:placeholder-shown ~ .clear,
+.semanticForms input[type=file] ~ .clear {
   display: none;
 }
-form.semanticForms input[type=submit],
-form.semanticForms input[type=reset],
-form.semanticForms button:not(.clear, .show),
-form.semanticForms .button-link,
-form.semanticForms.light input[type=submit],
-form.semanticForms.light input[type=reset],
-form.semanticForms.light button:not(.clear, .show),
-form.semanticForms.light .button-link,
-table.semanticForms input[type=submit],
-table.semanticForms input[type=reset],
-table.semanticForms button:not(.clear, .show),
-table.semanticForms .button-link,
-table.semanticForms.light input[type=submit],
-table.semanticForms.light input[type=reset],
-table.semanticForms.light button:not(.clear, .show),
-table.semanticForms.light .button-link {
+.semanticForms input[type=submit],
+.semanticForms input[type=reset],
+.semanticForms input[type=button],
+.semanticForms button:not(.clear, .show),
+.semanticForms .button-link {
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -676,787 +412,199 @@ table.semanticForms.light .button-link {
   text-decoration: none;
   color: var(--semanticFormsTextColor);
 }
-form.semanticForms input[type=submit]:active,
-form.semanticForms input[type=reset]:active,
-form.semanticForms button:not(.clear, .show):active,
-form.semanticForms .button-link:active,
-form.semanticForms.light input[type=submit]:active,
-form.semanticForms.light input[type=reset]:active,
-form.semanticForms.light button:not(.clear, .show):active,
-form.semanticForms.light .button-link:active,
-table.semanticForms input[type=submit]:active,
-table.semanticForms input[type=reset]:active,
-table.semanticForms button:not(.clear, .show):active,
-table.semanticForms .button-link:active,
-table.semanticForms.light input[type=submit]:active,
-table.semanticForms.light input[type=reset]:active,
-table.semanticForms.light button:not(.clear, .show):active,
-table.semanticForms.light .button-link:active {
+.semanticForms input[type=submit]:active,
+.semanticForms input[type=reset]:active,
+.semanticForms input[type=button]:active,
+.semanticForms button:not(.clear, .show):active,
+.semanticForms .button-link:active {
   transform: scale(0.97);
 }
-form.semanticForms input[type=submit],
-form.semanticForms input[type=reset],
-form.semanticForms input[type=image],
-form.semanticForms button:not(.clear):not(.show),
-form.semanticForms .button-link,
-form.semanticForms.light input[type=submit],
-form.semanticForms.light input[type=reset],
-form.semanticForms.light input[type=image],
-form.semanticForms.light button:not(.clear):not(.show),
-form.semanticForms.light .button-link,
-table.semanticForms input[type=submit],
-table.semanticForms input[type=reset],
-table.semanticForms input[type=image],
-table.semanticForms button:not(.clear):not(.show),
-table.semanticForms .button-link,
-table.semanticForms.light input[type=submit],
-table.semanticForms.light input[type=reset],
-table.semanticForms.light input[type=image],
-table.semanticForms.light button:not(.clear):not(.show),
-table.semanticForms.light .button-link {
+.semanticForms input[type=submit],
+.semanticForms input[type=reset],
+.semanticForms input[type=button],
+.semanticForms input[type=image],
+.semanticForms button:not(.clear):not(.show),
+.semanticForms .button-link {
   transition: filter 0.1s;
 }
-form.semanticForms input[type=submit]:hover,
-form.semanticForms input[type=reset]:hover,
-form.semanticForms input[type=image]:hover,
-form.semanticForms button:not(.clear):not(.show):hover,
-form.semanticForms .button-link:hover,
-form.semanticForms.light input[type=submit]:hover,
-form.semanticForms.light input[type=reset]:hover,
-form.semanticForms.light input[type=image]:hover,
-form.semanticForms.light button:not(.clear):not(.show):hover,
-form.semanticForms.light .button-link:hover,
-table.semanticForms input[type=submit]:hover,
-table.semanticForms input[type=reset]:hover,
-table.semanticForms input[type=image]:hover,
-table.semanticForms button:not(.clear):not(.show):hover,
-table.semanticForms .button-link:hover,
-table.semanticForms.light input[type=submit]:hover,
-table.semanticForms.light input[type=reset]:hover,
-table.semanticForms.light input[type=image]:hover,
-table.semanticForms.light button:not(.clear):not(.show):hover,
-table.semanticForms.light .button-link:hover {
+.semanticForms input[type=submit]:hover,
+.semanticForms input[type=reset]:hover,
+.semanticForms input[type=button]:hover,
+.semanticForms input[type=image]:hover,
+.semanticForms button:not(.clear):not(.show):hover,
+.semanticForms .button-link:hover {
   filter: brightness(1.05);
 }
-form.semanticForms .button-link,
-form.semanticForms.light .button-link,
-table.semanticForms .button-link,
-table.semanticForms.light .button-link {
+.semanticForms .button-link {
   display: block;
 }
-form.semanticForms .button-link:visited, form.semanticForms .button-link:link,
-form.semanticForms.light .button-link:visited,
-form.semanticForms.light .button-link:link,
-table.semanticForms .button-link:visited,
-table.semanticForms .button-link:link,
-table.semanticForms.light .button-link:visited,
-table.semanticForms.light .button-link:link {
+.semanticForms .button-link:visited, .semanticForms .button-link:link {
   color: var(--semanticFormsTextColor);
 }
-form.semanticForms [data-invalid-text],
-form.semanticForms.light [data-invalid-text],
-table.semanticForms [data-invalid-text],
-table.semanticForms.light [data-invalid-text] {
+.semanticForms [data-invalid-text] {
   display: none;
   color: var(--semanticFormsInvalid);
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid, form.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid,
-form.semanticForms select.invalid,
-form.semanticForms select:user-invalid,
-form.semanticForms textarea.invalid,
-form.semanticForms textarea:user-invalid,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid,
-form.semanticForms.light select.invalid,
-form.semanticForms.light select:user-invalid,
-form.semanticForms.light textarea.invalid,
-form.semanticForms.light textarea:user-invalid,
-table.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid,
-table.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid,
-table.semanticForms select.invalid,
-table.semanticForms select:user-invalid,
-table.semanticForms textarea.invalid,
-table.semanticForms textarea:user-invalid,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid,
-table.semanticForms.light select.invalid,
-table.semanticForms.light select:user-invalid,
-table.semanticForms.light textarea.invalid,
-table.semanticForms.light textarea:user-invalid {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).invalid, .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]):user-invalid,
+.semanticForms select.invalid,
+.semanticForms select:user-invalid,
+.semanticForms textarea.invalid,
+.semanticForms textarea:user-invalid {
   border: var(--semanticFormsInvalidBorder);
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid ~ label:nth-of-type(2), form.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid ~ label:nth-of-type(2),
-form.semanticForms select.invalid ~ label:nth-of-type(2),
-form.semanticForms select:user-invalid ~ label:nth-of-type(2),
-form.semanticForms textarea.invalid ~ label:nth-of-type(2),
-form.semanticForms textarea:user-invalid ~ label:nth-of-type(2),
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid ~ label:nth-of-type(2),
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid ~ label:nth-of-type(2),
-form.semanticForms.light select.invalid ~ label:nth-of-type(2),
-form.semanticForms.light select:user-invalid ~ label:nth-of-type(2),
-form.semanticForms.light textarea.invalid ~ label:nth-of-type(2),
-form.semanticForms.light textarea:user-invalid ~ label:nth-of-type(2),
-table.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid ~ label:nth-of-type(2),
-table.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid ~ label:nth-of-type(2),
-table.semanticForms select.invalid ~ label:nth-of-type(2),
-table.semanticForms select:user-invalid ~ label:nth-of-type(2),
-table.semanticForms textarea.invalid ~ label:nth-of-type(2),
-table.semanticForms textarea:user-invalid ~ label:nth-of-type(2),
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid ~ label:nth-of-type(2),
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid ~ label:nth-of-type(2),
-table.semanticForms.light select.invalid ~ label:nth-of-type(2),
-table.semanticForms.light select:user-invalid ~ label:nth-of-type(2),
-table.semanticForms.light textarea.invalid ~ label:nth-of-type(2),
-table.semanticForms.light textarea:user-invalid ~ label:nth-of-type(2) {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).invalid ~ label:nth-of-type(2), .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]):user-invalid ~ label:nth-of-type(2),
+.semanticForms select.invalid ~ label:nth-of-type(2),
+.semanticForms select:user-invalid ~ label:nth-of-type(2),
+.semanticForms textarea.invalid ~ label:nth-of-type(2),
+.semanticForms textarea:user-invalid ~ label:nth-of-type(2) {
   color: var(--semanticFormsInvalid);
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid ~ [data-invalid-text], form.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid ~ [data-invalid-text],
-form.semanticForms select.invalid ~ [data-invalid-text],
-form.semanticForms select:user-invalid ~ [data-invalid-text],
-form.semanticForms textarea.invalid ~ [data-invalid-text],
-form.semanticForms textarea:user-invalid ~ [data-invalid-text],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid ~ [data-invalid-text],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid ~ [data-invalid-text],
-form.semanticForms.light select.invalid ~ [data-invalid-text],
-form.semanticForms.light select:user-invalid ~ [data-invalid-text],
-form.semanticForms.light textarea.invalid ~ [data-invalid-text],
-form.semanticForms.light textarea:user-invalid ~ [data-invalid-text],
-table.semanticForms input:not([type=submit], [type=reset], [type=image]).invalid ~ [data-invalid-text],
-table.semanticForms input:not([type=submit], [type=reset], [type=image]):user-invalid ~ [data-invalid-text],
-table.semanticForms select.invalid ~ [data-invalid-text],
-table.semanticForms select:user-invalid ~ [data-invalid-text],
-table.semanticForms textarea.invalid ~ [data-invalid-text],
-table.semanticForms textarea:user-invalid ~ [data-invalid-text],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).invalid ~ [data-invalid-text],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image]):user-invalid ~ [data-invalid-text],
-table.semanticForms.light select.invalid ~ [data-invalid-text],
-table.semanticForms.light select:user-invalid ~ [data-invalid-text],
-table.semanticForms.light textarea.invalid ~ [data-invalid-text],
-table.semanticForms.light textarea:user-invalid ~ [data-invalid-text] {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).invalid ~ [data-invalid-text], .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]):user-invalid ~ [data-invalid-text],
+.semanticForms select.invalid ~ [data-invalid-text],
+.semanticForms select:user-invalid ~ [data-invalid-text],
+.semanticForms textarea.invalid ~ [data-invalid-text],
+.semanticForms textarea:user-invalid ~ [data-invalid-text] {
   font-size: small;
   display: flex;
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image]).warn,
-form.semanticForms select.warn,
-form.semanticForms textarea.warn,
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn,
-form.semanticForms.light select.warn,
-form.semanticForms.light textarea.warn,
-table.semanticForms input:not([type=submit], [type=reset], [type=image]).warn,
-table.semanticForms select.warn,
-table.semanticForms textarea.warn,
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn,
-table.semanticForms.light select.warn,
-table.semanticForms.light textarea.warn {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).warn,
+.semanticForms select.warn,
+.semanticForms textarea.warn {
   border: var(--semanticFormsWarnBorder);
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image]).warn ~ label:nth-of-type(2),
-form.semanticForms select.warn ~ label:nth-of-type(2),
-form.semanticForms textarea.warn ~ label:nth-of-type(2),
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn ~ label:nth-of-type(2),
-form.semanticForms.light select.warn ~ label:nth-of-type(2),
-form.semanticForms.light textarea.warn ~ label:nth-of-type(2),
-table.semanticForms input:not([type=submit], [type=reset], [type=image]).warn ~ label:nth-of-type(2),
-table.semanticForms select.warn ~ label:nth-of-type(2),
-table.semanticForms textarea.warn ~ label:nth-of-type(2),
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn ~ label:nth-of-type(2),
-table.semanticForms.light select.warn ~ label:nth-of-type(2),
-table.semanticForms.light textarea.warn ~ label:nth-of-type(2) {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).warn ~ label:nth-of-type(2),
+.semanticForms select.warn ~ label:nth-of-type(2),
+.semanticForms textarea.warn ~ label:nth-of-type(2) {
   color: var(--semanticFormsWarn);
 }
-form.semanticForms input:not([type=submit], [type=reset], [type=image]).warn ~ [data-invalid-text],
-form.semanticForms select.warn ~ [data-invalid-text],
-form.semanticForms textarea.warn ~ [data-invalid-text],
-form.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn ~ [data-invalid-text],
-form.semanticForms.light select.warn ~ [data-invalid-text],
-form.semanticForms.light textarea.warn ~ [data-invalid-text],
-table.semanticForms input:not([type=submit], [type=reset], [type=image]).warn ~ [data-invalid-text],
-table.semanticForms select.warn ~ [data-invalid-text],
-table.semanticForms textarea.warn ~ [data-invalid-text],
-table.semanticForms.light input:not([type=submit], [type=reset], [type=image]).warn ~ [data-invalid-text],
-table.semanticForms.light select.warn ~ [data-invalid-text],
-table.semanticForms.light textarea.warn ~ [data-invalid-text] {
+.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).warn ~ [data-invalid-text],
+.semanticForms select.warn ~ [data-invalid-text],
+.semanticForms textarea.warn ~ [data-invalid-text] {
   font-size: small;
   display: flex;
 }
-form.semanticForms input:-webkit-autofill,
-form.semanticForms input:-webkit-autofill:hover,
-form.semanticForms input:-webkit-autofill:focus,
-form.semanticForms input:-webkit-autofill:active,
-form.semanticForms textarea:-webkit-autofill,
-form.semanticForms textarea:-webkit-autofill:hover,
-form.semanticForms textarea:-webkit-autofill:focus,
-form.semanticForms textarea:-webkit-autofill:active,
-form.semanticForms select:-webkit-autofill,
-form.semanticForms select:-webkit-autofill:hover,
-form.semanticForms select:-webkit-autofill:focus,
-form.semanticForms select:-webkit-autofill:active,
-form.semanticForms.light input:-webkit-autofill,
-form.semanticForms.light input:-webkit-autofill:hover,
-form.semanticForms.light input:-webkit-autofill:focus,
-form.semanticForms.light input:-webkit-autofill:active,
-form.semanticForms.light textarea:-webkit-autofill,
-form.semanticForms.light textarea:-webkit-autofill:hover,
-form.semanticForms.light textarea:-webkit-autofill:focus,
-form.semanticForms.light textarea:-webkit-autofill:active,
-form.semanticForms.light select:-webkit-autofill,
-form.semanticForms.light select:-webkit-autofill:hover,
-form.semanticForms.light select:-webkit-autofill:focus,
-form.semanticForms.light select:-webkit-autofill:active,
-table.semanticForms input:-webkit-autofill,
-table.semanticForms input:-webkit-autofill:hover,
-table.semanticForms input:-webkit-autofill:focus,
-table.semanticForms input:-webkit-autofill:active,
-table.semanticForms textarea:-webkit-autofill,
-table.semanticForms textarea:-webkit-autofill:hover,
-table.semanticForms textarea:-webkit-autofill:focus,
-table.semanticForms textarea:-webkit-autofill:active,
-table.semanticForms select:-webkit-autofill,
-table.semanticForms select:-webkit-autofill:hover,
-table.semanticForms select:-webkit-autofill:focus,
-table.semanticForms select:-webkit-autofill:active,
-table.semanticForms.light input:-webkit-autofill,
-table.semanticForms.light input:-webkit-autofill:hover,
-table.semanticForms.light input:-webkit-autofill:focus,
-table.semanticForms.light input:-webkit-autofill:active,
-table.semanticForms.light textarea:-webkit-autofill,
-table.semanticForms.light textarea:-webkit-autofill:hover,
-table.semanticForms.light textarea:-webkit-autofill:focus,
-table.semanticForms.light textarea:-webkit-autofill:active,
-table.semanticForms.light select:-webkit-autofill,
-table.semanticForms.light select:-webkit-autofill:hover,
-table.semanticForms.light select:-webkit-autofill:focus,
-table.semanticForms.light select:-webkit-autofill:active {
+.semanticForms input:-webkit-autofill,
+.semanticForms input:-webkit-autofill:hover,
+.semanticForms input:-webkit-autofill:focus,
+.semanticForms input:-webkit-autofill:active,
+.semanticForms textarea:-webkit-autofill,
+.semanticForms textarea:-webkit-autofill:hover,
+.semanticForms textarea:-webkit-autofill:focus,
+.semanticForms textarea:-webkit-autofill:active,
+.semanticForms select:-webkit-autofill,
+.semanticForms select:-webkit-autofill:hover,
+.semanticForms select:-webkit-autofill:focus,
+.semanticForms select:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 1000px var(--semanticFormsFormBgColor) inset;
   transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
   transition-delay: 5000s;
   transition-property: background-color, color;
 }
-form.semanticForms fieldset,
-form.semanticForms.light fieldset,
-table.semanticForms fieldset,
-table.semanticForms.light fieldset {
-  border-radius: var(--semanticFormsBorderRadius);
-  background: var(--semanticFormsFormSubBgColor);
-  border: 1px var(--semanticFormsSubBorderColor) solid;
+@supports (scrollbar-color: auto) {
+  .semanticForms textarea {
+    scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
+  }
+  .semanticForms textarea::-webkit-resizer {
+    border: none;
+    background-image: var(--semanticFormsCustomResizer);
+    background-size: 14px;
+    background-repeat: no-repeat;
+    background-position: 100%;
+    margin: 0 2px 2px 0;
+  }
+  .semanticForms select[multiple] {
+    scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
+  }
+}
+
+.semanticForms input[type=checkbox] + label:first-of-type,
+.semanticForms input[type=radio] + label:first-of-type {
+  padding-top: 2px;
+  font-size: var(--semanticFormsInputFontSize);
+  cursor: pointer;
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 5px;
-  padding: 10px 10px 20px 10px;
-  margin-bottom: 15px;
 }
-form.semanticForms fieldset fieldset,
-form.semanticForms.light fieldset fieldset,
-table.semanticForms fieldset fieldset,
-table.semanticForms.light fieldset fieldset {
-  background-color: var(--semanticFormsNestedFieldsetBgColor);
-  border: var(--semanticFormsNestedFieldsetBorder);
+.semanticForms input[type=checkbox] + label:first-of-type span.required,
+.semanticForms input[type=radio] + label:first-of-type span.required {
+  cursor: help;
+  pointer-events: auto;
+  color: red;
 }
-form.semanticForms fieldset fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-form.semanticForms fieldset fieldset select,
-form.semanticForms fieldset fieldset textarea,
-form.semanticForms.light fieldset fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-form.semanticForms.light fieldset fieldset select,
-form.semanticForms.light fieldset fieldset textarea,
-table.semanticForms fieldset fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-table.semanticForms fieldset fieldset select,
-table.semanticForms fieldset fieldset textarea,
-table.semanticForms.light fieldset fieldset input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio]),
-table.semanticForms.light fieldset fieldset select,
-table.semanticForms.light fieldset fieldset textarea {
-  background-color: var(--semanticFormsNestedInputBgColor);
+.semanticForms input[type=checkbox] + label:first-of-type span.help,
+.semanticForms input[type=radio] + label:first-of-type span.help {
+  display: grid;
+  place-items: center;
+  cursor: help;
+  pointer-events: auto;
 }
-form.semanticForms details,
-form.semanticForms.light details,
-table.semanticForms details,
-table.semanticForms.light details {
-  box-sizing: border-box;
+.semanticForms input[type=checkbox] + label:first-of-type span.help svg,
+.semanticForms input[type=radio] + label:first-of-type span.help svg {
+  width: 80%;
+}
+.semanticForms .floatLabelForm div dt {
   position: relative;
-  background-color: var(--semanticFormsNestedFieldsetBgColor);
-  border: var(--semanticFormsNestedFieldsetBorder);
-  border-radius: var(--semanticFormsBorderRadius);
+}
+.semanticForms .floatLabelForm div dt label {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 5px;
-  padding: 20px 10px 10px 10px;
-  margin-bottom: 15px;
-  min-height: calc(var(--semanticFormsFontSize) + 20px);
+  z-index: 2;
+  user-select: auto;
+  color: var(--semanticFormsTextColor);
+  font-size: var(--semanticFormsInputFontSize);
+  position: absolute;
+  transform-origin: left center;
+  transform: translateY(-100%) scale(0.7);
+  top: var(--semanticFormsInputTopMargin);
+  left: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  width: 100%;
 }
-form.semanticForms details::details-content,
-form.semanticForms.light details::details-content,
-table.semanticForms details::details-content,
-table.semanticForms.light details::details-content {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
+.semanticForms .floatLabelForm div dt label span.help {
+  display: grid;
+  place-items: center;
+  cursor: help;
+  pointer-events: auto;
 }
-@supports (interpolate-size: allow-keywords) {
-  form.semanticForms details,
-  form.semanticForms.light details,
-  table.semanticForms details,
-  table.semanticForms.light details {
-    transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms, height 250ms;
-  }
-  form.semanticForms details::details-content,
-  form.semanticForms.light details::details-content,
-  table.semanticForms details::details-content,
-  table.semanticForms.light details::details-content {
-    height: 0;
-    overflow: hidden;
-    transition: height 250ms, content-visibility 250ms;
-    transition-behavior: allow-discrete;
-  }
-}
-form.semanticForms details summary,
-form.semanticForms.light details summary,
-table.semanticForms details summary,
-table.semanticForms.light details summary {
-  cursor: pointer;
-  margin: 0;
-  line-height: 1;
-  position: absolute;
-  top: 10px;
-  left: 22px;
-  transition: top 250ms;
-}
-form.semanticForms details summary::-webkit-details-marker, form.semanticForms details summary::marker,
-form.semanticForms.light details summary::-webkit-details-marker,
-form.semanticForms.light details summary::marker,
-table.semanticForms details summary::-webkit-details-marker,
-table.semanticForms details summary::marker,
-table.semanticForms.light details summary::-webkit-details-marker,
-table.semanticForms.light details summary::marker {
-  content: "";
-}
-form.semanticForms details summary::before,
-form.semanticForms.light details summary::before,
-table.semanticForms details summary::before,
-table.semanticForms.light details summary::before {
-  content: "";
-  border-width: 0.4rem;
-  border-style: solid;
-  border-color: transparent transparent transparent var(--semanticFormsTextColor);
-  position: absolute;
-  top: 0;
-  left: -10px;
-  transform: rotate(0);
-  transform-origin: 0.2rem 50%;
-  transition: 250ms transform ease;
-}
-form.semanticForms details[open]::details-content,
-form.semanticForms.light details[open]::details-content,
-table.semanticForms details[open]::details-content,
-table.semanticForms.light details[open]::details-content {
-  visibility: visible;
-  opacity: 1;
-  transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
-}
-@supports (interpolate-size: allow-keywords) {
-  form.semanticForms details[open]::details-content,
-  form.semanticForms.light details[open]::details-content,
-  table.semanticForms details[open]::details-content,
-  table.semanticForms.light details[open]::details-content {
-    height: auto;
-  }
-}
-form.semanticForms details[open] summary::before,
-form.semanticForms.light details[open] summary::before,
-table.semanticForms details[open] summary::before,
-table.semanticForms.light details[open] summary::before {
-  transform: rotate(90deg);
-}
-form.semanticForms details[open] > dl:first-of-type,
-form.semanticForms.light details[open] > dl:first-of-type,
-table.semanticForms details[open] > dl:first-of-type,
-table.semanticForms.light details[open] > dl:first-of-type {
-  margin-top: 15px;
-}
-form.semanticForms details[open], form.semanticForms summary,
-form.semanticForms.light details[open],
-form.semanticForms.light summary,
-table.semanticForms details[open],
-table.semanticForms summary,
-table.semanticForms.light details[open],
-table.semanticForms.light summary {
-  margin-bottom: 10px;
-}
-@supports (scrollbar-color: auto) {
-  form.semanticForms textarea,
-  form.semanticForms.light textarea,
-  table.semanticForms textarea,
-  table.semanticForms.light textarea {
-    scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
-  }
-  form.semanticForms textarea::-webkit-resizer,
-  form.semanticForms.light textarea::-webkit-resizer,
-  table.semanticForms textarea::-webkit-resizer,
-  table.semanticForms.light textarea::-webkit-resizer {
-    border: none;
-    background-image: var(--semanticFormsCustomResizer);
-    background-size: 14px;
-    background-repeat: no-repeat;
-    background-position: 100%;
-    margin: 0 2px 2px 0;
-  }
-  form.semanticForms select[multiple],
-  form.semanticForms.light select[multiple],
-  table.semanticForms select[multiple],
-  table.semanticForms.light select[multiple] {
-    scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
-  }
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
-  gap: 10px;
-  margin-bottom: 10px;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  max-width: 100%;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio {
-  display: grid;
-  grid-template-columns: 15px 1fr;
-  align-items: center;
-  padding-left: 11px;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label), form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > :not(input[type=checkbox], input[type=radio], label),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > :not(input[type=checkbox], input[type=radio], label),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > :not(input[type=checkbox], input[type=radio], label),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > :not(input[type=checkbox], input[type=radio], label) {
-  grid-column: 1/-1;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox label:nth-of-type(2), form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio label:nth-of-type(2),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox label:nth-of-type(2),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio label:nth-of-type(2),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox label:nth-of-type(2),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio label:nth-of-type(2),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleCheckbox label:nth-of-type(2),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio label:nth-of-type(2) {
-  grid-column: 1/-1;
-  padding: 0 10px;
-  font-size: small;
-  color: var(--semanticFormsTextColor);
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > input,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > input,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > input,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.singleRadio > input {
-  margin: 0;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul {
-  display: flex;
-  flex-direction: column;
-  margin-top: var(--semanticFormsInputTopMargin);
-  padding-left: 10px;
-  gap: 5px;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul li, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul li,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul li,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul li,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul li,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul li,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes ul li,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios ul li {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes > label, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios > label,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes > label,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios > label,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes > label,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios > label,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.checkboxes > label,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd.radios > label {
-  padding-left: 20px;
-  font-size: small;
-  color: var(--semanticFormsTextColor);
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.clear, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.show,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.clear,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.show,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.clear,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.show,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.clear,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button.show {
-  right: 36%;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input:not([type=submit]), form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) select, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) textarea,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input:not([type=submit]),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) select,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) textarea,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input:not([type=submit]),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) select,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) textarea,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input:not([type=submit]),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) select,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) textarea {
-  grid-row: 1/2;
-  grid-column: 1/2;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button:not(.clear, .show),
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=submit]:not(.clear, .show),
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=button]:not(.clear, .show),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button:not(.clear, .show),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=submit]:not(.clear, .show),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=button]:not(.clear, .show),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button:not(.clear, .show),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=submit]:not(.clear, .show),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=button]:not(.clear, .show),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) button:not(.clear, .show),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=submit]:not(.clear, .show),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=button]:not(.clear, .show) {
-  grid-row: 1/2;
-  grid-column: 2/3;
+.semanticForms .floatLabelForm div:has(dd input:required) dt label {
   width: 100%;
-  max-width: 100%;
-  padding: 10px;
-  height: var(--semanticFormsInputHeight);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  display: inline-block;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:nth-of-type(2),
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:not(.floatLabelFormAnimatedLabel),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:nth-of-type(2),
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:not(.floatLabelFormAnimatedLabel),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:nth-of-type(2),
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:not(.floatLabelFormAnimatedLabel),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:nth-of-type(2),
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:not(.floatLabelFormAnimatedLabel) {
-  grid-row: 2/3;
-  grid-column: 1/-1;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) label:first-of-type,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) label:first-of-type,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) label:first-of-type,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) label:first-of-type {
-  width: calc(100% - 95px);
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key {
-  display: block;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key kbd,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key kbd,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key kbd,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key) span.focus-key kbd {
-  font-family: sans-serif;
-}
-form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):has(input:focus, select:focus, textarea:focus) span.focus-key, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):not(:has(input:placeholder-shown, textarea:placeholder-shown)) span.focus-key,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):has(input:focus, select:focus, textarea:focus) span.focus-key,
-form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):not(:has(input:placeholder-shown, textarea:placeholder-shown)) span.focus-key,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):has(input:focus, select:focus, textarea:focus) span.focus-key,
-table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):not(:has(input:placeholder-shown, textarea:placeholder-shown)) span.focus-key,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):has(input:focus, select:focus, textarea:focus) span.focus-key,
-table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:has(span.focus-key):not(:has(input:placeholder-shown, textarea:placeholder-shown)) span.focus-key {
-  display: none;
-}
-form.semanticForms p:has(input:not([type=checkbox], [type=radio]), textarea, label),
-form.semanticForms.light p:has(input:not([type=checkbox], [type=radio]), textarea, label),
-table.semanticForms p:has(input:not([type=checkbox], [type=radio]), textarea, label),
-table.semanticForms.light p:has(input:not([type=checkbox], [type=radio]), textarea, label) {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-form.semanticForms p:has(input[type=checkbox], input[type=radio]),
-form.semanticForms.light p:has(input[type=checkbox], input[type=radio]),
-table.semanticForms p:has(input[type=checkbox], input[type=radio]),
-table.semanticForms.light p:has(input[type=checkbox], input[type=radio]) {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 5px;
-}
-form.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
-form.semanticForms ul:has(li > input, li > label, li > button, li > select, li > textarea),
-form.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea),
-form.semanticForms.light ul:has(li > input, li > label, li > button, li > select, li > textarea),
-table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
-table.semanticForms ul:has(li > input, li > label, li > button, li > select, li > textarea),
-table.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea),
-table.semanticForms.light ul:has(li > input, li > label, li > button, li > select, li > textarea) {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 10px;
-  list-style-type: none;
-}
-form.semanticForms input[type=checkbox] + label:first-of-type,
-form.semanticForms input[type=radio] + label:first-of-type,
-form.semanticForms.light input[type=checkbox] + label:first-of-type,
-form.semanticForms.light input[type=radio] + label:first-of-type,
-table.semanticForms input[type=checkbox] + label:first-of-type,
-table.semanticForms input[type=radio] + label:first-of-type,
-table.semanticForms.light input[type=checkbox] + label:first-of-type,
-table.semanticForms.light input[type=radio] + label:first-of-type {
-  padding-top: 2px;
-  font-size: var(--semanticFormsInputFontSize);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 5px;
+  padding-right: 10px;
 }
-form.semanticForms input[type=checkbox] + label:first-of-type span.required,
-form.semanticForms input[type=radio] + label:first-of-type span.required,
-form.semanticForms.light input[type=checkbox] + label:first-of-type span.required,
-form.semanticForms.light input[type=radio] + label:first-of-type span.required,
-table.semanticForms input[type=checkbox] + label:first-of-type span.required,
-table.semanticForms input[type=radio] + label:first-of-type span.required,
-table.semanticForms.light input[type=checkbox] + label:first-of-type span.required,
-table.semanticForms.light input[type=radio] + label:first-of-type span.required {
+.semanticForms .floatLabelForm div:has(dd input:required) dt label > span {
+  margin-left: 5px;
   cursor: help;
   pointer-events: auto;
   color: red;
 }
-form.semanticForms input[type=checkbox] + label:first-of-type span.help,
-form.semanticForms input[type=radio] + label:first-of-type span.help,
-form.semanticForms.light input[type=checkbox] + label:first-of-type span.help,
-form.semanticForms.light input[type=radio] + label:first-of-type span.help,
-table.semanticForms input[type=checkbox] + label:first-of-type span.help,
-table.semanticForms input[type=radio] + label:first-of-type span.help,
-table.semanticForms.light input[type=checkbox] + label:first-of-type span.help,
-table.semanticForms.light input[type=radio] + label:first-of-type span.help {
-  display: grid;
-  place-items: center;
-  cursor: help;
-  pointer-events: auto;
-}
-form.semanticForms input[type=checkbox] + label:first-of-type span.help svg,
-form.semanticForms input[type=radio] + label:first-of-type span.help svg,
-form.semanticForms.light input[type=checkbox] + label:first-of-type span.help svg,
-form.semanticForms.light input[type=radio] + label:first-of-type span.help svg,
-table.semanticForms input[type=checkbox] + label:first-of-type span.help svg,
-table.semanticForms input[type=radio] + label:first-of-type span.help svg,
-table.semanticForms.light input[type=checkbox] + label:first-of-type span.help svg,
-table.semanticForms.light input[type=radio] + label:first-of-type span.help svg {
-  width: 80%;
-}
-form.semanticForms .floatLabelForm,
-form.semanticForms.light .floatLabelForm,
-table.semanticForms .floatLabelForm,
-table.semanticForms.light .floatLabelForm {
-  grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
-}
-form.semanticForms .floatLabelForm div,
-form.semanticForms.light .floatLabelForm div,
-table.semanticForms .floatLabelForm div,
-table.semanticForms.light .floatLabelForm div {
-  position: relative;
-  width: 100%;
-  min-width: var(--semanticFormsInputMinWidth);
-  max-width: 100%;
-  max-width: 365px;
-}
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
-form.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,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
-form.semanticForms.light .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,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
-table.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,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
-table.semanticForms.light .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 {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=button], [type=image]):focus:not([type=checkbox], [type=radio], .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):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
+.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);
   width: 100%;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus.no-float-label ~ label:first-of-type, form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus.no-float-label ~ label:first-of-type,
-form.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,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus.no-float-label ~ label:first-of-type,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus.no-float-label ~ label:first-of-type,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus.no-float-label ~ label:first-of-type,
-form.semanticForms.light .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,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus.no-float-label ~ label:first-of-type,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus.no-float-label ~ label:first-of-type,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus.no-float-label ~ label:first-of-type,
-table.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,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus.no-float-label ~ label:first-of-type,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):focus.no-float-label ~ label:first-of-type,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=image]):not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus.no-float-label ~ label:first-of-type,
-table.semanticForms.light .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,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus.no-float-label ~ label:first-of-type,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea: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) 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,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus.no-float-label ~ label:first-of-type,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type {
   display: none;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select ~ label:first-of-type,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select ~ label:first-of-type,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select ~ label:first-of-type,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select ~ label:first-of-type {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select ~ label:first-of-type {
   color: var(--semanticFormsTextColor);
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) button:not(.clear, .show),
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input[type=submit]:not(.clear, .show),
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) button:not(.clear, .show),
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input[type=submit]:not(.clear, .show),
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) button:not(.clear, .show),
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input[type=submit]:not(.clear, .show),
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) button:not(.clear, .show),
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input[type=submit]:not(.clear, .show) {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) button:not(.clear, .show),
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input[type=submit]:not(.clear, .show) {
   margin-top: var(--semanticFormsInputTopMargin);
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type {
   position: absolute;
   top: calc(var(--semanticFormsInputTopMargin) + 10px);
   left: 20px;
@@ -1479,1363 +627,295 @@ table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRad
   color: var(--semanticFormsPlaceholderColor);
   touch-action: manipulation;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.required,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.required,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.required,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.required {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.required {
   cursor: help;
   pointer-events: auto;
   color: red;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help {
   display: grid;
   place-items: center;
   cursor: help;
   pointer-events: auto;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help svg,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help svg,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help svg,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help svg {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help svg {
   width: 80%;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:nth-of-type(2),
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:nth-of-type(2),
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:nth-of-type(2),
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:nth-of-type(2) {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key) label:first-of-type {
+  width: calc(100% - 95px);
+}
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key) span.focus-key {
+  display: block;
+}
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key) span.focus-key kbd {
+  font-family: sans-serif;
+}
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key):has(input:focus, select:focus, textarea:focus) span.focus-key, .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key):not(:has(input:placeholder-shown, textarea:placeholder-shown)) span.focus-key {
+  display: none;
+}
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:nth-of-type(2) {
   margin-top: -5px;
   padding: 0 10px;
   font-size: small;
   color: var(--semanticFormsTextColor);
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select {
   margin-top: var(--semanticFormsInputTopMargin);
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea {
   transition: opacity 250ms;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::placeholder,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::placeholder {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::placeholder,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::placeholder {
   opacity: 0;
   transition: opacity 250ms;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-moz-placeholder,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-moz-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-moz-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-moz-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-moz-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-moz-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-moz-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-moz-placeholder {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-moz-placeholder,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-moz-placeholder {
   opacity: 0;
   transition: opacity 250ms;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-webkit-input-placeholder,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-webkit-input-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-webkit-input-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-webkit-input-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-webkit-input-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-webkit-input-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-webkit-input-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-webkit-input-placeholder {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-webkit-input-placeholder,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-webkit-input-placeholder {
   opacity: 0;
   transition: opacity 250ms;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:-ms-input-placeholder,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:-ms-input-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:-ms-input-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:-ms-input-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:-ms-input-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:-ms-input-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:-ms-input-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:-ms-input-placeholder {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:-ms-input-placeholder,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:-ms-input-placeholder {
   opacity: 0;
   transition: opacity 250ms;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::placeholder,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::placeholder {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::placeholder,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::placeholder {
   opacity: 1;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-moz-placeholder,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-moz-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-moz-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-moz-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-moz-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-moz-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-moz-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-moz-placeholder {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-moz-placeholder,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-moz-placeholder {
   opacity: 1;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-webkit-input-placeholder,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-webkit-input-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-webkit-input-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-webkit-input-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-webkit-input-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-webkit-input-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-webkit-input-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-webkit-input-placeholder {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-webkit-input-placeholder,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-webkit-input-placeholder {
   opacity: 1;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus:-ms-input-placeholder,
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:-ms-input-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus:-ms-input-placeholder,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:-ms-input-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus:-ms-input-placeholder,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:-ms-input-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus:-ms-input-placeholder,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:-ms-input-placeholder {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus:-ms-input-placeholder,
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:-ms-input-placeholder {
   opacity: 1;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key {
   color: var(--semanticFormsPlaceholderColor);
   position: absolute;
   top: calc(var(--semanticFormsInputTopMargin) + 11px);
   right: 20px;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd {
   line-height: 1;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key {
   right: 45px;
 }
-form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type,
-form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type,
-table.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type,
-table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type {
+.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type {
   left: 32px;
 }
-form.semanticForms .floatLabelForm div dt,
-form.semanticForms.light .floatLabelForm div dt,
-table.semanticForms .floatLabelForm div dt,
-table.semanticForms.light .floatLabelForm div dt {
-  position: relative;
-}
-form.semanticForms .floatLabelForm div dt label,
-form.semanticForms.light .floatLabelForm div dt label,
-table.semanticForms .floatLabelForm div dt label,
-table.semanticForms.light .floatLabelForm div dt label {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  z-index: 2;
-  user-select: auto;
-  color: var(--semanticFormsTextColor);
-  font-size: var(--semanticFormsInputFontSize);
-  position: absolute;
-  transform-origin: left center;
-  transform: translateY(-100%) scale(0.7);
-  top: var(--semanticFormsInputTopMargin);
-  left: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-  width: 100%;
-}
-form.semanticForms .floatLabelForm div dt label span.help,
-form.semanticForms.light .floatLabelForm div dt label span.help,
-table.semanticForms .floatLabelForm div dt label span.help,
-table.semanticForms.light .floatLabelForm div dt label span.help {
-  display: grid;
-  place-items: center;
-  cursor: help;
-  pointer-events: auto;
-}
-form.semanticForms .floatLabelForm div:has(dd input:required) dt label,
-form.semanticForms.light .floatLabelForm div:has(dd input:required) dt label,
-table.semanticForms .floatLabelForm div:has(dd input:required) dt label,
-table.semanticForms.light .floatLabelForm div:has(dd input:required) dt label {
-  width: 100%;
-  padding-right: 10px;
-}
-form.semanticForms .floatLabelForm div:has(dd input:required) dt label > span,
-form.semanticForms.light .floatLabelForm div:has(dd input:required) dt label > span,
-table.semanticForms .floatLabelForm div:has(dd input:required) dt label > span,
-table.semanticForms.light .floatLabelForm div:has(dd input:required) dt label > span {
-  margin-left: 5px;
-  cursor: help;
-  pointer-events: auto;
-  color: red;
-}
-form.semanticForms .floatLabelForm div:has([data-max-content]),
-form.semanticForms.light .floatLabelForm div:has([data-max-content]),
-table.semanticForms .floatLabelForm div:has([data-max-content]),
-table.semanticForms.light .floatLabelForm div:has([data-max-content]) {
+.semanticForms .floatLabelForm div:has([data-max-content]) {
   max-width: max-content;
   min-width: 150px;
 }
-form.semanticForms .floatLabelForm div:has([data-max-content]) dd,
-form.semanticForms.light .floatLabelForm div:has([data-max-content]) dd,
-table.semanticForms .floatLabelForm div:has([data-max-content]) dd,
-table.semanticForms.light .floatLabelForm div:has([data-max-content]) dd {
+.semanticForms .floatLabelForm div:has([data-max-content]) dd {
   width: max-content;
 }
-form.semanticForms .floatLabelForm div:has([data-max-content]) dd input, form.semanticForms .floatLabelForm div:has([data-max-content]) dd select,
-form.semanticForms.light .floatLabelForm div:has([data-max-content]) dd input,
-form.semanticForms.light .floatLabelForm div:has([data-max-content]) dd select,
-table.semanticForms .floatLabelForm div:has([data-max-content]) dd input,
-table.semanticForms .floatLabelForm div:has([data-max-content]) dd select,
-table.semanticForms.light .floatLabelForm div:has([data-max-content]) dd input,
-table.semanticForms.light .floatLabelForm div:has([data-max-content]) dd select {
+.semanticForms .floatLabelForm div:has([data-max-content]) dd input, .semanticForms .floatLabelForm div:has([data-max-content]) dd select {
   field-sizing: content;
   min-width: 150px;
   max-width: max-content;
 }
-form.semanticForms .floatLabelForm input::placeholder, form.semanticForms .floatLabelForm textarea::placeholder,
-form.semanticForms.light .floatLabelForm input::placeholder,
-form.semanticForms.light .floatLabelForm textarea::placeholder,
-table.semanticForms .floatLabelForm input::placeholder,
-table.semanticForms .floatLabelForm textarea::placeholder,
-table.semanticForms.light .floatLabelForm input::placeholder,
-table.semanticForms.light .floatLabelForm textarea::placeholder {
+.semanticForms .floatLabelForm input::placeholder, .semanticForms .floatLabelForm textarea::placeholder {
   color: var(--semanticFormsPlaceholderColor);
   opacity: 1;
 }
-form.semanticForms div[class^=colspan-],
-form.semanticForms.light div[class^=colspan-],
-table.semanticForms div[class^=colspan-],
-table.semanticForms.light div[class^=colspan-] {
-  max-width: 100%;
+
+.semanticForms div[class^=colspan-] {
+  max-width: 100% !important;
 }
-form.semanticForms div.colspan-full,
-form.semanticForms.light div.colspan-full,
-table.semanticForms div.colspan-full,
-table.semanticForms.light div.colspan-full {
+.semanticForms div.colspan-full {
   grid-column: 1/-1;
 }
-form.semanticForms div.colspan-5,
-form.semanticForms.light div.colspan-5,
-table.semanticForms div.colspan-5,
-table.semanticForms.light div.colspan-5 {
+.semanticForms div.colspan-5 {
   grid-column: span 5;
 }
-form.semanticForms div.colspan-4,
-form.semanticForms.light div.colspan-4,
-table.semanticForms div.colspan-4,
-table.semanticForms.light div.colspan-4 {
+.semanticForms div.colspan-4 {
   grid-column: span 4;
 }
-form.semanticForms div.colspan-3,
-form.semanticForms.light div.colspan-3,
-table.semanticForms div.colspan-3,
-table.semanticForms.light div.colspan-3 {
+.semanticForms div.colspan-3 {
   grid-column: span 3;
 }
-form.semanticForms div.colspan-2,
-form.semanticForms.light div.colspan-2,
-table.semanticForms div.colspan-2,
-table.semanticForms.light div.colspan-2 {
+.semanticForms div.colspan-2 {
   grid-column: span 2;
 }
-form.semanticForms div.colspan-1,
-form.semanticForms.light div.colspan-1,
-table.semanticForms div.colspan-1,
-table.semanticForms.light div.colspan-1 {
+.semanticForms div.colspan-1 {
   grid-column: span 1;
 }
-form.semanticForms fieldset[class^=colspan-] dl div,
-form.semanticForms dl[class^=colspan-] div,
-form.semanticForms.light fieldset[class^=colspan-] dl div,
-form.semanticForms.light dl[class^=colspan-] div,
-table.semanticForms fieldset[class^=colspan-] dl div,
-table.semanticForms dl[class^=colspan-] div,
-table.semanticForms.light fieldset[class^=colspan-] dl div,
-table.semanticForms.light dl[class^=colspan-] div {
-  max-width: 100%;
+.semanticForms fieldset[class^=colspan-] dl div,
+.semanticForms dl[class^=colspan-] div {
+  max-width: 100% !important;
 }
-form.semanticForms fieldset.colspan-full dl,
-form.semanticForms dl.colspan-full,
-form.semanticForms.light fieldset.colspan-full dl,
-form.semanticForms.light dl.colspan-full,
-table.semanticForms fieldset.colspan-full dl,
-table.semanticForms dl.colspan-full,
-table.semanticForms.light fieldset.colspan-full dl,
-table.semanticForms.light dl.colspan-full {
+.semanticForms fieldset.colspan-full dl,
+.semanticForms dl.colspan-full {
   grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
 }
-form.semanticForms fieldset.colspan-5 dl,
-form.semanticForms dl.colspan-5,
-form.semanticForms.light fieldset.colspan-5 dl,
-form.semanticForms.light dl.colspan-5,
-table.semanticForms fieldset.colspan-5 dl,
-table.semanticForms dl.colspan-5,
-table.semanticForms.light fieldset.colspan-5 dl,
-table.semanticForms.light dl.colspan-5 {
+.semanticForms fieldset.colspan-5 dl,
+.semanticForms dl.colspan-5 {
   grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
 }
-form.semanticForms fieldset.colspan-4 dl,
-form.semanticForms dl.colspan-4,
-form.semanticForms.light fieldset.colspan-4 dl,
-form.semanticForms.light dl.colspan-4,
-table.semanticForms fieldset.colspan-4 dl,
-table.semanticForms dl.colspan-4,
-table.semanticForms.light fieldset.colspan-4 dl,
-table.semanticForms.light dl.colspan-4 {
+.semanticForms fieldset.colspan-4 dl,
+.semanticForms dl.colspan-4 {
   grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr));
 }
-form.semanticForms fieldset.colspan-3 dl,
-form.semanticForms dl.colspan-3,
-form.semanticForms.light fieldset.colspan-3 dl,
-form.semanticForms.light dl.colspan-3,
-table.semanticForms fieldset.colspan-3 dl,
-table.semanticForms dl.colspan-3,
-table.semanticForms.light fieldset.colspan-3 dl,
-table.semanticForms.light dl.colspan-3 {
+.semanticForms fieldset.colspan-3 dl,
+.semanticForms dl.colspan-3 {
   grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr));
 }
-form.semanticForms fieldset.colspan-2 dl,
-form.semanticForms dl.colspan-2,
-form.semanticForms.light fieldset.colspan-2 dl,
-form.semanticForms.light dl.colspan-2,
-table.semanticForms fieldset.colspan-2 dl,
-table.semanticForms dl.colspan-2,
-table.semanticForms.light fieldset.colspan-2 dl,
-table.semanticForms.light dl.colspan-2 {
+.semanticForms fieldset.colspan-2 dl,
+.semanticForms dl.colspan-2 {
   grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr));
 }
-form.semanticForms fieldset.colspan-1 dl,
-form.semanticForms dl.colspan-1,
-form.semanticForms.light fieldset.colspan-1 dl,
-form.semanticForms.light dl.colspan-1,
-table.semanticForms fieldset.colspan-1 dl,
-table.semanticForms dl.colspan-1,
-table.semanticForms.light fieldset.colspan-1 dl,
-table.semanticForms.light dl.colspan-1 {
+.semanticForms fieldset.colspan-1 dl,
+.semanticForms dl.colspan-1 {
   grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr));
 }
-form.semanticForms fieldset.colspan-1 dl dt:nth-of-type(n + 1),
-form.semanticForms fieldset.colspan-1 dl dd:nth-of-type(n + 1),
-form.semanticForms dl.colspan-1 dt:nth-of-type(n + 1),
-form.semanticForms dl.colspan-1 dd:nth-of-type(n + 1),
-form.semanticForms.light fieldset.colspan-1 dl dt:nth-of-type(n + 1),
-form.semanticForms.light fieldset.colspan-1 dl dd:nth-of-type(n + 1),
-form.semanticForms.light dl.colspan-1 dt:nth-of-type(n + 1),
-form.semanticForms.light dl.colspan-1 dd:nth-of-type(n + 1),
-table.semanticForms fieldset.colspan-1 dl dt:nth-of-type(n + 1),
-table.semanticForms fieldset.colspan-1 dl dd:nth-of-type(n + 1),
-table.semanticForms dl.colspan-1 dt:nth-of-type(n + 1),
-table.semanticForms dl.colspan-1 dd:nth-of-type(n + 1),
-table.semanticForms.light fieldset.colspan-1 dl dt:nth-of-type(n + 1),
-table.semanticForms.light fieldset.colspan-1 dl dd:nth-of-type(n + 1),
-table.semanticForms.light dl.colspan-1 dt:nth-of-type(n + 1),
-table.semanticForms.light dl.colspan-1 dd:nth-of-type(n + 1) {
+.semanticForms fieldset.colspan-1 dl dt:nth-of-type(n + 1),
+.semanticForms fieldset.colspan-1 dl dd:nth-of-type(n + 1),
+.semanticForms dl.colspan-1 dt:nth-of-type(n + 1),
+.semanticForms dl.colspan-1 dd:nth-of-type(n + 1) {
   grid-column: 1;
 }
-form.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 1),
-form.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 1),
-form.semanticForms dl.colspan-2 dt:nth-of-type(2n + 1),
-form.semanticForms dl.colspan-2 dd:nth-of-type(2n + 1),
-form.semanticForms.light fieldset.colspan-2 dl dt:nth-of-type(2n + 1),
-form.semanticForms.light fieldset.colspan-2 dl dd:nth-of-type(2n + 1),
-form.semanticForms.light dl.colspan-2 dt:nth-of-type(2n + 1),
-form.semanticForms.light dl.colspan-2 dd:nth-of-type(2n + 1),
-table.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 1),
-table.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 1),
-table.semanticForms dl.colspan-2 dt:nth-of-type(2n + 1),
-table.semanticForms dl.colspan-2 dd:nth-of-type(2n + 1),
-table.semanticForms.light fieldset.colspan-2 dl dt:nth-of-type(2n + 1),
-table.semanticForms.light fieldset.colspan-2 dl dd:nth-of-type(2n + 1),
-table.semanticForms.light dl.colspan-2 dt:nth-of-type(2n + 1),
-table.semanticForms.light dl.colspan-2 dd:nth-of-type(2n + 1) {
+.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 1),
+.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 1),
+.semanticForms dl.colspan-2 dt:nth-of-type(2n + 1),
+.semanticForms dl.colspan-2 dd:nth-of-type(2n + 1) {
   grid-column: 1;
 }
-form.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 2),
-form.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 2),
-form.semanticForms dl.colspan-2 dt:nth-of-type(2n + 2),
-form.semanticForms dl.colspan-2 dd:nth-of-type(2n + 2),
-form.semanticForms.light fieldset.colspan-2 dl dt:nth-of-type(2n + 2),
-form.semanticForms.light fieldset.colspan-2 dl dd:nth-of-type(2n + 2),
-form.semanticForms.light dl.colspan-2 dt:nth-of-type(2n + 2),
-form.semanticForms.light dl.colspan-2 dd:nth-of-type(2n + 2),
-table.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 2),
-table.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 2),
-table.semanticForms dl.colspan-2 dt:nth-of-type(2n + 2),
-table.semanticForms dl.colspan-2 dd:nth-of-type(2n + 2),
-table.semanticForms.light fieldset.colspan-2 dl dt:nth-of-type(2n + 2),
-table.semanticForms.light fieldset.colspan-2 dl dd:nth-of-type(2n + 2),
-table.semanticForms.light dl.colspan-2 dt:nth-of-type(2n + 2),
-table.semanticForms.light dl.colspan-2 dd:nth-of-type(2n + 2) {
+.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 2),
+.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 2),
+.semanticForms dl.colspan-2 dt:nth-of-type(2n + 2),
+.semanticForms dl.colspan-2 dd:nth-of-type(2n + 2) {
   grid-column: 2;
 }
-form.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 1),
-form.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 1),
-form.semanticForms dl.colspan-3 dt:nth-of-type(3n + 1),
-form.semanticForms dl.colspan-3 dd:nth-of-type(3n + 1),
-form.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 1),
-form.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 1),
-form.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 1),
-form.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 1),
-table.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 1),
-table.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 1),
-table.semanticForms dl.colspan-3 dt:nth-of-type(3n + 1),
-table.semanticForms dl.colspan-3 dd:nth-of-type(3n + 1),
-table.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 1),
-table.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 1),
-table.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 1),
-table.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 1) {
+.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 1),
+.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 1),
+.semanticForms dl.colspan-3 dt:nth-of-type(3n + 1),
+.semanticForms dl.colspan-3 dd:nth-of-type(3n + 1) {
   grid-column: 1;
 }
-form.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 2),
-form.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 2),
-form.semanticForms dl.colspan-3 dt:nth-of-type(3n + 2),
-form.semanticForms dl.colspan-3 dd:nth-of-type(3n + 2),
-form.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 2),
-form.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 2),
-form.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 2),
-form.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 2),
-table.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 2),
-table.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 2),
-table.semanticForms dl.colspan-3 dt:nth-of-type(3n + 2),
-table.semanticForms dl.colspan-3 dd:nth-of-type(3n + 2),
-table.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 2),
-table.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 2),
-table.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 2),
-table.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 2) {
+.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 2),
+.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 2),
+.semanticForms dl.colspan-3 dt:nth-of-type(3n + 2),
+.semanticForms dl.colspan-3 dd:nth-of-type(3n + 2) {
   grid-column: 2;
 }
-form.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 3),
-form.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 3),
-form.semanticForms dl.colspan-3 dt:nth-of-type(3n + 3),
-form.semanticForms dl.colspan-3 dd:nth-of-type(3n + 3),
-form.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 3),
-form.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 3),
-form.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 3),
-form.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 3),
-table.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 3),
-table.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 3),
-table.semanticForms dl.colspan-3 dt:nth-of-type(3n + 3),
-table.semanticForms dl.colspan-3 dd:nth-of-type(3n + 3),
-table.semanticForms.light fieldset.colspan-3 dl dt:nth-of-type(3n + 3),
-table.semanticForms.light fieldset.colspan-3 dl dd:nth-of-type(3n + 3),
-table.semanticForms.light dl.colspan-3 dt:nth-of-type(3n + 3),
-table.semanticForms.light dl.colspan-3 dd:nth-of-type(3n + 3) {
+.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 3),
+.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 3),
+.semanticForms dl.colspan-3 dt:nth-of-type(3n + 3),
+.semanticForms dl.colspan-3 dd:nth-of-type(3n + 3) {
   grid-column: 3;
 }
-form.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 1),
-form.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 1),
-form.semanticForms dl.colspan-4 dt:nth-of-type(4n + 1),
-form.semanticForms dl.colspan-4 dd:nth-of-type(4n + 1),
-form.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 1),
-form.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 1),
-form.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 1),
-form.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 1),
-table.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 1),
-table.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 1),
-table.semanticForms dl.colspan-4 dt:nth-of-type(4n + 1),
-table.semanticForms dl.colspan-4 dd:nth-of-type(4n + 1),
-table.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 1),
-table.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 1),
-table.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 1),
-table.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 1) {
+.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 1),
+.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 1),
+.semanticForms dl.colspan-4 dt:nth-of-type(4n + 1),
+.semanticForms dl.colspan-4 dd:nth-of-type(4n + 1) {
   grid-column: 1;
 }
-form.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 2),
-form.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 2),
-form.semanticForms dl.colspan-4 dt:nth-of-type(4n + 2),
-form.semanticForms dl.colspan-4 dd:nth-of-type(4n + 2),
-form.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 2),
-form.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 2),
-form.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 2),
-form.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 2),
-table.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 2),
-table.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 2),
-table.semanticForms dl.colspan-4 dt:nth-of-type(4n + 2),
-table.semanticForms dl.colspan-4 dd:nth-of-type(4n + 2),
-table.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 2),
-table.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 2),
-table.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 2),
-table.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 2) {
+.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 2),
+.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 2),
+.semanticForms dl.colspan-4 dt:nth-of-type(4n + 2),
+.semanticForms dl.colspan-4 dd:nth-of-type(4n + 2) {
   grid-column: 2;
 }
-form.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 3),
-form.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 3),
-form.semanticForms dl.colspan-4 dt:nth-of-type(4n + 3),
-form.semanticForms dl.colspan-4 dd:nth-of-type(4n + 3),
-form.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 3),
-form.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 3),
-form.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 3),
-form.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 3),
-table.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 3),
-table.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 3),
-table.semanticForms dl.colspan-4 dt:nth-of-type(4n + 3),
-table.semanticForms dl.colspan-4 dd:nth-of-type(4n + 3),
-table.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 3),
-table.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 3),
-table.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 3),
-table.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 3) {
+.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 3),
+.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 3),
+.semanticForms dl.colspan-4 dt:nth-of-type(4n + 3),
+.semanticForms dl.colspan-4 dd:nth-of-type(4n + 3) {
   grid-column: 3;
 }
-form.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 4),
-form.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 4),
-form.semanticForms dl.colspan-4 dt:nth-of-type(4n + 4),
-form.semanticForms dl.colspan-4 dd:nth-of-type(4n + 4),
-form.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 4),
-form.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 4),
-form.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 4),
-form.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 4),
-table.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 4),
-table.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 4),
-table.semanticForms dl.colspan-4 dt:nth-of-type(4n + 4),
-table.semanticForms dl.colspan-4 dd:nth-of-type(4n + 4),
-table.semanticForms.light fieldset.colspan-4 dl dt:nth-of-type(4n + 4),
-table.semanticForms.light fieldset.colspan-4 dl dd:nth-of-type(4n + 4),
-table.semanticForms.light dl.colspan-4 dt:nth-of-type(4n + 4),
-table.semanticForms.light dl.colspan-4 dd:nth-of-type(4n + 4) {
+.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 4),
+.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 4),
+.semanticForms dl.colspan-4 dt:nth-of-type(4n + 4),
+.semanticForms dl.colspan-4 dd:nth-of-type(4n + 4) {
   grid-column: 4;
 }
-form.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 1),
-form.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 1),
-form.semanticForms dl.colspan-5 dt:nth-of-type(5n + 1),
-form.semanticForms dl.colspan-5 dd:nth-of-type(5n + 1),
-form.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 1),
-form.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 1),
-form.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 1),
-form.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 1),
-table.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 1),
-table.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 1),
-table.semanticForms dl.colspan-5 dt:nth-of-type(5n + 1),
-table.semanticForms dl.colspan-5 dd:nth-of-type(5n + 1),
-table.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 1),
-table.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 1),
-table.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 1),
-table.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 1) {
+.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 1),
+.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 1),
+.semanticForms dl.colspan-5 dt:nth-of-type(5n + 1),
+.semanticForms dl.colspan-5 dd:nth-of-type(5n + 1) {
   grid-column: 1;
 }
-form.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 2),
-form.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 2),
-form.semanticForms dl.colspan-5 dt:nth-of-type(5n + 2),
-form.semanticForms dl.colspan-5 dd:nth-of-type(5n + 2),
-form.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 2),
-form.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 2),
-form.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 2),
-form.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 2),
-table.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 2),
-table.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 2),
-table.semanticForms dl.colspan-5 dt:nth-of-type(5n + 2),
-table.semanticForms dl.colspan-5 dd:nth-of-type(5n + 2),
-table.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 2),
-table.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 2),
-table.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 2),
-table.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 2) {
+.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 2),
+.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 2),
+.semanticForms dl.colspan-5 dt:nth-of-type(5n + 2),
+.semanticForms dl.colspan-5 dd:nth-of-type(5n + 2) {
   grid-column: 2;
 }
-form.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 3),
-form.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 3),
-form.semanticForms dl.colspan-5 dt:nth-of-type(5n + 3),
-form.semanticForms dl.colspan-5 dd:nth-of-type(5n + 3),
-form.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 3),
-form.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 3),
-form.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 3),
-form.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 3),
-table.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 3),
-table.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 3),
-table.semanticForms dl.colspan-5 dt:nth-of-type(5n + 3),
-table.semanticForms dl.colspan-5 dd:nth-of-type(5n + 3),
-table.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 3),
-table.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 3),
-table.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 3),
-table.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 3) {
+.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 3),
+.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 3),
+.semanticForms dl.colspan-5 dt:nth-of-type(5n + 3),
+.semanticForms dl.colspan-5 dd:nth-of-type(5n + 3) {
   grid-column: 3;
 }
-form.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 4),
-form.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 4),
-form.semanticForms dl.colspan-5 dt:nth-of-type(5n + 4),
-form.semanticForms dl.colspan-5 dd:nth-of-type(5n + 4),
-form.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 4),
-form.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 4),
-form.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 4),
-form.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 4),
-table.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 4),
-table.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 4),
-table.semanticForms dl.colspan-5 dt:nth-of-type(5n + 4),
-table.semanticForms dl.colspan-5 dd:nth-of-type(5n + 4),
-table.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 4),
-table.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 4),
-table.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 4),
-table.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 4) {
+.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 4),
+.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 4),
+.semanticForms dl.colspan-5 dt:nth-of-type(5n + 4),
+.semanticForms dl.colspan-5 dd:nth-of-type(5n + 4) {
   grid-column: 4;
 }
-form.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 5),
-form.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 5),
-form.semanticForms dl.colspan-5 dt:nth-of-type(5n + 5),
-form.semanticForms dl.colspan-5 dd:nth-of-type(5n + 5),
-form.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 5),
-form.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 5),
-form.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 5),
-form.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 5),
-table.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 5),
-table.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 5),
-table.semanticForms dl.colspan-5 dt:nth-of-type(5n + 5),
-table.semanticForms dl.colspan-5 dd:nth-of-type(5n + 5),
-table.semanticForms.light fieldset.colspan-5 dl dt:nth-of-type(5n + 5),
-table.semanticForms.light fieldset.colspan-5 dl dd:nth-of-type(5n + 5),
-table.semanticForms.light dl.colspan-5 dt:nth-of-type(5n + 5),
-table.semanticForms.light dl.colspan-5 dd:nth-of-type(5n + 5) {
+.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 5),
+.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 5),
+.semanticForms dl.colspan-5 dt:nth-of-type(5n + 5),
+.semanticForms dl.colspan-5 dd:nth-of-type(5n + 5) {
   grid-column: 5;
 }
-form.semanticForms.lowFlow, form.semanticForms:not(.semanticFormsActive),
-form.semanticForms.light.lowFlow,
-form.semanticForms.light:not(.semanticFormsActive),
-table.semanticForms.lowFlow,
-table.semanticForms:not(.semanticFormsActive),
-table.semanticForms.light.lowFlow,
-table.semanticForms.light:not(.semanticFormsActive) {
-  gap: 10px;
-}
-form.semanticForms.lowFlow dl, form.semanticForms:not(.semanticFormsActive) dl,
-form.semanticForms.light.lowFlow dl,
-form.semanticForms.light:not(.semanticFormsActive) dl,
-table.semanticForms.lowFlow dl,
-table.semanticForms:not(.semanticFormsActive) dl,
-table.semanticForms.light.lowFlow dl,
-table.semanticForms.light:not(.semanticFormsActive) dl {
-  grid-auto-flow: dense;
-  gap: 0 10px;
-  margin-bottom: 0px;
+
+form.semanticForms,
+fieldset {
+  container: semanticForm/inline-size;
 }
-form.semanticForms.lowFlow > dt:nth-of-type(2n + 1), form.semanticForms.lowFlow > dd:nth-of-type(2n + 1), form.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 1), form.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 1),
-form.semanticForms.light.lowFlow > dt:nth-of-type(2n + 1),
-form.semanticForms.light.lowFlow > dd:nth-of-type(2n + 1),
-form.semanticForms.light:not(.semanticFormsActive) > dt:nth-of-type(2n + 1),
-form.semanticForms.light:not(.semanticFormsActive) > dd:nth-of-type(2n + 1),
-table.semanticForms.lowFlow > dt:nth-of-type(2n + 1),
-table.semanticForms.lowFlow > dd:nth-of-type(2n + 1),
-table.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 1),
-table.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 1),
-table.semanticForms.light.lowFlow > dt:nth-of-type(2n + 1),
-table.semanticForms.light.lowFlow > dd:nth-of-type(2n + 1),
-table.semanticForms.light:not(.semanticFormsActive) > dt:nth-of-type(2n + 1),
-table.semanticForms.light:not(.semanticFormsActive) > dd:nth-of-type(2n + 1) {
-  grid-column: 1;
+@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.lowFlow > dt:nth-of-type(2n + 2), form.semanticForms.lowFlow > dd:nth-of-type(2n + 2), form.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 2), form.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 2),
-form.semanticForms.light.lowFlow > dt:nth-of-type(2n + 2),
-form.semanticForms.light.lowFlow > dd:nth-of-type(2n + 2),
-form.semanticForms.light:not(.semanticFormsActive) > dt:nth-of-type(2n + 2),
-form.semanticForms.light:not(.semanticFormsActive) > dd:nth-of-type(2n + 2),
-table.semanticForms.lowFlow > dt:nth-of-type(2n + 2),
-table.semanticForms.lowFlow > dd:nth-of-type(2n + 2),
-table.semanticForms:not(.semanticFormsActive) > dt:nth-of-type(2n + 2),
-table.semanticForms:not(.semanticFormsActive) > dd:nth-of-type(2n + 2),
-table.semanticForms.light.lowFlow > dt:nth-of-type(2n + 2),
-table.semanticForms.light.lowFlow > dd:nth-of-type(2n + 2),
-table.semanticForms.light:not(.semanticFormsActive) > dt:nth-of-type(2n + 2),
-table.semanticForms.light:not(.semanticFormsActive) > dd:nth-of-type(2n + 2) {
-  grid-column: 2;
+@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.lowFlow dt, form.semanticForms:not(.semanticFormsActive) dt,
-form.semanticForms.light.lowFlow dt,
-form.semanticForms.light:not(.semanticFormsActive) dt,
-table.semanticForms.lowFlow dt,
-table.semanticForms:not(.semanticFormsActive) dt,
-table.semanticForms.light.lowFlow dt,
-table.semanticForms.light:not(.semanticFormsActive) dt {
-  min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */
+@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.lowFlow dt label, form.semanticForms:not(.semanticFormsActive) dt label,
-form.semanticForms.light.lowFlow dt label,
-form.semanticForms.light:not(.semanticFormsActive) dt label,
-table.semanticForms.lowFlow dt label,
-table.semanticForms:not(.semanticFormsActive) dt label,
-table.semanticForms.light.lowFlow dt label,
-table.semanticForms.light:not(.semanticFormsActive) dt label {
-  position: absolute;
-  display: block;
-  height: 11px;
-  transform: scale(0.7);
-  transform-origin: left center;
-  padding-left: 22px;
-  margin-top: -1px;
-}
-form.semanticForms.lowFlow dt:has(+ dd input:required) label::after, form.semanticForms:not(.semanticFormsActive) dt:has(+ dd input:required) label::after,
-form.semanticForms.light.lowFlow dt:has(+ dd input:required) label::after,
-form.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd input:required) label::after,
-table.semanticForms.lowFlow dt:has(+ dd input:required) label::after,
-table.semanticForms:not(.semanticFormsActive) dt:has(+ dd input:required) label::after,
-table.semanticForms.light.lowFlow dt:has(+ dd input:required) label::after,
-table.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd input:required) label::after {
-  content: " *";
-  color: red;
-}
-form.semanticForms.lowFlow dt:has(+ dd.checkboxes) label, form.semanticForms.lowFlow dt:has(+ dd.radios) label, form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label, form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.radios) label,
-form.semanticForms.light.lowFlow dt:has(+ dd.checkboxes) label,
-form.semanticForms.light.lowFlow dt:has(+ dd.radios) label,
-form.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label,
-form.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd.radios) label,
-table.semanticForms.lowFlow dt:has(+ dd.checkboxes) label,
-table.semanticForms.lowFlow dt:has(+ dd.radios) label,
-table.semanticForms:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label,
-table.semanticForms:not(.semanticFormsActive) dt:has(+ dd.radios) label,
-table.semanticForms.light.lowFlow dt:has(+ dd.checkboxes) label,
-table.semanticForms.light.lowFlow dt:has(+ dd.radios) label,
-table.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label,
-table.semanticForms.light:not(.semanticFormsActive) dt:has(+ dd.radios) label {
-  padding-left: 15px;
-}
-form.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label, form.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label,
-form.semanticForms.light.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label,
-form.semanticForms.light:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label,
-table.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label,
-table.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label,
-table.semanticForms.light.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label,
-table.semanticForms.light:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=checkbox]) label {
-  transform: scale(1);
-  margin-top: 0;
-  margin-left: 8px;
-}
-form.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label, form.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label,
-form.semanticForms.light.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label,
-form.semanticForms.light:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label,
-table.semanticForms.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label,
-table.semanticForms:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label,
-table.semanticForms.light.lowFlow dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label,
-table.semanticForms.light:not(.semanticFormsActive) dt:not(:has(+ dd ul)):has(+ dd input[type=radio]) label {
-  transform: scale(1);
-  margin-top: 0;
-  margin-left: 8px;
-}
-form.semanticForms.lowFlow dd, form.semanticForms:not(.semanticFormsActive) dd,
-form.semanticForms.light.lowFlow dd,
-form.semanticForms.light:not(.semanticFormsActive) dd,
-table.semanticForms.lowFlow dd,
-table.semanticForms:not(.semanticFormsActive) dd,
-table.semanticForms.light.lowFlow dd,
-table.semanticForms.light:not(.semanticFormsActive) dd {
-  margin-top: var(--semanticFormsInputTopMargin);
-  margin-bottom: 10px;
-  min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */
-}
-form.semanticForms.lowFlow dd.checkboxes, form.semanticForms.lowFlow dd.radios, form.semanticForms:not(.semanticFormsActive) dd.checkboxes, form.semanticForms:not(.semanticFormsActive) dd.radios,
-form.semanticForms.light.lowFlow dd.checkboxes,
-form.semanticForms.light.lowFlow dd.radios,
-form.semanticForms.light:not(.semanticFormsActive) dd.checkboxes,
-form.semanticForms.light:not(.semanticFormsActive) dd.radios,
-table.semanticForms.lowFlow dd.checkboxes,
-table.semanticForms.lowFlow dd.radios,
-table.semanticForms:not(.semanticFormsActive) dd.checkboxes,
-table.semanticForms:not(.semanticFormsActive) dd.radios,
-table.semanticForms.light.lowFlow dd.checkboxes,
-table.semanticForms.light.lowFlow dd.radios,
-table.semanticForms.light:not(.semanticFormsActive) dd.checkboxes,
-table.semanticForms.light:not(.semanticFormsActive) dd.radios {
-  margin-top: 0;
-}
-form.semanticForms.lowFlow dd.checkboxes ul input[type=radio], form.semanticForms.lowFlow dd.radios ul input[type=radio], form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul input[type=radio], form.semanticForms:not(.semanticFormsActive) dd.radios ul input[type=radio],
-form.semanticForms.light.lowFlow dd.checkboxes ul input[type=radio],
-form.semanticForms.light.lowFlow dd.radios ul input[type=radio],
-form.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul input[type=radio],
-form.semanticForms.light:not(.semanticFormsActive) dd.radios ul input[type=radio],
-table.semanticForms.lowFlow dd.checkboxes ul input[type=radio],
-table.semanticForms.lowFlow dd.radios ul input[type=radio],
-table.semanticForms:not(.semanticFormsActive) dd.checkboxes ul input[type=radio],
-table.semanticForms:not(.semanticFormsActive) dd.radios ul input[type=radio],
-table.semanticForms.light.lowFlow dd.checkboxes ul input[type=radio],
-table.semanticForms.light.lowFlow dd.radios ul input[type=radio],
-table.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul input[type=radio],
-table.semanticForms.light:not(.semanticFormsActive) dd.radios ul input[type=radio] {
-  margin-top: 3px;
-}
-form.semanticForms.lowFlow dd.checkboxes ul label, form.semanticForms.lowFlow dd.radios ul label, form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul label, form.semanticForms:not(.semanticFormsActive) dd.radios ul label,
-form.semanticForms.light.lowFlow dd.checkboxes ul label,
-form.semanticForms.light.lowFlow dd.radios ul label,
-form.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul label,
-form.semanticForms.light:not(.semanticFormsActive) dd.radios ul label,
-table.semanticForms.lowFlow dd.checkboxes ul label,
-table.semanticForms.lowFlow dd.radios ul label,
-table.semanticForms:not(.semanticFormsActive) dd.checkboxes ul label,
-table.semanticForms:not(.semanticFormsActive) dd.radios ul label,
-table.semanticForms.light.lowFlow dd.checkboxes ul label,
-table.semanticForms.light.lowFlow dd.radios ul label,
-table.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul label,
-table.semanticForms.light:not(.semanticFormsActive) dd.radios ul label {
-  padding-top: 7px;
-  padding-left: 0;
-  font-size: var(--semanticFormsFontSize);
-}
-form.semanticForms.lowFlow dd.checkboxes ul + label, form.semanticForms.lowFlow dd.radios ul + label, form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul + label, form.semanticForms:not(.semanticFormsActive) dd.radios ul + label,
-form.semanticForms.light.lowFlow dd.checkboxes ul + label,
-form.semanticForms.light.lowFlow dd.radios ul + label,
-form.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul + label,
-form.semanticForms.light:not(.semanticFormsActive) dd.radios ul + label,
-table.semanticForms.lowFlow dd.checkboxes ul + label,
-table.semanticForms.lowFlow dd.radios ul + label,
-table.semanticForms:not(.semanticFormsActive) dd.checkboxes ul + label,
-table.semanticForms:not(.semanticFormsActive) dd.radios ul + label,
-table.semanticForms.light.lowFlow dd.checkboxes ul + label,
-table.semanticForms.light.lowFlow dd.radios ul + label,
-table.semanticForms.light:not(.semanticFormsActive) dd.checkboxes ul + label,
-table.semanticForms.light:not(.semanticFormsActive) dd.radios ul + label {
-  margin-top: 0;
-  font-size: small;
-}
-form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]), form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]),
-form.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]),
-form.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]),
-table.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]),
-table.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]),
-table.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]),
-table.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) {
-  margin-top: 0;
-  padding-left: 10px;
-}
-form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox],
-form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio], form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox],
-form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio],
-form.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox],
-form.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio],
-form.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox],
-form.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio],
-table.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox],
-table.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio],
-table.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox],
-table.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio],
-table.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox],
-table.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio],
-table.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=checkbox],
-table.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] {
-  margin-left: 1px;
-  margin-top: 1px;
-  margin-right: auto;
-}
-form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label, form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label,
-form.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label,
-form.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label,
-table.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label,
-table.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label,
-table.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label,
-table.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) label {
-  font-size: small;
-  margin-top: -1px;
-  padding-left: 11px;
-}
-form.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label, form.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label,
-form.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label,
-form.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label,
-table.semanticForms.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label,
-table.semanticForms:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label,
-table.semanticForms.light.lowFlow dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label,
-table.semanticForms.light:not(.semanticFormsActive) dd:not(:has(ul)):has(input[type=checkbox], input[type=radio]) input[type=radio] + label {
-  margin-top: -4px;
-}
-form.semanticForms.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-form.semanticForms.lowFlow dd select,
-form.semanticForms.lowFlow dd textarea, form.semanticForms:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-form.semanticForms:not(.semanticFormsActive) dd select,
-form.semanticForms:not(.semanticFormsActive) dd textarea,
-form.semanticForms.light.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-form.semanticForms.light.lowFlow dd select,
-form.semanticForms.light.lowFlow dd textarea,
-form.semanticForms.light:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-form.semanticForms.light:not(.semanticFormsActive) dd select,
-form.semanticForms.light:not(.semanticFormsActive) dd textarea,
-table.semanticForms.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-table.semanticForms.lowFlow dd select,
-table.semanticForms.lowFlow dd textarea,
-table.semanticForms:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-table.semanticForms:not(.semanticFormsActive) dd select,
-table.semanticForms:not(.semanticFormsActive) dd textarea,
-table.semanticForms.light.lowFlow dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-table.semanticForms.light.lowFlow dd select,
-table.semanticForms.light.lowFlow dd textarea,
-table.semanticForms.light:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-table.semanticForms.light:not(.semanticFormsActive) dd select,
-table.semanticForms.light:not(.semanticFormsActive) dd textarea {
-  padding-right: 6px;
-}
-form.semanticForms.lowFlow dd label, form.semanticForms:not(.semanticFormsActive) dd label,
-form.semanticForms.light.lowFlow dd label,
-form.semanticForms.light:not(.semanticFormsActive) dd label,
-table.semanticForms.lowFlow dd label,
-table.semanticForms:not(.semanticFormsActive) dd label,
-table.semanticForms.light.lowFlow dd label,
-table.semanticForms.light:not(.semanticFormsActive) dd label {
-  padding-left: 10px;
-  margin-top: -5px;
-  font-size: small;
-  color: var(--semanticFormsPlaceholderColor);
-}
-form.semanticForms.lowFlow dd button:not(.clear, .show),
-form.semanticForms.lowFlow dd input[type=submit]:not(.clear, .show),
-form.semanticForms.lowFlow dd input[type=button]:not(.clear, .show), form.semanticForms:not(.semanticFormsActive) dd button:not(.clear, .show),
-form.semanticForms:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show),
-form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show),
-form.semanticForms.light.lowFlow dd button:not(.clear, .show),
-form.semanticForms.light.lowFlow dd input[type=submit]:not(.clear, .show),
-form.semanticForms.light.lowFlow dd input[type=button]:not(.clear, .show),
-form.semanticForms.light:not(.semanticFormsActive) dd button:not(.clear, .show),
-form.semanticForms.light:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show),
-form.semanticForms.light:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show),
-table.semanticForms.lowFlow dd button:not(.clear, .show),
-table.semanticForms.lowFlow dd input[type=submit]:not(.clear, .show),
-table.semanticForms.lowFlow dd input[type=button]:not(.clear, .show),
-table.semanticForms:not(.semanticFormsActive) dd button:not(.clear, .show),
-table.semanticForms:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show),
-table.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show),
-table.semanticForms.light.lowFlow dd button:not(.clear, .show),
-table.semanticForms.light.lowFlow dd input[type=submit]:not(.clear, .show),
-table.semanticForms.light.lowFlow dd input[type=button]:not(.clear, .show),
-table.semanticForms.light:not(.semanticFormsActive) dd button:not(.clear, .show),
-table.semanticForms.light:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show),
-table.semanticForms.light:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show) {
-  margin-top: 0;
-}
-form.semanticForms .checkboxes ul,
-form.semanticForms .radios ul,
-form.semanticForms.light .checkboxes ul,
-form.semanticForms.light .radios ul,
-table.semanticForms .checkboxes ul,
-table.semanticForms .radios ul,
-table.semanticForms.light .checkboxes ul,
-table.semanticForms.light .radios ul {
-  margin-top: var(--semanticFormsInputTopMargin);
-}
-
-.semanticForms table,
-table.semanticForms {
-  table-layout: fixed;
-  width: 100%;
-  border-spacing: 0;
-  border: var(--semanticFormsBorder);
-  border-radius: 10px;
-  margin-bottom: 15px;
-  overflow: hidden;
-}
-.semanticForms table tr.title th,
-table.semanticForms tr.title th {
-  background-color: var(--semanticFormsTableTitleColor);
-}
-.semanticForms table th,
-table.semanticForms th {
-  background-color: var(--semanticFormsTableHeaderColor);
-  font-weight: bold;
-}
-.semanticForms table tr:nth-child(odd) td,
-table.semanticForms tr:nth-child(odd) td {
-  background-color: var(--semanticFormsTableOddColor);
-}
-.semanticForms table tr:nth-child(even) td,
-table.semanticForms tr:nth-child(even) td {
-  background-color: var(--semanticFormsTableEvenColor);
-}
-.semanticForms table td, .semanticForms table th,
-table.semanticForms td,
-table.semanticForms th {
-  border-right: var(--semanticFormsTableBorder);
-  border-bottom: var(--semanticFormsTableBorder);
-  padding: 7px 10px;
-}
-.semanticForms table th:last-of-type, .semanticForms table td:last-of-type,
-table.semanticForms th:last-of-type,
-table.semanticForms td:last-of-type {
-  border-right: none;
-}
-.semanticForms table tbody tr:last-of-type th, .semanticForms table tbody tr:last-of-type td,
-table.semanticForms tbody tr:last-of-type th,
-table.semanticForms tbody tr:last-of-type td {
-  border-bottom: none;
-}
-.semanticForms table menu:has(li > input, li > label, li > button, li > select, li > textarea, li > a),
-table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea, li > a) {
-  width: max-content;
-}
-
-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 dl:has(:not(div)) dt:nth-of-type(7n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 1),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 1),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 1),
-  fieldset dl:has(:not(div)) dt:nth-of-type(7n + 1),
-  fieldset dl:has(:not(div)) dd:nth-of-type(7n + 1) {
-    grid-column: 1;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 2),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 2),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 2),
-  fieldset dl:has(:not(div)) dt:nth-of-type(7n + 2),
-  fieldset dl:has(:not(div)) dd:nth-of-type(7n + 2) {
-    grid-column: 2;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 3), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 3), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 3), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 3),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 3),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 3),
-  fieldset dl:has(:not(div)) dt:nth-of-type(7n + 3),
-  fieldset dl:has(:not(div)) dd:nth-of-type(7n + 3) {
-    grid-column: 3;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 4), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 4), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 4), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 4),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 4),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 4),
-  fieldset dl:has(:not(div)) dt:nth-of-type(7n + 4),
-  fieldset dl:has(:not(div)) dd:nth-of-type(7n + 4) {
-    grid-column: 4;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 5), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 5), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 5), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 5),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 5),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 5),
-  fieldset dl:has(:not(div)) dt:nth-of-type(7n + 5),
-  fieldset dl:has(:not(div)) dd:nth-of-type(7n + 5) {
-    grid-column: 5;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 6), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 6), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 6), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 6),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 6),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 6),
-  fieldset dl:has(:not(div)) dt:nth-of-type(7n + 6),
-  fieldset dl:has(:not(div)) dd:nth-of-type(7n + 6) {
-    grid-column: 6;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(7n + 7), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(7n + 7), form.semanticForms dl:has(:not(div)) dt:nth-of-type(7n + 7), form.semanticForms dl:has(:not(div)) dd:nth-of-type(7n + 7),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(7n + 7),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(7n + 7),
-  fieldset dl:has(:not(div)) dt:nth-of-type(7n + 7),
-  fieldset dl:has(:not(div)) dd:nth-of-type(7n + 7) {
-    grid-column: 7;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-full,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset dl:has(:not(div)) dd.colspan-full {
-    grid-column: span 5;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-4,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl:has(:not(div)) dd.colspan-4 {
-    grid-column: span 4;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-3,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl:has(:not(div)) dd.colspan-3 {
-    grid-column: span 3;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-2,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl:has(:not(div)) dd.colspan-2 {
-    grid-column: span 2;
-  }
-}
-@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 dl:has(:not(div)) dt:nth-of-type(6n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 1),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 1),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 1),
-  fieldset dl:has(:not(div)) dt:nth-of-type(6n + 1),
-  fieldset dl:has(:not(div)) dd:nth-of-type(6n + 1) {
-    grid-column: 1;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(6n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 2),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 2),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 2),
-  fieldset dl:has(:not(div)) dt:nth-of-type(6n + 2),
-  fieldset dl:has(:not(div)) dd:nth-of-type(6n + 2) {
-    grid-column: 2;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(6n + 3), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 3), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 3), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 3),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 3),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 3),
-  fieldset dl:has(:not(div)) dt:nth-of-type(6n + 3),
-  fieldset dl:has(:not(div)) dd:nth-of-type(6n + 3) {
-    grid-column: 3;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(6n + 4), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 4), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 4), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 4),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 4),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 4),
-  fieldset dl:has(:not(div)) dt:nth-of-type(6n + 4),
-  fieldset dl:has(:not(div)) dd:nth-of-type(6n + 4) {
-    grid-column: 4;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(6n + 5), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 5), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 5), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 5),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 5),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 5),
-  fieldset dl:has(:not(div)) dt:nth-of-type(6n + 5),
-  fieldset dl:has(:not(div)) dd:nth-of-type(6n + 5) {
-    grid-column: 5;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(6n + 6), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(6n + 6), form.semanticForms dl:has(:not(div)) dt:nth-of-type(6n + 6), form.semanticForms dl:has(:not(div)) dd:nth-of-type(6n + 6),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(6n + 6),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(6n + 6),
-  fieldset dl:has(:not(div)) dt:nth-of-type(6n + 6),
-  fieldset dl:has(:not(div)) dd:nth-of-type(6n + 6) {
-    grid-column: 6;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-full,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset dl:has(:not(div)) dd.colspan-full {
-    grid-column: span 5;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-4,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl:has(:not(div)) dd.colspan-4 {
-    grid-column: span 4;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-3,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl:has(:not(div)) dd.colspan-3 {
-    grid-column: span 3;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-2,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl:has(:not(div)) dd.colspan-2 {
-    grid-column: span 2;
-  }
-}
-@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 dl:has(:not(div)) dt:nth-of-type(5n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(5n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(5n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(5n + 1),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(5n + 1),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(5n + 1),
-  fieldset dl:has(:not(div)) dt:nth-of-type(5n + 1),
-  fieldset dl:has(:not(div)) dd:nth-of-type(5n + 1) {
-    grid-column: 1;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(5n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(5n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(5n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(5n + 2),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(5n + 2),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(5n + 2),
-  fieldset dl:has(:not(div)) dt:nth-of-type(5n + 2),
-  fieldset dl:has(:not(div)) dd:nth-of-type(5n + 2) {
-    grid-column: 2;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(5n + 3), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(5n + 3), form.semanticForms dl:has(:not(div)) dt:nth-of-type(5n + 3), form.semanticForms dl:has(:not(div)) dd:nth-of-type(5n + 3),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(5n + 3),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(5n + 3),
-  fieldset dl:has(:not(div)) dt:nth-of-type(5n + 3),
-  fieldset dl:has(:not(div)) dd:nth-of-type(5n + 3) {
-    grid-column: 3;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(5n + 4), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(5n + 4), form.semanticForms dl:has(:not(div)) dt:nth-of-type(5n + 4), form.semanticForms dl:has(:not(div)) dd:nth-of-type(5n + 4),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(5n + 4),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(5n + 4),
-  fieldset dl:has(:not(div)) dt:nth-of-type(5n + 4),
-  fieldset dl:has(:not(div)) dd:nth-of-type(5n + 4) {
-    grid-column: 4;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(5n + 5), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(5n + 5), form.semanticForms dl:has(:not(div)) dt:nth-of-type(5n + 5), form.semanticForms dl:has(:not(div)) dd:nth-of-type(5n + 5),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(5n + 5),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(5n + 5),
-  fieldset dl:has(:not(div)) dt:nth-of-type(5n + 5),
-  fieldset dl:has(:not(div)) dd:nth-of-type(5n + 5) {
-    grid-column: 5;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-full,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset dl:has(:not(div)) dd.colspan-full {
-    grid-column: span 5;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-4,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl:has(:not(div)) dd.colspan-4 {
-    grid-column: span 4;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-3,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl:has(:not(div)) dd.colspan-3 {
-    grid-column: span 3;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-2,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl:has(:not(div)) dd.colspan-2 {
-    grid-column: span 2;
-  }
-}
-@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 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 dl:has(:not(div)) dt:nth-of-type(4n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(4n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(4n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(4n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 1),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(4n + 1),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(4n + 1),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 1),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 1),
-  fieldset dl:has(:not(div)) dt:nth-of-type(4n + 1),
-  fieldset dl:has(:not(div)) dd:nth-of-type(4n + 1),
-  fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 1),
-  fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 1) {
-    grid-column: 1;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(4n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(4n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(4n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(4n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 2),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(4n + 2),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(4n + 2),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 2),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 2),
-  fieldset dl:has(:not(div)) dt:nth-of-type(4n + 2),
-  fieldset dl:has(:not(div)) dd:nth-of-type(4n + 2),
-  fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 2),
-  fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 2) {
-    grid-column: 2;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(4n + 3), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(4n + 3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 3), form.semanticForms dl:has(:not(div)) dt:nth-of-type(4n + 3), form.semanticForms dl:has(:not(div)) dd:nth-of-type(4n + 3), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 3), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 3),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(4n + 3),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(4n + 3),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 3),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 3),
-  fieldset dl:has(:not(div)) dt:nth-of-type(4n + 3),
-  fieldset dl:has(:not(div)) dd:nth-of-type(4n + 3),
-  fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 3),
-  fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 3) {
-    grid-column: 3;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(4n + 4), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(4n + 4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 4), form.semanticForms dl:has(:not(div)) dt:nth-of-type(4n + 4), form.semanticForms dl:has(:not(div)) dd:nth-of-type(4n + 4), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 4), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 4),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(4n + 4),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(4n + 4),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(4n + 4),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(4n + 4),
-  fieldset dl:has(:not(div)) dt:nth-of-type(4n + 4),
-  fieldset dl:has(:not(div)) dd:nth-of-type(4n + 4),
-  fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(4n + 4),
-  fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(4n + 4) {
-    grid-column: 4;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-full,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl:has(:not(div)) dd.colspan-4,
-  fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset dl:has(:not(div)) dd.colspan-full,
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-4,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-5,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-full {
-    grid-column: span 4;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-3,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl:has(:not(div)) dd.colspan-3,
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-3 {
-    grid-column: span 3;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-2,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl:has(:not(div)) dd.colspan-2,
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-2 {
-    grid-column: span 2;
-  }
+@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 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;
+  }
 }
 @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,
@@ -2868,117 +948,6 @@ fieldset {
   fieldset dl.colspan-5 div.colspan-5 {
     grid-column: span 3;
   }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(3n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(3n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 1),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(3n + 1),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(3n + 1),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 1),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 1),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 1),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 1),
-  fieldset dl:has(:not(div)) dt:nth-of-type(3n + 1),
-  fieldset dl:has(:not(div)) dd:nth-of-type(3n + 1),
-  fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 1),
-  fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 1),
-  fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 1),
-  fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 1) {
-    grid-column: 1;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(3n + 2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(3n + 2), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 2),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(3n + 2),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(3n + 2),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 2),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 2),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 2),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 2),
-  fieldset dl:has(:not(div)) dt:nth-of-type(3n + 2),
-  fieldset dl:has(:not(div)) dd:nth-of-type(3n + 2),
-  fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 2),
-  fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 2),
-  fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 2),
-  fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 2) {
-    grid-column: 2;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(3n + 3), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 3), form.semanticForms dl:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms dl:has(:not(div)) dd:nth-of-type(3n + 3), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 3), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 3), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 3),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(3n + 3),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(3n + 3),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(3n + 3),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(3n + 3),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(3n + 3),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(3n + 3),
-  fieldset dl:has(:not(div)) dt:nth-of-type(3n + 3),
-  fieldset dl:has(:not(div)) dd:nth-of-type(3n + 3),
-  fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(3n + 3),
-  fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(3n + 3),
-  fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(3n + 3),
-  fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(3n + 3) {
-    grid-column: 3;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-full,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl:has(:not(div)) dd.colspan-3,
-  fieldset dl:has(:not(div)) dd.colspan-4,
-  fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset dl:has(:not(div)) dd.colspan-full,
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-3,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-4,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-5,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-full,
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-3,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-4,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-5,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-full {
-    grid-column: span 3;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-2,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl:has(:not(div)) dd.colspan-2,
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-2,
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-2 {
-    grid-column: span 2;
-  }
 }
 @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,
@@ -3035,127 +1004,6 @@ fieldset {
   fieldset dl.colspan-5 div.colspan-5 {
     grid-column: span 2;
   }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms dl.colspan-3:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms dl.colspan-3:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(2n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(2n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(2n + 1),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(2n + 1),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(2n + 1),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(2n + 1),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(2n + 1),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(2n + 1),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(2n + 1),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(2n + 1),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(2n + 1),
-  fieldset dl:has(:not(div)) dt:nth-of-type(2n + 1),
-  fieldset dl:has(:not(div)) dd:nth-of-type(2n + 1),
-  fieldset dl.colspan-3:has(:not(div)) dt:nth-of-type(2n + 1),
-  fieldset dl.colspan-3:has(:not(div)) dd:nth-of-type(2n + 1),
-  fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(2n + 1),
-  fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(2n + 1),
-  fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(2n + 1),
-  fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(2n + 1) {
-    grid-column: 1;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms dl:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms dl:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms dl.colspan-3:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms dl.colspan-3:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(2n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(2n + 2), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(2n + 2),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(2n + 2),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(2n + 2),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(2n + 2),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(2n + 2),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(2n + 2),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(2n + 2),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(2n + 2),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(2n + 2),
-  fieldset dl:has(:not(div)) dt:nth-of-type(2n + 2),
-  fieldset dl:has(:not(div)) dd:nth-of-type(2n + 2),
-  fieldset dl.colspan-3:has(:not(div)) dt:nth-of-type(2n + 2),
-  fieldset dl.colspan-3:has(:not(div)) dd:nth-of-type(2n + 2),
-  fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(2n + 2),
-  fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(2n + 2),
-  fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(2n + 2),
-  fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(2n + 2) {
-    grid-column: 2;
-  }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-full,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl:has(:not(div)) dd.colspan-2,
-  fieldset dl:has(:not(div)) dd.colspan-3,
-  fieldset dl:has(:not(div)) dd.colspan-4,
-  fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset dl:has(:not(div)) dd.colspan-full,
-  fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl.colspan-3:has(:not(div)) dd.colspan-2,
-  fieldset dl.colspan-3:has(:not(div)) dd.colspan-3,
-  fieldset dl.colspan-3:has(:not(div)) dd.colspan-4,
-  fieldset dl.colspan-3:has(:not(div)) dd.colspan-5,
-  fieldset dl.colspan-3:has(:not(div)) dd.colspan-full,
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-2,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-3,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-4,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-5,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-full,
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-2,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-3,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-4,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-5,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-full {
-    grid-column: span 2;
-  }
 }
 @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,
@@ -3169,7 +1017,7 @@ fieldset {
   fieldset dl.colspan-3,
   fieldset dl.colspan-4,
   fieldset dl.colspan-5 {
-    grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr));
+    grid-template-columns: 1fr;
   }
   form.semanticForms fieldset dl div.colspan-2,
   form.semanticForms fieldset dl div.colspan-3,
@@ -3244,152 +1092,393 @@ fieldset {
   fieldset dl.colspan-5 div.colspan-5 {
     grid-column: span 1;
   }
-  form.semanticForms fieldset dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms fieldset dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms dl:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms dl:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms dl.colspan-2:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms dl.colspan-2:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms dl.colspan-3:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms dl.colspan-3:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms dl.colspan-4:has(:not(div)) dd:nth-of-type(n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dt:nth-of-type(n + 1), form.semanticForms dl.colspan-5:has(:not(div)) dd:nth-of-type(n + 1),
-  fieldset fieldset dl:has(:not(div)) dt:nth-of-type(n + 1),
-  fieldset fieldset dl:has(:not(div)) dd:nth-of-type(n + 1),
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dt:nth-of-type(n + 1),
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dd:nth-of-type(n + 1),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:nth-of-type(n + 1),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd:nth-of-type(n + 1),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:nth-of-type(n + 1),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd:nth-of-type(n + 1),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:nth-of-type(n + 1),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd:nth-of-type(n + 1),
-  fieldset dl:has(:not(div)) dt:nth-of-type(n + 1),
-  fieldset dl:has(:not(div)) dd:nth-of-type(n + 1),
-  fieldset dl.colspan-2:has(:not(div)) dt:nth-of-type(n + 1),
-  fieldset dl.colspan-2:has(:not(div)) dd:nth-of-type(n + 1),
-  fieldset dl.colspan-3:has(:not(div)) dt:nth-of-type(n + 1),
-  fieldset dl.colspan-3:has(:not(div)) dd:nth-of-type(n + 1),
-  fieldset dl.colspan-4:has(:not(div)) dt:nth-of-type(n + 1),
-  fieldset dl.colspan-4:has(:not(div)) dd:nth-of-type(n + 1),
-  fieldset dl.colspan-5:has(:not(div)) dt:nth-of-type(n + 1),
-  fieldset dl.colspan-5:has(:not(div)) dd:nth-of-type(n + 1) {
-    grid-column: 1;
+}
+
+form.semanticForms.lowFlow,
+form.semanticForms:not(.semanticFormsActive) {
+  gap: 10px;
+}
+form.semanticForms.lowFlow dl,
+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]) {
+  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]) {
+  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 {
+  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 {
+  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 {
+  font-size: small;
+  margin-top: -2px;
+  padding-left: 10px;
+}
+form.semanticForms.lowFlow dt,
+form.semanticForms:not(.semanticFormsActive) dt {
+  min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */
+}
+form.semanticForms.lowFlow dt label,
+form.semanticForms:not(.semanticFormsActive) dt label {
+  position: absolute;
+  display: block;
+  height: 11px;
+  transform: scale(0.7);
+  transform-origin: left center;
+  padding-left: 29px;
+  margin-top: -2px;
+}
+form.semanticForms.lowFlow dt:has(+ dd input:required) label::after,
+form.semanticForms:not(.semanticFormsActive) dt:has(+ dd input:required) label::after {
+  content: " *";
+  color: red;
+}
+form.semanticForms.lowFlow dt:has(+ dd.checkboxes) label, form.semanticForms.lowFlow dt:has(+ dd.radios) label,
+form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label,
+form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.radios) label {
+  padding-left: 15px;
+}
+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 */
+}
+form.semanticForms.lowFlow dd.checkboxes, form.semanticForms.lowFlow dd.radios,
+form.semanticForms:not(.semanticFormsActive) dd.checkboxes,
+form.semanticForms:not(.semanticFormsActive) dd.radios {
+  margin-top: 0;
+}
+form.semanticForms.lowFlow dd.checkboxes ul input[type=radio], form.semanticForms.lowFlow dd.radios ul input[type=radio],
+form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul input[type=radio],
+form.semanticForms:not(.semanticFormsActive) dd.radios ul input[type=radio] {
+  margin-top: 3px;
+}
+form.semanticForms.lowFlow dd.checkboxes ul label, form.semanticForms.lowFlow dd.radios ul label,
+form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul label,
+form.semanticForms:not(.semanticFormsActive) dd.radios ul label {
+  padding-top: 7px;
+  padding-left: 0;
+  font-size: var(--semanticFormsFontSize);
+}
+form.semanticForms.lowFlow dd.checkboxes ul + label, form.semanticForms.lowFlow dd.radios ul + label,
+form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul + label,
+form.semanticForms:not(.semanticFormsActive) dd.radios ul + label {
+  margin-top: 0;
+  font-size: small;
+}
+form.semanticForms.lowFlow dd input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio], [type=range]),
+form.semanticForms.lowFlow dd select,
+form.semanticForms.lowFlow dd textarea,
+form.semanticForms:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio], [type=range]),
+form.semanticForms:not(.semanticFormsActive) dd select,
+form.semanticForms:not(.semanticFormsActive) dd textarea {
+  padding-right: 6px;
+}
+form.semanticForms.lowFlow dd label,
+form.semanticForms:not(.semanticFormsActive) dd label {
+  padding-left: 10px;
+  margin-top: -5px;
+  font-size: small;
+  color: var(--semanticFormsPlaceholderColor);
+}
+form.semanticForms.lowFlow dd button:not(.clear, .show),
+form.semanticForms.lowFlow dd input[type=submit]:not(.clear, .show),
+form.semanticForms.lowFlow dd input[type=button]:not(.clear, .show),
+form.semanticForms:not(.semanticFormsActive) dd button:not(.clear, .show),
+form.semanticForms:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show),
+form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show) {
+  margin-top: 0;
+}
+
+.checkboxes ul,
+.radios ul {
+  margin-top: var(--semanticFormsInputTopMargin);
+}
+
+.semanticForms fieldset {
+  border-radius: var(--semanticFormsBorderRadius);
+  background: var(--semanticFormsFormSubBgColor);
+  border: 1px var(--semanticFormsSubBorderColor) solid;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 10px 10px 20px 10px;
+  margin-bottom: 15px;
+}
+.semanticForms fieldset fieldset {
+  background-color: var(--semanticFormsNestedFieldsetBgColor);
+  border: var(--semanticFormsNestedFieldsetBorder);
+  margin-top: 15px;
+}
+.semanticForms fieldset fieldset input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
+.semanticForms fieldset fieldset select,
+.semanticForms fieldset fieldset textarea {
+  background-color: var(--semanticFormsNestedInputBgColor);
+}
+.semanticForms details {
+  box-sizing: border-box;
+  position: relative;
+  background-color: var(--semanticFormsNestedFieldsetBgColor);
+  border: var(--semanticFormsNestedFieldsetBorder);
+  border-radius: var(--semanticFormsBorderRadius);
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 20px 10px 10px 10px;
+  margin-top: 10px;
+  min-height: calc(var(--semanticFormsFontSize) + 20px);
+}
+.semanticForms details::details-content {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
+}
+@supports (interpolate-size: allow-keywords) {
+  .semanticForms details {
+    transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms, height 250ms;
   }
-  form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset dl:has(:not(div)) dd.colspan-1, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-1, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-2 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-1, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-3 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-1, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-1, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5, form.semanticForms fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full, form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl:has(:not(div)) dd.colspan-1, form.semanticForms dl:has(:not(div)) dd.colspan-2, form.semanticForms dl:has(:not(div)) dd.colspan-3, form.semanticForms dl:has(:not(div)) dd.colspan-4, form.semanticForms dl:has(:not(div)) dd.colspan-5, form.semanticForms dl:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-1, form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-2:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-1, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-3:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-1, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-4:has(:not(div)) dd.colspan-full, form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-1), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5), form.semanticForms dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full), form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-1, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-2, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-3, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-4, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-5, form.semanticForms dl.colspan-5:has(:not(div)) dd.colspan-full,
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-1),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset dl:has(:not(div)) dd.colspan-1,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-1),
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-1,
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset.colspan-2 dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-1),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-1,
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset.colspan-3 dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-1),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-1,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset.colspan-4 dl:has(:not(div)) dd.colspan-full,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-1),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-1,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-2,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-3,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-4,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-5,
-  fieldset fieldset.colspan-5 dl:has(:not(div)) dd.colspan-full,
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-1),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl:has(:not(div)) dd.colspan-1,
-  fieldset dl:has(:not(div)) dd.colspan-2,
-  fieldset dl:has(:not(div)) dd.colspan-3,
-  fieldset dl:has(:not(div)) dd.colspan-4,
-  fieldset dl:has(:not(div)) dd.colspan-5,
-  fieldset dl:has(:not(div)) dd.colspan-full,
-  fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-1),
-  fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl.colspan-2:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl.colspan-2:has(:not(div)) dd.colspan-1,
-  fieldset dl.colspan-2:has(:not(div)) dd.colspan-2,
-  fieldset dl.colspan-2:has(:not(div)) dd.colspan-3,
-  fieldset dl.colspan-2:has(:not(div)) dd.colspan-4,
-  fieldset dl.colspan-2:has(:not(div)) dd.colspan-5,
-  fieldset dl.colspan-2:has(:not(div)) dd.colspan-full,
-  fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-1),
-  fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl.colspan-3:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl.colspan-3:has(:not(div)) dd.colspan-1,
-  fieldset dl.colspan-3:has(:not(div)) dd.colspan-2,
-  fieldset dl.colspan-3:has(:not(div)) dd.colspan-3,
-  fieldset dl.colspan-3:has(:not(div)) dd.colspan-4,
-  fieldset dl.colspan-3:has(:not(div)) dd.colspan-5,
-  fieldset dl.colspan-3:has(:not(div)) dd.colspan-full,
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-1),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl.colspan-4:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-1,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-2,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-3,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-4,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-5,
-  fieldset dl.colspan-4:has(:not(div)) dd.colspan-full,
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-1),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-2),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-3),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-4),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-5),
-  fieldset dl.colspan-5:has(:not(div)) dt:has(+ dd.colspan-full),
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-1,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-2,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-3,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-4,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-5,
-  fieldset dl.colspan-5:has(:not(div)) dd.colspan-full {
-    grid-column: span 1;
+  .semanticForms details::details-content {
+    height: 0;
+    overflow: hidden;
+    transition: height 250ms, content-visibility 250ms;
+    transition-behavior: allow-discrete;
+  }
+}
+.semanticForms details summary {
+  cursor: pointer;
+  margin: 0;
+  margin-bottom: 10px;
+  line-height: 1;
+  position: absolute;
+  top: 10px;
+  left: 22px;
+  transition: top 250ms;
+}
+.semanticForms details summary::-webkit-details-marker, .semanticForms details summary::marker {
+  content: "";
+}
+.semanticForms details summary::before {
+  content: "";
+  border-width: 0.4rem;
+  border-style: solid;
+  border-color: transparent transparent transparent var(--semanticFormsTextColor);
+  position: absolute;
+  top: 0;
+  left: -10px;
+  transform: rotate(0);
+  transform-origin: 0.2rem 50%;
+  transition: 250ms transform ease;
+}
+.semanticForms details[open]::details-content {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
+}
+@supports (interpolate-size: allow-keywords) {
+  .semanticForms details[open]::details-content {
+    height: auto;
   }
 }
+.semanticForms details[open] summary::before {
+  transform: rotate(90deg);
+}
+.semanticForms details[open] > dl:first-of-type {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+.semanticForms dl {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.semanticForms dl div {
+  position: relative;
+  width: 100%;
+  max-width: var(--semanticFormsInputMaxWidth);
+}
+.semanticForms dl div:has([data-max-content]) {
+  min-width: 150px;
+  max-width: max-content;
+}
+.semanticForms dl div:has([data-max-content]) dd {
+  width: max-content;
+}
+.semanticForms dl div:has([data-max-content]) dd input, .semanticForms dl div:has([data-max-content]) dd select {
+  field-sizing: content;
+  min-width: 150px;
+  max-width: max-content;
+}
+.semanticForms dl div:has(dd > button:only-child, dd > input[type=button]:only-child, dd > input[type=submit]:only-child, dd > input[type=reset]:only-child) dt label {
+  display: none;
+}
+.semanticForms dl div dd {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 100%;
+}
+.semanticForms dl div dd.singleCheckbox, .semanticForms dl div dd.singleRadio {
+  display: grid;
+  grid-template-columns: 15px 1fr;
+  align-items: center;
+  padding-left: 11px;
+}
+.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;
+}
+.semanticForms dl div dd.singleCheckbox label:nth-of-type(2), .semanticForms dl div dd.singleRadio label:nth-of-type(2) {
+  grid-column: 1/-1;
+  padding: 0 10px;
+  font-size: small;
+  color: var(--semanticFormsTextColor);
+}
+.semanticForms dl div dd.singleRadio > input {
+  margin: 0;
+}
+.semanticForms dl div dd.checkboxes ul, .semanticForms dl div dd.radios ul {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--semanticFormsInputTopMargin);
+  padding-left: 10px;
+  gap: 5px;
+}
+.semanticForms dl div dd.checkboxes ul li, .semanticForms dl div dd.radios ul li {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.semanticForms dl div dd.checkboxes > label, .semanticForms dl div dd.radios > label {
+  padding-left: 20px;
+  font-size: small;
+  color: var(--semanticFormsTextColor);
+}
+.semanticForms dl div dd:has(button:only-child, input[type=button]:only-child, input[type=submit]:only-child, input[type=reset]:only-child) {
+  margin-left: 0;
+}
+.semanticForms dl div dd:has(button:only-child, input[type=button]:only-child, input[type=submit]:only-child, input[type=reset]:only-child) button, .semanticForms dl div dd:has(button:only-child, input[type=button]:only-child, input[type=submit]:only-child, input[type=reset]:only-child) input[type=button], .semanticForms dl div dd:has(button:only-child, input[type=button]:only-child, input[type=submit]:only-child, input[type=reset]:only-child) input[type=submit], .semanticForms dl div dd:has(button:only-child, input[type=button]:only-child, input[type=submit]:only-child, input[type=reset]:only-child) input[type=reset] {
+  height: var(--semanticFormsInputHeight);
+}
+.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+}
+.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) button.clear, .semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) button.show {
+  right: 36%;
+}
+.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) input:not([type=submit]), .semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) select, .semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) textarea {
+  grid-row: 1/2;
+  grid-column: 1/2;
+}
+.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) button:not(.clear, .show),
+.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) input[type=submit]:not(.clear, .show),
+.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) input[type=button]:not(.clear, .show) {
+  grid-row: 1/2;
+  grid-column: 2/3;
+  width: 100%;
+  max-width: 100%;
+  padding: 10px;
+  height: var(--semanticFormsInputHeight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+}
+.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) label:nth-of-type(2),
+.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) label:not(.floatLabelFormAnimatedLabel) {
+  grid-row: 2/3;
+  grid-column: 1/-1;
+}
+.semanticForms p:has(input:not([type=checkbox], [type=radio]), textarea, label) {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.semanticForms p:has(input[type=checkbox], input[type=radio]) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+}
+.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
+.semanticForms ul:has(li > input, li > label, li > button, li > select, li > textarea) {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  list-style-type: none;
+}
+.semanticForms .align-start {
+  justify-self: start;
+}
+.semanticForms .align-center {
+  justify-self: center;
+}
+.semanticForms .align-end {
+  justify-self: end;
+}
+
+.semanticForms table,
+table.semanticForms {
+  table-layout: fixed;
+  width: 100%;
+  border-spacing: 0;
+  border: var(--semanticFormsBorder);
+  border-radius: 10px;
+  margin-bottom: 15px;
+  overflow: hidden;
+}
+.semanticForms table tr.title th,
+table.semanticForms tr.title th {
+  background-color: var(--semanticFormsTableTitleColor);
+}
+.semanticForms table th,
+table.semanticForms th {
+  background-color: var(--semanticFormsTableHeaderColor);
+  font-weight: bold;
+}
+.semanticForms table tr:nth-child(odd) td,
+table.semanticForms tr:nth-child(odd) td {
+  background-color: var(--semanticFormsTableOddColor);
+}
+.semanticForms table tr:nth-child(even) td,
+table.semanticForms tr:nth-child(even) td {
+  background-color: var(--semanticFormsTableEvenColor);
+}
+.semanticForms table td, .semanticForms table th,
+table.semanticForms td,
+table.semanticForms th {
+  border-right: var(--semanticFormsTableBorder);
+  border-bottom: var(--semanticFormsTableBorder);
+  padding: 7px 10px;
+}
+.semanticForms table th:last-of-type, .semanticForms table td:last-of-type,
+table.semanticForms th:last-of-type,
+table.semanticForms td:last-of-type {
+  border-right: none;
+}
+.semanticForms table tbody tr:last-of-type th, .semanticForms table tbody tr:last-of-type td,
+table.semanticForms tbody tr:last-of-type th,
+table.semanticForms tbody tr:last-of-type td {
+  border-bottom: none;
+}
+.semanticForms table menu:has(li > input, li > label, li > button, li > select, li > textarea, li > a),
+table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea, li > a) {
+  width: max-content;
+}
 
 /*# sourceMappingURL=semantic-forms.css.map */
diff --git a/dist/semantic-forms.js b/dist/semantic-forms.js
index d7c14f1..12ad353 100644
--- a/dist/semantic-forms.js
+++ b/dist/semantic-forms.js
@@ -1,32 +1,32 @@
 (function(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define("semanticForms",[],factory);else if(typeof exports==="object")exports["semanticForms"]=factory();else root["semanticForms"]=factory()})(this,()=>/******/(()=>{// webpackBootstrap
 /******/var __webpack_modules__={
 /***/90:
-/***/module=>{const semanticForms=()=>{
+/***/(module,__unused_webpack_exports,__webpack_require__)=>{const{createKeyboardShortcut,shortcutListener}=__webpack_require__(497);const{enhanceInput,handleUndoRedo}=__webpack_require__(866);const semanticForms=()=>{
 // do some feature detection so none of the JS executes if the browser is too old
-if(typeof document.getElementsByClassName!=="function"||typeof document.querySelector!=="function"||!document.body.classList||!window.MutationObserver){console.warn("semantic-forms was loaded into an unsupported browser and will not execute.");return}const passwordShow='<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m1 12s4-8 11-8 11 8 11 8"/><path d="m1 12s4 8 11 8 11-8 11-8"/><circle cx="12" cy="12" r="3"/></g></svg>';const passwordHide='<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m2 2 20 20"/><path d="m6.71277 6.7226c-3.04798 2.07267-4.71277 5.2774-4.71277 5.2774s3.63636 7 10 7c2.0503 0 3.8174-.7266 5.2711-1.7116m-6.2711-12.23018c.3254-.03809.6588-.05822 1-.05822 6.3636 0 10 7 10 7s-.6918 1.3317-2 2.8335"/><path d="m14 14.2362c-.5308.475-1.2316.7639-2 .7639-1.6569 0-3-1.3431-3-3 0-.8237.33193-1.5698.86932-2.11192"/></g></svg>';const helpTextIcon='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;"><rect width="16" height="16" fill="none"/><path fill="currentColor" d="M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z"/></svg>';const nodeNameLookup=["TEXTAREA","SELECT"];const inputTypeLookup=["checkbox","color","date","datetime-local","email","file","image","month","number","password","radio","range","search","tel","text","time","url","week"];const keyboardShortcuts=[];
+if(typeof document.getElementsByClassName!=="function"||typeof document.querySelector!=="function"||!document.body.classList||!window.MutationObserver){console.warn("semantic-forms was loaded into an unsupported browser and will not execute.");return}
 // custom keyboard shortcut listener
-document.addEventListener("keydown",e=>{const specialCharMap={Minus:"-",Equal:"=",BracketLeft:"[",BracketRight:"]",Backslash:"\\",Semicolon:";",Quote:"'",Comma:",",Period:".",Slash:"/",Backquote:"`"};const shiftSpecialCharMap={1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")",Minus:"_",Equal:"+",BracketLeft:"{",BracketRight:"}",Backslash:"|",Semicolon:":",Quote:'"',Comma:"<",Period:">",Slash:"?",Backquote:"~"};const shortcut=keyboardShortcuts.find(shortcut=>{let matchesKey=false;if(e.altKey&&!e.shiftKey)
-// mac adjusts the key value if altKey is pressed
-matchesKey="Key"+shortcut.key.toUpperCase()===e.code||"Digit"+shortcut.key.toUpperCase()===e.code||shortcut.key===e.key||specialCharMap[e.code]===shortcut.key;else if(e.shiftKey){
-// check shift special character map
-const code=e.code.replace(/Key|Digit/,"");matchesKey=(shiftSpecialCharMap[code]||shiftSpecialCharMap[e.key])&&(shiftSpecialCharMap[code]===shortcut.key||shiftSpecialCharMap[e.key]===shortcut.key)}else matchesKey=shortcut.key.toUpperCase()===e.key.toUpperCase();if(!matchesKey)return false;let matchesModifier;if(shortcut.modifier){if(shortcut.modifier===shortcut.defaultModifier)matchesModifier=shortcut.os==="windows"||shortcut.os==="linux"?e.ctrlKey:e.metaKey;if(shortcut.modifier==="meta")matchesModifier=e.metaKey;if(shortcut.modifier==="alt")matchesModifier=e.altKey;if(shortcut.modifier==="ctrl")matchesModifier=e.ctrlKey}return matchesModifier});if(shortcut){e.preventDefault();shortcut.input.focus()}});
+const keyboardShortcuts=[];document.addEventListener("keydown",e=>shortcutListener(e,keyboardShortcuts));
 // progressively enhance form elements that have the semanticForms class
 const forms=document.querySelectorAll("form.semanticForms:not(.semanticFormsActive), table.semanticForms:not(.semanticFormsActive)");for(const form of forms){form.classList.add("semanticFormsActive");if(form.classList.contains("lowFlow"))continue;
 // update each input in the semantic form
-const inputs=Array.from(form.querySelectorAll("input, textarea, select"));for(let input of inputs){
-// ignore input if it has previously been formatted
-if(input.classList.contains("semanticform")||!input.id)continue;const type=input.getAttribute("type");if(nodeNameLookup.includes(input.nodeName)||inputTypeLookup.includes(type)){
-// recursively find <dl> element
-let dl=input.parentNode;while(dl&&dl.nodeName!=="DL")dl=dl.parentNode;if(!dl)continue;if(!dl.classList.contains("floatLabelForm"))dl.classList.add("floatLabelForm");const label=input.parentNode.parentNode.id&&(type==="checkbox"||type==="radio")?document.querySelector("label[data-for="+input.parentNode.parentNode.id.replace(/\./g,"\\.")+"]"):document.querySelector("label[for="+input.id.replace(/\./g,"\\.")+"]");if(!label)console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`);input.classList.add("semanticform");
-// #region create labels
-const newLabel=document.createElement("label");newLabel.className="floatLabelFormAnimatedLabel";if(type==="checkbox"||type==="radio"){
-// recursively find <dd> element
-let dd=input.parentNode;while(dd&&dd.nodeName!=="DD")dd=dd.parentNode;if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a <dd> element.`);continue}if(dd.firstChild.nodeName!=="LABEL"){if(type==="checkbox"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleCheckbox");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}if(type==="radio"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleRadio");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}newLabel.innerHTML=label.innerHTML;if(label.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=label.getAttribute("title");label.innerHTML+=` <span title="${text}" class="help">${helpTextIcon}</span>`;newLabel.innerHTML+=` <span title="${text}" class="help">${helpTextIcon}</span>`}if(dd.querySelector(":required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";label.innerHTML+=` <span title="${text}" class="required">*</span>`;newLabel.innerHTML+=` <span title="${text}" class="required">*</span>`}if(!dd.querySelector("label"))dd.append(newLabel)}
-// removes old div that a radio or checkbox may have been added to
-if(dd.parentElement.nodeName==="DIV")dd.parentElement.remove();const div=document.createElement("div");div.append(label.closest("dt"),dd);dl.append(div)}else{newLabel.setAttribute("for",input.id);newLabel.innerHTML=label.innerHTML;if(input.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=input.getAttribute("title");newLabel.innerHTML+=` <span title="${text}" class="help">${helpTextIcon}</span>`}if(input.hasAttribute("required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";newLabel.innerHTML+=` <span title="${text}" class="required">*</span>`}label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}
-// #endregion
-// #region keyboard shortcuts
-if(input.getAttribute("data-focus-key")!==null){function handleKeyboardShortcut(){const os=getOS();
+const inputs=Array.from(form.querySelectorAll("input, textarea, select"));for(const input of inputs){enhanceInput(input,form);
+// handle keyboard shortcuts
+if(input.getAttribute("data-focus-key")!==null){const shortcut=createKeyboardShortcut(input,keyboardShortcuts);keyboardShortcuts.push(shortcut)}}}
+// prevents multiple listeners
+document.removeEventListener("keydown",handleUndoRedo);document.addEventListener("keydown",handleUndoRedo);
+// monitor changes to the DOM and enhance new semanticForms forms that get added
+if(!window.semanticFormsObserver){window.semanticFormsObserver=new window.MutationObserver(mutations=>{let stop=false;for(const mutation of mutations){for(const node of mutation.addedNodes)if(node.nodeName==="FORM"||node?.querySelector?.("form")){semanticForms();stop=true}if(stop)break}});window.semanticFormsObserver.observe(document.body,{attributes:false,childList:true,characterData:false,subtree:true})}semanticForms.reinitialize=form=>{form.classList.remove("semanticFormsActive");semanticForms()}};module.exports=semanticForms
+/***/},
+/***/497:
+/***/(module,__unused_webpack_exports,__webpack_require__)=>{const{getOS,insertAfter}=__webpack_require__(584);const specialCharMap={Minus:"-",Equal:"=",BracketLeft:"[",BracketRight:"]",Backslash:"\\",Semicolon:";",Quote:"'",Comma:",",Period:".",Slash:"/",Backquote:"`"};const shiftSpecialCharMap={1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")",Minus:"_",Equal:"+",BracketLeft:"{",BracketRight:"}",Backslash:"|",Semicolon:":",Quote:'"',Comma:"<",Period:">",Slash:"?",Backquote:"~"};
+// handles keyboard shortcut events
+const shortcutListener=(e,shortcuts)=>{
+// search for matching shortcut from cached shortcut configs
+const shortcut=shortcuts.find(shortcut=>{let matchesKey=false;if(e.altKey&&!e.shiftKey)
+// mac adjusts the key value if altKey is pressed
+matchesKey="Key"+shortcut.key.toUpperCase()===e.code||"Digit"+shortcut.key.toUpperCase()===e.code||shortcut.key===e.key||specialCharMap[e.code]===shortcut.key;else if(e.shiftKey){
+// check shift special character map
+const code=e.code.replace(/Key|Digit/,"");matchesKey=(shiftSpecialCharMap[code]||shiftSpecialCharMap[e.key])&&(shiftSpecialCharMap[code]===shortcut.key||shiftSpecialCharMap[e.key]===shortcut.key)}else matchesKey=shortcut.key.toUpperCase()===e.key.toUpperCase();if(!matchesKey)return false;let matchesModifier;if(shortcut.modifier){if(shortcut.modifier===shortcut.defaultModifier)matchesModifier=shortcut.os==="windows"||shortcut.os==="linux"?e.ctrlKey:e.metaKey;if(shortcut.modifier==="meta")matchesModifier=e.metaKey;if(shortcut.modifier==="alt")matchesModifier=e.altKey;if(shortcut.modifier==="ctrl")matchesModifier=e.ctrlKey}return matchesModifier});if(shortcut){e.preventDefault();shortcut.input.focus()}};const createKeyboardShortcut=(input,shortcuts)=>{const os=getOS();
 // this is the custom keyword for meta on linux/mac, ctrl on windows
 const defaultModifier="metactrl";
 // get focus key value
@@ -40,43 +40,69 @@ const recognizedModifiers=["ctrl","alt","opt","meta","cmd",defaultModifier];if(!
 // retrieve modifier symbol
 if(["alt","opt"].includes(modifierKey))modifierSymbol=os==="mac"?"⌥":"⎇";else if(["meta","win","cmd"].includes(modifierKey)||modifierKey===defaultModifier&&os==="mac")if(os==="mac")modifierSymbol="⌘";else if(os==="linux")modifierSymbol="◆";else modifierSymbol="⊞";else if(modifierKey==="ctrl"||modifierKey===defaultModifier&&(os==="windows"||os==="linux"))if(os==="mac")modifierSymbol="⌃";else modifierSymbol="Ctrl";
 // add the shortcut to the cached array, if not a duplicate
-if(keyboardShortcuts.some(shortcut=>shortcut.key===focusKey&&shortcut.modifier===modifierKey))console.error(`Duplicate keyboard shortcut "${modifierKey} + ${focusKey}" detected. Only the first input will be focusable using this keyboard shortcut.`,input);else keyboardShortcuts.push({key:focusKey,modifier:modifierKey,input,os,defaultModifier});
+if(shortcuts.some(shortcut=>shortcut.key===focusKey&&shortcut.modifier===modifierKey))console.error(`Duplicate keyboard shortcut "${modifierKey} + ${focusKey}" detected. Only the first input will be focusable using this keyboard shortcut.`,input);
 // set the shortcut indicator/title
 if(input.nodeName==="TEXTAREA"||input.type==="text"||input.type==="number"){
 // create focus indicator for valid inputs
-const indicator=document.createElement("span");indicator.classList.add("focus-key");indicator.innerHTML=`<kbd>${modifierSymbol} ${focusKey.toUpperCase()}</kbd>`;insertAfter(indicator,newLabel)}else
+const indicator=document.createElement("span");indicator.classList.add("focus-key");indicator.innerHTML=`<kbd>${modifierSymbol} ${focusKey.toUpperCase()}</kbd>`;const label=input.nextSibling;insertAfter(indicator,label)}else
 // update the input title
-if(input.getAttribute("title"))input.setAttribute("title",input.getAttribute("title")+` (${modifierSymbol} + ${focusKey})`);else input.setAttribute("title",`Focus with ${modifierSymbol} + ${focusKey}`)}
-// placed in a function so that it may exit while still completing other semantic-form enhancements
-handleKeyboardShortcut()}
+if(input.getAttribute("title"))input.setAttribute("title",input.getAttribute("title")+` (${modifierSymbol} + ${focusKey})`);else input.setAttribute("title",`Focus with ${modifierSymbol} + ${focusKey}`);return{key:focusKey,modifier:modifierKey,input,os,defaultModifier}};module.exports={shortcutListener,createKeyboardShortcut}
+/***/},
+/***/584:
+/***/module=>{
+/**
+ * Uses the navigator to best determine the clients operating system.
+ * @returns Operating system string (`mac`, `windows`, `linux`)
+ */
+const getOS=()=>{const userAgent=window.navigator.userAgent;const platform=window.navigator.platform;let os=null;if(platform.includes("Win"))os="windows";else if(platform.includes("Mac")||/iPhone|iPad|iPod/.test(userAgent))os="mac";else if(platform.includes("Linux")||/Android/.test(userAgent))os="linux";return os}
+/**
+ * Places an element immediately after another element
+ * @param {Object} newNode element being placed after the reference node
+ * @param {*} referenceNode element to be used as reference for new node
+ */;const insertAfter=(newNode,referenceNode)=>{if(referenceNode.nextSibling)referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling);else referenceNode.parentNode.appendChild(newNode)};module.exports={getOS,insertAfter}
+/***/},
+/***/866:
+/***/(module,__unused_webpack_exports,__webpack_require__)=>{const{insertAfter}=__webpack_require__(584);const icons={passwordShow:'<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m1 12s4-8 11-8 11 8 11 8"/><path d="m1 12s4 8 11 8 11-8 11-8"/><circle cx="12" cy="12" r="3"/></g></svg>',passwordHide:'<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m2 2 20 20"/><path d="m6.71277 6.7226c-3.04798 2.07267-4.71277 5.2774-4.71277 5.2774s3.63636 7 10 7c2.0503 0 3.8174-.7266 5.2711-1.7116m-6.2711-12.23018c.3254-.03809.6588-.05822 1-.05822 6.3636 0 10 7 10 7s-.6918 1.3317-2 2.8335"/><path d="m14 14.2362c-.5308.475-1.2316.7639-2 .7639-1.6569 0-3-1.3431-3-3 0-.8237.33193-1.5698.86932-2.11192"/></g></svg>',helpIcon:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;"><rect width="16" height="16" fill="none"/><path fill="currentColor" d="M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z"/></svg>'};const lookups={nodeName:["TEXTAREA","SELECT"],inputType:["checkbox","color","date","datetime-local","email","file","image","month","number","password","radio","range","search","tel","text","time","url","week"]};let lastFocusedInput;let lastClearFieldPressed;const enhanceInput=(input,form)=>{
+// ignore input if it has previously been formatted
+if(input.classList.contains("semanticform")||!input.id)return;const type=input.getAttribute("type");if(!lookups.nodeName.includes(input.nodeName)&&!lookups.inputType.includes(type))return;
+// recursively find <dl> element
+let dl=input.parentNode;while(dl&&dl.nodeName!=="DL")dl=dl.parentNode;if(!dl)return;if(!dl.classList.contains("floatLabelForm"))dl.classList.add("floatLabelForm");const label=input.parentNode.parentNode.id&&(type==="checkbox"||type==="radio")?document.querySelector("label[data-for="+input.parentNode.parentNode.id.replace(/\./g,"\\.")+"]"):document.querySelector("label[for="+input.id.replace(/\./g,"\\.")+"]");if(!label)console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`);input.classList.add("semanticform");
+// #region create labels
+const newLabel=document.createElement("label");newLabel.className="floatLabelFormAnimatedLabel";if(type==="checkbox"||type==="radio"){
+// recursively find <dd> element
+let dd=input.parentNode;while(dd&&dd.nodeName!=="DD")dd=dd.parentNode;if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a <dd> element.`);return}if(dd.firstChild.nodeName!=="LABEL"){if(type==="checkbox"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleCheckbox");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}if(type==="radio"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleRadio");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}newLabel.innerHTML=label.innerHTML;if(label.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=label.getAttribute("title");label.innerHTML+=` <span title="${text}" class="help">${icons.helpIcon}</span>`;newLabel.innerHTML+=` <span title="${text}" class="help">${icons.helpIcon}</span>`}if(dd.querySelector(":required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";label.innerHTML+=` <span title="${text}" class="required">*</span>`;newLabel.innerHTML+=` <span title="${text}" class="required">*</span>`}if(!dd.querySelector("label"))dd.append(newLabel)}
+// removes old div that a radio or checkbox may have been added to
+if(dd.parentElement.nodeName==="DIV")dd.parentElement.remove();const div=document.createElement("div");div.append(label.closest("dt"),dd);dl.append(div)}else{newLabel.setAttribute("for",input.id);newLabel.innerHTML=label.innerHTML;if(input.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=input.getAttribute("title");newLabel.innerHTML+=` <span title="${text}" class="help">${icons.helpIcon}</span>`}if(input.hasAttribute("required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";newLabel.innerHTML+=` <span title="${text}" class="required">*</span>`}label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}
 // #endregion
 // #region standard inputs
+const isWrapped=input.closest("dd").parentElement.nodeName==="DIV";
 // check for auto-grow attribute on textareas
 if(input.getAttribute("data-auto-grow")!==null){
 // progressively enhance inputs into textareas
 if(input.nodeName==="INPUT"&&input.type==="text"){const newInput=document.createElement("textarea");newInput.id=input.id;newInput.class=input.class;newInput.innerText=input.value;newInput.setAttribute("data-auto-grow","");input.replaceWith(newInput);input=newInput}if(input.nodeName==="TEXTAREA")
 // when pressing enter while this input is focused, we want to submit
-input.addEventListener("keypress",e=>{if(e.key!=="Enter"||e.key==="Enter"&&e.shiftKey)return;e.preventDefault();form.requestSubmit()})}if(type!=="checkbox"&&type!=="radio"){if(!input.getAttribute("placeholder"))input.setAttribute("placeholder"," ");const div=document.createElement("div");const dt=label.closest("dt");const dd=input.closest("dd");if(!dt){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding <dt> element.`);continue}if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding <dd> element.`);continue}
-// #region input clear button
+input.addEventListener("keypress",e=>{if(e.key!=="Enter"||e.key==="Enter"&&e.shiftKey)return;e.preventDefault();form.requestSubmit()})}if(type!=="checkbox"&&type!=="radio"){if(!input.getAttribute("placeholder"))input.setAttribute("placeholder"," ");const div=isWrapped?input.closest("dd").parentElement:document.createElement("div");const dt=label.closest("dt");const dd=input.closest("dd");if(!dt||!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding ${!dt?"<dt>":"<dd>"} element.`);return}
+// input clear button
 if(input.nodeName!=="SELECT"&&type!=="range"){const clearBtn=document.createElement("button");clearBtn.type="button";clearBtn.title=input.getAttribute("data-clear-field-text")||"Clear field";clearBtn.ariaLabel=input.getAttribute("data-clear-field-text")||"Clear field";clearBtn.tabIndex=-1;clearBtn.innerHTML='<svg viewBox="0 0 16 16" width="18" height="18"><path d="M 1 1 L 15 15 M 1 15 L 15 1" fill="none" stroke-width="2" stroke="currentColor" />';clearBtn.classList.add("clear");clearBtn.id=`semanticFormsClearButton_${input.id}`;clearBtn.addEventListener("click",()=>{input.previousValue=input.value;input.value="";input.focus();lastClearFieldPressed=input.id;
 // used for any other updates required by various inputs
 input.dispatchEvent(new Event("input",{bubbles:true}))});insertAfter(clearBtn,dd.querySelector("label"))}input.addEventListener("focus",event=>{if(event.target.nodeName==="INPUT")lastFocusedInput=event.target});
-// #endregion
-// check for colspan- utility class
+// check for colspan- utility class on dd, and move to div
 if(/colspan-/.test(dd.className)){const match=dd.className.match(/colspan-([0-9]|full)/)[0];dd.classList.remove(match);div.classList.add(match)}
 // check for max-content attribute
 // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing
-if(input.getAttribute("data-max-content")!==null)if(!("fieldSizing"in document.createElement("input").style)){const adjustWidth=()=>{const value=input.value!==""?input.value:input.placeholder;const width=value.length*8+40;input.style.width=width+"px";input.style.maxWidth="100%";div.style.width=width+"px"};adjustWidth();input.addEventListener("input",adjustWidth)}div.append(dt,dd);dl.append(div);
+if(input.getAttribute("data-max-content")!==null)if(!("fieldSizing"in document.createElement("input").style)){const adjustWidth=()=>{const value=input.value!==""?input.value:input.placeholder;const width=value.length*8+40;input.style.width=width+"px";input.style.maxWidth="100%";div.style.width=width+"px"};adjustWidth();input.addEventListener("input",adjustWidth)}
+// if the user did not wrap the input in a div, do it for them
+if(!isWrapped){div.append(dt,dd);dl.append(div);
 // determine visibility of newly created <div>
-if(dt.style.display==="none"&&dd.style.display==="none")div.style.display="none"}
+if(dt.style.display==="none"&&dd.style.display==="none")div.style.display="none"}}
 // #endregion
 // handle file input clear btn, cannot be handled with CSS
 if(type==="file"){const clearBtn=input.parentElement.querySelector(".clear");input.addEventListener("input",event=>{clearBtn.style.display=event.target.files.length?"flex":"none"});clearBtn.addEventListener("click",()=>{clearBtn.style.display="none"})}
 // handle range inputs with a class to display the value
+// TODO: should this be a data attribute instead?
 if(type==="range"&&input.classList.contains("displayValue")){const label=input.parentNode.parentNode.querySelector("dd label");label.innerHTML+=`<span class="seperator">: </span><output>${input.value}</output>`;input.addEventListener("input",event=>{const output=event.target.parentNode.parentNode.querySelector("output");output.innerHTML=event.target.value})}
-// #region show password button
-if(type==="password"&&input.getAttribute("data-no-reveal")===null){const showBtn=document.createElement("button");showBtn.type="button";showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";showBtn.tabIndex=-1;showBtn.innerHTML=passwordShow;showBtn.classList.add("show");showBtn.id=`semanticFormsShowButton_${input.id}`;const dd=input.closest("dd");if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a <dd> element.`);continue}showBtn.addEventListener("click",()=>{if(input.type==="password"){showBtn.innerHTML=passwordHide;showBtn.title=input.getAttribute("data-hide-password-text")||"Hide password";showBtn.ariaLabel=input.getAttribute("data-hide-password-text")||"Hide password";input.type="text"}else{showBtn.innerHTML=passwordShow;showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";input.type="password"}input.focus()});insertAfter(showBtn,dd.querySelector("label"))}
-// #endregion
+// show password button
+if(type==="password"&&input.getAttribute("data-no-reveal")===null){const showBtn=document.createElement("button");showBtn.type="button";showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";showBtn.tabIndex=-1;showBtn.innerHTML=icons.passwordShow;showBtn.classList.add("show");showBtn.id=`semanticFormsShowButton_${input.id}`;const dd=input.closest("dd");if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a <dd> element.`);return}showBtn.addEventListener("click",()=>{if(input.type==="password"){showBtn.innerHTML=icons.passwordHide;showBtn.title=input.getAttribute("data-hide-password-text")||"Hide password";showBtn.ariaLabel=input.getAttribute("data-hide-password-text")||"Hide password";input.type="text"}else{showBtn.innerHTML=icons.passwordShow;showBtn.title=input.getAttribute("data-show-password-text")||"Show password";showBtn.ariaLabel=input.getAttribute("data-show-password-text")||"Show password";input.type="password"}input.focus()});insertAfter(showBtn,dd.querySelector("label"))}
 // add listener to shift clear button when scrollbar present
 if(input.nodeName==="TEXTAREA"){if(input.getAttribute("data-disable-autosize")===null){
 // add auto-sizing
@@ -101,28 +127,17 @@ if(maxRows)input.setAttribute("rows",""+Math.min(rows,Number(maxRows)));else inp
 input.dispatchEvent(new Event("input",{bubbles:true}))}
 // progressively enhance textarea for Firefox and Safari
 // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing
-if(input.getAttribute("data-auto-grow")!==null){const adjustHeight=()=>{if(input.value.length){const borderWidth=parseInt(window.getComputedStyle(input).getPropertyValue("border-width"));input.style.height=input.scrollHeight+borderWidth*2+"px"}else input.style.height=window.getComputedStyle(form).getPropertyValue("--semanticFormsInputHeight")};
+if(input.getAttribute("data-auto-grow")!==null)if(!("fieldSizing"in document.createElement("input").style)){const adjustHeight=()=>{if(input.value.length){const borderWidth=parseInt(window.getComputedStyle(input).getPropertyValue("border-width"));input.style.height=input.scrollHeight+borderWidth*2+"px"}else input.style.height=window.getComputedStyle(form).getPropertyValue("--semanticFormsInputHeight")};
 // set initial height to semantic-forms CSS variable
 input.style.height=window.getComputedStyle(form).getPropertyValue("--semanticFormsInputHeight");input.addEventListener("input",adjustHeight)}
 // shifts the clear button to the right if a scrollbar is present
-const shiftClearBtn=()=>{const clearBtn=input.parentElement?.querySelector("button.clear");if(clearBtn)clearBtn.style.marginRight=input.clientHeight<input.scrollHeight?"15px":""};input.addEventListener("input",shiftClearBtn);input.addEventListener("mouseup",shiftClearBtn);shiftClearBtn()}}}}
-/**
-   * Places an element immediately after another element
-   * @param {Object} newNode element being placed after the reference node
-   * @param {*} referenceNode element to be used as reference for new node
-   */function insertAfter(newNode,referenceNode){if(referenceNode.nextSibling)referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling);else referenceNode.parentNode.appendChild(newNode)}
-/**
-   * Uses the navigator to best determine the clients operating system.
-   * @returns Operating system string (`mac`, `windows`, `linux`)
-   */function getOS(){const userAgent=window.navigator.userAgent;const platform=window.navigator.platform;let os=null;if(platform.includes("Win"))os="windows";else if(platform.includes("Mac")||/iPhone|iPad|iPod/.test(userAgent))os="mac";else if(platform.includes("Linux")||/Android/.test(userAgent))os="linux";return os}
+const shiftClearBtn=()=>{const clearBtn=input.parentElement?.querySelector("button.clear");if(clearBtn)clearBtn.style.marginRight=input.clientHeight<input.scrollHeight?"15px":""};input.addEventListener("input",shiftClearBtn);input.addEventListener("mouseup",shiftClearBtn);shiftClearBtn()}};const handleUndoRedo=event=>{
 // handle undo/redo
-let lastFocusedInput;let lastClearFieldPressed;document.addEventListener("keydown",event=>{if((event.ctrlKey||event.metaKey)&&event.key==="z"&&!event.shiftKey){
+if((event.ctrlKey||event.metaKey)&&event.key==="z"&&!event.shiftKey){
 // undo clearing a field
-if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.previousValue){lastFocusedInput.redoValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.previousValue}}else if(event.ctrlKey&&event.key==="y"||event.metaKey&&event.shiftKey&&event.key==="z")
+if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.previousValue){console.log("update redo value",lastFocusedInput.value);lastFocusedInput.redoValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.previousValue}}else if(event.ctrlKey&&event.key==="y"||event.metaKey&&event.shiftKey&&event.key==="z")
 // redo clearing a field
-if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.redoValue){lastFocusedInput.previousValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.redoValue}});
-// monitor changes to the DOM and enhance new semanticForms forms that get added
-if(!window.semanticFormsObserver){window.semanticFormsObserver=new window.MutationObserver(mutations=>{let stop=false;for(const mutation of mutations){for(const node of mutation.addedNodes)if(node.nodeName==="FORM"||node?.querySelector?.("form")){semanticForms();stop=true}if(stop)break}});window.semanticFormsObserver.observe(document.body,{attributes:false,childList:true,characterData:false,subtree:true})}semanticForms.reinitialize=form=>{form.classList.remove("semanticFormsActive");semanticForms()}};module.exports=semanticForms
+if(lastFocusedInput)if(lastFocusedInput?.parentNode?.querySelector("button.clear").id===`semanticFormsClearButton_${lastClearFieldPressed}`||lastFocusedInput?.parentNode?.querySelector("button.clear").name===`semanticFormsClearButton_${lastClearFieldPressed}`)if(lastFocusedInput.redoValue){lastFocusedInput.previousValue=lastFocusedInput.value;lastFocusedInput.value=lastFocusedInput.redoValue}};module.exports={enhanceInput,handleUndoRedo}
 /***/}
 /******/};
 /************************************************************************/
diff --git a/docs/package-lock.json b/docs/package-lock.json
index dc737c9..90adb3c 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -26,7 +26,8 @@
       }
     },
     "..": {
-      "version": "5.2.2",
+      "name": "semantic-forms",
+      "version": "5.3.0",
       "license": "CC-BY-4.0",
       "devDependencies": {
         "@jsdevtools/coverage-istanbul-loader": "3.0.5",
@@ -134,6 +135,7 @@
       "integrity": "sha512-h0Un1ieD+HUrzBH6dJXhod3ifSghk5Hw/2Y4/KHBziPlZecrFyE9YOTPU6eOs0V9pYl8gOs86fkr/KN8lUX39A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@keyv/serialize": "^1.1.1"
       }
@@ -251,6 +253,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -273,6 +276,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1284,6 +1288,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1327,6 +1332,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -1829,6 +1835,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -2907,9 +2914,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.248",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.248.tgz",
-      "integrity": "sha512-zsur2yunphlyAO4gIubdJEXCK6KOVvtpiuDfCIqbM9FjcnMYiyn0ICa3hWfPr0nc41zcLWobgy1iL7VvoOyA2Q==",
+      "version": "1.5.249",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.249.tgz",
+      "integrity": "sha512-5vcfL3BBe++qZ5kuFhD/p8WOM1N9m3nwvJPULJx+4xf2usSlZFJ0qoNYO2fOX4hi3ocuDcmDobtA+5SFr4OmBg==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -3253,6 +3260,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -3460,6 +3468,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -3527,6 +3536,7 @@
       "integrity": "sha512-jDex9s7D/Qial8AGVIHq4W7NswpUD5DPDL2RH8Lzd9EloWUuvUkHfv4FRLMipH5q2UtyurorBkPeNi1wVWNh3Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "builtins": "^5.0.1",
         "eslint-plugin-es": "^4.1.0",
@@ -3553,6 +3563,7 @@
       "integrity": "sha512-57Zzfw8G6+Gq7axm2Pdo3gW/Rx3h9Yywgn61uE/3elTCOePEHVrn2i5CdfBwA1BLK0Q0WqctICIUSqXZW/VprQ==",
       "dev": true,
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -3569,6 +3580,7 @@
       "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.8",
         "array.prototype.findlast": "^1.2.5",
@@ -7674,9 +7686,9 @@
       "license": "MIT"
     },
     "node_modules/path-scurry": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
-      "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.1.tgz",
+      "integrity": "sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==",
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^11.0.0",
@@ -7857,6 +7869,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -7940,6 +7953,7 @@
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -9589,6 +9603,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
diff --git a/docs/statics/pages/fullDemo.html b/docs/statics/pages/fullDemo.html
index aaf4e87..9453c1e 100644
--- a/docs/statics/pages/fullDemo.html
+++ b/docs/statics/pages/fullDemo.html
@@ -23,6 +23,11 @@
         margin-block: 0.67em;
         font-size: 2em;
       }
+      section {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
     </style>
   </head>
   <body>
@@ -31,1223 +36,1619 @@
         <h1>Semantic Forms</h1>
         <p>A pattern library of forms based on semantic HTML enhanced with a modern UX.</p>
 
-        <h2>High flow (JavaScript enabled) styling</h2>
-
-        <form action="/somewhere" method="post" class="semanticForms">
-          <dl>
-            <dt><label for="name">Name</label></dt>
-            <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
-
-            <dt><label for="prefilled">Prefilled field</label></dt>
-            <dd><input id="prefilled" name="prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
-
-            <dt><label for="noplaceholder">No placeholder</label></dt>
-            <dd><input id="noplaceholder" name="noplaceholder" type="text"></dd>
-
-            <dt><label for="password">Password field</label></dt>
-            <dd>
-              <input id="password" name="password" type="password" minlength="8" required>
-              <p data-invalid-text>Password should be at least 8 characters long.</p>
-            </dd>
-
-            <dt><label for="dontshow-password">Don't show password field</label></dt>
-            <dd>
-              <input id="dontshow-password" name="dontshow-password" type="password" minlength="8" required data-no-reveal>
-              <p data-invalid-text>Password should be at least 8 characters long.</p>
-            </dd>
-
-            <dt><label for="customize-password">Customize clear/show buttons</label></dt>
-            <dd>
-              <input id="customize-password" name="customize-password" type="password" minlength="8" required data-clear-field-text="Vaporize this text" data-show-password-text="Reveal this password" data-hide-password-text="omg no hide it again!">
-              <p data-invalid-text>Password should be at least 8 characters long.</p>
-            </dd>
-
-            <dt><label for="input-button-1">Input with button</label></dt>
-            <dd>
-              <input type="text" id="input-button-1" name="input-button-1" placeholder="This input has a button">
-              <button type="button">Go</button>
-            </dd>
-          </dl>
-
-          <dl>
-            <dt><label for="single-input">Single form input</label></dt>
-            <dd><input type="text" name="single-input" id="single-input"></dd>
-          </dl>
-
-          <dl class="colspan-1">
-            <dt><label for="max-content-input"><code>data-max-content</code> text input</label></dt>
-            <dd><input type="text" name="max-content-input" id="max-content-input" placeholder="This is a placeholder." value="This is some text." data-max-content></dd>
-
-            <dt><label for="max-content-select"><code>data-max-content</code> select</label></dt>
-            <dd>
-              <select name="max-content-select" id="max-content-select" data-max-content>
-                <option>Short</option>
-                <option>Some really really really really really really really really long text</option>
-                <option>This is some medium text</option>
-              </select>
-            </dd>
-          </dl>
-
-          <fieldset class="colspan-full">
-            <legend>Fieldset legend</legend>
-
-            <h3>Inputs</h3>
-            <dl>
-              <dt><label for="email">Email field</label></dt>
-              <dd><input id="email" name="email" type="email" placeholder="e.g. you@email.server"></dd>
-
-              <dt><label for="tel">Telephone field</label></dt>
-              <dd><input id="tel" name="tel" type="tel" placeholder="e.g. 555-437-1111"></dd>
-
-              <dt><label for="url">URL field</label></dt>
-              <dd><input id="url" name="url" type="url" placeholder="e.g. https://github.com"></dd>
-
-              <dt><label for="search-field">Search field</label></dt>
-              <dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cats"></dd>
+        <details>
+          <summary>Table of Contents</summary>
 
-              <dt><label for="search-no-float">No float label</label></dt>
-              <dd><input id="search-no-float" name="search-no-float" type="search" placeholder="e.g. cats" class="no-float-label"></dd>
+          <ul>
+            <li><a href="#high_flow_styling">High flow (JavaScript enabled) styling</a>
+              <ul>
+                <li><a href="#inputs">Inputs</a></li>
+                <li><a href="#selects">Selects</a></li>
+                <li><a href="#checkboxes">Checkboxes</a></li>
+                <li><a href="#radios">Radios</a></li>
+                <li><a href="#other">Other</a></li>
+                <li><a href="#alignment_classes">Alignment classes</a></li>
+                <li><a href="#keyboard_shortcuts">Keyboard shortcuts</a></li>
+                <li><a href="#tables">Tables</a></li>
+                <li><a href="#nested_fieldsets">Nested fieldsets</a></li>
+                <li><a href="#details">Detail elements</a></li>
+                <li><a href="#buttons">Buttons</a></li>
+                <li><a href="#colspan_classes">Colspan classes</a></li>
+                <li><a href="#p_tag_elements">P tag elements</a></li>
+              </ul>
+            </li>
+            <li><a href="#semantic_table">Semantic form tables</a>
+              <ul>
+                <li><a href="#table_semantic_form_class">Table with <code>semanticForms</code> class</a></li>
+                <li><a href="#table_form_in_cell">Table with a <code>form</code> in a cell</a></li>
+                <li><a href="#table_unstyled">Unstyled table</a></li>
+              </ul>
+            </li>
+            <li><a href="#low_flow_styling">Low flow (JavaScript disabled) styling</a>
+              <ul>
+                <li><a href="#low_flow_inputs">Inputs</a></li>
+                <li><a href="#low_flow_nested_fieldsets">Nested fieldsets</a></li>
+                <li><a href="#low_flow_details">Detail elements</a></li>
+                <li><a href="#low_flow_colspan_classes">Colspan classes</a></li>
+                <li><a href="#low_flow_p_tag_elements">P tag elements</a></li>
+                <li><a href="#low_flow_buttons">Buttons</a></li>
+              </ul>
+            </li>
+            <li><a href="#non_form_related_elements">Non-form related HTML elements</a></li>
+          </ul>
+        </details>
 
-              <dt><label for="number">Number</label></dt>
-              <dd><input id="number" name="number" type="number" placeholder="e.g. 43"></dd>
+        <h2 id="high_flow_styling">High flow (JavaScript enabled) styling</h2>
 
-              <dt><label for="label-subtext">Input with label help text</label></dt>
+        <form action="/somewhere" method="post" class="semanticForms">
+          <dl>
+            <div>
+              <dt><label for="name">Name</label></dt>
+              <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
+            </div>
+
+            <div>
+              <dt><label for="prefilled">Prefilled field</label></dt>
+              <dd><input id="prefilled" name="prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
+            </div>
+
+            <div>
+              <dt><label for="noplaceholder">No placeholder</label></dt>
+              <dd><input id="noplaceholder" name="noplaceholder" type="text"></dd>
+            </div>
+
+            <div>
+              <dt><label for="password">Password field</label></dt>
               <dd>
-                <input id="label-subtext" name="label-subtext" type="text" placeholder="e.g. John Smith">
-                <label for="label-subtext">Some help text</label>
+                <input id="password" name="password" type="password" minlength="8" required>
+                <p data-invalid-text>Password should be at least 8 characters long.</p>
               </dd>
+            </div>
 
-              <dt><label for="label-help-icon" data-show-help-icon>Input with help icon</label></dt>
-              <dd><input id="label-help-icon" name="label-subtext" type="text" title="Some more help text." placeholder="Hover over the icon"></dd>
-
-              <dt><label for="label-required-help-icon" data-show-help-icon>Required input with help icon</label></dt>
-              <dd><input id="label-required-help-icon" name="label-subtext" type="text" title="Some more help text." placeholder="Hover over the icon" required></dd>
-
-              <dt><label for="invalid-field">Invalid field</label></dt>
-              <dd><input id="invalid-field" class="invalid" name="invalid-field" type="number" placeholder="e.g. 43" min="0" value="-2"></dd>
-
-              <dt><label for="valid-field">Valid field</label></dt>
-              <dd><input id="valid-field" class="valid" name="valid-field" type="number" placeholder="e.g. 43" min="0" value="2"></dd>
-
-              <dt><label for="required-field">Required field</label></dt>
-              <dd><input id="required-field" name="required-field" type="text" required></dd>
-
-              <dt><label for="required-field-no-asterisk" data-no-asterisk>Required field (no asterisk)</label></dt>
-              <dd><input id="required-field-no-asterisk" name="required-field-no-asterisk" type="text" required></dd>
-
-              <dt><label for="required-field-custom-title" data-asterisk-text="This is a custom title.">Required field (custom title)</label></dt>
-              <dd><input id="required-field-custom-title" name="required-field-custom-title" type="text" required></dd>
-
-              <dt><label for="disabledInput">Disabled input</label></dt>
-              <dd><input id="disabledInput" name="disabledInput" type="text" placeholder="e.g. foo" disabled></dd>
-
-              <dt><label for="disabledInputValue">Disabled input w/ value</label></dt>
-              <dd><input id="disabledInputValue" name="disabledInputValue" type="text" placeholder="e.g. foo" value="some value" disabled></dd>
-
-              <dt><label for="color">Color field</label></dt>
-              <dd><input id="color" name="color" type="color"></dd>
-
-              <dt><label for="date">Date field</label></dt>
-              <dd><input id="date" name="date" type="date"></dd>
-
-              <dt><label for="time">Time field</label></dt>
-              <dd><input id="time" name="time" type="time"></dd>
-
-              <dt><label for="datetime-local">Datetime-local field</label></dt>
-              <dd><input id="datetime-local" name="datetime-local" type="datetime-local"></dd>
-
-              <dt><label for="month">Month field</label></dt>
-              <dd><input id="month" name="month" type="month"></dd>
-
-              <dt><label for="week">Week field</label></dt>
-              <dd><input id="week" name="week" type="week"></dd>
-
-              <dt><label for="file">File field</label></dt>
-              <dd><input id="file" name="file" type="file"></dd>
-
-              <dt><label for="input-button-2">Input with button</label></dt>
+            <div>
+              <dt><label for="dontshow-password">Don't show password field</label></dt>
               <dd>
-                <input type="text" id="input-button-2" name="input-button-2" placeholder="This input has a button" value="John Doe">
-                <label for="input-button-2">Some help text that should span the entire width of the input/button combo.</label>
-                <input type="submit" value="Submit">
+                <input id="dontshow-password" name="dontshow-password" type="password" minlength="8" required data-no-reveal>
+                <p data-invalid-text>Password should be at least 8 characters long.</p>
               </dd>
+            </div>
 
-              <dt><label for="select-button">Select with button</label></dt>
+            <div>
+              <dt><label for="customize-password">Customize clear/show buttons</label></dt>
               <dd>
-                <select id="select-button" name="select-button">
-                  <option value="1">Option 1</option>
-                  <option value="2">Option 2</option>
-                  <option value="3">Option 3</option>
-                </select>
-                <button type="submit">Pick</button>
+                <input id="customize-password" name="customize-password" type="password" minlength="8" required data-clear-field-text="Vaporize this text" data-show-password-text="Reveal this password" data-hide-password-text="omg no hide it again!">
+                <p data-invalid-text>Password should be at least 8 characters long.</p>
               </dd>
+            </div>
 
-              <dt><label for="range">Range field</label></dt>
-              <dd><input id="range" name="range" type="range"></dd>
-
-              <dt><label for="rangeValue">Range value</label></dt>
-              <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
-            </dl>
-
-            <h3>Selects</h3>
-            <dl>
-              <dt><label for="selectbox">Select box</label></dt>
+            <div>
+              <dt><label for="input-button-1">Input with button</label></dt>
               <dd>
-                <select id="selectbox" name="selectbox">
-                  <option value="1">Item one</option>
-                  <option value="2">Item two</option>
-                  <option value="3">Item three</option>
-                  <option value="4">Item four</option>
-                  <option value="5">Item five</option>
-                  <option value="6">Item six</option>
-                  <option value="7">Item seven</option>
-                </select>
-                <label for="selectbox">Some help text regarding the select box</label>
+                <input type="text" id="input-button-1" name="input-button-1" placeholder="This input has a button">
+                <button type="button">Go</button>
               </dd>
+            </div>
+          </dl>
 
-              <dt><label for="required-selectbox">Required select box</label></dt>
-              <dd>
-                <select id="required-selectbox" name="required-selectbox" required>
-                  <option value="">Make a selection</option>
-                  <option value="1">Item one</option>
-                  <option value="2">Item two</option>
-                  <option value="3">Item three</option>
-                  <option value="4">Item four</option>
-                  <option value="5">Item five</option>
-                  <option value="6">Item six</option>
-                  <option value="7">Item seven</option>
-                </select>
-              </dd>
+          <dl>
+            <div>
+              <dt><label for="single-input">Single form input</label></dt>
+              <dd><input type="text" name="single-input" id="single-input"></dd>
+            </div>
+          </dl>
 
-              <dt><label for="required-selectbox-hide" data-no-asterisk>Required select box (no asterisk)</label></dt>
+          <dl class="colspan-1">
+            <div>
+              <dt><label for="max-content-input"><code>data-max-content</code> text input</label></dt>
+              <dd><input type="text" name="max-content-input" id="max-content-input" placeholder="This is a placeholder." value="This is some text." data-max-content></dd>
+            </div>
+
+            <div>
+              <dt><label for="max-content-select"><code>data-max-content</code> select</label></dt>
               <dd>
-                <select id="required-selectbox-hide" name="required-selectbox-hide" required>
-                  <option value="">Make a selection</option>
-                  <option value="1">Item one</option>
-                  <option value="2">Item two</option>
-                  <option value="3">Item three</option>
-                  <option value="4">Item four</option>
-                  <option value="5">Item five</option>
-                  <option value="6">Item six</option>
-                  <option value="7">Item seven</option>
+                <select name="max-content-select" id="max-content-select" data-max-content>
+                  <option>Short</option>
+                  <option>Some really really really really really really really really long text</option>
+                  <option>This is some medium text</option>
                 </select>
               </dd>
+            </div>
+          </dl>
 
-                <dt><label for="multiple-select">Multiple select</label></dt>
-              <dd><select name="multiple-select" id="multiple-select" multiple>
-                <option value="1">Option 1</option>
-                <option value="2" selected>Option 2</option>
-                <option value="3" selected>Option 3</option>
-                <option value="4">Option 4</option>
-                <option value="5">Option 5</option>
-              </select></dd>
-            </dl>
+          <fieldset class="colspan-full">
+            <legend>Fieldset legend</legend>
 
-            <h3>Checkboxes</h3>
+            <h3 id="inputs">Inputs</h3>
             <dl>
-              <dt><label data-for="checkboxes">Checkboxes</label></dt>
-              <dd class="checkboxes">
-                <ul id="checkboxes">
-                  <li><input type="checkbox" name="some_field_name" id="checkboxes_one" checked> <label for="checkboxes_one">One</label></li>
-                  <li><input type="checkbox" name="some_field_name" id="checkboxes_two"> <label for="checkboxes_two">Two</label></li>
-                  <li><input type="checkbox" name="some_field_name" id="checkboxes_three"> <label for="checkboxes_three">Three</label></li>
-                </ul>
-              </dd>
-
-              <dt><label data-for="required-checkboxes" data-asterisk-text="Custom checkbox title text.">Required checkboxes</label></dt>
-              <dd class="checkboxes">
-                <ul id="required-checkboxes">
-                  <li><input type="checkbox" name="required-field" id="required-checkboxes_one" checked required> <label for="required-checkboxes_one">One</label></li>
-                  <li><input type="checkbox" name="required-field" id="required-checkboxes_two"> <label for="required-checkboxes_two">Two</label></li>
-                  <li><input type="checkbox" name="required-field" id="required-checkboxes_three" checked> <label for="required-checkboxes_three">Three</label></li>
-                </ul>
-              </dd>
+              <div>
+                <dt><label for="email">Email field</label></dt>
+                <dd><input id="email" name="email" type="email" placeholder="e.g. you@email.server"></dd>
+              </div>
+
+              <div>
+                <dt><label for="tel">Telephone field</label></dt>
+                <dd><input id="tel" name="tel" type="tel" placeholder="e.g. 555-437-1111"></dd>
+              </div>
+
+              <div>
+                <dt><label for="url">URL field</label></dt>
+                <dd><input id="url" name="url" type="url" placeholder="e.g. https://github.com"></dd>
+              </div>
+
+              <div>
+                <dt><label for="search-field">Search field</label></dt>
+                <dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cats"></dd>
+              </div>
+
+              <div>
+                <dt><label for="search-no-float">No float label</label></dt>
+                <dd><input id="search-no-float" name="search-no-float" type="search" placeholder="e.g. cats" class="no-float-label"></dd>
+              </div>
+
+              <div>
+                <dt><label for="number">Number</label></dt>
+                <dd><input id="number" name="number" type="number" placeholder="e.g. 43"></dd>
+              </div>
+
+              <div>
+                <dt><label for="label-subtext">Input with label help text</label></dt>
+                <dd>
+                  <input id="label-subtext" name="label-subtext" type="text" placeholder="e.g. John Smith">
+                  <label for="label-subtext">Some help text</label>
+                </dd>
+              </div>
+
+              <div>
+                <dt><label for="label-help-icon" data-show-help-icon>Input with help icon</label></dt>
+                <dd><input id="label-help-icon" name="label-help-icon" type="text" title="Some more help text." placeholder="Hover over the icon"></dd>
+              </div>
+
+              <div>
+                <dt><label for="label-required-help-icon" data-show-help-icon>Required input with help icon</label></dt>
+                <dd><input id="label-required-help-icon" name="label-required-help-icon" type="text" title="Some more help text." placeholder="Hover over the icon" required></dd>
+              </div>
+
+              <div>
+                <dt><label for="invalid-field">Invalid field</label></dt>
+                <dd><input id="invalid-field" class="invalid" name="invalid-field" type="number" placeholder="e.g. 43" min="0" value="-2"></dd>
+              </div>
+
+              <div>
+                <dt><label for="valid-field">Valid field</label></dt>
+                <dd><input id="valid-field" class="valid" name="valid-field" type="number" placeholder="e.g. 43" min="0" value="2"></dd>
+              </div>
+
+              <div>
+                <dt><label for="required-field">Required field</label></dt>
+                <dd><input id="required-field" name="required-field" type="text" required></dd>
+              </div>
+
+              <div>
+                <dt><label for="required-field-no-asterisk" data-no-asterisk>Required field (no asterisk)</label></dt>
+                <dd><input id="required-field-no-asterisk" name="required-field-no-asterisk" type="text" required></dd>
+              </div>
+
+              <div>
+                <dt><label for="required-field-custom-title" data-asterisk-text="This is a custom title.">Required field (custom title)</label></dt>
+                <dd><input id="required-field-custom-title" name="required-field-custom-title" type="text" required></dd>
+              </div>
+
+              <div>
+                <dt><label for="disabledInput">Disabled input</label></dt>
+                <dd><input id="disabledInput" name="disabledInput" type="text" placeholder="e.g. foo" disabled></dd>
+              </div>
+
+              <div>
+                <dt><label for="disabledInputValue">Disabled input w/ value</label></dt>
+                <dd><input id="disabledInputValue" name="disabledInputValue" type="text" placeholder="e.g. foo" value="some value" disabled></dd>
+              </div>
+
+              <div>
+                <dt><label for="color">Color field</label></dt>
+                <dd><input id="color" name="color" type="color"></dd>
+              </div>
+
+              <div>
+                <dt><label for="date">Date field</label></dt>
+                <dd><input id="date" name="date" type="date"></dd>
+              </div>
+
+              <div>
+                <dt><label for="time">Time field</label></dt>
+                <dd><input id="time" name="time" type="time"></dd>
+              </div>
+
+              <div>
+                <dt><label for="datetime-local">Datetime-local field</label></dt>
+                <dd><input id="datetime-local" name="datetime-local" type="datetime-local"></dd>
+              </div>
+
+              <div>
+                <dt><label for="month">Month field</label></dt>
+                <dd><input id="month" name="month" type="month"></dd>
+              </div>
+
+              <div>
+                <dt><label for="week">Week field</label></dt>
+                <dd><input id="week" name="week" type="week"></dd>
+              </div>
+
+              <div>
+                <dt><label for="file">File field</label></dt>
+                <dd><input id="file" name="file" type="file"></dd>
+              </div>
+
+              <div>
+                <dt><label for="input-button-2">Input with button</label></dt>
+                <dd>
+                  <input type="text" id="input-button-2" name="input-button-2" placeholder="This input has a button" value="John Doe">
+                  <label for="input-button-2">Some help text that should span the entire width of the input/button combo.</label>
+                  <input type="submit" value="Submit">
+                </dd>
+              </div>
 
-              <dt><label data-for="help-text-checkboxes" title="Here is some helpful text." data-show-help-icon>Checkboxes w/ help text</label></dt>
-              <dd class="checkboxes">
-                <ul id="help-text-checkboxes">
-                  <li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_one" checked> <label
-                      for="help-text-checkboxes_one">One</label></li>
-                  <li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_two"> <label
-                      for="help-text-checkboxes_two">Two</label></li>
-                  <li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_three"> <label
-                      for="help-text-checkboxes_three">Three</label></li>
-                </ul>
-              </dd>
+              <div>
+                <dt><label for="range">Range field</label></dt>
+                <dd><input id="range" name="range" type="range"></dd>
+              </div>
 
-              <dt><label data-for="extra-text-checkboxes">Checkboxes w/ additional text</label></dt>
-              <dd class="checkboxes">
-                <ul id="extra-text-checkboxes">
-                  <li>
-                    <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_one" checked>
-                    <label for="extra-text-checkboxes_one">One</label>
-                  </li>
-                  <li>
-                    <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_two">
-                    <label for="extra-text-checkboxes_two">Two</label>
-                  </li>
-                  <li>
-                    <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_three" checked>
-                    <label for="extra-text-checkboxes_three">Three</label></li>
-                </ul>
-                <label data-for="extra-text-checkboxes">This is some additional text.</label>
-              </dd>
+              <div>
+                <dt><label for="rangeValue">Range value</label></dt>
+                <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
+              </div>
             </dl>
 
+            <h3 id="selects">Selects</h3>
             <dl>
-              <dt><label for="checkbox">Checkbox</label></dt>
-              <dd><input type="checkbox" name="checkbox-field" id="checkbox"></dd>
-
-              <dt><label for="required-checkbox">Checkbox (required)</label></dt>
-              <dd><input type="checkbox" name="required-checkbox-field" id="required-checkbox" required></dd>
-
-              <dt><label for="help-icon-checkbox" title="Single checkboxes can have help text too!" data-show-help-icon>Checkbox w/ help text</label></dt>
-              <dd><input type="checkbox" name="help-icon-checkbox-field" id="help-icon-checkbox"></dd>
-
-              <dt><label for="additional-text-checkbox">Checkbox w/ additional text</label></dt>
-              <dd>
-                <input type="checkbox" name="extra-text-checkbox-field" id="additional-text-checkbox">
-                <label for="additional-text-checkbox">This is some additional text.</label>
-              </dd>
-            </dl>
-
+              <div>
+                <dt><label for="selectbox">Select box</label></dt>
+                <dd>
+                  <select id="selectbox" name="selectbox">
+                    <option value="1">Item one</option>
+                    <option value="2">Item two</option>
+                    <option value="3">Item three</option>
+                    <option value="4">Item four</option>
+                    <option value="5">Item five</option>
+                    <option value="6">Item six</option>
+                    <option value="7">Item seven</option>
+                  </select>
+                  <label for="selectbox">Some help text regarding the select box</label>
+                </dd>
+              </div>
 
-            <h3>Radios</h3>
-            <dl>
-              <dt><label data-for="radios">Radios</label></dt>
-              <dd class="radios">
-                <ul id="radios">
-                  <li><input type="radio" name="radios" id="r_one"> <label for="r_one">One</label></li>
-                  <li><input type="radio" name="radios" id="r_two"> <label for="r_two">Two</label></li>
-                  <li><input type="radio" name="radios" id="r_three"> <label for="r_three">Three</label></li>
-                </ul>
-              </dd>
+              <div>
+                <dt><label for="required-selectbox">Required select box</label></dt>
+                <dd>
+                  <select id="required-selectbox" name="required-selectbox" required>
+                    <option value="">Make a selection</option>
+                    <option value="1">Item one</option>
+                    <option value="2">Item two</option>
+                    <option value="3">Item three</option>
+                    <option value="4">Item four</option>
+                    <option value="5">Item five</option>
+                    <option value="6">Item six</option>
+                    <option value="7">Item seven</option>
+                  </select>
+                </dd>
+              </div>
 
-              <dt><label data-for="required-radios" data-asterisk-text="Custom radio title text.">Required radios</label></dt>
-              <dd class="radios">
-                <ul id="required-radios">
-                  <li><input type="radio" name="required-field" id="required-radios_one" checked required> <label for="required-radios_one">One</label></li>
-                  <li><input type="radio" name="required-field" id="required-radios_two"> <label for="required-radios_two">Two</label></li>
-                  <li><input type="radio" name="required-field" id="required-radios_three" checked> <label for="required-radios_three">Three</label></li>
-                </ul>
-              </dd>
+              <div>
+                <dt><label for="required-selectbox-hide" data-no-asterisk>Required select box (no asterisk)</label></dt>
+                <dd>
+                  <select id="required-selectbox-hide" name="required-selectbox-hide" required>
+                    <option value="">Make a selection</option>
+                    <option value="1">Item one</option>
+                    <option value="2">Item two</option>
+                    <option value="3">Item three</option>
+                    <option value="4">Item four</option>
+                    <option value="5">Item five</option>
+                    <option value="6">Item six</option>
+                    <option value="7">Item seven</option>
+                  </select>
+                </dd>
+              </div>
 
-              <dt><label data-for="help-text-radios" title="Here is some helpful text." data-show-help-icon>Radios w/ help text</label></dt>
-              <dd class="radios">
-                <ul id="help-text-radios">
-                  <li><input type="radio" name="some_field_name" id="help-text-radios_one" checked> <label
-                      for="help-text-radios_one">One</label></li>
-                  <li><input type="radio" name="some_field_name" id="help-text-radios_two"> <label
-                      for="help-text-radios_two">Two</label></li>
-                  <li><input type="radio" name="some_field_name" id="help-text-radios_three"> <label
-                      for="help-text-radios_three">Three</label></li>
-                </ul>
-              </dd>
+              <div>
+                <dt><label for="select-button">Select with button</label></dt>
+                <dd>
+                  <select id="select-button" name="select-button">
+                    <option value="1">Option 1</option>
+                    <option value="2">Option 2</option>
+                    <option value="3">Option 3</option>
+                  </select>
+                  <button type="submit">Pick</button>
+                </dd>
+              </div>
 
-              <dt><label data-for="radios-with-additional-text">Radios w/ additional text</label></dt>
-              <dd class="radios">
-                <ul id="radios-with-additional-text">
-                  <li>
-                    <input type="radio" name="radios-with-additional-text" id="a_r_one">
-                    <label for="a_r_one">One</label>
-                  </li>
-                  <li>
-                    <input type="radio" name="radios-with-additional-text" id="a_r_two">
-                    <label for="a_r_two">Two</label>
-                  </li>
-                  <li>
-                    <input type="radio" name="radios-with-additional-text" id="a_r_three">
-                    <label for="a_r_three">Three</label>
-                  </li>
-                </ul>
-                <label data-for="radios-with-additional-text">This is some additional text.</label>
-              </dd>
+              <div>
+                <dt><label for="multiple-select">Multiple select</label></dt>
+                <dd><select name="multiple-select" id="multiple-select" multiple>
+                  <option value="1">Option 1</option>
+                  <option value="2" selected>Option 2</option>
+                  <option value="3" selected>Option 3</option>
+                  <option value="4">Option 4</option>
+                  <option value="5">Option 5</option>
+                </select></dd>
+              </div>
             </dl>
 
-            <dl>
-              <dt><label for="radio">Radio</label></dt>
-              <dd><input type="radio" name="radio" id="radio"></dd>
-
-              <dt><label for="required-radio">Radio (required)</label></dt>
-              <dd><input type="radio" name="required-radio" id="required-radio" required></dd>
+            <h3 id="checkboxes">Checkboxes</h3>
+            <section>
+              <dl>
+                <div>
+                  <dt><label data-for="basic_checkboxes">Checkboxes</label></dt>
+                  <dd class="checkboxes">
+                    <ul id="basic_checkboxes">
+                      <li><input type="checkbox" name="some_field_name" id="checkboxes_one" checked> <label for="checkboxes_one">One</label></li>
+                      <li><input type="checkbox" name="some_field_name" id="checkboxes_two"> <label for="checkboxes_two">Two</label></li>
+                      <li><input type="checkbox" name="some_field_name" id="checkboxes_three"> <label for="checkboxes_three">Three</label></li>
+                    </ul>
+                  </dd>
+                </div>
+
+                <div>
+                  <dt><label data-for="required-checkboxes" data-asterisk-text="Custom checkbox title text.">Required checkboxes</label></dt>
+                  <dd class="checkboxes">
+                    <ul id="required-checkboxes">
+                      <li>
+                        <input type="checkbox" name="required-field" id="required-checkboxes_one" checked required> <label for="required-checkboxes_one">One</label>
+                      </li>
+                      <li>
+                        <input type="checkbox" name="required-field" id="required-checkboxes_two"> <label for="required-checkboxes_two">Two</label>
+                      </li>
+                      <li>
+                        <input type="checkbox" name="required-field" id="required-checkboxes_three" checked> <label for="required-checkboxes_three">Three</label>
+                      </li>
+                    </ul>
+                  </dd>
+                </div>
+
+                <div>
+                  <dt><label data-for="help-text-checkboxes" title="Here is some helpful text." data-show-help-icon>Checkboxes w/ help text</label></dt>
+                  <dd class="checkboxes">
+                    <ul id="help-text-checkboxes">
+                      <li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_one" checked> <label for="help-text-checkboxes_one">One</label></li>
+                      <li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_two"> <label for="help-text-checkboxes_two">Two</label></li>
+                      <li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_three"> <label for="help-text-checkboxes_three">Three</label></li>
+                    </ul>
+                  </dd>
+                </div>
+
+                <div>
+                  <dt><label data-for="extra-text-checkboxes">Checkboxes w/ additional text</label></dt>
+                  <dd class="checkboxes">
+                    <ul id="extra-text-checkboxes">
+                      <li>
+                        <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_one" checked>
+                        <label for="extra-text-checkboxes_one">One</label>
+                      </li>
+                      <li>
+                        <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_two">
+                        <label for="extra-text-checkboxes_two">Two</label>
+                      </li>
+                      <li>
+                        <input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_three" checked>
+                        <label for="extra-text-checkboxes_three">Three</label></li>
+                    </ul>
+                    <label data-for="extra-text-checkboxes">This is some additional text.</label>
+                  </dd>
+                </div>
+              </dl>
 
-              <dt><label for="help-icon-radio" title="Single radios can have help text too!" data-show-help-icon>Radio w/ help text</label></dt>
-              <dd><input type="radio" name="help-icon-radio-field" id="help-icon-radio"></dd>
+              <dl>
+                <div>
+                  <dt><label for="checkbox">Checkbox</label></dt>
+                  <dd><input type="checkbox" name="checkbox-field" id="checkbox"></dd>
+                </div>
+
+                <div>
+                  <dt><label for="required-checkbox">Checkbox (required)</label></dt>
+                  <dd><input type="checkbox" name="required-checkbox-field" id="required-checkbox" required></dd>
+                </div>
+
+                <div>
+                  <dt><label for="help-icon-checkbox" title="Single checkboxes can have help text too!" data-show-help-icon>Checkbox w/ help text</label></dt>
+                  <dd><input type="checkbox" name="help-icon-checkbox-field" id="help-icon-checkbox"></dd>
+                </div>
+
+                <div>
+                  <dt><label for="additional-text-checkbox">Checkbox w/ additional text</label></dt>
+                  <dd>
+                    <input type="checkbox" name="extra-text-checkbox-field" id="additional-text-checkbox">
+                    <label for="additional-text-checkbox">This is some additional text.</label>
+                  </dd>
+                </div>
+              </dl>
+            </section>
 
-              <dt><label for="extra-text-radio">Radio w/ additional text</label></dt>
-              <dd>
-                <input type="radio" name="extra-text-radio" id="extra-text-radio">
-                <label for="extra-text-radio">This is some additional text.</label>
-              </dd>
-            </dl>
+            <h3 id="radios">Radios</h3>
+            <section>
+              <dl>
+                <div>
+                  <dt><label data-for="basic_radios">Radios</label></dt>
+                  <dd class="radios">
+                    <ul id="basic_radios">
+                      <li><input type="radio" name="radios" id="r_one"> <label for="r_one">One</label></li>
+                      <li><input type="radio" name="radios" id="r_two"> <label for="r_two">Two</label></li>
+                      <li><input type="radio" name="radios" id="r_three"> <label for="r_three">Three</label></li>
+                    </ul>
+                  </dd>
+                </div>
+                <div>
+                  <dt><label data-for="required-radios" data-asterisk-text="Custom radio title text.">Required radios</label></dt>
+                  <dd class="radios">
+                    <ul id="required-radios">
+                      <li><input type="radio" name="required-field" id="required-radios_one" checked required> <label for="required-radios_one">One</label></li>
+                      <li><input type="radio" name="required-field" id="required-radios_two"> <label for="required-radios_two">Two</label></li>
+                      <li><input type="radio" name="required-field" id="required-radios_three" checked> <label for="required-radios_three">Three</label></li>
+                    </ul>
+                  </dd>
+                </div>
+                <div>
+                  <dt><label data-for="help-text-radios" title="Here is some helpful text." data-show-help-icon>Radios w/ help text</label></dt>
+                  <dd class="radios">
+                    <ul id="help-text-radios">
+                      <li><input type="radio" name="some_field_name" id="help-text-radios_one" checked> <label for="help-text-radios_one">One</label></li>
+                      <li><input type="radio" name="some_field_name" id="help-text-radios_two"> <label for="help-text-radios_two">Two</label></li>
+                      <li><input type="radio" name="some_field_name" id="help-text-radios_three"> <label for="help-text-radios_three">Three</label></li>
+                    </ul>
+                  </dd>
+                </div>
+                <div>
+                  <dt><label data-for="radios-with-additional-text">Radios w/ additional text</label></dt>
+                  <dd class="radios">
+                    <ul id="radios-with-additional-text">
+                      <li>
+                        <input type="radio" name="radios-with-additional-text" id="a_r_one">
+                        <label for="a_r_one">One</label>
+                      </li>
+                      <li>
+                        <input type="radio" name="radios-with-additional-text" id="a_r_two">
+                        <label for="a_r_two">Two</label>
+                      </li>
+                      <li>
+                        <input type="radio" name="radios-with-additional-text" id="a_r_three">
+                        <label for="a_r_three">Three</label>
+                      </li>
+                    </ul>
+                    <label data-for="radios-with-additional-text">This is some additional text.</label>
+                  </dd>
+                </div>
+              </dl>
+              <dl>
+                <div>
+                  <dt><label for="radio">Radio</label></dt>
+                  <dd><input type="radio" name="radio" id="radio"></dd>
+                </div>
+                <div>
+                  <dt><label for="required-radio">Radio (required)</label></dt>
+                  <dd><input type="radio" name="required-radio" id="required-radio" required></dd>
+                </div>
+                <div>
+                  <dt><label for="help-icon-radio" title="Single radios can have help text too!" data-show-help-icon>Radio w/ help text</label></dt>
+                  <dd><input type="radio" name="help-icon-radio-field" id="help-icon-radio"></dd>
+                </div>
+                <div>
+                  <dt><label for="extra-text-radio">Radio w/ additional text</label></dt>
+                  <dd>
+                    <input type="radio" name="extra-text-radio" id="extra-text-radio">
+                    <label for="extra-text-radio">This is some additional text.</label>
+                  </dd>
+                </div>
+              </dl>
+            </section>
 
-            <h3>Other</h3>
+            <h3 id="other">Other</h3>
             <dl>
-              <dt><label for="textarea">Textarea</label></dt>
-              <dd><textarea id="textarea" name="textarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic."></textarea></dd>
+              <div>
+                <dt><label for="textarea">Textarea</label></dt>
+                <dd><textarea id="textarea" name="textarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic."></textarea></dd>
+              </div>
 
-              <dt><label for="prefilledtextarea">Textarea (prefilled)</label></dt>
-              <dd>
-                <textarea id="prefilledtextarea" name="prefilledtextarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.">Some prefilled content...</textarea>
-                <label for="prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
-              </dd>
+              <div>
+                <dt><label for="prefilledtextarea">Textarea (prefilled)</label></dt>
+                <dd>
+                  <textarea id="prefilledtextarea" name="prefilledtextarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.">Some prefilled content...</textarea>
+                  <label for="prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
+                </dd>
+              </div>
 
-              <dt><label for="textarea-max-rows">Textarea</label></dt>
-              <dd>
-                <textarea id="textarea-max-rows" name="textarea-max-rows" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-max-rows="3">Row 1&#10;Row 2&#10;Row 3&#10;Row 4</textarea>
-                <label for="textarea-max-rows">This <code>textarea</code> has the <code>data-max-rows</code> set to 3, so the textarea will not expand past 3 rows.</label>
-              </dd>
+              <div>
+                <dt><label for="textarea-max-rows">Textarea</label></dt>
+                <dd>
+                  <textarea id="textarea-max-rows" name="textarea-max-rows" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-max-rows="3">Row 1&#10;Row 2&#10;Row 3&#10;Row 4</textarea>
+                  <label for="textarea-max-rows">This <code>textarea</code> has the <code>data-max-rows</code> set to 3, so the textarea will not expand past 3 rows.</label>
+                </dd>
+              </div>
 
-              <dt><label for="disable-autosize-textarea">Disabled autosize textarea</label></dt>
-              <dd>
-                <textarea name="disable-autosize-textarea" id="disable-autosize-textarea" rows="5" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-disable-autosize>Row 1&#10;Row 2&#10;Row 3&#10;Row 4&#10;Row 5&#10;Row 6</textarea>
-                <label for="disable-autosize-textarea">This <code>textarea</code> element has the <code>data-disable-autosize</code> attribute applied, and has <code>rows</code> set to 5.</label>
-              </dd>
+              <div>
+                <dt><label for="disable-autosize-textarea">Disabled autosize textarea</label></dt>
+                <dd>
+                  <textarea name="disable-autosize-textarea" id="disable-autosize-textarea" rows="5" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-disable-autosize>Row 1&#10;Row 2&#10;Row 3&#10;Row 4&#10;Row 5&#10;Row 6</textarea>
+                  <label for="disable-autosize-textarea">This <code>textarea</code> element has the <code>data-disable-autosize</code> attribute applied, and has <code>rows</code> set to 5.</label>
+                </dd>
+              </div>
 
-              <dt><label for="auto-grow-textarea">Auto-grow textarea</label></dt>
-              <dd>
-                <textarea name="auto-grow-textarea" id="auto-grow-textarea"data-auto-grow>Start typing to see me grow</textarea>
-              </dd>
+              <div>
+                <dt><label for="auto-grow-textarea">Auto-grow textarea</label></dt>
+                <dd><textarea name="auto-grow-textarea" id="auto-grow-textarea" data-auto-grow>Start typing to see me grow</textarea></dd>
+              </div>
 
-              <dt><label for="auto-grow-input">Auto-grow input</label></dt>
-              <dd>
-                <input type="text" name="auto-grow-input" id="auto-grow-input" value="Start typing to see me grow" data-auto-grow>
-              </dd>
+              <div>
+                <dt><label for="auto-grow-input">Auto-grow input</label></dt>
+                <dd><input type="text" name="auto-grow-input" id="auto-grow-input" value="Start typing to see me grow" data-auto-grow></dd>
+              </div>
             </dl>
 
-            <h3>Keyboard shortcuts</h3>
-            <dl>
-              <dt><label for="custom-focus-input">Default Input focus</label></dt>
-              <dd><input type="text" name="custom-focus-input" id="custom-focus-input" data-focus-key="P"></dd>
-
-              <dt><label for="custom-focus-ctrl-input">Ctrl Input focus</label></dt>
-              <dd><input type="text" name="custom-focus-ctrl-input" id="custom-focus-ctrl-input" data-focus-modifier="ctrl" data-focus-key="P"></dd>
-
-              <dt><label for="custom-focus-alt-input">Alt Input focus</label></dt>
-              <dd><input type="text" name="custom-focus-alt-input" id="custom-focus-alt-input" data-focus-modifier="alt" data-focus-key="P"></dd>
-
-              <dt><label for="custom-focus-meta-input">Meta Input focus</label></dt>
-              <dd>
-                <input type="text" name="custom-focus-meta-input" id="custom-focus-meta-input" data-focus-modifier="meta" data-focus-key="Y">
-              </dd>
-
-              <dt><label for="custom-focus-number">Number focus</label></dt>
-              <dd><input type="number" name="custom-focus-number" id="custom-focus-number" data-focus-key="L"></dd>
-
-              <dt><label for="custom-focus-textarea">Textarea focus</label></dt>
-              <dd>
-                <textarea name="custom-focus-textarea" id="custom-focus-textarea" data-focus-key="!"></textarea>
-                <label for="custom-focus-textarea">Special character keyboard shortcuts also require <kbd>Shift</kbd> to be pressed.</label>
-              </dd>
-
-              <dt><label for="custom-focus-date">Date focus</label></dt>
-              <dd>
-                <input type="date" name="custom-focus-date" id="custom-focus-date" data-focus-key="D">
-                <label for="custom-focus-date">Hover over these inputs to see the keyboard shortcut</label>
-              </dd>
-
-              <dt><label for="custom-focus-color">Color focus</label></dt>
-              <dd><input type="color" name="custom-focus-color" id="custom-focus-color" title="This input has a keyboard shortcut!" data-focus-key="$" data-focus-modifier-mac="alt"></dd>
+            <h3 id="alignment_classes">Alignment classes</h3>
+            <section>
+              <dl class="colspan-3">
+                <div style="outline: dashed 1px gray; outline-offset: 2px;">
+                  <dt><label for="align-start-input"><code>align-start</code></label></dt>
+                  <dd class="align-start"><input type="text" name="align-start-input" id="align-start-input"></dd>
+                </div>
+                <div style="outline: dashed 1px gray; outline-offset: 2px;">
+                  <dt><label for="align-center-input"><code>align-center</code></label></dt>
+                  <dd class="align-center"><input type="text" name="align-center-input" id="align-center-input"></dd>
+                </div>
+                <div style="outline: dashed 1px gray; outline-offset: 2px;">
+                  <dt><label for="align-end-input"><code>align-end</code></label></dt>
+                  <dd class="align-end"><input type="text" name="align-end-input" id="align-end-input"></dd>
+                </div>
+              </dl>
+              <dl class="colspan-3">
+                <div style="outline: dashed 1px gray; outline-offset: 2px;">
+                  <dt><label for="align-start-button"><code>align-start</code></label></dt>
+                  <dd class="align-start"><input type="button" value="align-start" id="align-start-button" data-max-content></dd>
+                </div>
+                <div style="outline: dashed 1px gray; outline-offset: 2px;">
+                  <dt><label for="align-center-button"><code>align-center</code></label></dt>
+                  <dd class="align-center"><input type="button" value="align-center" id="align-center-button" data-max-content></dd>
+                </div>
+                <div style="outline: dashed 1px gray; outline-offset: 2px;">
+                  <dt><label for="align-end-button"><code>align-end</code></label></dt>
+                  <dd class="align-end"><input type="button" value="align-end" id="align-end-button" data-max-content></dd>
+                </div>
+              </dl>
+            </section>
 
-              <dt><label for="custom-focus-range">Range focus</label></dt>
-              <dd><input type="range" name="custom-focus-range" id="custom-focus-range" data-focus-key="U"></dd>
+            <h3 id="keyboard_shortcuts">Keyboard shortcuts</h3>
+            <dl>
+              <div>
+                <dt><label for="custom-focus-input">Default Input focus</label></dt>
+                <dd><input type="text" name="custom-focus-input" id="custom-focus-input" data-focus-key="P"></dd>
+              </div>
+
+              <div>
+                <dt><label for="custom-focus-ctrl-input">Ctrl Input focus</label></dt>
+                <dd><input type="text" name="custom-focus-ctrl-input" id="custom-focus-ctrl-input" data-focus-modifier="ctrl" data-focus-key="P"></dd>
+              </div>
+
+              <div>
+                <dt><label for="custom-focus-alt-input">Alt Input focus</label></dt>
+                <dd><input type="text" name="custom-focus-alt-input" id="custom-focus-alt-input" data-focus-modifier="alt" data-focus-key="P"></dd>
+              </div>
+
+              <div>
+                <dt><label for="custom-focus-meta-input">Meta Input focus</label></dt>
+                <dd><input type="text" name="custom-focus-meta-input" id="custom-focus-meta-input" data-focus-modifier="meta" data-focus-key="Y"></dd>
+              </div>
+
+              <div>
+                <dt><label for="custom-focus-number">Number focus</label></dt>
+                <dd><input type="number" name="custom-focus-number" id="custom-focus-number" data-focus-key="L"></dd>
+              </div>
+
+              <div>
+                <dt><label for="custom-focus-textarea">Textarea focus</label></dt>
+                <dd>
+                  <textarea name="custom-focus-textarea" id="custom-focus-textarea" data-focus-key="!"></textarea>
+                  <label for="custom-focus-textarea">Special character keyboard shortcuts also require <kbd>Shift</kbd> to be pressed.</label>
+                </dd>
+              </div>
 
-              <dt><label for="custom-focus-select">Select focus</label></dt>
-              <dd><select name="custom-focus-select" id="custom-focus-select" data-focus-key="K">
-                <option value="1">Value 1</option>
-                <option value="2">Value 2</option>
-                <option value="3">Value 3</option>
-              </select></dd>
+              <div>
+                <dt><label for="custom-focus-date">Date focus</label></dt>
+                <dd>
+                  <input type="date" name="custom-focus-date" id="custom-focus-date" data-focus-key="D">
+                  <label for="custom-focus-date">Hover over these inputs to see the keyboard shortcut</label>
+                </dd>
+              </div>
+
+              <div>
+                <dt><label for="custom-focus-color">Color focus</label></dt>
+                <dd><input type="color" name="custom-focus-color" id="custom-focus-color" title="This input has a keyboard shortcut!" data-focus-key="$" data-focus-modifier-mac="alt"></dd>
+              </div>
+
+              <div>
+                <dt><label for="custom-focus-range">Range focus</label></dt>
+                <dd><input type="range" name="custom-focus-range" id="custom-focus-range" data-focus-key="U"></dd>
+              </div>
+
+              <div>
+                <dt><label for="custom-focus-select">Select focus</label></dt>
+                <dd><select name="custom-focus-select" id="custom-focus-select" data-focus-key="K">
+                  <option value="1">Value 1</option>
+                  <option value="2">Value 2</option>
+                  <option value="3">Value 3</option>
+                </select></dd>
+              </div>
             </dl>
 
-            <h3>Tables</h3>
-
-            <h4>Table with inputs and buttons</h4>
-            <table>
-              <thead>
-                <tr class="title">
-                  <th colspan="3">Table Title</th>
-                </tr>
-                <tr>
-                  <th>Column 1</th>
-                  <th>Column 2</th>
-                  <th>Column 3</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>
-                    <input type="text" name="table-text-1A" id="table-text-1A" placeholder="A text input in a table">
-                  </td>
-                  <td>
-                    <menu>
-                      <li><button type="button">Button 1</button></li>
-                      <li><a href="fullDemo.html" class="button-link">Link button 1</a></li>
-                    </menu>
-                  </td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>
-                    <input type="text" name="table-text-2A" id="table-text-2A" placeholder="A text input in a table">
-                  </td>
-                  <td>
-                    <menu>
-                      <li><button type="button">Button 2</button></li>
-                      <li><a href="fullDemo.html" class="button-link">Link button 2</a></li>
-                    </menu>
-                  </td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td>
-                    <input type="text" name="table-text-3A" id="table-text-3A" placeholder="A text input in a table">
-                  </td>
-                  <td>
-                    <menu>
-                      <li><button type="button">Button 3</button></li>
-                      <li><a href="fullDemo.html" class="button-link">Link button 3</a></li>
-                    </menu>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-
-            <h4>Table using <code>colgroups</code> to define column width</h4>
-            <table>
-              <colgroup>
-                <col span="1" style="width: 20%">
-                <col span="1" style="width: 50%">
-                <col span="1" style="width: 30%">
-              </colgroup>
-              <thead>
-                <tr class="title">
-                  <th colspan="3">Table Title</th>
-                </tr>
-                <tr>
-                  <th>Column 1</th>
-                  <th>Column 2</th>
-                  <th>Column 3</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>20%</td>
-                  <td>50%</td>
-                  <td>30%</td>
-                </tr>
-              </tbody>
-            </table>
-
-            <h3>Nested fieldsets</h3>
-
+            <h3 id="tables">Tables</h3>
+            <section>
+              <h4>Table with inputs and buttons</h4>
+              <table>
+                <thead>
+                  <tr class="title">
+                    <th colspan="3">Table Title</th>
+                  </tr>
+                  <tr>
+                    <th>Column 1</th>
+                    <th>Column 2</th>
+                    <th>Column 3</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>1</td>
+                    <td>
+                      <input type="text" name="table-text-1A" id="table-text-1A" placeholder="A text input in a table">
+                    </td>
+                    <td>
+                      <menu>
+                        <li><button type="button">Button 1</button></li>
+                        <li><a href="fullDemo.html" class="button-link">Link button 1</a></li>
+                      </menu>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>2</td>
+                    <td>
+                      <input type="text" name="table-text-2A" id="table-text-2A" placeholder="A text input in a table">
+                    </td>
+                    <td>
+                      <menu>
+                        <li><button type="button">Button 2</button></li>
+                        <li><a href="fullDemo.html" class="button-link">Link button 2</a></li>
+                      </menu>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>3</td>
+                    <td>
+                      <input type="text" name="table-text-3A" id="table-text-3A" placeholder="A text input in a table">
+                    </td>
+                    <td>
+                      <menu>
+                        <li><button type="button">Button 3</button></li>
+                        <li><a href="fullDemo.html" class="button-link">Link button 3</a></li>
+                      </menu>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <h4>Table using <code>colgroups</code> to define column width</h4>
+              <table>
+                <colgroup>
+                  <col span="1" style="width: 20%">
+                  <col span="1" style="width: 50%">
+                  <col span="1" style="width: 30%">
+                </colgroup>
+                <thead>
+                  <tr class="title">
+                    <th colspan="3">Table Title</th>
+                  </tr>
+                  <tr>
+                    <th>Column 1</th>
+                    <th>Column 2</th>
+                    <th>Column 3</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>20%</td>
+                    <td>50%</td>
+                    <td>30%</td>
+                  </tr>
+                </tbody>
+              </table>
+            </section>
+
+            <h3 id="nested_fieldsets">Nested fieldsets</h3>
             <fieldset>
               <legend>Fieldset 1</legend>
 
               <dl>
-                <dt><label for="nested-input-1">Input</label></dt>
-                <dd>
-                  <input type="text" id="nested-input-1" name="nested-input-1" value="a value" placeholder="Some interesting placeholder text">
-                  <p>Here is some subtext.</p>
-                </dd>
+                <div>
+                  <dt><label for="nested-input-1">Input</label></dt>
+                  <dd>
+                    <input type="text" id="nested-input-1" name="nested-input-1" value="a value" placeholder="Some interesting placeholder text">
+                    <p>Here is some subtext.</p>
+                  </dd>
+                </div>
 
-                <dt><label for="nested-input-2">Input 2</label></dt>
-                <dd>
-                  <input type="text" id="nested-input-2" name="nested-input-2" placeholder="Some interesting placeholder text">
-                  <p><small>Here's some small subtext.</small></p>
-                </dd>
+                <div>
+                  <dt><label for="nested-input-2">Input 2</label></dt>
+                  <dd>
+                    <input type="text" id="nested-input-2" name="nested-input-2" placeholder="Some interesting placeholder text">
+                    <p><small>Here's some small subtext.</small></p>
+                  </dd>
+                </div>
 
-                <dt><label for="nested-input-3">Input 3</label></dt>
-                <dd>
-                  <input type="text" id="nested-input-3" name="nested-input-3" placeholder="Some interesting placeholder text">
-                  <p><strong>Here's some bold subtext.</strong></p>
-                </dd>
+                <div>
+                  <dt><label for="nested-input-3">Input 3</label></dt>
+                  <dd>
+                    <input type="text" id="nested-input-3" name="nested-input-3" placeholder="Some interesting placeholder text">
+                    <p><strong>Here's some bold subtext.</strong></p>
+                  </dd>
+                </div>
 
-                <dt><label for="nested-input-4">Input 4</label></dt>
-                <dd>
-                  <input type="text" id="nested-input-4" name="nested-input-4" placeholder="Some interesting placeholder text">
-                  <p>Here is some subtext.</p>
-                  <p>Here is some more subtext.</p>
-                </dd>
+                <div>
+                  <dt><label for="nested-input-4">Input 4</label></dt>
+                  <dd>
+                    <input type="text" id="nested-input-4" name="nested-input-4" placeholder="Some interesting placeholder text">
+                    <p>Here is some subtext.</p>
+                    <p>Here is some more subtext.</p>
+                  </dd>
+                </div>
               </dl>
 
               <fieldset>
                 <legend>Fieldset 2</legend>
 
                 <dl>
-                  <dt><label for="nested-nested-input-1">Input 1</label></dt>
-                  <dd>
-                    <input type="text" id="nested-nested-input-1" name="nested-nested-input-1" placeholder="Some interesting placeholder text">
-                  </dd>
+                  <div>
+                    <dt><label for="nested-nested-input-1">Input 1</label></dt>
+                    <dd>
+                      <input type="text" id="nested-nested-input-1" name="nested-nested-input-1" placeholder="Some interesting placeholder text">
+                    </dd>
+                  </div>
 
-                  <dt><label for="nested-nested-input-2">Input 2</label></dt>
-                  <dd>
-                    <input type="text" id="nested-nested-input-2" name="nested-nested-input-2" placeholder="Some interesting placeholder text">
-                  </dd>
+                  <div>
+                    <dt><label for="nested-nested-input-2">Input 2</label></dt>
+                    <dd><input type="text" id="nested-nested-input-2" name="nested-nested-input-2" placeholder="Some interesting placeholder text"></dd>
+                  </div>
 
-                  <dt><label for="nested-nested-select">Select</label></dt>
-                  <dd>
-                    <select id="nested-nested-select" name="nested-nested-select">
-                      <option value="jfkdskfs">Hey</option>
-                    </select>
-                  </dd>
+                  <div>
+                    <dt><label for="nested-nested-select">Select</label></dt>
+                    <dd>
+                      <select id="nested-nested-select" name="nested-nested-select">
+                        <option value="value">Value</option>
+                      </select>
+                    </dd>
+                  </div>
                 </dl>
 
                 <fieldset>
                   <legend>Fieldset 3</legend>
 
                   <dl>
-                    <dt><label for="left-nested-input-a">Input A</label></dt>
-                    <dd>
-                      <input type="text" id="left-nested-input-a" name="left-nested-input-a" placeholder="Some interesting placeholder text">
-                    </dd>
-                    <dt><label for="left-nested-input-b">Input B</label></dt>
-                    <dd>
-                      <input type="text" id="left-nested-input-b" name="left-nested-input-b" placeholder="Some interesting placeholder text">
-                    </dd>
-                    <dt><label for="left-nested-input-c">Input C</label></dt>
-                    <dd>
-                      <input type="text" id="left-nested-input-c" name="left-nested-input-c" placeholder="Some interesting placeholder text">
-                    </dd>
-                    <dt><label for="left-nested-input-d">Input D</label></dt>
-                    <dd>
-                      <input type="text" id="left-nested-input-d" name="left-nested-input-d" placeholder="Some interesting placeholder text">
-                    </dd>
+                    <div>
+                      <dt><label for="left-nested-input-a">Input A</label></dt>
+                      <dd><input type="text" id="left-nested-input-a" name="left-nested-input-a" placeholder="Some interesting placeholder text"></dd>
+                    </div>
+
+                    <div>
+                      <dt><label for="left-nested-input-b">Input B</label></dt>
+                      <dd><input type="text" id="left-nested-input-b" name="left-nested-input-b" placeholder="Some interesting placeholder text"></dd>
+                    </div>
+
+                    <div>
+                      <dt><label for="left-nested-input-c">Input C</label></dt>
+                      <dd><input type="text" id="left-nested-input-c" name="left-nested-input-c" placeholder="Some interesting placeholder text"></dd>
+                    </div>
+
+                    <div>
+                      <dt><label for="left-nested-input-d">Input D</label></dt>
+                      <dd><input type="text" id="left-nested-input-d" name="left-nested-input-d" placeholder="Some interesting placeholder text"></dd>
+                    </div>
                   </dl>
                 </fieldset>
               </fieldset>
             </fieldset>
 
+            <h3 id="details">Detail elements</h3>
             <details>
               <summary>Detail element</summary>
               <dl>
-                <dt><label for="detail-input-1">Detail input</label></dt>
-                <dd><input type="text" name="detail-input-1" id="detail-input-1" value="Some input..."></dd>
-
-                <dt><label for="detail-input-2">Detail input</label></dt>
-                <dd><input type="text" name="detail-input-2" id="detail-input-2"></dd>
-
-                <dt><label for="detail-input-3">Detail input</label></dt>
-                <dd><input type="text" name="detail-input-3" id="detail-input-3"></dd>
-
-                <dt><label for="detail-input-4">Detail input</label></dt>
-                <dd><input type="text" name="detail-input-4" id="detail-input-4"></dd>
+                <div>
+                  <dt><label for="detail-input-1">Detail input</label></dt>
+                  <dd><input type="text" name="detail-input-1" id="detail-input-1" value="Some input..."></dd>
+                </div>
+
+                <div>
+                  <dt><label for="detail-input-2">Detail input</label></dt>
+                  <dd><input type="text" name="detail-input-2" id="detail-input-2"></dd>
+                </div>
+
+                <div>
+                  <dt><label for="detail-input-3">Detail input</label></dt>
+                  <dd><input type="text" name="detail-input-3" id="detail-input-3"></dd>
+                </div>
+
+                <div>
+                  <dt><label for="detail-input-4">Detail input</label></dt>
+                  <dd><input type="text" name="detail-input-4" id="detail-input-4"></dd>
+                </div>
               </dl>
             </details>
 
             <details>
               <summary>Another detail element with a nested fieldset</summary>
               <dl>
-                <dt><label for="another-detail-input-1">Detail input</label></dt>
-                <dd><input type="text" name="another-detail-input-1" id="another-detail-input-1"></dd>
+                <div>
+                  <dt><label for="another-detail-input-1">Detail input</label></dt>
+                  <dd><input type="text" name="another-detail-input-1" id="another-detail-input-1"></dd>
+                </div>
               </dl>
 
               <fieldset>
                 <legend>Nested fieldset</legend>
 
                 <dl>
-                  <dt><label for="another-detail-input-2">Nested fieldset input</label></dt>
-                  <dd><input type="text" name="another-detail-input-2" id="another-detail-input-2"></dd>
+                  <div>
+                    <dt><label for="another-detail-input-2">Nested fieldset input</label></dt>
+                    <dd><input type="text" name="another-detail-input-2" id="another-detail-input-2"></dd>
+                  </div>
                 </dl>
               </fieldset>
             </details>
 
-            <input type="submit" name="button1" value="Non-grouped submit button">
-            <input type="reset" name="reset" value="Another one">
-            <a href="/" class="button-link">Button link</a>
-
-            <p>Flexbox button layout pattern with two submit buttons:</p>
-            <menu>
-              <li><button type="submit" name="button1">Button 1</button></li>
-              <li><input type="image" title="an image input element" name="image" alt="Button 2" width="100" src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Perspective-Button-Go-icon.png"></li>
-            </menu>
-
-            <p>Flexbox button layout pattern with three submit buttons:</p>
-            <menu>
-              <li><button type="submit" name="button1">Button 1</button></li>
-              <li><button type="reset" name="button2">Button 2</button></li>
-              <li><input type="submit" name="button3" value="Button 3"></li>
-            </menu>
-          </fieldset>
-
-          <fieldset>
-            <legend>Colspan classes</legend>
-
-            <dl>
-              <dt><label for="colspan-1a">colspan-1</label></dt>
-              <dd class="colspan-1"><input type="text" name="colspan-1a" id="colspan-1a"></dd>
-              <dt><label for="colspan-1b">colspan-1</label></dt>
-              <dd class="colspan-1"><input type="text" name="colspan-1b" id="colspan-1b"></dd>
-              <dt><label for="colspan-2">colspan-2</label></dt>
-              <dd class="colspan-2"><input type="text" name="colspan-2" id="colspan-2"></dd>
-              <dt><label for="colspan-4">colspan-4</label></dt>
-              <dd class="colspan-4"><input type="text" name="colspan-4" id="colspan-4"></dd>
-              <dt><label for="colspan-3">colspan-3</label></dt>
-              <dd class="colspan-3"><input type="text" name="colspan-3" id="colspan-3"></dd>
-              <dt><label for="colspan-1c">colspan-1</label></dt>
-              <dd class="colspan-1"><input type="text" name="colspan-1c" id="colspan-1c"></dd>
-              <dt><label for="colspan-full">colspan-full</label></dt>
-              <dd class="colspan-full"><input type="text" name="colspan-full" id="colspan-full"></dd>
-              <dt><label for="colspan-5">colspan-5</label></dt>
-              <dd class="colspan-5"><input type="text" name="colspan-5" id="colspan-5"></dd>
-            </dl>
-
-            <fieldset class="colspan-1">
-              <legend>colspan-1</legend>
-
+            <h3 id="buttons">Buttons</h3>
+            <section>
               <dl>
-                <dt><label for="colspan-1-a">Input A</label></dt>
-                <dd><input type="text" id="colspan-1-a" name="colspan-1-a" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-1-b">Input B</label></dt>
-                <dd><input type="text" id="colspan-1-b" name="colspan-1-b" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-1-c">Input C</label></dt>
-                <dd><input type="text" id="colspan-1-c" name="colspan-1-c" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-1-d">Input D</label></dt>
-                <dd><input type="text" id="colspan-1-d" name="colspan-1-d" placeholder="Some interesting placeholder text"></dd>
-              </dl>
-            </fieldset>
-
-            <fieldset class="colspan-2">
-              <legend>colspan-2</legend>
-
-              <dl>
-                <dt><label for="colspan-2-a">Input A</label></dt>
-                <dd><input type="text" id="colspan-2-a" name="colspan-2-a" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-2-b">Input B</label></dt>
-                <dd><input type="text" id="colspan-2-b" name="colspan-2-b" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-2-c">Input C</label></dt>
-                <dd><input type="text" id="colspan-2-c" name="colspan-2-c" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-2-d">Input D</label></dt>
-                <dd><input type="text" id="colspan-2-d" name="colspan-2-d" placeholder="Some interesting placeholder text"></dd>
-              </dl>
-            </fieldset>
-
-            <fieldset>
-              <legend>colspan-3</legend>
-
-              <dl class="colspan-3">
-                <dt><label for="colspan-3-a">Input A</label></dt>
-                <dd><input type="text" id="colspan-3-a" name="colspan-3-a" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-3-b">Input B</label></dt>
-                <dd><input type="text" id="colspan-3-b" name="colspan-3-b" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-3-c">Input C</label></dt>
-                <dd><input type="text" id="colspan-3-c" name="colspan-3-c" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-3-d">Input D</label></dt>
-                <dd><input type="text" id="colspan-3-d" name="colspan-3-d" placeholder="Some interesting placeholder text"></dd>
+                <div>
+                  <dt><label for="button-input1">Standard button</label></dt>
+                  <dd><button id="button-input1">Standard button</button></dd>
+                </div>
+
+                <div>
+                  <dt><label for="button-input2">Input button</label></dt>
+                  <dd><input type="button" id="button-input2" value="Input button"></dd>
+                </div>
+                <div>
+                  <dt><label for="button-input3">Submit input</label></dt>
+                  <dd><input type="submit" id="button-input3" value="Submit input"></dd>
+                </div>
+                <div>
+                  <dt><label for="button-input4">Reset input</label></dt>
+                  <dd><input type="reset" id="button-input4" value="Reset input"></dd>
+                </div>
               </dl>
-            </fieldset>
-
-            <fieldset class="colspan-full">
-              <legend>colspan-full</legend>
-
+              <input type="button" name="button1" value="Non-grouped button">
+              <input type="submit" name="button2" value="Non-grouped submit button">
+              <input type="reset" name="button3" value="Non-grouped reset button">
+              <a href="/" class="button-link">Button link</a>
+              <p>Flexbox button layout pattern with two submit buttons:</p>
+              <menu>
+                <li><button type="submit" name="button1">Button 1</button></li>
+                <li><input type="image" title="an image input element" name="image" alt="Button 2" width="100" src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Perspective-Button-Go-icon.png"></li>
+              </menu>
+              <p>Flexbox button layout pattern with three submit buttons:</p>
+              <menu>
+                <li><button type="submit" name="button1">Button 1</button></li>
+                <li><button type="reset" name="button2">Button 2</button></li>
+                <li><input type="submit" name="button3" value="Button 3"></li>
+              </menu>
+            </section>
+
+            <h3 id="colspan_classes">Colspan classes</h3>
+            <section>
               <dl>
-                <dt><label for="colspan-full-a">Input A</label></dt>
-                <dd><input type="text" id="colspan-full-a" name="colspan-full-a" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-full-b">Input B</label></dt>
-                <dd><input type="text" id="colspan-full-b" name="colspan-full-b" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-full-c">Input C</label></dt>
-                <dd><input type="text" id="colspan-full-c" name="colspan-full-c" placeholder="Some interesting placeholder text"></dd>
-
-                <dt><label for="colspan-full-d">Input D</label></dt>
-                <dd><input type="text" id="colspan-full-d" name="colspan-full-d" placeholder="Some interesting placeholder text"></dd>
+                <div class="colspan-1">
+                  <dt><label for="colspan-1a">colspan-1</label></dt>
+                  <dd><input type="text" name="colspan-1a" id="colspan-1a"></dd>
+                </div>
+                <div class="colspan-1">
+                  <dt><label for="colspan-1b">colspan-1</label></dt>
+                  <dd><input type="text" name="colspan-1b" id="colspan-1b"></dd>
+                </div>
+                <div class="colspan-2">
+                  <dt><label for="colspan-2">colspan-2</label></dt>
+                  <dd><input type="text" name="colspan-2" id="colspan-2"></dd>
+                </div>
+                <div class="colspan-4">
+                  <dt><label for="colspan-4">colspan-4</label></dt>
+                  <dd><input type="text" name="colspan-4" id="colspan-4"></dd>
+                </div>
+                <div class="colspan-3">
+                  <dt><label for="colspan-3">colspan-3</label></dt>
+                  <dd><input type="text" name="colspan-3" id="colspan-3"></dd>
+                </div>
+                <div class="colspan-1">
+                  <dt><label for="colspan-1c">colspan-1</label></dt>
+                  <dd><input type="text" name="colspan-1c" id="colspan-1c"></dd>
+                </div>
+                <div class="colspan-full">
+                  <dt><label for="colspan-full">colspan-full</label></dt>
+                  <dd><input type="text" name="colspan-full" id="colspan-full"></dd>
+                </div>
+                <div class="colspan-5">
+                  <dt><label for="colspan-5">colspan-5</label></dt>
+                  <dd><input type="text" name="colspan-5" id="colspan-5"></dd>
+                </div>
               </dl>
-            </fieldset>
-          </fieldset>
-
-          <fieldset>
-            <legend>P tag elements</legend>
+              <fieldset class="colspan-1">
+                <legend>colspan-1</legend>
+                <dl>
+                  <div>
+                    <dt><label for="colspan-1-a">Input A</label></dt>
+                    <dd><input type="text" id="colspan-1-a" name="colspan-1-a" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-1-b">Input B</label></dt>
+                    <dd><input type="text" id="colspan-1-b" name="colspan-1-b" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-1-c">Input C</label></dt>
+                    <dd><input type="text" id="colspan-1-c" name="colspan-1-c" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-1-d">Input D</label></dt>
+                    <dd><input type="text" id="colspan-1-d" name="colspan-1-d" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                </dl>
+              </fieldset>
+              <fieldset class="colspan-2">
+                <legend>colspan-2</legend>
+                <dl>
+                  <div>
+                    <dt><label for="colspan-2-a">Input A</label></dt>
+                    <dd><input type="text" id="colspan-2-a" name="colspan-2-a" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-2-b">Input B</label></dt>
+                    <dd><input type="text" id="colspan-2-b" name="colspan-2-b" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-2-c">Input C</label></dt>
+                    <dd><input type="text" id="colspan-2-c" name="colspan-2-c" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-2-d">Input D</label></dt>
+                    <dd><input type="text" id="colspan-2-d" name="colspan-2-d" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                </dl>
+              </fieldset>
+              <fieldset>
+                <legend>colspan-3</legend>
+                <dl class="colspan-3">
+                  <div>
+                    <dt><label for="colspan-3-a">Input A</label></dt>
+                    <dd><input type="text" id="colspan-3-a" name="colspan-3-a" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-3-b">Input B</label></dt>
+                    <dd><input type="text" id="colspan-3-b" name="colspan-3-b" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-3-c">Input C</label></dt>
+                    <dd><input type="text" id="colspan-3-c" name="colspan-3-c" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-3-d">Input D</label></dt>
+                    <dd><input type="text" id="colspan-3-d" name="colspan-3-d" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                </dl>
+              </fieldset>
+              <fieldset class="colspan-full">
+                <legend>colspan-full</legend>
+                <dl>
+                  <div>
+                    <dt><label for="colspan-full-a">Input A</label></dt>
+                    <dd><input type="text" id="colspan-full-a" name="colspan-full-a" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-full-b">Input B</label></dt>
+                    <dd><input type="text" id="colspan-full-b" name="colspan-full-b" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-full-c">Input C</label></dt>
+                    <dd><input type="text" id="colspan-full-c" name="colspan-full-c" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                  <div>
+                    <dt><label for="colspan-full-d">Input D</label></dt>
+                    <dd><input type="text" id="colspan-full-d" name="colspan-full-d" placeholder="Some interesting placeholder text"></dd>
+                  </div>
+                </dl>
+              </fieldset>
+            </section>
 
-            <p>
-              <input type="checkbox" name="p-tag-checkbox" id="p-tag-checkbox">
-              <label for="p-tag-checkbox">Checkbox</label>
-            </p>
-            <p>
-              <label for="p-tag-input">Text input</label>
-              <input type="text" name="p-tag-input" id="p-tag-input">
-            </p>
-            <p>
-              <label for="p-tag-textarea">Textarea</label>
-              <textarea name="p-tag-textarea" id="p-tag-textarea"></textarea>
-            </p>
-            <p>
-              <button type="button" name="p-tag-button" id="p-tag-button">Button</button>
-            </p>
-            <p>
-              Some regular text with <strong>other elements</strong> <span>inside of it</span>
-            </p>
+            <h3 id="p_tag_elements">P tag elements</h3>
+            <section>
+              <p>
+                <input type="checkbox" name="p-tag-checkbox" id="p-tag-checkbox">
+                <label for="p-tag-checkbox">Checkbox</label>
+              </p>
+              <p>
+                <label for="p-tag-input">Text input</label>
+                <input type="text" name="p-tag-input" id="p-tag-input">
+              </p>
+              <p>
+                <label for="p-tag-textarea">Textarea</label>
+                <textarea name="p-tag-textarea" id="p-tag-textarea"></textarea>
+              </p>
+              <p>
+                <button type="button" name="p-tag-button" id="p-tag-button">Button</button>
+              </p>
+              <p>
+                Some regular text with <strong>other elements</strong> <span>inside of it</span>
+              </p>
+            </section>
           </fieldset>
-
-          <h2>Non-form related HTML elements</h2>
-          <p>This is some regular HTML that should not be affected by any semantic forms styles</p>
-          <div>This is a div</div>
-          <blockquote>This is a block quote</blockquote>
-          <a href="https://github.com/rooseveltframework/semantic-forms">A link to the semantic forms repo</a>
-
-          <ul>
-            <li>unordered list 1</li>
-            <li>unordered list 2</li>
-            <li>unordered list 3</li>
-          </ul>
-          <ol>
-            <li>ordered list 1</li>
-            <li>ordered list 2</li>
-            <li>ordered list 3</li>
-          </ol>
-          <menu>
-            <li>menu list 1</li>
-            <li>menu list 2</li>
-            <li>menu list 3</li>
-          </menu>
-          <dl>
-            <dt>description list title</dt>
-            <dd>description list value</dd>
-          </dl>
         </form>
 
-        <h2>Table with <code>semanticForms</code> class</h2>
-        <table class="semanticForms">
-          <thead>
-            <tr class="title">
-              <th colspan="3">Table Title</th>
-            </tr>
-            <tr>
-              <th>Column 1</th>
-              <th>Column 2</th>
-              <th>Column 3</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>1</td>
-              <td>
-                <input type="text" name="table-text-1C" id="table-text-1C" placeholder="A text input in a table">
-              </td>
-              <td>
-                <menu>
-                  <li><button type="button">Button 1</button></li>
-                  <li><a href="fullDemo.html" class="button-link">Link button 1</a></li>
-                </menu>
-              </td>
-            </tr>
-            <tr>
-              <td>2</td>
-              <td>
-                <input type="text" name="table-text-2C" id="table-text-2C" placeholder="A text input in a table">
-              </td>
-              <td>
-                <menu>
-                  <li><button type="button">Button 2</button></li>
-                  <li><a href="fullDemo.html" class="button-link">Link button 2</a></li>
-                </menu>
-              </td>
-            </tr>
-            <tr>
-              <td>3</td>
-              <td>
-                <input type="text" name="table-text-3C" id="table-text-3C" placeholder="A text input in a table">
-              </td>
-              <td>
-                <menu>
-                  <li><button type="button">Button 3</button></li>
-                  <li><a href="fullDemo.html" class="button-link">Link button 3</a></li>
-                </menu>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h2>Table with a <code>form</code> in a cell</h2>
-        <table class="semanticForms">
-          <thead>
-            <tr class="title">
-              <th colspan="2">Table Title</th>
-            </tr>
-            <tr>
-              <th>Column 1</th>
-              <th>Column 2</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Some text</td>
-              <td>
-                <form action="/somewhere" class="semanticForms">
+        <h2 id="semantic_table">Semantic form tables</h2>
+
+        <section>
+          <h3 id="table_semantic_form_class">Table with <code>semanticForms</code> class</h3>
+          <table class="semanticForms">
+            <thead>
+              <tr class="title">
+                <th colspan="3">Table Title</th>
+              </tr>
+              <tr>
+                <th>Column 1</th>
+                <th>Column 2</th>
+                <th>Column 3</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>1</td>
+                <td>
+                  <input type="text" name="table-text-1C" id="table-text-1C" placeholder="A text input in a table">
+                </td>
+                <td>
+                  <menu>
+                    <li><button type="button">Button 1</button></li>
+                    <li><a href="fullDemo.html" class="button-link">Link button 1</a></li>
+                  </menu>
+                </td>
+              </tr>
+              <tr>
+                <td>2</td>
+                <td>
+                  <input type="text" name="table-text-2C" id="table-text-2C" placeholder="A text input in a table">
+                </td>
+                <td>
+                  <menu>
+                    <li><button type="button">Button 2</button></li>
+                    <li><a href="fullDemo.html" class="button-link">Link button 2</a></li>
+                  </menu>
+                </td>
+              </tr>
+              <tr>
+                <td>3</td>
+                <td>
+                  <input type="text" name="table-text-3C" id="table-text-3C" placeholder="A text input in a table">
+                </td>
+                <td>
                   <menu>
-                    <li><button type="submit">Submit button</button></li>
+                    <li><button type="button">Button 3</button></li>
+                    <li><a href="fullDemo.html" class="button-link">Link button 3</a></li>
                   </menu>
-                </form>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h2>Unstyled table</h2>
-        <table>
-          <thead>
-            <tr class="title">
-              <th colspan="3">Table Title</th>
-            </tr>
-            <tr>
-              <th>Column 1</th>
-              <th>Column 2</th>
-              <th>Column 3</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>1</td>
-              <td>A</td>
-              <td>a</td>
-            </tr>
-            <tr>
-              <td>2</td>
-              <td>B</td>
-              <td>b</td>
-            </tr>
-            <tr>
-              <td>3</td>
-              <td>C</td>
-              <td>c</td>
-            </tr>
-          </tbody>
-        </table>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <h3 id="table_form_in_cell">Table with a <code>form</code> in a cell</h3>
+          <table class="semanticForms">
+            <thead>
+              <tr class="title">
+                <th colspan="2">Table Title</th>
+              </tr>
+              <tr>
+                <th>Column 1</th>
+                <th>Column 2</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Some text</td>
+                <td>
+                  <form action="/somewhere" class="semanticForms">
+                    <menu>
+                      <li><button type="submit">Submit button</button></li>
+                    </menu>
+                  </form>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <h3 id="table_unstyled">Unstyled table</h3>
+          <table>
+            <thead>
+              <tr class="title">
+                <th colspan="3">Table Title</th>
+              </tr>
+              <tr>
+                <th>Column 1</th>
+                <th>Column 2</th>
+                <th>Column 3</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>1</td>
+                <td>A</td>
+                <td>a</td>
+              </tr>
+              <tr>
+                <td>2</td>
+                <td>B</td>
+                <td>b</td>
+              </tr>
+              <tr>
+                <td>3</td>
+                <td>C</td>
+                <td>c</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
 
         <hr>
 
-        <h2>Low flow (JavaScript disabled) styling</h2>
+        <h2 id="low_flow_styling">Low flow (JavaScript disabled) styling</h2>
         <p>Adding the <code>lowFlow</code> class to the form element removes all JS enhancements.</p>
         <form action="/somewhere" method="post" class="semanticForms lowFlow">
           <dl>
-            <dt><label for="low-flow-name">Name</label></dt>
-            <dd><input id="low-flow-name" name="low-flow-name" type="text" placeholder="e.g. John Smith"></dd>
-
-            <dt><label for="low-flow-prefilled">Prefilled field</label></dt>
-            <dd><input id="low-flow-prefilled" name="low-flow-prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
-
-            <dt><label for="low-flow-noplaceholder">No placeholder</label></dt>
-            <dd><input id="low-flow-noplaceholder" name="low-flow-noplaceholder" type="text"></dd>
-
-            <dt><label for="low-flow-password">Password field</label></dt>
-            <dd>
-              <input id="low-flow-password" name="low-flow-password" type="password" minlength="8" required>
-              <p data-invalid-text>Password should be at least 8 characters long.</p>
-            </dd>
+            <div>
+              <dt><label for="low-flow-name">Name</label></dt>
+              <dd><input id="low-flow-name" name="low-flow-name" type="text" placeholder="e.g. John Smith"></dd>
+            </div>
+
+            <div>
+              <dt><label for="low-flow-prefilled">Prefilled field</label></dt>
+              <dd><input id="low-flow-prefilled" name="low-flow-prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
+            </div>
+
+            <div>
+              <dt><label for="low-flow-noplaceholder">No placeholder</label></dt>
+              <dd><input id="low-flow-noplaceholder" name="low-flow-noplaceholder" type="text"></dd>
+            </div>
+
+            <div>
+              <dt><label for="low-flow-password">Password field</label></dt>
+              <dd>
+                <input id="low-flow-password" name="low-flow-password" type="password" minlength="8" required>
+                <p data-invalid-text>Password should be at least 8 characters long.</p>
+              </dd>
+            </div>
           </dl>
 
           <dl>
-            <dt><label for="low-flow-single-input">Single form input</label></dt>
-            <dd><input type="text" name="low-flow-single-input" id="low-flow-single-input"></dd>
+            <div>
+              <dt><label for="low-flow-single-input">Single form input</label></dt>
+              <dd><input type="text" name="low-flow-single-input" id="low-flow-single-input"></dd>
+            </div>
           </dl>
 
           <fieldset>
             <legend>Fieldset legend</legend>
-            <dl>
-              <dt><label for="low-flow-email">Email field</label></dt>
-              <dd><input id="low-flow-email" name="low-flow-email" type="email" placeholder="e.g. you@email.server"></dd>
-
-              <dt><label for="low-flow-tel">Telephone field</label></dt>
-              <dd><input id="low-flow-tel" name="low-flow-tel" type="tel" placeholder="e.g. 555-437-1111"></dd>
-
-              <dt><label for="low-flow-url">URL field</label></dt>
-              <dd><input id="low-flow-url" name="low-flow-url" type="url" placeholder="e.g. https://github.com"></dd>
-
-              <dt><label for="low-flow-search">Search field</label></dt>
-              <dd><input id="low-flow-search" name="low-flow-search" type="search" placeholder="e.g. cats"></dd>
-
-              <dt><label for="low-flow-number">Number</label></dt>
-              <dd><input id="low-flow-number" name="low-flow-number" type="number" placeholder="e.g. 43"></dd>
-
-              <dt><label for="low-flow-label-subtext">Input with label help text</label></dt>
-              <dd>
-                <input id="low-flow-label-subtext" name="low-flow-label-subtext" type="text" placeholder="e.g. John Smith">
-                <label for="low-flow-label-subtext">Some help text</label>
-              </dd>
-
-              <dt><label for="low-flow-invalid-field">Invalid field</label></dt>
-              <dd><input id="low-flow-invalid-field" class="invalid" name="low-flow-invalid-Field" type="number" placeholder="e.g. 43" min="0" value="-2"></dd>
-
-              <dt><label for="low-flow-valid-field">Valid field</label></dt>
-              <dd><input id="low-flow-valid-field" class="valid" name="low-flow-valid-field" type="number" placeholder="e.g. 43" min="0" value="2"></dd>
-
-              <dt><label for="low-flow-required-field">Required field</label></dt>
-              <dd><input id="low-flow-required-field" name="low-flow-required-field" type="number" placeholder="e.g. 43" min="0" required></dd>
-
-              <dt><label for="low-flow-selectbox">Select box</label></dt>
-              <dd>
-                <select id="low-flow-selectbox" name="low-flow-selectbox">
-                  <option value="1">Item one</option>
-                  <option value="2">Item two</option>
-                  <option value="3">Item three</option>
-                  <option value="4">Item four</option>
-                  <option value="5">Item five</option>
-                  <option value="6">Item six</option>
-                  <option value="7">Item seven</option>
-                </select>
-                <label for="low-flow-selectbox">Some help text regarding the select box</label>
-              </dd>
-
-              <dt><label data-for="low-flow-checkboxes">Checkboxes</label></dt>
-              <dd class="checkboxes">
-                <ul id="low-flow-checkboxes">
-                  <li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_one"> <label for="low-flow-checkboxes_one">One</label></li>
-                  <li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_two"> <label for="low-flow-checkboxes_two">Two</label></li>
-                  <li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_three"> <label for="low-flow-checkboxes_three">Three</label></li>
-                </ul>
-              </dd>
-
-              <dt><label for="low-flow-checkbox">Single checkbox</label></dt>
-              <dd><input type="checkbox" name="low-flow-checkbox-field" id="low-flow-checkbox"></dd>
-
-              <dt><label data-for="low-flow-radios">Radios</label></dt>
-              <dd class="radios">
-                <ul id="low-flow-radios">
-                  <li><input type="radio" name="low-flow-radios" id="low-flow-r_one"> <label for="low-flow-r_one">One</label></li>
-                  <li><input type="radio" name="low-flow-radios" id="low-flow-r_two"> <label for="low-flow-r_two">Two</label></li>
-                  <li><input type="radio" name="low-flow-radios" id="low-flow-r_three"> <label for="low-flow-r_three">Three</label></li>
-                </ul>
-              </dd>
-
-              <dt><label for="low-flow-color">Color field</label></dt>
-              <dd><input id="low-flow-color" name="low-flow-color" type="color"></dd>
-
-              <dt><label for="low-flow-date">Date field</label></dt>
-              <dd><input id="low-flow-date" name="low-flow-date" type="date"></dd>
 
-              <dt><label for="low-flow-time">Time field</label></dt>
-              <dd><input id="low-flow-time" name="low-flow-time" type="time"></dd>
-
-              <dt><label for="low-flow-datetime-local">Datetime-local field</label></dt>
-              <dd><input id="low-flow-datetime-local" name="low-flow-datetime-local" type="datetime-local"></dd>
-
-              <dt><label for="low-flow-month">Month field</label></dt>
-              <dd><input id="low-flow-month" name="low-flow-month" type="month"></dd>
-
-              <dt><label for="low-flow-week">Week field</label></dt>
-              <dd><input id="low-flow-week" name="low-flow-week" type="week"></dd>
+            <h3 id="low_flow_inputs">Inputs</h3>
+            <dl>
+              <div>
+                <dt><label for="low-flow-email">Email field</label></dt>
+                <dd><input id="low-flow-email" name="low-flow-email" type="email" placeholder="e.g. you@email.server"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-tel">Telephone field</label></dt>
+                <dd><input id="low-flow-tel" name="low-flow-tel" type="tel" placeholder="e.g. 555-437-1111"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-url">URL field</label></dt>
+                <dd><input id="low-flow-url" name="low-flow-url" type="url" placeholder="e.g. https://github.com"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-search">Search field</label></dt>
+                <dd><input id="low-flow-search" name="low-flow-search" type="search" placeholder="e.g. cats"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-number">Number</label></dt>
+                <dd><input id="low-flow-number" name="low-flow-number" type="number" placeholder="e.g. 43"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-label-subtext">Input with label help text</label></dt>
+                <dd>
+                  <input id="low-flow-label-subtext" name="low-flow-label-subtext" type="text" placeholder="e.g. John Smith">
+                  <label for="low-flow-label-subtext">Some help text</label>
+                </dd>
+              </div>
 
-              <dt><label for="low-flow-file">File field</label></dt>
-              <dd><input id="low-flow-file" name="low-flow-file" type="file"></dd>
+              <div>
+                <dt><label for="low-flow-invalid-field">Invalid field</label></dt>
+                <dd><input id="low-flow-invalid-field" class="invalid" name="low-flow-invalid-Field" type="number" placeholder="e.g. 43" min="0" value="-2"></dd>
+              </div>
 
-              <dt><label for="low-flow-range">Range field</label></dt>
-              <dd><input id="low-flow-range" name="low-flow-range" type="range"></dd>
+              <div>
+                <dt><label for="low-flow-valid-field">Valid field</label></dt>
+                <dd><input id="low-flow-valid-field" class="valid" name="low-flow-valid-field" type="number" placeholder="e.g. 43" min="0" value="2"></dd>
+              </div>
 
-              <dt><label for="low-flow-textarea">Textarea</label></dt>
-              <dd><textarea id="low-flow-textarea" name="low-flow-textarea" rows="5" cols="50" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic."></textarea></dd>
+              <div>
+                <dt><label for="low-flow-required-field">Required field</label></dt>
+                <dd><input id="low-flow-required-field" name="low-flow-required-field" type="number" placeholder="e.g. 43" min="0" required></dd>
+              </div>
 
-              <dt><label for="low-flow-prefilledtextarea">Textarea (prefilled)</label></dt>
-              <dd>
-                <textarea id="low-flow-prefilledtextarea" name="low-flow-prefilledtextarea" rows="5" cols="50" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.">Some prefilled content...</textarea>
-                <label for="low-flow-prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
-              </dd>
+              <div>
+                <dt><label for="low-flow-selectbox">Select box</label></dt>
+                <dd>
+                  <select id="low-flow-selectbox" name="low-flow-selectbox">
+                    <option value="1">Item one</option>
+                    <option value="2">Item two</option>
+                    <option value="3">Item three</option>
+                    <option value="4">Item four</option>
+                    <option value="5">Item five</option>
+                    <option value="6">Item six</option>
+                    <option value="7">Item seven</option>
+                  </select>
+                  <label for="low-flow-selectbox">Some help text regarding the select box</label>
+                </dd>
+              </div>
+
+              <div>
+                <dt><label data-for="low-flow-checkboxes">Checkboxes</label></dt>
+                <dd class="checkboxes">
+                  <ul id="low-flow-checkboxes">
+                    <li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_one"> <label for="low-flow-checkboxes_one">One</label></li>
+                    <li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_two"> <label for="low-flow-checkboxes_two">Two</label></li>
+                    <li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_three"> <label for="low-flow-checkboxes_three">Three</label></li>
+                  </ul>
+                </dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-checkbox">Single checkbox</label></dt>
+                <dd><input type="checkbox" name="low-flow-checkbox-field" id="low-flow-checkbox"></dd>
+              </div>
+
+              <div>
+                <dt><label data-for="low-flow-radios">Radios</label></dt>
+                <dd class="radios">
+                  <ul id="low-flow-radios">
+                    <li><input type="radio" name="low-flow-radios" id="low-flow-r_one"> <label for="low-flow-r_one">One</label></li>
+                    <li><input type="radio" name="low-flow-radios" id="low-flow-r_two"> <label for="low-flow-r_two">Two</label></li>
+                    <li><input type="radio" name="low-flow-radios" id="low-flow-r_three"> <label for="low-flow-r_three">Three</label></li>
+                  </ul>
+                </dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-color">Color field</label></dt>
+                <dd><input id="low-flow-color" name="low-flow-color" type="color"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-date">Date field</label></dt>
+                <dd><input id="low-flow-date" name="low-flow-date" type="date"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-time">Time field</label></dt>
+                <dd><input id="low-flow-time" name="low-flow-time" type="time"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-datetime-local">Datetime-local field</label></dt>
+                <dd><input id="low-flow-datetime-local" name="low-flow-datetime-local" type="datetime-local"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-month">Month field</label></dt>
+                <dd><input id="low-flow-month" name="low-flow-month" type="month"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-week">Week field</label></dt>
+                <dd><input id="low-flow-week" name="low-flow-week" type="week"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-file">File field</label></dt>
+                <dd><input id="low-flow-file" name="low-flow-file" type="file"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-range">Range field</label></dt>
+                <dd><input id="low-flow-range" name="low-flow-range" type="range"></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-textarea">Textarea</label></dt>
+                <dd><textarea id="low-flow-textarea" name="low-flow-textarea" rows="5" cols="50" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic."></textarea></dd>
+              </div>
+
+              <div>
+                <dt><label for="low-flow-prefilledtextarea">Textarea (prefilled)</label></dt>
+                <dd>
+                  <textarea id="low-flow-prefilledtextarea" name="low-flow-prefilledtextarea" rows="5" cols="50" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.">Some prefilled content...</textarea>
+                  <label for="low-flow-prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
+                </dd>
+              </div>
             </dl>
 
+            <h3 id="low_flow_nested_fieldsets">Nested fieldsets</h3>
             <fieldset>
               <legend>Nested fieldset</legend>
 
               <dl>
-                <dt><label for="low-flow-nested-input-1">Input</label></dt>
-                <dd>
-                  <input type="text" id="low-flow-nested-input-1" name="low-flow-nested-input-1" placeholder="Some interesting placeholder text">
-                  <p>Here is some subtext.</p>
-                </dd>
+                <div>
+                  <dt><label for="low-flow-nested-input-1">Input</label></dt>
+                  <dd>
+                    <input type="text" id="low-flow-nested-input-1" name="low-flow-nested-input-1" placeholder="Some interesting placeholder text">
+                    <p>Here is some subtext.</p>
+                  </dd>
+                </div>
 
-                <dt><label for="low-flow-nested-input-2">Input 2</label></dt>
-                <dd>
-                  <input type="text" id="low-flow-nested-input-2" name="low-flow-nested-input-2" placeholder="Some interesting placeholder text">
-                  <p><small>Here's some small subtext.</small></p>
-                </dd>
+                <div>
+                  <dt><label for="low-flow-nested-input-2">Input 2</label></dt>
+                  <dd>
+                    <input type="text" id="low-flow-nested-input-2" name="low-flow-nested-input-2" placeholder="Some interesting placeholder text">
+                    <p><small>Here's some small subtext.</small></p>
+                  </dd>
+                </div>
 
-                <dt><label for="low-flow-nested-input-3">Input 3</label></dt>
-                <dd>
-                  <input type="text" id="low-flow-nested-input-3" name="low-flow-nested-input-3" placeholder="Some interesting placeholder text">
-                  <p><strong>Here's some bold subtext.</strong></p>
-                </dd>
+                <div>
+                  <dt><label for="low-flow-nested-input-3">Input 3</label></dt>
+                  <dd>
+                    <input type="text" id="low-flow-nested-input-3" name="low-flow-nested-input-3" placeholder="Some interesting placeholder text">
+                    <p><strong>Here's some bold subtext.</strong></p>
+                  </dd>
+                </div>
 
-                <dt><label for="low-flow-nested-input-4">Input 4</label></dt>
-                <dd>
-                  <input type="text" id="low-flow-nested-input-4" name="low-flow-nested-input-4" placeholder="Some interesting placeholder text">
-                  <p>Here is some subtext.</p>
-                  <p>Here is some more subtext.</p>
-                </dd>
+                <div>
+                  <dt><label for="low-flow-nested-input-4">Input 4</label></dt>
+                  <dd>
+                    <input type="text" id="low-flow-nested-input-4" name="low-flow-nested-input-4" placeholder="Some interesting placeholder text">
+                    <p>Here is some subtext.</p>
+                    <p>Here is some more subtext.</p>
+                  </dd>
+                </div>
               </dl>
 
               <fieldset>
                 <legend>Another nested fieldset</legend>
 
                 <dl>
-                  <dt><label for="low-flow-nested-nested-input">Input</label></dt>
-                  <dd><input type="text" id="low-flow-nested-nested-input" name="low-flow-nested-nested-input" placeholder="Some interesting placeholder text"></dd>
+                  <div>
+                    <dt><label for="low-flow-nested-nested-input">Input</label></dt>
+                    <dd><input type="text" id="low-flow-nested-nested-input" name="low-flow-nested-nested-input" placeholder="Some interesting placeholder text"></dd>
+                  </div>
 
-                  <dt><label for="low-flow-nested-nested-input-2">Input 2</label></dt>
-                  <dd>
-                    <input type="text" id="low-flow-nested-nested-input-2" name="low-flow-nested-nested-input-2" placeholder="Some interesting placeholder text">
-                  </dd>
+                  <div>
+                    <dt><label for="low-flow-nested-nested-input-2">Input 2</label></dt>
+                    <dd>
+                      <input type="text" id="low-flow-nested-nested-input-2" name="low-flow-nested-nested-input-2" placeholder="Some interesting placeholder text">
+                    </dd>
+                  </div>
 
-                  <dt><label for="low-flow-nested-nested-select">Select</label></dt>
-                  <dd>
-                    <select id="low-flow-nested-nested-select" name="low-flow-nested-nested-select">
-                      <option value="jfkdskfs">Hey</option>
-                    </select>
-                  </dd>
+                  <div>
+                    <dt><label for="low-flow-nested-nested-select">Select</label></dt>
+                    <dd>
+                      <select id="low-flow-nested-nested-select" name="low-flow-nested-nested-select">
+                        <option value="jfkdskfs">Hey</option>
+                      </select>
+                    </dd>
+                  </div>
                 </dl>
               </fieldset>
             </fieldset>
 
+            <h3 id="low_flow_details">Detail elements</h3>
             <details>
               <summary>Details summary</summary>
               <dl>
-                <dt><label for="low-flow-detail-input-1">Detail input</label></dt>
-                <dd><input type="text" name="low-flow-detail-input-1" id="low-flow-detail-input-1"></dd>
-
-                <dt><label for="low-flow-detail-input-2">Detail input</label></dt>
-                <dd><input type="text" name="low-flow-detail-input-2" id="low-flow-detail-input-2"></dd>
-
-                <dt><label for="low-flow-detail-input-3">Detail input</label></dt>
-                <dd><input type="text" name="low-flow-detail-input-3" id="low-flow-detail-input-3"></dd>
-
-                <dt><label for="low-flow-detail-input-4">Detail input</label></dt>
-                <dd><input type="text" name="low-flow-detail-input-4" id="low-flow-detail-input-4"></dd>
+                <div>
+                  <dt><label for="low-flow-detail-input-1">Detail input</label></dt>
+                  <dd><input type="text" name="low-flow-detail-input-1" id="low-flow-detail-input-1"></dd>
+                </div>
+
+                <div>
+                  <dt><label for="low-flow-detail-input-2">Detail input</label></dt>
+                  <dd><input type="text" name="low-flow-detail-input-2" id="low-flow-detail-input-2"></dd>
+                </div>
+
+                <div>
+                  <dt><label for="low-flow-detail-input-3">Detail input</label></dt>
+                  <dd><input type="text" name="low-flow-detail-input-3" id="low-flow-detail-input-3"></dd>
+                </div>
+
+                <div>
+                  <dt><label for="low-flow-detail-input-4">Detail input</label></dt>
+                  <dd><input type="text" name="low-flow-detail-input-4" id="low-flow-detail-input-4"></dd>
+                </div>
               </dl>
             </details>
 
             <details>
               <summary>Another details element</summary>
               <dl>
-                <dt><label for="low-flow-another-detail-input-1">Detail input</label></dt>
-                <dd><input type="text" name="low-flow-another-detail-input-1" id="low-flow-another-detail-input-1"></dd>
+                <div>
+                  <dt><label for="low-flow-another-detail-input-1">Detail input</label></dt>
+                  <dd><input type="text" name="low-flow-another-detail-input-1" id="low-flow-another-detail-input-1"></dd>
+                </div>
               </dl>
             </details>
 
-            <fieldset>
-              <legend>Colspan classes</legend>
+            <h3 id="low_flow_colspan_classes">Colspan classes</h3>
 
-              <dl>
+            <dl>
+              <div class="colspan-1">
                 <dt><label for="low-flow-colspan-1a">colspan-1</label></dt>
-                <dd class="colspan-1"><input type="text" name="low-flow-colspan-1a" id="low-flow-colspan-1a"></dd>
+                <dd><input type="text" name="low-flow-colspan-1a" id="low-flow-colspan-1a"></dd>
+              </div>
+
+              <div class="colspan-1">
                 <dt><label for="low-flow-colspan-1b">colspan-1</label></dt>
-                <dd class="colspan-1"><input type="text" name="low-flow-colspan-1b" id="low-flow-colspan-1b"></dd>
+                <dd><input type="text" name="low-flow-colspan-1b" id="low-flow-colspan-1b"></dd>
+              </div>
+
+              <div class="colspan-2">
                 <dt><label for="low-flow-colspan-2">colspan-2</label></dt>
-                <dd class="colspan-2"><input type="text" name="low-flow-colspan-2" id="low-flow-colspan-2"></dd>
+                <dd><input type="text" name="low-flow-colspan-2" id="low-flow-colspan-2"></dd>
+              </div>
+
+              <div class="colspan-4">
                 <dt><label for="low-flow-colspan-4">colspan-4</label></dt>
-                <dd class="colspan-4"><input type="text" name="low-flow-colspan-4" id="low-flow-colspan-4"></dd>
+                <dd><input type="text" name="low-flow-colspan-4" id="low-flow-colspan-4"></dd>
+              </div>
+
+              <div class="colspan-3">
                 <dt><label for="low-flow-colspan-3">colspan-3</label></dt>
-                <dd class="colspan-3"><input type="text" name="low-flow-colspan-3" id="low-flow-colspan-3"></dd>
+                <dd><input type="text" name="low-flow-colspan-3" id="low-flow-colspan-3"></dd>
+              </div>
+
+              <div class="colspan-1">
                 <dt><label for="low-flow-colspan-1c">colspan-1</label></dt>
-                <dd class="colspan-1"><input type="text" name="low-flow-colspan-1c" id="low-flow-colspan-1c"></dd>
+                <dd><input type="text" name="low-flow-colspan-1c" id="low-flow-colspan-1c"></dd>
+              </div>
+
+              <div class="colspan-full">
                 <dt><label for="low-flow-colspan-full">colspan-full</label></dt>
-                <dd class="colspan-full"><input type="text" name="low-flow-colspan-full" id="low-flow-colspan-full"></dd>
+                <dd><input type="text" name="low-flow-colspan-full" id="low-flow-colspan-full"></dd>
+              </div>
+
+              <div class="colspan-5">
                 <dt><label for="low-flow-colspan-5">colspan-5</label></dt>
-                <dd class="colspan-5"><input type="text" name="low-flow-colspan-5" id="low-flow-colspan-5"></dd>
-              </dl>
+                <dd><input type="text" name="low-flow-colspan-5" id="low-flow-colspan-5"></dd>
+              </div>
+            </dl>
 
-              <fieldset class="colspan-1">
-                <legend>colspan-1</legend>
+            <fieldset class="colspan-1">
+              <legend>colspan-1</legend>
 
-                <dl>
+              <dl>
+                <div>
                   <dt><label for="low-flow-colspan-1-a">Input A</label></dt>
                   <dd><input type="text" id="low-flow-colspan-1-a" name="low-flow-colspan-1-a" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="low-flow-colspan-1-b">Input B</label></dt>
                   <dd><input type="text" id="low-flow-colspan-1-b" name="low-flow-colspan-1-b" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="low-flow-colspan-1-c">Input C</label></dt>
                   <dd><input type="text" id="low-flow-colspan-1-c" name="low-flow-colspan-1-c" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="low-flow-colspan-1-d">Input D</label></dt>
                   <dd><input type="text" id="low-flow-colspan-1-d" name="low-flow-colspan-1-d" placeholder="Some interesting placeholder text"></dd>
-                </dl>
-              </fieldset>
+                </div>
+              </dl>
+            </fieldset>
 
-              <fieldset class="colspan-2">
-                <legend>colspan-2</legend>
+            <fieldset class="colspan-2">
+              <legend>colspan-2</legend>
 
-                <dl>
+              <dl>
+                <div>
                   <dt><label for="low-flow-colspan-2-a">Input A</label></dt>
                   <dd><input type="text" id="low-flow-colspan-2-a" name="low-flow-colspan-2-a" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="low-flow-colspan-2-b">Input B</label></dt>
                   <dd><input type="text" id="low-flow-colspan-2-b" name="low-flow-colspan-2-b" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="low-flow-colspan-2-c">Input C</label></dt>
                   <dd><input type="text" id="low-flow-colspan-2-c" name="low-flow-colspan-2-c" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="low-flow-colspan-2-d">Input D</label></dt>
                   <dd><input type="text" id="low-flow-colspan-2-d" name="low-flow-colspan-2-d" placeholder="Some interesting placeholder text"></dd>
-                </dl>
-              </fieldset>
+                </div>
+              </dl>
+            </fieldset>
 
-              <fieldset>
-                <legend>colspan-3</legend>
+            <fieldset>
+              <legend>colspan-3</legend>
 
-                <dl class="colspan-3">
+              <dl class="colspan-3">
+                <div>
                   <dt><label for="low-flow-colspan-3-a">Input A</label></dt>
                   <dd><input type="text" id="low-flow-colspan-3-a" name="low-flow-colspan-3-a" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="colspan-3-b">Input B</label></dt>
                   <dd><input type="text" id="low-flow-colspan-3-b" name="low-flow-colspan-3-b" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="colspan-3-c">Input C</label></dt>
                   <dd><input type="text" id="low-flow-colspan-3-c" name="low-flow-colspan-3-c" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="colspan-3-d">Input D</label></dt>
                   <dd><input type="text" id="low-flow-colspan-3-d" name="low-flow-colspan-3-d" placeholder="Some interesting placeholder text"></dd>
-                </dl>
-              </fieldset>
+                </div>
+              </dl>
+            </fieldset>
 
-              <fieldset class="colspan-full">
-                <legend>colspan-full</legend>
+            <fieldset class="colspan-full">
+              <legend>colspan-full</legend>
 
-                <dl>
+              <dl>
+                <div>
                   <dt><label for="low-flow-colspan-full-a">Input A</label></dt>
                   <dd><input type="text" id="low-flow-colspan-full-a" name="low-flow-colspan-full-a" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="low-flow-colspan-full-b">Input B</label></dt>
                   <dd><input type="text" id="low-flow-colspan-full-b" name="low-flow-colspan-full-b" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="low-flow-colspan-full-c">Input C</label></dt>
                   <dd><input type="text" id="low-flow-colspan-full-c" name="low-flow-colspan-full-c" placeholder="Some interesting placeholder text"></dd>
+                </div>
 
+                <div>
                   <dt><label for="low-flow-colspan-full-d">Input D</label></dt>
                   <dd><input type="text" id="low-flow-colspan-full-d" name="low-flow-colspan-full-d" placeholder="Some interesting placeholder text"></dd>
-                </dl>
-              </fieldset>
+                </div>
+              </dl>
             </fieldset>
 
-            <fieldset>
-              <legend>P tag elements</legend>
+            <h3 id="low_flow_p_tag_elements">P tag elements</h3>
 
-              <p>
-                <input type="checkbox" name="low-flow-p-tag-checkbox" id="low-flow-p-tag-checkbox">
-                <label for="low-flow-p-tag-checkbox">Checkbox</label>
-              </p>
-              <p>
-                <label for="low-flow-p-tag-input">Text input</label>
-                <input type="text" name="low-flow-p-tag-input" id="low-flow-p-tag-input">
-              </p>
-              <p>
-                <label for="low-flow-p-tag-textarea">Textarea</label>
-                <textarea name="low-flow-p-tag-textarea" id="low-flow-p-tag-textarea"></textarea>
-              </p>
-              <p>
-                <button type="button" name="low-flow-p-tag-button" id="low-flow-p-tag-button">Button</button>
-              </p>
-              <p>
-                Some regular text with <strong>other elements</strong> <span>inside of it</span>
-              </p>
-            </fieldset>
+            <p>
+              <input type="checkbox" name="low-flow-p-tag-checkbox" id="low-flow-p-tag-checkbox">
+              <label for="low-flow-p-tag-checkbox">Checkbox</label>
+            </p>
+            <p>
+              <label for="low-flow-p-tag-input">Text input</label>
+              <input type="text" name="low-flow-p-tag-input" id="low-flow-p-tag-input">
+            </p>
+            <p>
+              <label for="low-flow-p-tag-textarea">Textarea</label>
+              <textarea name="low-flow-p-tag-textarea" id="low-flow-p-tag-textarea"></textarea>
+            </p>
+            <p>
+              <button type="button" name="low-flow-p-tag-button" id="low-flow-p-tag-button">Button</button>
+            </p>
+            <p>
+              Some regular text with <strong>other elements</strong> <span>inside of it</span>
+            </p>
 
+            <h3 id="low_flow_buttons">Buttons</h3>
             <input type="submit" name="button1" value="Non-grouped submit button">
             <input type="reset" name="reset" value="Another one">
             <a href="/" class="button-link">Button link</a>
@@ -1265,12 +1666,15 @@ <h2>Low flow (JavaScript disabled) styling</h2>
               <li><input type="submit" name="button3" value="Button 3"></li>
             </menu>
           </fieldset>
+        </form>
 
-          <h2>Non-form related HTML elements</h2>
+        <h2 id="non_form_related_elements">Non-form related HTML elements</h2>
+        <form action="/somewhere" method="post" class="semanticForms">
           <p>This is some regular HTML that should not be affected by any semantic forms styles</p>
           <div>This is a div</div>
           <blockquote>This is a block quote</blockquote>
           <a href="https://github.com/rooseveltframework/semantic-forms">A link to the semantic forms repo</a>
+
           <ul>
             <li>unordered list 1</li>
             <li>unordered list 2</li>
diff --git a/docs/statics/pages/usage.html b/docs/statics/pages/usage.html
index b84b720..cfa1120 100644
--- a/docs/statics/pages/usage.html
+++ b/docs/statics/pages/usage.html
@@ -42,21 +42,27 @@ <h4 id="floatlabel">Float label inputs</h4>
 
       <p>The float label input pattern is notoriously difficult to implement in a fashion that doesn't degrade HTML semantics or accessibility. This pattern library implements a solution that solves that problem. Your label doesn't need to be a sibling of your input like with other implementations. This implementation also has a custom clear button for each input.</p>
 
+      <p>Note: Although wrapping the input and label elements in a <code><!--#<div>--></code> is not required, it is highly recommended as it reduces <a href="https://en.wikipedia.org/wiki/Flash_of_unstyled_content"><abbr>FOUC</abbr></a>.</p>
+
       <h5 id="floatlabelex">Example</h5>
 
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms">
   <dl>
-    <dt><label for="name">Name</label></dt>
-    <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
+    <div>
+      <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
+      <dt><label for="name">Name</label></dt>
+    </div>
   </dl>
 </form>
 </escape></code></pre>
 
       <form class="semanticForms">
         <dl>
-          <dt><label for="name">Name</label></dt>
-          <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
+          <div>
+            <dt><label for="name">Name</label></dt>
+            <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
+          </div>
         </dl>
       </form>
 
@@ -65,16 +71,20 @@ <h5 id="floatlabelextextarea">Or with a <code><!--#<textarea>--></code></h5>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms">
   <dl>
-    <dt><label for="textarea">Textarea</label></dt>
-    <dd><textarea id="textarea" name="textarea" rows="5" cols="50" placeholder="e.g. Long string of text"></textarea></dd>
+    <div>
+      <dt><label for="textarea">Textarea</label></dt>
+      <dd><textarea id="textarea" name="textarea" rows="5" cols="50" placeholder="e.g. Long string of text"></textarea></dd>
+    </div>
   </dl>
 </form>
 </escape></code></pre>
 
       <form class="semanticForms">
         <dl>
-          <dt><label for="textarea">Textarea</label></dt>
-          <dd><textarea id="textarea" name="textarea" rows="5" cols="50" placeholder="e.g. Long string of text"></textarea></dd>
+          <div>
+            <dt><label for="textarea">Textarea</label></dt>
+            <dd><textarea id="textarea" name="textarea" rows="5" cols="50" placeholder="e.g. Long string of text"></textarea></dd>
+          </div>
         </dl>
       </form>
 
@@ -87,22 +97,26 @@ <h5 id="addhelptext">Add help text</h5>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms" method="post">
   <dl>
-    <dt><label for="password">Password</label></dt>
-    <dd>
-      <input id="password" name="password" type="password" placeholder="Enter a password" minlength="8" required autocomplete="off">
-      <label for="password">Must be at least 8 characters long.</label>
-    </dd>
+    <div>
+      <dt><label for="password">Password</label></dt>
+      <dd>
+        <input id="password" name="password" type="password" placeholder="Enter a password" minlength="8" required autocomplete="off">
+        <label for="password">Must be at least 8 characters long.</label>
+      </dd>
+    </div>
   </dl>
 </form>
 </escape></code></pre>
 
       <form class="semanticForms" method="post">
         <dl>
-          <dt><label for="password">Password</label></dt>
-          <dd>
-            <input id="password" name="password" type="password" placeholder="Enter a password" minlength="8" required autocomplete="off">
-            <label for="password">Must be at least 8 characters long.</label>
-          </dd>
+          <div>
+            <dt><label for="password">Password</label></dt>
+            <dd>
+              <input id="password" name="password" type="password" placeholder="Enter a password" minlength="8" required autocomplete="off">
+              <label for="password">Must be at least 8 characters long.</label>
+            </dd>
+          </div>
         </dl>
       </form>
 
@@ -113,22 +127,26 @@ <h5>Add inline buttons</h5>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms" method="post">
   <dl>
-    <dt><label for="email">Email address</label></dt>
-    <dd>
-      <input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
-      <button type="submit">Sign up</button>
-    </dd>
+    <div>
+      <dt><label for="email">Email address</label></dt>
+      <dd>
+        <input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
+        <button type="submit">Sign up</button>
+      </dd>
+    </div>
   </dl>
 </form>
 </escape></code></pre>
       
       <form class="semanticForms" method="post">
         <dl>
-          <dt><label for="email">Email address</label></dt>
-          <dd>
-            <input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
-            <button type="submit">Sign up!</button>
-          </dd>
+          <div>
+            <dt><label for="email">Email address</label></dt>
+            <dd>
+              <input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
+              <button type="submit">Sign up!</button>
+            </dd>
+          </div>
         </dl>
       </form>
 
@@ -139,32 +157,44 @@ <h5>Add custom keyboard shortcuts</h5>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms" method="post">
   <dl>
-    <dt><label for="focus-1">Focus me!</label></dt>
-    <dd><input id="focus-1" name="focus-1" type="text" data-focus-key="Y"></dd>
+    <div>
+      <dt><label for="focus-1">Focus me!</label></dt>
+      <dd><input id="focus-1" name="focus-1" type="text" data-focus-key="Y"></dd>
+    </div>
 
     <!-- change the modifier -->
-    <dt><label for="focus-2">Focus me!</label></dt>
-    <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Y" data-focus-modifier="alt"></dd>
+    <div>
+      <dt><label for="focus-2">Focus me!</label></dt>
+      <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Y" data-focus-modifier="alt"></dd>
+    </div>
 
     <!-- specify modifier by OS -->
-    <dt><label for="focus-2">Focus me!</label></dt>
-    <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Z" data-focus-modifier-win="alt" data-focus-modifier-linux="meta" data-focus-modifier-mac="cmd"></dd>
+    <div>
+      <dt><label for="focus-2">Focus me!</label></dt>
+      <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Z" data-focus-modifier-win="alt" data-focus-modifier-linux="meta" data-focus-modifier-mac="cmd"></dd>
+    </div>
   </dl>
 </form>
 </escape></code></pre>
       
       <form class="semanticForms" method="post">
         <dl>
-          <dt><label for="focus-1">Focus me!</label></dt>
-          <dd><input id="focus-1" name="focus-1" type="text" data-focus-key="Y"></dd>
+          <div>
+            <dt><label for="focus-1">Focus me!</label></dt>
+            <dd><input id="focus-1" name="focus-1" type="text" data-focus-key="Y"></dd>
+          </div>
       
           <!-- change the modifier -->
-          <dt><label for="focus-2">Focus me!</label></dt>
-          <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Y" data-focus-modifier="alt"></dd>
+          <div>
+            <dt><label for="focus-2">Focus me!</label></dt>
+            <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Y" data-focus-modifier="alt"></dd>
+          </div>
       
           <!-- specify modifier by OS -->
-          <dt><label for="focus-3">Focus me!</label></dt>
-          <dd><input id="focus-3" name="focus-3" type="text" data-focus-key="Z" data-focus-modifier-win="alt" data-focus-modifier-linux="meta" data-focus-modifier-max="cmd"></dd>
+          <div>
+            <dt><label for="focus-3">Focus me!</label></dt>
+            <dd><input id="focus-3" name="focus-3" type="text" data-focus-key="Z" data-focus-modifier-win="alt" data-focus-modifier-linux="meta" data-focus-modifier-max="cmd"></dd>
+          </div>
         </dl>
       </form>
 
@@ -209,16 +239,20 @@ <h5 id="custominputfields">Customizing input fields</h5>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms">
   <dl>
-    <dt><label for="search-field">Search</label></dt>
-    <dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cool stuff" class="no-float-label"></dd>
+    <div>
+      <dt><label for="search-field">Search</label></dt>
+      <dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cool stuff" class="no-float-label"></dd>
+    </div>
   </dl>
 </form>
 </escape></code></pre>
 
       <form class="semanticForms">
         <dl>
-          <dt><label for="search-field">Search</label></dt>
-          <dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cool stuff" class="no-float-label"></dd>
+          <div>
+            <dt><label for="search-field">Search</label></dt>
+            <dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cool stuff" class="no-float-label"></dd>
+          </div>
         </dl>
       </form>
 
@@ -233,30 +267,42 @@ <h5 id="colspan">Set number of columns for a group of forms</h5>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms">
   <dl class="colspan-2">
-    <dt><label for="input-a">Input A</label></dt>
-    <dd><input type="text" id="input-a" name="input-a"></dd>
+    <div>
+      <dt><label for="input-a">Input A</label></dt>
+      <dd><input type="text" id="input-a" name="input-a"></dd>
+    </div>
 
-    <dt><label for="input-b">Input B</label></dt>
-    <dd><input type="text" id="input-b" name="input-b"></dd>
+    <div>
+      <dt><label for="input-b">Input B</label></dt>
+      <dd><input type="text" id="input-b" name="input-b"></dd>
+    </div>
 
     <!-- wraps to the next row -->
-    <dt><label for="input-c">Input C</label></dt>
-    <dd><input type="text" id="input-c" name="input-c"></dd>
+    <div>
+      <dt><label for="input-c">Input C</label></dt>
+      <dd><input type="text" id="input-c" name="input-c"></dd>
+    </div>
   </dl>
 </form>
 </escape></code></pre>
 
       <form class="semanticForms">
         <dl class="colspan-2">
-          <dt><label for="input-a">Input A</label></dt>
-          <dd><input type="text" id="input-a" name="input-a"></dd>
+          <div>
+            <dt><label for="input-a">Input A</label></dt>
+            <dd><input type="text" id="input-a" name="input-a"></dd>
+          </div>
 
-          <dt><label for="input-b">Input B</label></dt>
-          <dd><input type="text" id="input-b" name="input-b"></dd>
+          <div>
+            <dt><label for="input-b">Input B</label></dt>
+            <dd><input type="text" id="input-b" name="input-b"></dd>
+          </div>
 
           <!-- wraps to the next row -->
-          <dt><label for="input-c">Input C</label></dt>
-          <dd><input type="text" id="input-c" name="input-c"></dd>
+          <div>
+            <dt><label for="input-c">Input C</label></dt>
+            <dd><input type="text" id="input-c" name="input-c"></dd>
+          </div>
         </dl>
       </form>
 
@@ -267,26 +313,38 @@ <h5 id="colspan">Set number of columns for a group of forms</h5>
   <fieldset class="colspan-3">
     <!-- inherits 3 column class -->
     <dl>
-      <dt><label for="f-ex-input-a">Input A</label></dt>
-      <dd><input type="text" id="f-ex-input-a" name="f-ex-input-a"></dd>
-
-      <dt><label for="f-ex-input-b">Input B</label></dt>
-      <dd><input type="text" id="f-ex-input-b" name="f-ex-input-b"></dd>
-
-      <dt><label for="f-ex-input-c">Input C</label></dt>
-      <dd><input type="text" id="f-ex-input-c" name="f-ex-input-c"></dd>
+      <div>
+        <dt><label for="f-ex-input-a">Input A</label></dt>
+        <dd><input type="text" id="f-ex-input-a" name="f-ex-input-a"></dd>
+      </div>
+
+      <div>
+        <dt><label for="f-ex-input-b">Input B</label></dt>
+        <dd><input type="text" id="f-ex-input-b" name="f-ex-input-b"></dd>
+      </div>
+
+      <div>
+        <dt><label for="f-ex-input-c">Input C</label></dt>
+        <dd><input type="text" id="f-ex-input-c" name="f-ex-input-c"></dd>
+      </div>
     </dl>
 
     <!-- has 4 columns -->
     <dl class="colspan-4">
-      <dt><label for="f-ex-input-d">Input D</label></dt>
-      <dd><input type="text" id="f-ex-input-d" name="f-ex-input-d"></dd>
-
-      <dt><label for="f-ex-input-e">Input E</label></dt>
-      <dd><input type="text" id="f-ex-input-e" name="f-ex-input-e"></dd>
-
-      <dt><label for="f-ex-input-f">Input F</label></dt>
-      <dd><input type="text" id="f-ex-input-f" name="f-ex-input-f"></dd>
+      <div>
+        <dt><label for="f-ex-input-d">Input D</label></dt>
+        <dd><input type="text" id="f-ex-input-d" name="f-ex-input-d"></dd>
+      </div>
+
+      <div>
+        <dt><label for="f-ex-input-e">Input E</label></dt>
+        <dd><input type="text" id="f-ex-input-e" name="f-ex-input-e"></dd>
+      </div>
+
+      <div>
+        <dt><label for="f-ex-input-f">Input F</label></dt>
+        <dd><input type="text" id="f-ex-input-f" name="f-ex-input-f"></dd>
+      </div>
     </dl>
   </fieldset>
 </form>
@@ -296,26 +354,38 @@ <h5 id="colspan">Set number of columns for a group of forms</h5>
         <fieldset class="colspan-3">
           <!-- inherits 3 column class -->
           <dl>
-            <dt><label for="f-ex-input-a">Input A</label></dt>
-            <dd><input type="text" id="f-ex-input-a" name="f-ex-input-a"></dd>
-
-            <dt><label for="f-ex-input-b">Input B</label></dt>
-            <dd><input type="text" id="f-ex-input-b" name="f-ex-input-b"></dd>
-
-            <dt><label for="f-ex-input-c">Input C</label></dt>
-            <dd><input type="text" id="f-ex-input-c" name="f-ex-input-c"></dd>
+            <div>
+              <dt><label for="f-ex-input-a">Input A</label></dt>
+              <dd><input type="text" id="f-ex-input-a" name="f-ex-input-a"></dd>
+            </div>
+
+            <div>
+              <dt><label for="f-ex-input-b">Input B</label></dt>
+              <dd><input type="text" id="f-ex-input-b" name="f-ex-input-b"></dd>
+            </div>
+
+            <div>
+              <dt><label for="f-ex-input-c">Input C</label></dt>
+              <dd><input type="text" id="f-ex-input-c" name="f-ex-input-c"></dd>
+            </div>
           </dl>
 
           <!-- has 4 columns -->
           <dl class="colspan-4">
-            <dt><label for="f-ex-input-d">Input D</label></dt>
-            <dd><input type="text" id="f-ex-input-d" name="f-ex-input-d"></dd>
-
-            <dt><label for="f-ex-input-e">Input E</label></dt>
-            <dd><input type="text" id="f-ex-input-e" name="f-ex-input-e"></dd>
-
-            <dt><label for="f-ex-input-f">Input F</label></dt>
-            <dd><input type="text" id="f-ex-input-f" name="f-ex-input-f"></dd>
+            <div>
+              <dt><label for="f-ex-input-d">Input D</label></dt>
+              <dd><input type="text" id="f-ex-input-d" name="f-ex-input-d"></dd>
+            </div>
+
+            <div>
+              <dt><label for="f-ex-input-e">Input E</label></dt>
+              <dd><input type="text" id="f-ex-input-e" name="f-ex-input-e"></dd>
+            </div>
+
+            <div>
+              <dt><label for="f-ex-input-f">Input F</label></dt>
+              <dd><input type="text" id="f-ex-input-f" name="f-ex-input-f"></dd>
+            </div>
           </dl>
         </fieldset>
       </form>
@@ -328,17 +398,23 @@ <h5 id="setcolspannumber">Set number of columns a single input field takes up</h
 <form class="semanticForms">
   <fieldset>
     <dl>
-      <dt><label for="cspan-ex-input-a">Input A</label></dt>
-      <!-- 1 column -->
-      <dd class="colspan-1"><input type="text" id="cspan-ex-input-a" name="cspan-ex-input-a"></dd>
-
-      <dt><label for="cspan-ex-input-b">Input B</label></dt>
-      <!-- 2 columns  -->
-      <dd class="colspan-2"><input type="text" id="cspan-ex-input-b" name="cspan-ex-input-b"></dd>
-
-      <dt><label for="cspan-ex-input-c">Input C</label></dt>
-      <!-- 5 columns (max) -->
-      <dd class="colspan-5"><input type="text" id="cspan-ex-input-c" name="cspan-ex-input-c"></dd>
+      <div>
+        <dt><label for="cspan-ex-input-a">Input A</label></dt>
+        <!-- 1 column -->
+        <dd class="colspan-1"><input type="text" id="cspan-ex-input-a" name="cspan-ex-input-a"></dd>
+      </div>
+
+      <div>
+        <dt><label for="cspan-ex-input-b">Input B</label></dt>
+        <!-- 2 columns  -->
+        <dd class="colspan-2"><input type="text" id="cspan-ex-input-b" name="cspan-ex-input-b"></dd>
+      </div>
+
+      <div>
+        <dt><label for="cspan-ex-input-c">Input C</label></dt>
+        <!-- 5 columns (max) -->
+        <dd class="colspan-5"><input type="text" id="cspan-ex-input-c" name="cspan-ex-input-c"></dd>
+      </div>
     </dl>
   </fieldset>
 </form>
@@ -347,17 +423,23 @@ <h5 id="setcolspannumber">Set number of columns a single input field takes up</h
       <form class="semanticForms">
         <fieldset>
           <dl>
-            <dt><label for="cspan-ex-input-a">Input A</label></dt>
-            <!-- 1 column -->
-            <dd class="colspan-1"><input type="text" id="cspan-ex-input-a" name="cspan-ex-input-a"></dd>
-
-            <dt><label for="cspan-ex-input-b">Input B</label></dt>
-            <!-- 2 columns  -->
-            <dd class="colspan-2"><input type="text" id="cspan-ex-input-b" name="cspan-ex-input-b"></dd>
-
-            <dt><label for="cspan-ex-input-c">Input C</label></dt>
-            <!-- 5 columns (max) -->
-            <dd class="colspan-5"><input type="text" id="cspan-ex-input-c" name="cspan-ex-input-c"></dd>
+            <div>
+              <dt><label for="cspan-ex-input-a">Input A</label></dt>
+              <!-- 1 column -->
+              <dd class="colspan-1"><input type="text" id="cspan-ex-input-a" name="cspan-ex-input-a"></dd>
+            </div>
+
+            <div>
+              <dt><label for="cspan-ex-input-b">Input B</label></dt>
+              <!-- 2 columns  -->
+              <dd class="colspan-2"><input type="text" id="cspan-ex-input-b" name="cspan-ex-input-b"></dd>
+            </div>
+
+            <div>
+              <dt><label for="cspan-ex-input-c">Input C</label></dt>
+              <!-- 5 columns (max) -->
+              <dd class="colspan-5"><input type="text" id="cspan-ex-input-c" name="cspan-ex-input-c"></dd>
+            </div>
           </dl>
         </fieldset>
       </form>
@@ -368,17 +450,23 @@ <h5 id="setcolspannumber">Set number of columns a single input field takes up</h
 <form class="semanticForms">
   <fieldset>
     <dl>
-      <dt><label for="cspanfull-ex-input-a">Input A</label></dt>
-      <!-- this spans 2 columns on row 1 -->
-      <dd class="colspan-2"><input type="text" id="cspanfull-ex-input-a" name="cspanfull-ex-input-a"></dd>
-
-      <dt><label for="cspanfull-ex-input-b">Input B</label></dt>
-      <!-- this spans the full width of row 2 -->
-      <dd class="colspan-full"><input type="text" id="cspanfull-ex-input-b" name="cspanfull-ex-input-b"></dd>
-
-      <!-- this spans 1 column on row 3 -->
-      <dt><label for="cspanfull-ex-input-c">Input C</label></dt>
-      <dd><input type="text" id="cspanfull-ex-input-c" name="cspanfull-ex-input-c"></dd>
+      <div>
+        <dt><label for="cspanfull-ex-input-a">Input A</label></dt>
+        <!-- this spans 2 columns on row 1 -->
+        <dd class="colspan-2"><input type="text" id="cspanfull-ex-input-a" name="cspanfull-ex-input-a"></dd>
+      </div>
+
+      <div>
+        <dt><label for="cspanfull-ex-input-b">Input B</label></dt>
+        <!-- this spans the full width of row 2 -->
+        <dd class="colspan-full"><input type="text" id="cspanfull-ex-input-b" name="cspanfull-ex-input-b"></dd>
+      </div>
+
+      <div>
+        <!-- this spans 1 column on row 3 -->
+        <dt><label for="cspanfull-ex-input-c">Input C</label></dt>
+        <dd><input type="text" id="cspanfull-ex-input-c" name="cspanfull-ex-input-c"></dd>
+      </div>
     </dl>
   </fieldset>
 </form>
@@ -387,21 +475,71 @@ <h5 id="setcolspannumber">Set number of columns a single input field takes up</h
       <form class="semanticForms">
         <fieldset>
           <dl>
-            <dt><label for="cspanfull-ex-input-a">Input A</label></dt>
-            <!-- this spans 2 columns on row 1 -->
-            <dd class="colspan-2"><input type="text" id="cspanfull-ex-input-a" name="cspanfull-ex-input-a"></dd>
-
-            <dt><label for="cspanfull-ex-input-b">Input B</label></dt>
-            <!-- this spans the full width of row 2 -->
-            <dd class="colspan-full"><input type="text" id="cspanfull-ex-input-b" name="cspanfull-ex-input-b"></dd>
-
-            <!-- this spans 1 column on row 3 -->
-            <dt><label for="cspanfull-ex-input-c">Input C</label></dt>
-            <dd><input type="text" id="cspanfull-ex-input-c" name="cspanfull-ex-input-c"></dd>
+            <div>
+              <dt><label for="cspanfull-ex-input-a">Input A</label></dt>
+              <!-- this spans 2 columns on row 1 -->
+              <dd class="colspan-2"><input type="text" id="cspanfull-ex-input-a" name="cspanfull-ex-input-a"></dd>
+            </div>
+
+            <div>
+              <dt><label for="cspanfull-ex-input-b">Input B</label></dt>
+              <!-- this spans the full width of row 2 -->
+              <dd class="colspan-full"><input type="text" id="cspanfull-ex-input-b" name="cspanfull-ex-input-b"></dd>
+            </div>
+
+            <div>
+              <!-- this spans 1 column on row 3 -->
+              <dt><label for="cspanfull-ex-input-c">Input C</label></dt>
+              <dd><input type="text" id="cspanfull-ex-input-c" name="cspanfull-ex-input-c"></dd>
+            </div>
           </dl>
         </fieldset>
       </form>
 
+      <h5>Align elements within the responsive grid</h5>
+      
+      <p>Use classes to align an element at the start, center, or end of its available space. Available classes are <code>align-start</code>, <code>align-center</code>, and <code>align-end</code>.</p>
+      
+      <pre><code class='language-html' lang='html'><escape>
+<form class="semanticForms" method="post">
+  <dl class="colspan-3">
+    <div>
+      <dt><label for="align-start">align-start</label></dt>
+      <dd class="align-start"><input id="align-start" name="align-start" type="text"></dd>
+    </div>
+
+    <div>
+      <dt><label for="align-center">align-center</label></dt>
+      <dd class="align-center"><input id="align-center" name="align-center" type="text"></dd>
+    </div>
+
+    <div>
+      <dt><label for="align-end">align-end</label></dt>
+      <dd class="align-end"><input id="align-end" name="align-end" type="text"></dd>
+    </div>
+  </dl>
+</form>
+</escape></code></pre>
+      
+      <form class="semanticForms" method="post">
+        <dl class="colspan-3">
+          <div>
+            <dt><label for="align-start">align-start</label></dt>
+            <dd class="align-start"><input id="align-start" name="align-start" type="text"></dd>
+          </div>
+      
+          <div>
+            <dt><label for="align-center">align-center</label></dt>
+            <dd class="align-center"><input id="align-center" name="align-center" type="text"></dd>
+          </div>
+      
+          <div>
+            <dt><label for="align-end">align-end</label></dt>
+            <dd class="align-end"><input id="align-end" name="align-end" type="text"></dd>
+          </div>
+        </dl>
+      </form>
+
       <h4 id="buttongroups">Button groups</h4>
 
       <p>You can align buttons side-by-side, or in left/right/center groups.</p>
@@ -458,6 +596,38 @@ <h6 id="buttongroupex">Button groups</h6>
         </menu>
       </form>
 
+      <p>Buttons may also be integrated into the responsive grid by treating it like a standard form input.</p>
+
+      <pre><code class='language-html' lang='html'><escape>
+<form class="semanticForms" method="post">
+  <dl>
+    <div>
+      <dt><label for="inline-btn-input">Some input</label></dt>
+      <dd><input type="text" name="inline-btn-input" id="inline-btn-input"></dd>
+    </div>
+
+    <div>
+      <dt><label for="inline-btn">Inline button</label></dt>
+      <dd><button id="inline-btn">Inline button</button></dd>
+    </div>
+  </dl>
+</form>
+</escape></code></pre>
+      
+      <form class="semanticForms" method="post">
+        <dl>
+          <div>
+            <dt><label for="inline-btn-input">Some input</label></dt>
+            <dd><input type="text" name="inline-btn-input" id="inline-btn-input"></dd>
+          </div>
+        
+          <div>
+            <dt><label for="inline-btn">Inline button</label></dt>
+            <dd><button id="inline-btn">Inline button</button></dd>
+          </div>
+        </dl>
+      </form>
+
       <p>You can also style a link like a Semantic Forms button by applying a class of <code>button-link</code> to it.</p>
 
       <h4 id="checkboxesandradios">Checkboxes and radio buttons</h4>
@@ -471,16 +641,20 @@ <h5 id="singlecheckbox">A single checkbox</h5>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms">
   <dl>
-    <dt><label for="some_field_name">Single checkbox</label></dt>
-    <dd><input type="checkbox" name="some_field_name" id="some_field_name"></dd>
+    <div>
+      <dt><label for="some_field_name">Single checkbox</label></dt>
+      <dd><input type="checkbox" name="some_field_name" id="some_field_name"></dd>
+    </div>
   </dl>
 </form>
       </escape></code></pre>
 
       <form class="semanticForms">
         <dl>
-          <dt><label for="some_field_name">Single checkbox</label></dt>
-          <dd><input type="checkbox" name="some_field_name" id="some_field_name"></dd>
+          <div>
+            <dt><label for="some_field_name">Single checkbox</label></dt>
+            <dd><input type="checkbox" name="some_field_name" id="some_field_name"></dd>
+          </div>
         </dl>
       </form>
 
@@ -489,28 +663,32 @@ <h5 id="checkboxgroup">Checkbox group</h5>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms">
   <dl>
-    <dt><label data-for="some_checkboxes">Checkboxes:</label></dt>
-    <dd class="checkboxes">
-      <ul id="some_checkboxes">
-        <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_one"> <label for="some_field_name_checkboxes_one">One</label></li>
-        <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_two"> <label for="some_field_name_checkboxes_two">Two</label></li>
-        <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_three"> <label for="some_field_name_checkboxes_three">Three</label></li>
-      </ul>
-    </dd>
+    <div>
+      <dt><label data-for="some_checkboxes">Checkboxes:</label></dt>
+      <dd class="checkboxes">
+        <ul id="some_checkboxes">
+          <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_one"> <label for="some_field_name_checkboxes_one">One</label></li>
+          <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_two"> <label for="some_field_name_checkboxes_two">Two</label></li>
+          <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_three"> <label for="some_field_name_checkboxes_three">Three</label></li>
+        </ul>
+      </dd>
+    </div>
   </dl>
 </form>
       </escape></code></pre>
 
       <form class="semanticForms">
         <dl>
-          <dt><label data-for="some_checkboxes">Checkboxes:</label></dt>
-          <dd class="checkboxes">
-            <ul id="some_checkboxes">
-              <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_one"> <label for="some_field_name_checkboxes_one">One</label></li>
-              <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_two"> <label for="some_field_name_checkboxes_two">Two</label></li>
-              <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_three"> <label for="some_field_name_checkboxes_three">Three</label></li>
-            </ul>
-          </dd>
+          <div>
+            <dt><label data-for="some_checkboxes">Checkboxes:</label></dt>
+            <dd class="checkboxes">
+              <ul id="some_checkboxes">
+                <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_one"> <label for="some_field_name_checkboxes_one">One</label></li>
+                <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_two"> <label for="some_field_name_checkboxes_two">Two</label></li>
+                <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_three"> <label for="some_field_name_checkboxes_three">Three</label></li>
+              </ul>
+            </dd>
+          </div>
         </dl>
       </form>
 
@@ -519,28 +697,32 @@ <h5 id="radiobuttons">Radio buttons</h5>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms">
   <dl>
-    <dt><label data-for="some_radios">Radios:</label></dt>
-    <dd class="radios">
-      <ul id="some_radios">
-        <li><input type="radio" name="some_field_name" id="some_field_name_radios_one"> <label for="some_field_name_radios_one">One</label></li>
-        <li><input type="radio" name="some_field_name" id="some_field_name_radios_two"> <label for="some_field_name_radios_two">Two</label></li>
-        <li><input type="radio" name="some_field_name" id="some_field_name_radios_three"> <label for="some_field_name_radios_three">Three</label></li>
-      </ul>
-    </dd>
+    <div>
+      <dt><label data-for="some_radios">Radios:</label></dt>
+      <dd class="radios">
+        <ul id="some_radios">
+          <li><input type="radio" name="some_field_name" id="some_field_name_radios_one"> <label for="some_field_name_radios_one">One</label></li>
+          <li><input type="radio" name="some_field_name" id="some_field_name_radios_two"> <label for="some_field_name_radios_two">Two</label></li>
+          <li><input type="radio" name="some_field_name" id="some_field_name_radios_three"> <label for="some_field_name_radios_three">Three</label></li>
+        </ul>
+      </dd>
+    </div>
   </dl>
 </form>
       </escape></code></pre>
 
       <form class="semanticForms">
         <dl>
-          <dt><label data-for="some_radios">Radios:</label></dt>
-          <dd class="radios">
-            <ul id="some_radios">
-              <li><input type="radio" name="some_field_name" id="some_field_name_radios_one"> <label for="some_field_name_radios_one">One</label></li>
-              <li><input type="radio" name="some_field_name" id="some_field_name_radios_two"> <label for="some_field_name_radios_two">Two</label></li>
-              <li><input type="radio" name="some_field_name" id="some_field_name_radios_three"> <label for="some_field_name_radios_three">Three</label></li>
-            </ul>
-          </dd>
+          <div>
+            <dt><label data-for="some_radios">Radios:</label></dt>
+            <dd class="radios">
+              <ul id="some_radios">
+                <li><input type="radio" name="some_field_name" id="some_field_name_radios_one"> <label for="some_field_name_radios_one">One</label></li>
+                <li><input type="radio" name="some_field_name" id="some_field_name_radios_two"> <label for="some_field_name_radios_two">Two</label></li>
+                <li><input type="radio" name="some_field_name" id="some_field_name_radios_three"> <label for="some_field_name_radios_three">Three</label></li>
+              </ul>
+            </dd>
+          </div>
         </dl>
       </form>
 
@@ -551,16 +733,20 @@ <h4 id="validationstyles">Validation styles</h4>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms">
   <dl>
-    <dt><label for="input" data-no-asterisk>Input label</label></dt>
-    <dd><input type="text" name="input" id="input" required>
+    <div>
+      <dt><label for="input" data-no-asterisk>Input label</label></dt>
+      <dd><input type="text" name="input" id="input" required>
+    </div>
   </dl>
 </form>
       </escape></code></pre>
 
       <form class="semanticForms">
         <dl>
-          <dt><label for="input" data-no-asterisk>Input label</label></dt>
-          <dd><input type="text" name="input" id="input" required>
+          <div>
+            <dt><label for="input" data-no-asterisk>Input label</label></dt>
+            <dd><input type="text" name="input" id="input" required>
+          </div>
         </dl>
       </form>
 
@@ -569,22 +755,26 @@ <h4 id="validationstyles">Validation styles</h4>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms" method="post">
   <dl>
-    <dt><label for="password_validation">Password label</label></dt>
-    <dd>
-      <input type="password" name="password" id="password_validation" minlength="8" autocomplete="off">
-      <p data-invalid-text>Password must be at least 8 characters long.</p>
-    </dd>
+    <div>
+      <dt><label for="password_validation">Password label</label></dt>
+      <dd>
+        <input type="password" name="password" id="password_validation" minlength="8" autocomplete="off">
+        <p data-invalid-text>Password must be at least 8 characters long.</p>
+      </dd>
+    </div>
   </dl>
 </form>
       </escape></code></pre>
 
       <form class="semanticForms" method="post">
         <dl>
-          <dt><label for="password_validation">Password label</label></dt>
-          <dd>
-            <input type="password" name="password" id="password_validation" minlength="8" autocomplete="off">
-            <p data-invalid-text>Password must be at least 8 characters long.</p>
-          </dd>
+          <div>
+            <dt><label for="password_validation">Password label</label></dt>
+            <dd>
+              <input type="password" name="password" id="password_validation" minlength="8" autocomplete="off">
+              <p data-invalid-text>Password must be at least 8 characters long.</p>
+            </dd>
+          </div>
         </dl>
       </form>
 
@@ -593,16 +783,20 @@ <h4 id="validationstyles">Validation styles</h4>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms">
   <dl>
-    <dt><label for="input_validation" data-asterisk-text="This is a custom tooltip.">Input label</label></dt>
-    <dd><input type="text" name="input" id="input_validation" required>
+    <div>
+      <dt><label for="input_validation" data-asterisk-text="This is a custom tooltip.">Input label</label></dt>
+      <dd><input type="text" name="input" id="input_validation" required>
+    </div>
   </dl>
 </form>
       </escape></code></pre>
 
       <form class="semanticForms">
         <dl>
-          <dt><label for="input_validation" data-asterisk-text="This is a custom tooltip.">Input label</label></dt>
-          <dd><input type="text" name="input" id="input_validation" required>
+          <div>
+            <dt><label for="input_validation" data-asterisk-text="This is a custom tooltip.">Input label</label></dt>
+            <dd><input type="text" name="input" id="input_validation" required>
+          </div>
         </dl>
       </form>
 
@@ -613,16 +807,20 @@ <h4 id="rangeInputsThatDisplayValues">Range inputs that display values</h4>
       <pre><code class='language-html' lang='html'><escape>
 <form class="semanticForms">
   <dl>
-    <dt><label for="rangeValue">Range value</label></dt>
-    <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
+    <div>
+      <dt><label for="rangeValue">Range value</label></dt>
+      <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
+    </div>
   </dl>
 </form>
       </escape></code></pre>
 
       <form class="semanticForms">
         <dl>
-          <dt><label for="rangeValue">Range value</label></dt>
-          <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
+          <div>
+            <dt><label for="rangeValue">Range value</label></dt>
+            <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
+          </div>
         </dl>
       </form>
 
diff --git a/lib/helpers.js b/lib/helpers.js
new file mode 100644
index 0000000..a8cef88
--- /dev/null
+++ b/lib/helpers.js
@@ -0,0 +1,30 @@
+/**
+ * Uses the navigator to best determine the clients operating system.
+ * @returns Operating system string (`mac`, `windows`, `linux`)
+ */
+const getOS = () => {
+  const userAgent = window.navigator.userAgent
+  const platform = window.navigator.platform
+  let os = null
+
+  if (platform.includes('Win')) {
+    os = 'windows'
+  } else if (platform.includes('Mac') || /iPhone|iPad|iPod/.test(userAgent)) {
+    os = 'mac'
+  } else if (platform.includes('Linux') || /Android/.test(userAgent)) {
+    os = 'linux'
+  }
+  return os
+}
+
+/**
+ * Places an element immediately after another element
+ * @param {Object} newNode element being placed after the reference node
+ * @param {*} referenceNode element to be used as reference for new node
+ */
+const insertAfter = (newNode, referenceNode) => {
+  if (referenceNode.nextSibling) referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
+  else referenceNode.parentNode.appendChild(newNode)
+}
+
+module.exports = { getOS, insertAfter }
diff --git a/lib/inputEnhancements.js b/lib/inputEnhancements.js
new file mode 100644
index 0000000..36cdfbe
--- /dev/null
+++ b/lib/inputEnhancements.js
@@ -0,0 +1,394 @@
+const { insertAfter } = require('./helpers.js')
+
+const icons = {
+  passwordShow: '<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m1 12s4-8 11-8 11 8 11 8"/><path d="m1 12s4 8 11 8 11-8 11-8"/><circle cx="12" cy="12" r="3"/></g></svg>',
+  passwordHide: '<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m2 2 20 20"/><path d="m6.71277 6.7226c-3.04798 2.07267-4.71277 5.2774-4.71277 5.2774s3.63636 7 10 7c2.0503 0 3.8174-.7266 5.2711-1.7116m-6.2711-12.23018c.3254-.03809.6588-.05822 1-.05822 6.3636 0 10 7 10 7s-.6918 1.3317-2 2.8335"/><path d="m14 14.2362c-.5308.475-1.2316.7639-2 .7639-1.6569 0-3-1.3431-3-3 0-.8237.33193-1.5698.86932-2.11192"/></g></svg>',
+  helpIcon: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;"><rect width="16" height="16" fill="none"/><path fill="currentColor" d="M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z"/></svg>'
+}
+
+const lookups = {
+  nodeName: ['TEXTAREA', 'SELECT'],
+  inputType: ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week']
+}
+
+let lastFocusedInput
+let lastClearFieldPressed
+
+const enhanceInput = (input, form) => {
+  // ignore input if it has previously been formatted
+  if (input.classList.contains('semanticform') || !input.id) return
+
+  const type = input.getAttribute('type')
+  if (!lookups.nodeName.includes(input.nodeName) && !lookups.inputType.includes(type)) return
+
+  // recursively find <dl> element
+  let dl = input.parentNode
+  while (dl && dl.nodeName !== 'DL') dl = dl.parentNode
+  if (!dl) return
+  if (!dl.classList.contains('floatLabelForm')) dl.classList.add('floatLabelForm')
+
+  const label = input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio')
+    ? document.querySelector('label[data-for=' + input.parentNode.parentNode.id.replace(/\./g, '\\.') + ']')
+    : document.querySelector('label[for=' + input.id.replace(/\./g, '\\.') + ']')
+
+  if (!label) {
+    console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`)
+  }
+
+  input.classList.add('semanticform')
+
+  // #region create labels
+
+  const newLabel = document.createElement('label')
+  newLabel.className = 'floatLabelFormAnimatedLabel'
+
+  if (type === 'checkbox' || type === 'radio') {
+    // recursively find <dd> element
+    let dd = input.parentNode
+    while (dd && dd.nodeName !== 'DD') dd = dd.parentNode
+
+    if (!dd) {
+      console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)
+      return
+    }
+
+    if (dd.firstChild.nodeName !== 'LABEL') {
+      if (type === 'checkbox' && input.parentNode.nodeName === 'DD') {
+        newLabel.setAttribute('for', input.id)
+        input.parentNode.classList.add('singleCheckbox')
+        newLabel.className = ''
+        label.setAttribute('hidden', 'hidden')
+        insertAfter(newLabel, input)
+      }
+
+      if (type === 'radio' && input.parentNode.nodeName === 'DD') {
+        newLabel.setAttribute('for', input.id)
+        input.parentNode.classList.add('singleRadio')
+        newLabel.className = ''
+        label.setAttribute('hidden', 'hidden')
+        insertAfter(newLabel, input)
+      }
+
+      newLabel.innerHTML = label.innerHTML
+
+      if (label.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {
+        const text = label.getAttribute('title')
+        label.innerHTML += ` <span title="${text}" class="help">${icons.helpIcon}</span>`
+        newLabel.innerHTML += ` <span title="${text}" class="help">${icons.helpIcon}</span>`
+      }
+
+      if (dd.querySelector(':required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {
+        const text = label.getAttribute('data-asterisk-text') || 'This field is required.'
+        label.innerHTML += ` <span title="${text}" class="required">*</span>`
+        newLabel.innerHTML += ` <span title="${text}" class="required">*</span>`
+      }
+
+      if (!dd.querySelector('label')) dd.append(newLabel)
+    }
+
+    // removes old div that a radio or checkbox may have been added to
+    if (dd.parentElement.nodeName === 'DIV') dd.parentElement.remove()
+
+    const div = document.createElement('div')
+    div.append(label.closest('dt'), dd)
+    dl.append(div)
+  } else {
+    newLabel.setAttribute('for', input.id)
+    newLabel.innerHTML = label.innerHTML
+
+    if (input.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {
+      const text = input.getAttribute('title')
+      newLabel.innerHTML += ` <span title="${text}" class="help">${icons.helpIcon}</span>`
+    }
+
+    if (input.hasAttribute('required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {
+      const text = label.getAttribute('data-asterisk-text') || 'This field is required.'
+      newLabel.innerHTML += ` <span title="${text}" class="required">*</span>`
+    }
+
+    label.setAttribute('hidden', 'hidden')
+
+    insertAfter(newLabel, input)
+  }
+  // #endregion
+
+  // #region standard inputs
+
+  const isWrapped = input.closest('dd').parentElement.nodeName === 'DIV'
+
+  // check for auto-grow attribute on textareas
+  if (input.getAttribute('data-auto-grow') !== null) {
+    // progressively enhance inputs into textareas
+    if (input.nodeName === 'INPUT' && input.type === 'text') {
+      const newInput = document.createElement('textarea')
+      newInput.id = input.id
+      newInput.class = input.class
+      newInput.innerText = input.value
+      newInput.setAttribute('data-auto-grow', '')
+      input.replaceWith(newInput)
+      input = newInput
+    }
+
+    if (input.nodeName === 'TEXTAREA') {
+      // when pressing enter while this input is focused, we want to submit
+      input.addEventListener('keypress', (e) => {
+        if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return
+        e.preventDefault()
+        form.requestSubmit()
+      })
+    }
+  }
+
+  if (type !== 'checkbox' && type !== 'radio') {
+    if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ')
+
+    const div = isWrapped ? input.closest('dd').parentElement : document.createElement('div')
+    const dt = label.closest('dt')
+    const dd = input.closest('dd')
+
+    if (!dt || !dd) {
+      console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding ${!dt ? '<dt>' : '<dd>'} element.`)
+      return
+    }
+
+    // input clear button
+    if (input.nodeName !== 'SELECT' && type !== 'range') {
+      const clearBtn = document.createElement('button')
+      clearBtn.type = 'button'
+      clearBtn.title = input.getAttribute('data-clear-field-text') || 'Clear field'
+      clearBtn.ariaLabel = input.getAttribute('data-clear-field-text') || 'Clear field'
+      clearBtn.tabIndex = -1
+      clearBtn.innerHTML = '<svg viewBox="0 0 16 16" width="18" height="18"><path d="M 1 1 L 15 15 M 1 15 L 15 1" fill="none" stroke-width="2" stroke="currentColor" />'
+      clearBtn.classList.add('clear')
+      clearBtn.id = `semanticFormsClearButton_${input.id}`
+      clearBtn.addEventListener('click', () => {
+        input.previousValue = input.value
+        input.value = ''
+        input.focus()
+        lastClearFieldPressed = input.id
+
+        // used for any other updates required by various inputs
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+      })
+      insertAfter(clearBtn, dd.querySelector('label'))
+    }
+
+    input.addEventListener('focus', event => {
+      if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target
+    })
+
+    // check for colspan- utility class on dd, and move to div
+    if (/colspan-/.test(dd.className)) {
+      const match = dd.className.match(/colspan-([0-9]|full)/)[0]
+      dd.classList.remove(match)
+      div.classList.add(match)
+    }
+
+    // check for max-content attribute
+    // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing
+    if (input.getAttribute('data-max-content') !== null) {
+      if (!('fieldSizing' in document.createElement('input').style)) {
+        const adjustWidth = () => {
+          const value = input.value !== '' ? input.value : input.placeholder
+          const width = value.length * 8 + 40
+          input.style.width = width + 'px'
+          input.style.maxWidth = '100%'
+          div.style.width = width + 'px'
+        }
+        adjustWidth()
+        input.addEventListener('input', adjustWidth)
+      }
+    }
+
+    // if the user did not wrap the input in a div, do it for them
+    if (!isWrapped) {
+      div.append(dt, dd)
+      dl.append(div)
+
+      // determine visibility of newly created <div>
+      if (dt.style.display === 'none' && dd.style.display === 'none') div.style.display = 'none'
+    }
+  }
+  // #endregion
+
+  // handle file input clear btn, cannot be handled with CSS
+  if (type === 'file') {
+    const clearBtn = input.parentElement.querySelector('.clear')
+    input.addEventListener('input', event => {
+      clearBtn.style.display = event.target.files.length ? 'flex' : 'none'
+    })
+    clearBtn.addEventListener('click', () => {
+      clearBtn.style.display = 'none'
+    })
+  }
+
+  // handle range inputs with a class to display the value
+  // TODO: should this be a data attribute instead?
+  if (type === 'range' && input.classList.contains('displayValue')) {
+    const label = input.parentNode.parentNode.querySelector('dd label')
+    label.innerHTML += `<span class="seperator">: </span><output>${input.value}</output>`
+    input.addEventListener('input', event => {
+      const output = event.target.parentNode.parentNode.querySelector('output')
+      output.innerHTML = event.target.value
+    })
+  }
+
+  // show password button
+  if (type === 'password' && input.getAttribute('data-no-reveal') === null) {
+    const showBtn = document.createElement('button')
+    showBtn.type = 'button'
+    showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'
+    showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'
+    showBtn.tabIndex = -1
+    showBtn.innerHTML = icons.passwordShow
+    showBtn.classList.add('show')
+    showBtn.id = `semanticFormsShowButton_${input.id}`
+    const dd = input.closest('dd')
+    if (!dd) {
+      console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)
+      return
+    }
+    showBtn.addEventListener('click', () => {
+      if (input.type === 'password') {
+        showBtn.innerHTML = icons.passwordHide
+        showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password'
+        showBtn.ariaLabel = input.getAttribute('data-hide-password-text') || 'Hide password'
+        input.type = 'text'
+      } else {
+        showBtn.innerHTML = icons.passwordShow
+        showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'
+        showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'
+        input.type = 'password'
+      }
+      input.focus()
+    })
+    insertAfter(showBtn, dd.querySelector('label'))
+  }
+
+  // add listener to shift clear button when scrollbar present
+  if (input.nodeName === 'TEXTAREA') {
+    if (input.getAttribute('data-disable-autosize') === null) {
+      // add auto-sizing
+      input.style.setProperty('resize', 'none')
+      input.style.setProperty('min-height', '0')
+      input.style.setProperty('max-height', 'none')
+      input.style.setProperty('height', 'auto')
+
+      const handleInput = () => {
+        // reset rows attribute to get accurate scrollHeight
+        let maxRows = input.getAttribute('data-max-rows')
+
+        if (maxRows) {
+          if (isNaN(maxRows) || Number(maxRows) <= 0) {
+            console.warn(`An invalid value was passed to the "data-max-rows" attribute. This value will be ignored.\n\nProvided value: ${input.getAttribute('data-max-rows')}`)
+            maxRows = null
+          }
+        }
+
+        const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5'
+        input.setAttribute('rows', minRows)
+
+        // get the computed values object reference
+        const style = window.getComputedStyle(input)
+
+        // force content-box for size accurate line-height calculation, remove scrollbars, lock width (subtract inline padding and inline border widths), and remove inline padding and borders to keep width consistent (for text wrapping accuracy)
+        const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right'])
+        const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width'])
+        input.style.setProperty('overflow', 'hidden', 'important')
+        input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px')
+        input.style.setProperty('box-sizing', 'content-box')
+        input.style.setProperty('padding-inline', '0')
+        input.style.setProperty('border-width', '0')
+
+        // get the base line height, and top / bottom padding
+        const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom'])
+        const lineHeight = style['line-height'] === 'normal'
+          ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box)
+          : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value
+
+        // get the scroll height (rounding to be safe to ensure cross browser consistency)
+        const scrollHeight = Math.round(input.scrollHeight)
+
+        // undo overflow, width, border-width, box-sizing & inline padding overrides
+        input.style.removeProperty('width')
+        input.style.removeProperty('box-sizing')
+        input.style.removeProperty('padding-inline')
+        input.style.removeProperty('border-width')
+        input.style.removeProperty('overflow')
+
+        // subtract blockPadding from scrollHeight and divide that by our lineHeight to get the row count, round to nearest integer as it will always be within ~.1 of the correct whole number
+        const rows = Math.round((scrollHeight - blockPadding) / lineHeight)
+
+        // set the calculated rows attribute (limited by rowLimit)
+        if (maxRows) {
+          input.setAttribute('rows', '' + Math.min(rows, Number(maxRows)))
+        } else {
+          input.setAttribute('rows', '' + rows)
+        }
+      }
+
+      input.addEventListener('input', handleInput)
+
+      // trigger the event to set the initial rows value
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+
+    // progressively enhance textarea for Firefox and Safari
+    // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing
+    if (input.getAttribute('data-auto-grow') !== null) {
+      if (!('fieldSizing' in document.createElement('input').style)) {
+        const adjustHeight = () => {
+          if (input.value.length) {
+            const borderWidth = parseInt(window.getComputedStyle(input).getPropertyValue('border-width'))
+            input.style.height = (input.scrollHeight + (borderWidth * 2)) + 'px'
+          } else {
+            input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')
+          }
+        }
+
+        // set initial height to semantic-forms CSS variable
+        input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')
+        input.addEventListener('input', adjustHeight)
+      }
+    }
+
+    // shifts the clear button to the right if a scrollbar is present
+    const shiftClearBtn = () => {
+      const clearBtn = input.parentElement?.querySelector('button.clear')
+      if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : ''
+    }
+    input.addEventListener('input', shiftClearBtn)
+    input.addEventListener('mouseup', shiftClearBtn)
+    shiftClearBtn()
+  }
+}
+
+const handleUndoRedo = (event) => {
+  // handle undo/redo
+  if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) {
+    // undo clearing a field
+    if (lastFocusedInput) {
+      if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {
+        if (lastFocusedInput.previousValue) {
+          console.log('update redo value', lastFocusedInput.value)
+          lastFocusedInput.redoValue = lastFocusedInput.value
+          lastFocusedInput.value = lastFocusedInput.previousValue
+        }
+      }
+    }
+  } else {
+    if ((event.ctrlKey && event.key === 'y') || (event.metaKey && event.shiftKey && event.key === 'z')) {
+      // redo clearing a field
+      if (lastFocusedInput) {
+        if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {
+          if (lastFocusedInput.redoValue) {
+            lastFocusedInput.previousValue = lastFocusedInput.value
+            lastFocusedInput.value = lastFocusedInput.redoValue
+          }
+        }
+      }
+    }
+  }
+}
+
+module.exports = { enhanceInput, handleUndoRedo }
diff --git a/lib/keyboardShortcuts.js b/lib/keyboardShortcuts.js
new file mode 100644
index 0000000..f2fe259
--- /dev/null
+++ b/lib/keyboardShortcuts.js
@@ -0,0 +1,166 @@
+const { getOS, insertAfter } = require('./helpers.js')
+
+const specialCharMap = {
+  Minus: '-',
+  Equal: '=',
+  BracketLeft: '[',
+  BracketRight: ']',
+  Backslash: '\\',
+  Semicolon: ';',
+  Quote: '\'',
+  Comma: ',',
+  Period: '.',
+  Slash: '/',
+  Backquote: '`'
+}
+const shiftSpecialCharMap = {
+  1: '!',
+  2: '@',
+  3: '#',
+  4: '$',
+  5: '%',
+  6: '^',
+  7: '&',
+  8: '*',
+  9: '(',
+  0: ')',
+  Minus: '_',
+  Equal: '+',
+  BracketLeft: '{',
+  BracketRight: '}',
+  Backslash: '|',
+  Semicolon: ':',
+  Quote: '"',
+  Comma: '<',
+  Period: '>',
+  Slash: '?',
+  Backquote: '~'
+}
+
+// handles keyboard shortcut events
+const shortcutListener = (e, shortcuts) => {
+  // search for matching shortcut from cached shortcut configs
+  const shortcut = shortcuts.find(shortcut => {
+    let matchesKey = false
+    if (e.altKey && !e.shiftKey) {
+      // mac adjusts the key value if altKey is pressed
+      matchesKey = 'Key' + shortcut.key.toUpperCase() === e.code ||
+        'Digit' + shortcut.key.toUpperCase() === e.code ||
+        shortcut.key === e.key ||
+        specialCharMap[e.code] === shortcut.key
+    } else if (e.shiftKey) {
+      // check shift special character map
+      const code = e.code.replace(/Key|Digit/, '')
+      matchesKey = (shiftSpecialCharMap[code] || shiftSpecialCharMap[e.key]) &&
+        (shiftSpecialCharMap[code] === shortcut.key || shiftSpecialCharMap[e.key] === shortcut.key)
+    } else {
+      matchesKey = shortcut.key.toUpperCase() === e.key.toUpperCase()
+    }
+    if (!matchesKey) return false
+
+    let matchesModifier
+    if (shortcut.modifier) {
+      if (shortcut.modifier === shortcut.defaultModifier) matchesModifier = shortcut.os === 'windows' || shortcut.os === 'linux' ? e.ctrlKey : e.metaKey
+      if (shortcut.modifier === 'meta') matchesModifier = e.metaKey
+      if (shortcut.modifier === 'alt') matchesModifier = e.altKey
+      if (shortcut.modifier === 'ctrl') matchesModifier = e.ctrlKey
+    }
+    return matchesModifier
+  })
+
+  if (shortcut) {
+    e.preventDefault()
+    shortcut.input.focus()
+  }
+}
+
+const createKeyboardShortcut = (input, shortcuts) => {
+  const os = getOS()
+  // this is the custom keyword for meta on linux/mac, ctrl on windows
+  const defaultModifier = 'metactrl'
+
+  // get focus key value
+  let focusKey = input.getAttribute('data-focus-key')
+  if (focusKey.length > 1) {
+    console.error(`Provided focus key "${focusKey}" is more than one character. Using first character only.`)
+    focusKey = focusKey.toString()[0]
+  }
+
+  // get focus modifier value
+  let modifierSymbol
+  let modifierKey = defaultModifier
+  const modifierAttr = {
+    default: input.getAttribute('data-focus-modifier') || defaultModifier,
+    linux: input.getAttribute('data-focus-modifier-linux'),
+    mac: input.getAttribute('data-focus-modifier-mac'),
+    windows: input.getAttribute('data-focus-modifier-win')
+  }
+  if (os && modifierAttr[os]) {
+    // a specific modifier key has been set by the user
+    modifierKey = modifierAttr[os]
+  } else {
+    modifierKey = modifierAttr.default
+  }
+
+  // validate passed in modifier
+  const recognizedModifiers = ['ctrl', 'alt', 'opt', 'meta', 'cmd', defaultModifier]
+  if (!recognizedModifiers.includes(modifierKey)) {
+    console.error(`Received an unrecognized modifier, "${modifierKey}," defaulting to "${defaultModifier}."`, input)
+    modifierKey = defaultModifier
+  }
+
+  // retrieve modifier symbol
+  if (['alt', 'opt'].includes(modifierKey)) {
+    modifierSymbol = os === 'mac' ? '⌥' : '⎇'
+  } else if (['meta', 'win', 'cmd'].includes(modifierKey) || (modifierKey === defaultModifier && os === 'mac')) {
+    if (os === 'mac') {
+      modifierSymbol = '⌘'
+    } else if (os === 'linux') {
+      modifierSymbol = '◆'
+    } else {
+      modifierSymbol = '⊞'
+    }
+  } else if (modifierKey === 'ctrl' || (modifierKey === defaultModifier && (os === 'windows' || os === 'linux'))) {
+    if (os === 'mac') {
+      modifierSymbol = '⌃'
+    } else {
+      modifierSymbol = 'Ctrl'
+    }
+  }
+
+  // add the shortcut to the cached array, if not a duplicate
+  if (shortcuts.some(shortcut => shortcut.key === focusKey && shortcut.modifier === modifierKey)) {
+    console.error(`Duplicate keyboard shortcut "${modifierKey} + ${focusKey}" detected. Only the first input will be focusable using this keyboard shortcut.`, input)
+  }
+
+  // set the shortcut indicator/title
+  if (input.nodeName === 'TEXTAREA' || input.type === 'text' || input.type === 'number') {
+    // create focus indicator for valid inputs
+    const indicator = document.createElement('span')
+    indicator.classList.add('focus-key')
+    indicator.innerHTML = `<kbd>${modifierSymbol} ${focusKey.toUpperCase()}</kbd>`
+
+    const label = input.nextSibling
+    insertAfter(indicator, label)
+  } else {
+    // update the input title
+    if (input.getAttribute('title')) {
+      input.setAttribute('title', input.getAttribute('title') + ` (${modifierSymbol} + ${focusKey})`)
+    } else {
+      input.setAttribute('title', `Focus with ${modifierSymbol} + ${focusKey}`)
+    }
+  }
+
+  return {
+    key: focusKey,
+    modifier: modifierKey,
+    input,
+    os,
+    defaultModifier
+  }
+}
+
+module.exports = {
+  shortcutListener,
+  createKeyboardShortcut
+}
diff --git a/package-lock.json b/package-lock.json
index 75abf1b..51d088b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "semantic-forms",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "semantic-forms",
-      "version": "5.2.2",
+      "version": "5.3.0",
       "license": "CC-BY-4.0",
       "devDependencies": {
         "@jsdevtools/coverage-istanbul-loader": "3.0.5",
@@ -56,6 +56,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -657,7 +658,6 @@
       "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25"
@@ -1072,7 +1072,6 @@
       "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -1084,7 +1083,6 @@
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -1117,7 +1115,6 @@
       "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -1135,7 +1132,6 @@
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.13.2",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -1146,24 +1142,21 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
       "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
       "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
       "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.13.2",
@@ -1171,7 +1164,6 @@
       "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.13.2",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -1183,8 +1175,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
       "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.14.1",
@@ -1192,7 +1183,6 @@
       "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1206,7 +1196,6 @@
       "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -1217,7 +1206,6 @@
       "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -1227,8 +1215,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
       "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.14.1",
@@ -1236,7 +1223,6 @@
       "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1254,7 +1240,6 @@
       "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -1269,7 +1254,6 @@
       "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1283,7 +1267,6 @@
       "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -1299,7 +1282,6 @@
       "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@xtuc/long": "4.2.2"
@@ -1357,16 +1339,14 @@
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true,
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/accepts": {
       "version": "2.0.0",
@@ -1388,6 +1368,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1401,7 +1382,6 @@
       "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       },
@@ -1439,6 +1419,7 @@
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -1456,7 +1437,6 @@
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ajv": "^8.0.0"
       },
@@ -1475,7 +1455,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -1492,8 +1471,7 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
@@ -1890,6 +1868,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -1909,8 +1888,7 @@
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/builtins": {
       "version": "5.1.0",
@@ -2113,7 +2091,6 @@
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -2187,8 +2164,7 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/commondir": {
       "version": "1.0.1",
@@ -2552,9 +2528,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.248",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.248.tgz",
-      "integrity": "sha512-zsur2yunphlyAO4gIubdJEXCK6KOVvtpiuDfCIqbM9FjcnMYiyn0ICa3hWfPr0nc41zcLWobgy1iL7VvoOyA2Q==",
+      "version": "1.5.249",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.249.tgz",
+      "integrity": "sha512-5vcfL3BBe++qZ5kuFhD/p8WOM1N9m3nwvJPULJx+4xf2usSlZFJ0qoNYO2fOX4hi3ocuDcmDobtA+5SFr4OmBg==",
       "dev": true,
       "license": "ISC"
     },
@@ -2591,7 +2567,6 @@
       "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -2758,8 +2733,7 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
       "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
@@ -2864,6 +2838,7 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3033,6 +3008,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -3077,6 +3053,7 @@
       "integrity": "sha512-jDex9s7D/Qial8AGVIHq4W7NswpUD5DPDL2RH8Lzd9EloWUuvUkHfv4FRLMipH5q2UtyurorBkPeNi1wVWNh3Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "builtins": "^5.0.1",
         "eslint-plugin-es": "^4.1.0",
@@ -3116,6 +3093,7 @@
       "integrity": "sha512-57Zzfw8G6+Gq7axm2Pdo3gW/Rx3h9Yywgn61uE/3elTCOePEHVrn2i5CdfBwA1BLK0Q0WqctICIUSqXZW/VprQ==",
       "dev": true,
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -3132,6 +3110,7 @@
       "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.8",
         "array.prototype.findlast": "^1.2.5",
@@ -3337,7 +3316,6 @@
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -3421,8 +3399,7 @@
           "url": "https://opencollective.com/fastify"
         }
       ],
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/fastest-levenshtein": {
       "version": "1.0.16",
@@ -3875,8 +3852,7 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true,
-      "license": "BSD-2-Clause",
-      "peer": true
+      "license": "BSD-2-Clause"
     },
     "node_modules/globals": {
       "version": "14.0.0",
@@ -4974,7 +4950,6 @@
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -4990,7 +4965,6 @@
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -5053,8 +5027,7 @@
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -5176,7 +5149,6 @@
       "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.11.5"
       },
@@ -5317,8 +5289,7 @@
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/micromatch": {
       "version": "4.0.8",
@@ -5423,8 +5394,7 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
@@ -6374,7 +6344,6 @@
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -6541,7 +6510,6 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6882,7 +6850,6 @@
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "dev": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -7137,7 +7104,6 @@
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -7304,6 +7270,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -7719,7 +7686,6 @@
       "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       },
@@ -7734,7 +7700,6 @@
       "integrity": "sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.15.0",
@@ -7754,7 +7719,6 @@
       "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.25",
         "jest-worker": "^27.4.5",
@@ -7808,7 +7772,6 @@
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -7821,8 +7784,7 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
       "version": "4.3.3",
@@ -7830,7 +7792,6 @@
       "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -8093,8 +8054,7 @@
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/union": {
       "version": "0.5.0",
@@ -8202,7 +8162,6 @@
       "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -8267,6 +8226,7 @@
       "integrity": "sha512-MfwFQ6SfwinsUVi0rNJm7rHZ31GyTcpVE5pgVA3hwFRb7COD4TzjUUwhGWKfO50+xdc2MQPuEBBJoqIMGt3JDw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.6.1",
         "@webpack-cli/configtest": "^3.0.1",
@@ -8335,7 +8295,6 @@
       "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -8364,7 +8323,6 @@
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -8378,7 +8336,6 @@
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -8393,7 +8350,6 @@
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -8403,8 +8359,7 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/webpack/node_modules/mime-db": {
       "version": "1.52.0",
@@ -8412,7 +8367,6 @@
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8423,7 +8377,6 @@
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -8437,7 +8390,6 @@
       "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
diff --git a/package.json b/package.json
index 3b1d542..8ce1ea1 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/semantic-forms/graphs/contributors"
     }
   ],
-  "version": "5.2.2",
+  "version": "5.3.0",
   "files": [
     "dist",
     "semanticForms.scss",
diff --git a/playwright.config.js b/playwright.config.js
index b566804..255c32c 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -14,5 +14,13 @@ module.exports = {
       use: { browserName: 'firefox' }
     }
   ],
-  workers: 1
+  reporter: 'line',
+  workers: 1,
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://127.0.0.1:8080',
+    reuseExistingServer: !process.env.CI,
+    // stdout: 'pipe',
+    stderr: 'pipe'
+  }
 }
diff --git a/semanticForms.js b/semanticForms.js
index d755dd3..a00b027 100644
--- a/semanticForms.js
+++ b/semanticForms.js
@@ -1,3 +1,6 @@
+const { createKeyboardShortcut, shortcutListener } = require('./lib/keyboardShortcuts.js')
+const { enhanceInput, handleUndoRedo } = require('./lib/inputEnhancements.js')
+
 const semanticForms = () => {
   // do some feature detection so none of the JS executes if the browser is too old
   if (typeof document.getElementsByClassName !== 'function' || typeof document.querySelector !== 'function' || !document.body.classList || !window.MutationObserver) {
@@ -5,87 +8,9 @@ const semanticForms = () => {
     return
   }
 
-  const passwordShow = '<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m1 12s4-8 11-8 11 8 11 8"/><path d="m1 12s4 8 11 8 11-8 11-8"/><circle cx="12" cy="12" r="3"/></g></svg>'
-  const passwordHide = '<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m2 2 20 20"/><path d="m6.71277 6.7226c-3.04798 2.07267-4.71277 5.2774-4.71277 5.2774s3.63636 7 10 7c2.0503 0 3.8174-.7266 5.2711-1.7116m-6.2711-12.23018c.3254-.03809.6588-.05822 1-.05822 6.3636 0 10 7 10 7s-.6918 1.3317-2 2.8335"/><path d="m14 14.2362c-.5308.475-1.2316.7639-2 .7639-1.6569 0-3-1.3431-3-3 0-.8237.33193-1.5698.86932-2.11192"/></g></svg>'
-  const helpTextIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;"><rect width="16" height="16" fill="none"/><path fill="currentColor" d="M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z"/></svg>'
-
-  const nodeNameLookup = ['TEXTAREA', 'SELECT']
-  const inputTypeLookup = ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week']
-  const keyboardShortcuts = []
-
   // custom keyboard shortcut listener
-  document.addEventListener('keydown', (e) => {
-    const specialCharMap = {
-      Minus: '-',
-      Equal: '=',
-      BracketLeft: '[',
-      BracketRight: ']',
-      Backslash: '\\',
-      Semicolon: ';',
-      Quote: '\'',
-      Comma: ',',
-      Period: '.',
-      Slash: '/',
-      Backquote: '`'
-    }
-
-    const shiftSpecialCharMap = {
-      1: '!',
-      2: '@',
-      3: '#',
-      4: '$',
-      5: '%',
-      6: '^',
-      7: '&',
-      8: '*',
-      9: '(',
-      0: ')',
-      Minus: '_',
-      Equal: '+',
-      BracketLeft: '{',
-      BracketRight: '}',
-      Backslash: '|',
-      Semicolon: ':',
-      Quote: '"',
-      Comma: '<',
-      Period: '>',
-      Slash: '?',
-      Backquote: '~'
-    }
-
-    const shortcut = keyboardShortcuts.find(shortcut => {
-      let matchesKey = false
-      if (e.altKey && !e.shiftKey) {
-        // mac adjusts the key value if altKey is pressed
-        matchesKey = 'Key' + shortcut.key.toUpperCase() === e.code ||
-          'Digit' + shortcut.key.toUpperCase() === e.code ||
-          shortcut.key === e.key ||
-          specialCharMap[e.code] === shortcut.key
-      } else if (e.shiftKey) {
-        // check shift special character map
-        const code = e.code.replace(/Key|Digit/, '')
-        matchesKey = (shiftSpecialCharMap[code] || shiftSpecialCharMap[e.key]) &&
-          (shiftSpecialCharMap[code] === shortcut.key || shiftSpecialCharMap[e.key] === shortcut.key)
-      } else {
-        matchesKey = shortcut.key.toUpperCase() === e.key.toUpperCase()
-      }
-      if (!matchesKey) return false
-
-      let matchesModifier
-      if (shortcut.modifier) {
-        if (shortcut.modifier === shortcut.defaultModifier) matchesModifier = shortcut.os === 'windows' || shortcut.os === 'linux' ? e.ctrlKey : e.metaKey
-        if (shortcut.modifier === 'meta') matchesModifier = e.metaKey
-        if (shortcut.modifier === 'alt') matchesModifier = e.altKey
-        if (shortcut.modifier === 'ctrl') matchesModifier = e.ctrlKey
-      }
-      return matchesModifier
-    })
-
-    if (shortcut) {
-      e.preventDefault()
-      shortcut.input.focus()
-    }
-  })
+  const keyboardShortcuts = []
+  document.addEventListener('keydown', (e) => shortcutListener(e, keyboardShortcuts))
 
   // progressively enhance form elements that have the semanticForms class
   const forms = document.querySelectorAll('form.semanticForms:not(.semanticFormsActive), table.semanticForms:not(.semanticFormsActive)')
@@ -96,499 +21,20 @@ const semanticForms = () => {
 
     // update each input in the semantic form
     const inputs = Array.from(form.querySelectorAll('input, textarea, select'))
-    for (let input of inputs) {
-      // ignore input if it has previously been formatted
-      if (input.classList.contains('semanticform') || !input.id) continue
-
-      const type = input.getAttribute('type')
-      if (nodeNameLookup.includes(input.nodeName) || inputTypeLookup.includes(type)) {
-        // recursively find <dl> element
-        let dl = input.parentNode
-        while (dl && dl.nodeName !== 'DL') dl = dl.parentNode
-
-        if (!dl) continue
-        if (!dl.classList.contains('floatLabelForm')) dl.classList.add('floatLabelForm')
-
-        const label = input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio')
-          ? document.querySelector('label[data-for=' + input.parentNode.parentNode.id.replace(/\./g, '\\.') + ']')
-          : document.querySelector('label[for=' + input.id.replace(/\./g, '\\.') + ']')
-
-        if (!label) {
-          console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`)
-        }
-
-        input.classList.add('semanticform')
-
-        // #region create labels
-
-        const newLabel = document.createElement('label')
-        newLabel.className = 'floatLabelFormAnimatedLabel'
-
-        if (type === 'checkbox' || type === 'radio') {
-          // recursively find <dd> element
-          let dd = input.parentNode
-          while (dd && dd.nodeName !== 'DD') dd = dd.parentNode
-
-          if (!dd) {
-            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)
-            continue
-          }
-
-          if (dd.firstChild.nodeName !== 'LABEL') {
-            if (type === 'checkbox' && input.parentNode.nodeName === 'DD') {
-              newLabel.setAttribute('for', input.id)
-              input.parentNode.classList.add('singleCheckbox')
-              newLabel.className = ''
-              label.setAttribute('hidden', 'hidden')
-              insertAfter(newLabel, input)
-            }
-
-            if (type === 'radio' && input.parentNode.nodeName === 'DD') {
-              newLabel.setAttribute('for', input.id)
-              input.parentNode.classList.add('singleRadio')
-              newLabel.className = ''
-              label.setAttribute('hidden', 'hidden')
-              insertAfter(newLabel, input)
-            }
+    for (const input of inputs) {
+      enhanceInput(input, form)
 
-            newLabel.innerHTML = label.innerHTML
-
-            if (label.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {
-              const text = label.getAttribute('title')
-              label.innerHTML += ` <span title="${text}" class="help">${helpTextIcon}</span>`
-              newLabel.innerHTML += ` <span title="${text}" class="help">${helpTextIcon}</span>`
-            }
-
-            if (dd.querySelector(':required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {
-              const text = label.getAttribute('data-asterisk-text') || 'This field is required.'
-              label.innerHTML += ` <span title="${text}" class="required">*</span>`
-              newLabel.innerHTML += ` <span title="${text}" class="required">*</span>`
-            }
-
-            if (!dd.querySelector('label')) dd.append(newLabel)
-          }
-
-          // removes old div that a radio or checkbox may have been added to
-          if (dd.parentElement.nodeName === 'DIV') dd.parentElement.remove()
-
-          const div = document.createElement('div')
-          div.append(label.closest('dt'), dd)
-          dl.append(div)
-        } else {
-          newLabel.setAttribute('for', input.id)
-          newLabel.innerHTML = label.innerHTML
-
-          if (input.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {
-            const text = input.getAttribute('title')
-            newLabel.innerHTML += ` <span title="${text}" class="help">${helpTextIcon}</span>`
-          }
-
-          if (input.hasAttribute('required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {
-            const text = label.getAttribute('data-asterisk-text') || 'This field is required.'
-            newLabel.innerHTML += ` <span title="${text}" class="required">*</span>`
-          }
-
-          label.setAttribute('hidden', 'hidden')
-
-          insertAfter(newLabel, input)
-        }
-        // #endregion
-
-        // #region keyboard shortcuts
-        if (input.getAttribute('data-focus-key') !== null) {
-          function handleKeyboardShortcut () {
-            const os = getOS()
-            // this is the custom keyword for meta on linux/mac, ctrl on windows
-            const defaultModifier = 'metactrl'
-
-            // get focus key value
-            let focusKey = input.getAttribute('data-focus-key')
-            if (focusKey.length > 1) {
-              console.error(`Provided focus key "${focusKey}" is more than one character. Using first character only.`)
-              focusKey = focusKey.toString()[0]
-            }
-
-            // get focus modifier value
-            let modifierSymbol
-            let modifierKey = defaultModifier
-            const modifierAttr = {
-              default: input.getAttribute('data-focus-modifier') || defaultModifier,
-              linux: input.getAttribute('data-focus-modifier-linux'),
-              mac: input.getAttribute('data-focus-modifier-mac'),
-              windows: input.getAttribute('data-focus-modifier-win')
-            }
-            if (os && modifierAttr[os]) {
-              // a specific modifier key has been set by the user
-              modifierKey = modifierAttr[os]
-            } else {
-              modifierKey = modifierAttr.default
-            }
-
-            // validate passed in modifier
-            const recognizedModifiers = ['ctrl', 'alt', 'opt', 'meta', 'cmd', defaultModifier]
-            if (!recognizedModifiers.includes(modifierKey)) {
-              console.error(`Received an unrecognized modifier, "${modifierKey}," defaulting to "${defaultModifier}."`, input)
-              modifierKey = defaultModifier
-            }
-
-            // retrieve modifier symbol
-            if (['alt', 'opt'].includes(modifierKey)) {
-              modifierSymbol = os === 'mac' ? '⌥' : '⎇'
-            } else if (['meta', 'win', 'cmd'].includes(modifierKey) || (modifierKey === defaultModifier && os === 'mac')) {
-              if (os === 'mac') {
-                modifierSymbol = '⌘'
-              } else if (os === 'linux') {
-                modifierSymbol = '◆'
-              } else {
-                modifierSymbol = '⊞'
-              }
-            } else if (modifierKey === 'ctrl' || (modifierKey === defaultModifier && (os === 'windows' || os === 'linux'))) {
-              if (os === 'mac') {
-                modifierSymbol = '⌃'
-              } else {
-                modifierSymbol = 'Ctrl'
-              }
-            }
-
-            // add the shortcut to the cached array, if not a duplicate
-            if (keyboardShortcuts.some(shortcut => shortcut.key === focusKey && shortcut.modifier === modifierKey)) {
-              console.error(`Duplicate keyboard shortcut "${modifierKey} + ${focusKey}" detected. Only the first input will be focusable using this keyboard shortcut.`, input)
-            } else {
-              keyboardShortcuts.push({
-                key: focusKey,
-                modifier: modifierKey,
-                input,
-                os,
-                defaultModifier
-              })
-            }
-
-            // set the shortcut indicator/title
-            if (input.nodeName === 'TEXTAREA' || input.type === 'text' || input.type === 'number') {
-              // create focus indicator for valid inputs
-              const indicator = document.createElement('span')
-              indicator.classList.add('focus-key')
-              indicator.innerHTML = `<kbd>${modifierSymbol} ${focusKey.toUpperCase()}</kbd>`
-              insertAfter(indicator, newLabel)
-            } else {
-              // update the input title
-              if (input.getAttribute('title')) {
-                input.setAttribute('title', input.getAttribute('title') + ` (${modifierSymbol} + ${focusKey})`)
-              } else {
-                input.setAttribute('title', `Focus with ${modifierSymbol} + ${focusKey}`)
-              }
-            }
-          }
-
-          // placed in a function so that it may exit while still completing other semantic-form enhancements
-          handleKeyboardShortcut()
-        }
-        // #endregion
-
-        // #region standard inputs
-        // check for auto-grow attribute on textareas
-        if (input.getAttribute('data-auto-grow') !== null) {
-          // progressively enhance inputs into textareas
-          if (input.nodeName === 'INPUT' && input.type === 'text') {
-            const newInput = document.createElement('textarea')
-            newInput.id = input.id
-            newInput.class = input.class
-            newInput.innerText = input.value
-            newInput.setAttribute('data-auto-grow', '')
-            input.replaceWith(newInput)
-            input = newInput
-          }
-
-          if (input.nodeName === 'TEXTAREA') {
-            // when pressing enter while this input is focused, we want to submit
-            input.addEventListener('keypress', (e) => {
-              if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return
-              e.preventDefault()
-              form.requestSubmit()
-            })
-          }
-        }
-
-        if (type !== 'checkbox' && type !== 'radio') {
-          if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ')
-
-          const div = document.createElement('div')
-          const dt = label.closest('dt')
-          const dd = input.closest('dd')
-
-          if (!dt) {
-            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding <dt> element.`)
-            continue
-          }
-          if (!dd) {
-            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding <dd> element.`)
-            continue
-          }
-
-          // #region input clear button
-          if (input.nodeName !== 'SELECT' && type !== 'range') {
-            const clearBtn = document.createElement('button')
-            clearBtn.type = 'button'
-            clearBtn.title = input.getAttribute('data-clear-field-text') || 'Clear field'
-            clearBtn.ariaLabel = input.getAttribute('data-clear-field-text') || 'Clear field'
-            clearBtn.tabIndex = -1
-            clearBtn.innerHTML = '<svg viewBox="0 0 16 16" width="18" height="18"><path d="M 1 1 L 15 15 M 1 15 L 15 1" fill="none" stroke-width="2" stroke="currentColor" />'
-            clearBtn.classList.add('clear')
-            clearBtn.id = `semanticFormsClearButton_${input.id}`
-            clearBtn.addEventListener('click', () => {
-              input.previousValue = input.value
-              input.value = ''
-              input.focus()
-              lastClearFieldPressed = input.id
-
-              // used for any other updates required by various inputs
-              input.dispatchEvent(new Event('input', { bubbles: true }))
-            })
-            insertAfter(clearBtn, dd.querySelector('label'))
-          }
-          input.addEventListener('focus', event => {
-            if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target
-          })
-          // #endregion
-
-          // check for colspan- utility class
-          if (/colspan-/.test(dd.className)) {
-            const match = dd.className.match(/colspan-([0-9]|full)/)[0]
-            dd.classList.remove(match)
-            div.classList.add(match)
-          }
-
-          // check for max-content attribute
-          // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing
-          if (input.getAttribute('data-max-content') !== null) {
-            if (!('fieldSizing' in document.createElement('input').style)) {
-              const adjustWidth = () => {
-                const value = input.value !== '' ? input.value : input.placeholder
-                const width = value.length * 8 + 40
-                input.style.width = width + 'px'
-                input.style.maxWidth = '100%'
-                div.style.width = width + 'px'
-              }
-              adjustWidth()
-              input.addEventListener('input', adjustWidth)
-            }
-          }
-
-          div.append(dt, dd)
-          dl.append(div)
-
-          // determine visibility of newly created <div>
-          if (dt.style.display === 'none' && dd.style.display === 'none') div.style.display = 'none'
-        }
-        // #endregion
-
-        // handle file input clear btn, cannot be handled with CSS
-        if (type === 'file') {
-          const clearBtn = input.parentElement.querySelector('.clear')
-          input.addEventListener('input', event => {
-            clearBtn.style.display = event.target.files.length ? 'flex' : 'none'
-          })
-          clearBtn.addEventListener('click', () => {
-            clearBtn.style.display = 'none'
-          })
-        }
-
-        // handle range inputs with a class to display the value
-        if (type === 'range' && input.classList.contains('displayValue')) {
-          const label = input.parentNode.parentNode.querySelector('dd label')
-          label.innerHTML += `<span class="seperator">: </span><output>${input.value}</output>`
-          input.addEventListener('input', event => {
-            const output = event.target.parentNode.parentNode.querySelector('output')
-            output.innerHTML = event.target.value
-          })
-        }
-
-        // #region show password button
-        if (type === 'password' && input.getAttribute('data-no-reveal') === null) {
-          const showBtn = document.createElement('button')
-          showBtn.type = 'button'
-          showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'
-          showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'
-          showBtn.tabIndex = -1
-          showBtn.innerHTML = passwordShow
-          showBtn.classList.add('show')
-          showBtn.id = `semanticFormsShowButton_${input.id}`
-          const dd = input.closest('dd')
-          if (!dd) {
-            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)
-            continue
-          }
-          showBtn.addEventListener('click', () => {
-            if (input.type === 'password') {
-              showBtn.innerHTML = passwordHide
-              showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password'
-              showBtn.ariaLabel = input.getAttribute('data-hide-password-text') || 'Hide password'
-              input.type = 'text'
-            } else {
-              showBtn.innerHTML = passwordShow
-              showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'
-              showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'
-              input.type = 'password'
-            }
-            input.focus()
-          })
-          insertAfter(showBtn, dd.querySelector('label'))
-        }
-        // #endregion
-
-        // add listener to shift clear button when scrollbar present
-        if (input.nodeName === 'TEXTAREA') {
-          if (input.getAttribute('data-disable-autosize') === null) {
-            // add auto-sizing
-            input.style.setProperty('resize', 'none')
-            input.style.setProperty('min-height', '0')
-            input.style.setProperty('max-height', 'none')
-            input.style.setProperty('height', 'auto')
-
-            const handleInput = () => {
-              // reset rows attribute to get accurate scrollHeight
-              let maxRows = input.getAttribute('data-max-rows')
-
-              if (maxRows) {
-                if (isNaN(maxRows) || Number(maxRows) <= 0) {
-                  console.warn(`An invalid value was passed to the "data-max-rows" attribute. This value will be ignored.\n\nProvided value: ${input.getAttribute('data-max-rows')}`)
-                  maxRows = null
-                }
-              }
-
-              const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5'
-              input.setAttribute('rows', minRows)
-
-              // get the computed values object reference
-              const style = window.getComputedStyle(input)
-
-              // force content-box for size accurate line-height calculation, remove scrollbars, lock width (subtract inline padding and inline border widths), and remove inline padding and borders to keep width consistent (for text wrapping accuracy)
-              const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right'])
-              const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width'])
-              input.style.setProperty('overflow', 'hidden', 'important')
-              input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px')
-              input.style.setProperty('box-sizing', 'content-box')
-              input.style.setProperty('padding-inline', '0')
-              input.style.setProperty('border-width', '0')
-
-              // get the base line height, and top / bottom padding
-              const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom'])
-              const lineHeight = style['line-height'] === 'normal'
-                ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box)
-                : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value
-
-              // get the scroll height (rounding to be safe to ensure cross browser consistency)
-              const scrollHeight = Math.round(input.scrollHeight)
-
-              // undo overflow, width, border-width, box-sizing & inline padding overrides
-              input.style.removeProperty('width')
-              input.style.removeProperty('box-sizing')
-              input.style.removeProperty('padding-inline')
-              input.style.removeProperty('border-width')
-              input.style.removeProperty('overflow')
-
-              // subtract blockPadding from scrollHeight and divide that by our lineHeight to get the row count, round to nearest integer as it will always be within ~.1 of the correct whole number
-              const rows = Math.round((scrollHeight - blockPadding) / lineHeight)
-
-              // set the calculated rows attribute (limited by rowLimit)
-              if (maxRows) {
-                input.setAttribute('rows', '' + Math.min(rows, Number(maxRows)))
-              } else {
-                input.setAttribute('rows', '' + rows)
-              }
-            }
-
-            input.addEventListener('input', handleInput)
-
-            // trigger the event to set the initial rows value
-            input.dispatchEvent(new Event('input', { bubbles: true }))
-          }
-
-          // progressively enhance textarea for Firefox and Safari
-          // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing
-          if (input.getAttribute('data-auto-grow') !== null) {
-            const adjustHeight = () => {
-              if (input.value.length) {
-                const borderWidth = parseInt(window.getComputedStyle(input).getPropertyValue('border-width'))
-                input.style.height = (input.scrollHeight + (borderWidth * 2)) + 'px'
-              } else {
-                input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')
-              }
-            }
-
-            // set initial height to semantic-forms CSS variable
-            input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')
-            input.addEventListener('input', adjustHeight)
-          }
-
-          // shifts the clear button to the right if a scrollbar is present
-          const shiftClearBtn = () => {
-            const clearBtn = input.parentElement?.querySelector('button.clear')
-            if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : ''
-          }
-          input.addEventListener('input', shiftClearBtn)
-          input.addEventListener('mouseup', shiftClearBtn)
-          shiftClearBtn()
-        }
+      // handle keyboard shortcuts
+      if (input.getAttribute('data-focus-key') !== null) {
+        const shortcut = createKeyboardShortcut(input, keyboardShortcuts)
+        keyboardShortcuts.push(shortcut)
       }
     }
   }
 
-  /**
-   * Places an element immediately after another element
-   * @param {Object} newNode element being placed after the reference node
-   * @param {*} referenceNode element to be used as reference for new node
-   */
-  function insertAfter (newNode, referenceNode) {
-    if (referenceNode.nextSibling) referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
-    else referenceNode.parentNode.appendChild(newNode)
-  }
-
-  /**
-   * Uses the navigator to best determine the clients operating system.
-   * @returns Operating system string (`mac`, `windows`, `linux`)
-   */
-  function getOS () {
-    const userAgent = window.navigator.userAgent
-    const platform = window.navigator.platform
-    let os = null
-
-    if (platform.includes('Win')) {
-      os = 'windows'
-    } else if (platform.includes('Mac') || /iPhone|iPad|iPod/.test(userAgent)) {
-      os = 'mac'
-    } else if (platform.includes('Linux') || /Android/.test(userAgent)) {
-      os = 'linux'
-    }
-    return os
-  }
-
-  // handle undo/redo
-  let lastFocusedInput
-  let lastClearFieldPressed
-  document.addEventListener('keydown', event => {
-    if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) {
-      // undo clearing a field
-      if (lastFocusedInput) {
-        if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {
-          if (lastFocusedInput.previousValue) {
-            lastFocusedInput.redoValue = lastFocusedInput.value
-            lastFocusedInput.value = lastFocusedInput.previousValue
-          }
-        }
-      }
-    } else if ((event.ctrlKey && event.key === 'y') || (event.metaKey && event.shiftKey && event.key === 'z')) {
-      // redo clearing a field
-      if (lastFocusedInput) {
-        if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {
-          if (lastFocusedInput.redoValue) {
-            lastFocusedInput.previousValue = lastFocusedInput.value
-            lastFocusedInput.value = lastFocusedInput.redoValue
-          }
-        }
-      }
-    }
-  })
+  // prevents multiple listeners
+  document.removeEventListener('keydown', handleUndoRedo)
+  document.addEventListener('keydown', handleUndoRedo)
 
   // monitor changes to the DOM and enhance new semanticForms forms that get added
   if (!window.semanticFormsObserver) {
diff --git a/semanticForms.scss b/semanticForms.scss
index 2a4ae2c..793963c 100644
--- a/semanticForms.scss
+++ b/semanticForms.scss
@@ -1,433 +1,10 @@
-// #region global styles
-form.semanticForms, form.semanticForms.light, table.semanticForms {
-  --semanticFormsFontFamily: sans-serif;
-  --semanticFormsFontSize: 16px;
-  --semanticFormsFormBgColor: #fff;
-  --semanticFormsFormSubBgColor: #f5f5f5;
-  --semanticFormsTextColor: #000;
-  --semanticFormsBorderColor: #c0c0c0;
-  --semanticFormsSubBorderColor: #c0c0c0;
-  --semanticFormsPlaceholderColor: rgba(0, 0, 0, 0.75);
-  --semanticFormsScrollbarColor: #c0c0c0;
-  --semanticFormsClearButtonColor: #000;
-  --semanticFormsButtonGradientLight: #fff;
-  --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: 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;
-  --semanticFormsTableTitleColor: #fcfcfc;
-  --semanticFormsTableHeaderColor: #eeeeee;
-  --semanticFormsTableOddColor: #dddddd;
-  --semanticFormsTableEvenColor: #cccccc;
-  --semanticFormsTableBorder: 1px #c0c0c0 solid;
-  --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000'%3E%3Cpolygon points='0,0 100,0 50,50'/%3E%3C/svg%3E");
-  --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E");
-  --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
-}
-
-@mixin dark-mode {
-  --semanticFormsFormBgColor: #555;
-  --inputBackgroudColor: rgba(85,85,85,0.1);
-  --semanticFormsFormSubBgColor: #2f2f2f;
-  --semanticFormsTextColor: #fff;
-  --semanticFormsBorderColor: #656565;
-  --semanticFormsSubBorderColor: #3f3f3f;
-  --semanticFormsPlaceholderColor: rgba(255, 255, 255, 0.85);
-  --semanticFormsScrollbarColor: #373737;
-  --semanticFormsClearButtonColor: #fff;
-  --semanticFormsButtonGradientLight: #6f6f6f;
-  --semanticFormsButtonGradientDark: #373737;
-  --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;
-  --semanticFormsTableTitleColor: #3f3f3f;
-  --semanticFormsTableHeaderColor: #4f4f4f;
-  --semanticFormsTableOddColor: #3f3f3f;
-  --semanticFormsTableEvenColor: #4f4f4f;
-  --semanticFormsTableBorder: 1px #656565 solid;
-  --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23fff'%3E%3Cpolygon stroke='%23fff' points='0,0 100,0 50,50'/%3E%3C/svg%3E");
-  --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E");
-  --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
-
-  input::-webkit-calendar-picker-indicator {
-    filter: invert(100%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  html:not(.light) {
-    body:not(.light) {
-      form.semanticForms:not(.light), table.semanticForms:not(.light) {
-        @include dark-mode;
-      }
-    }
-  }
-}
-
-html:not(.light) {
-  body:not(.light) {
-    form.semanticForms.dark, table.semanticForms.dark {
-      @include dark-mode;
-    }
-  }
-}
-
-form.semanticForms.dark, table.semanticForms.dark {
-  @include dark-mode;
-}
-// #endregion
-
-form.semanticForms,
-form.semanticForms.light,
-table.semanticForms,
-table.semanticForms.light {
-  font-family: var(--semanticFormsFontFamily);
-  font-size: var(--semanticFormsFontSize);
-  width: 100%;
-
-  // 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;
-  }
-
-  // hides semantic forms divs if the field itself is hidden
-  div:has(dd[hidden]) {
-    display: none !important;
-  }
-
-  &:not(table) {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  // style reset
-  fieldset,
-  label,
-  input,
-  select,
-  textarea,
-  button,
-  menu:has(li > input, li > label, li > button, li > select, li > textarea),
-  dl:has(dt > label, dd > input, dd > select, dd > textarea),
-  dt:has(> input, > select, > textarea),
-  dd:has(> input, > select, > textarea, > ul, > menu),
-  div:has(dt, dd),
-  dd > p {
-    color: var(--semanticFormsTextColor);
-    font-family: var(--semanticFormsFontFamily);
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-
-  // #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 {
-    font-size: var(--semanticFormsInputFontSize);
-    background: var(--semanticFormsFormBgColor);
-    border: var(--semanticFormsBorder);
-    border-radius: var(--semanticFormsBorderRadius);
-    width: 100%;
-    touch-action: manipulation;
-    outline: none;
-
-    &: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;
+@use 'styles/globals.scss';
+@use 'styles/inputs.scss';
+@use 'styles/labels.scss';
+@use 'styles/colspan.scss';
+@use 'styles/lowFlow.scss';
 
-      ~ label:first-of-type {
-        opacity: 0.5;
-      }
-
-      ~ label + button {
-        display: none;
-      }
-    }
-  }
-
-  select {
-    cursor: pointer;
-
-    // single selects
-    &:not([multiple]) {
-      // custom dropdown graphic on select element
-      background-image: var(--semanticFormsSelectIcon);
-      background-size: 14px;
-      background-position: calc(100% - 8px) 16px;
-      background-repeat: no-repeat;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-    }
-
-    // multi-selects
-    &[multiple] {
-      min-height: 38px;
-      height: 100px;
-      padding: 0;
-
-      option {
-        padding: 6px 20px;
-
-        &:first-of-type {
-          border-top-left-radius: var(--semanticFormsBorderRadius);
-        }
-
-        &:last-of-type {
-          border-bottom-left-radius: var(--semanticFormsBorderRadius);
-        }
-      }
-    }
-  }
-
-  textarea {
-    resize: vertical;
-    line-height: 1.5;
-    width: 100%;
-    min-height: 38px;
-
-    &[data-auto-grow] {
-      field-sizing: content;
-    }
-  }
-  // #endregion
-
-  // #region buttons
-  button.clear, button.show {
-    cursor: pointer;
-    appearance: none;
-    -webkit-appearance: none;
-    position: absolute;
-    height: min-content;
-    // account for margin above each input
-    top: calc(var(--semanticFormsInputTopMargin) + 6px);
-    right: 0;
-    width: 25px;
-    height: 25px;
-    margin: auto 6px;
-    padding: 5px;
-    background: none;
-    border: none;
-    color: var(--semanticFormsClearButtonColor);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  button.show {
-    right: 25px;
-  }
-
-  // custom styling of clear button on textarea
-  textarea ~ .clear {
-    bottom: auto;
-  }
-
-  // hide clear/show button while placeholder text is visible
-  input:placeholder-shown ~ .clear,
-  input:placeholder-shown ~ .show,
-  textarea:placeholder-shown ~ .clear,
-  input[type=file] ~ .clear {
-    display: none;
-  }
-
-  // button styling
-  input[type='submit'],
-  input[type='reset'],
-  button:not(.clear, .show),
-  .button-link {
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    cursor: pointer;
-    max-width: max-content;
-    background-image: linear-gradient(to bottom, var(--semanticFormsButtonGradientLight) 0%, var(--semanticFormsButtonGradientDark) 100%);
-    background-origin: border-box; // prevents graphical errors in Firefox
-    border: 1px var(--semanticFormsButtonGradientDark) solid;
-    corner-shape: squircle;
-    border-radius: 20px;
-    padding: 5px 25px;
-    font-size: 100%;
-    line-height: 1;
-    user-select: none;
-    transform: scale(1);
-    transition: transform 180ms;
-    text-decoration: none;
-    color: var(--semanticFormsTextColor);
-
-    &:active {
-      transform: scale(0.97);
-    }
-  }
-
-  input[type='submit'],
-  input[type='reset'],
-  input[type='image'],
-  button:not(.clear):not(.show),
-  .button-link {
-    transition: filter 0.1s;
-
-    &:hover {
-      filter: brightness(1.05);
-    }
-  }
-
-  .button-link {
-    display: block;
-
-    &:visited,
-    &:link {
-      color: var(--semanticFormsTextColor);
-    }
-  }
-  // #endregion
-
-  // #region invalid styling
-  [data-invalid-text] {
-    display: none;
-    color: var(--semanticFormsInvalid);
-  }
-
-  input:not([type='submit'], [type='reset'], [type='image']),
-  select,
-  textarea {
-    &.invalid,
-    &:user-invalid {
-      border: var(--semanticFormsInvalidBorder);
-
-      ~ label:nth-of-type(2) {
-        color: var(--semanticFormsInvalid);
-      }
-
-      ~ [data-invalid-text] {
-        font-size: small;
-        display: flex;
-      }
-    }
-
-    &.warn {
-      border: var(--semanticFormsWarnBorder);
-
-      ~ label:nth-of-type(2) {
-        color: var(--semanticFormsWarn);
-      }
-
-      ~ [data-invalid-text] {
-        font-size: small;
-        display: flex;
-      }
-    }
-  }
-  // #endregion
-
-  // disable autofill yellow
-  input:-webkit-autofill,
-  input:-webkit-autofill:hover,
-  input:-webkit-autofill:focus,
-  input:-webkit-autofill:active,
-  textarea:-webkit-autofill,
-  textarea:-webkit-autofill:hover,
-  textarea:-webkit-autofill:focus,
-  textarea:-webkit-autofill:active,
-  select:-webkit-autofill,
-  select:-webkit-autofill:hover,
-  select:-webkit-autofill:focus,
-  select:-webkit-autofill:active {
-    -webkit-box-shadow: 0 0 0 1000px var(--semanticFormsFormBgColor) inset;
-    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
-    transition-delay: 5000s;
-    transition-property: background-color, color;
-  }
-
-  // #region fieldset
+.semanticForms {
   fieldset {
     border-radius: var(--semanticFormsBorderRadius);
     background: var(--semanticFormsFormSubBgColor);
@@ -442,18 +19,17 @@ table.semanticForms.light {
     fieldset {
       background-color: var(--semanticFormsNestedFieldsetBgColor);
       border: var(--semanticFormsNestedFieldsetBorder);
+      margin-top: 15px;
 
       // add opacity to styled inputs to prevent blending with background
-      input:not([type='submit'], [type='reset'], [type='image'], [type=checkbox], [type=radio]),
+      input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
       select,
       textarea {
         background-color: var(--semanticFormsNestedInputBgColor);
       }
     }
   }
-  // #endregion
 
-  // #region details
   details {
     box-sizing: border-box; // ensure sizings match across browsers
     position: relative;
@@ -464,15 +40,15 @@ table.semanticForms.light {
     flex-direction: column;
     gap: 5px;
     padding: 20px 10px 10px 10px;
-    margin-bottom: 15px;
+    margin-top: 10px;
     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;
 
@@ -487,6 +63,7 @@ table.semanticForms.light {
     summary {
       cursor: pointer;
       margin: 0;
+      margin-bottom: 10px;
       line-height: 1;
       position: absolute;
       top: 10px;
@@ -534,154 +111,146 @@ table.semanticForms.light {
 
       & > dl:first-of-type {
         margin-top: 15px;
+        margin-bottom: 15px;
       }
     }
   }
 
-  details[open], summary {
-    margin-bottom: 10px;
-  }
-  // #endregion
-
-  // update for scrollbars
-  @supports (scrollbar-color: auto) {
-    textarea {
-      scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
-
-      &::-webkit-resizer {
-        border: none;
-        background-image: var(--semanticFormsCustomResizer);
-        background-size: 14px;
-        background-repeat: no-repeat;
-        background-position: 100%;
-        margin: 0 2px 2px 0;
-      }
-    }
-
-    select[multiple] {
-      scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
-    }
-  }
-
-  // #region container layout
-  dl:has(dt > label, dd > input, dd > select, dd > textarea) {
+  dl {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
     gap: 10px;
     margin-bottom: 10px;
 
-    dd {
+    div {
       position: relative;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      max-width: 100%;
+      width: 100%;
+      max-width: var(--semanticFormsInputMaxWidth);
 
-      // checkbox/radio
-      &.singleCheckbox, 
-      &.singleRadio {
-        display: grid;
-        grid-template-columns: 15px 1fr;
-        align-items: center;
-        padding-left: 11px;
+      &:has([data-max-content]) {
+        min-width: 150px;
+        max-width: max-content;
 
-        // anything that is not the radio/checkbox and its label
-        & > :not(input[type='checkbox'], input[type='radio'], label) {
-          grid-column: 1 / -1;
-        }
+        dd {
+          width: max-content;
 
-        // additional label takes up entire width
-        label:nth-of-type(2) {
-          grid-column: 1 / -1;
-          padding: 0 10px;
-          font-size: small;
-          color: var(--semanticFormsTextColor);
+          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;
+          }
         }
       }
 
-      &.singleRadio > input {
-        margin: 0;
+      // hide labels for singular buttons
+      &:has(dd > button:only-child, dd > input[type=button]:only-child, dd > input[type=submit]:only-child, dd > input[type=reset]:only-child) {
+        dt label {
+          display: none;
+        }
       }
 
-      // checkbox/radio groups
-      &.checkboxes, &.radios {
-        ul {
-          display: flex;
-          flex-direction: column;
-          margin-top: var(--semanticFormsInputTopMargin);
-          padding-left: 10px;
-          gap: 5px;
+      dd {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        max-width: 100%;
+
+        // checkbox/radio
+        &.singleCheckbox,
+        &.singleRadio {
+          display: grid;
+          grid-template-columns: 15px 1fr;
+          align-items: center;
+          padding-left: 11px;
 
-          li {
-            display: flex;
-            align-items: center;
-            gap: 5px;
+          // anything that is not the radio/checkbox and its label
+          & > :not(input[type='checkbox'], input[type='radio'], label) {
+            grid-column: 1 / -1;
+          }
+
+          // additional label takes up entire width
+          label:nth-of-type(2) {
+            grid-column: 1 / -1;
+            padding: 0 10px;
+            font-size: small;
+            color: var(--semanticFormsTextColor);
           }
         }
 
-        // checkbox subtext
-        & > label {
-          padding-left: 20px;
-          font-size: small;
-          color: var(--semanticFormsTextColor);
+        &.singleRadio > input {
+          margin: 0;
         }
-      }
 
-      // place buttons next to input
-      &:has(button:not(.clear, .show), input[type="submit"]:not(.clear, .show)) {
-        display: grid;
-        grid-template-columns: 2fr 1fr;
+        // checkbox/radio groups
+        &.checkboxes, &.radios {
+          ul {
+            display: flex;
+            flex-direction: column;
+            margin-top: var(--semanticFormsInputTopMargin);
+            padding-left: 10px;
+            gap: 5px;
 
-        button.clear, button.show {
-          right: 36%; // adjust clear/show button to grid
-        }
+            li {
+              display: flex;
+              align-items: center;
+              gap: 5px;
+            }
+          }
 
-        input:not([type="submit"]), select, textarea {
-          grid-row: 1 / 2;
-          grid-column: 1 / 2;
+          // checkbox subtext
+          & > label {
+            padding-left: 20px;
+            font-size: small;
+            color: var(--semanticFormsTextColor);
+          }
         }
 
-        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;
-        }
+        // singular button
+        &:has(button:only-child, input[type=button]:only-child, input[type=submit]:only-child, input[type=reset]:only-child) {
+          margin-left: 0;
 
-        label:nth-of-type(2),
-        label:not(.floatLabelFormAnimatedLabel) {
-          grid-row: 2 / 3;
-          grid-column: 1 / -1;
+          button, input[type=button], input[type=submit], input[type=reset] {
+            height: var(--semanticFormsInputHeight);
+          }
         }
-      }
 
-      // focus-key styles
-      &:has(span.focus-key) {
-        // make room for focus key span
-        label:first-of-type {
-          width: calc(100% - 95px);
-        }
+        // place buttons next to input
+        &:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show),select ~ input[type=submit],select ~ input[type=reset],select ~ input[type=button]) {
+          display: grid;
+          grid-template-columns: 2fr 1fr;
 
-        span.focus-key {
-          display: block;
-          
-          kbd {
-            font-family: sans-serif;
+          button.clear, button.show {
+            right: 36%; // adjust clear/show button to grid
+          }
+
+          // inputs take up first section of columns
+          input:not([type="submit"]), select, textarea {
+            grid-row: 1 / 2;
+            grid-column: 1 / 2;
+          }
+
+          // buttons take up second section of columns
+          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;
           }
-        }
 
-        &:has(input:focus, select:focus, textarea:focus),
-        &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) {
-          span.focus-key {
-            display: none;
+          label:nth-of-type(2),
+          label:not(.floatLabelFormAnimatedLabel) {
+            grid-row: 2 / 3;
+            grid-column: 1 / -1;
           }
         }
       }
@@ -713,1042 +282,67 @@ table.semanticForms.light {
     gap: 10px;
     list-style-type: none;
   }
-  // #endregion
 
-  // #region labels
-
-  input[type=checkbox] + label:first-of-type,
-  input[type=radio] + label:first-of-type {
-    // shift text down to match center
-    padding-top: 2px;
-    font-size: var(--semanticFormsInputFontSize);
-    cursor: pointer;
-    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%;
-      }
-    }
+  .align-start {
+    justify-self: start;
   }
 
-  .floatLabelForm {
-    grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
-
-    div {
-      position: relative;
-      width: 100%;
-      min-width: var(--semanticFormsInputMinWidth);
-      max-width: 100%;
-      max-width: 365px;
-
-      dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) {
-        input:not([type='submit'], [type='reset'], [type='image']),
-        select,
-        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);
-            transform: translateY(-150%) scale(0.7);
-            width: 100%;
-          }
-        }
-
-        // hide float label if no-float-label class is present
-        input:not([type='submit'], [type='reset'], [type='image']),
-        select,
-        textarea {
-          &:focus.no-float-label ~ label:first-of-type,
-          &:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type {
-            display: none;
-          }
-        }
+  .align-center {
+    justify-self: center;
+  }
 
-        select ~ label:first-of-type {
-          // force label to be correct color
-          color: var(--semanticFormsTextColor);
-        }
+  .align-end {
+    justify-self: end;
+  }
+}
 
-        button:not(.clear, .show), 
-        input[type=submit]:not(.clear, .show) {
-          margin-top: var(--semanticFormsInputTopMargin);
-        }
+.semanticForms table,
+table.semanticForms {
+  table-layout: fixed;
+  width: 100%;
+  border-spacing: 0;
+  border: var(--semanticFormsBorder);
+  border-radius: 10px;
+  margin-bottom: 15px;
+  overflow: hidden;
 
-        // 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);
-          transform-origin: left center;
-          pointer-events: none;
-          transition: transform 250ms;
-          cursor: text;
-          flex: 1;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          min-width: 0;
-          width: calc(100% - 35px);
-          user-select: none;
-          color: var(--semanticFormsPlaceholderColor);
-          touch-action: manipulation;
+  tr.title th {
+    background-color: var(--semanticFormsTableTitleColor);
+  }
 
-          span.required {
-            cursor: help;
-            pointer-events: auto;
-            color: red;
-          }
+  th {
+    background-color: var(--semanticFormsTableHeaderColor);
+    font-weight: bold;
+  }
 
-          span.help {
-            display: grid;
-            place-items: center;
-            cursor: help;
-            pointer-events: auto;
+  tr:nth-child(odd) td {
+    background-color: var(--semanticFormsTableOddColor);
+  }
 
-            svg {
-              width: 80%;
-            }
-          }
-        }
+  tr:nth-child(even) td {
+    background-color: var(--semanticFormsTableEvenColor);
+  }
 
-        // subtext label
-        label:nth-of-type(2) {
-          margin-top: -5px;
-          padding: 0 10px;
-          font-size: small;
-          color: var(--semanticFormsTextColor);
-        }
+  td, th {
+    border-right: var(--semanticFormsTableBorder);
+    border-bottom: var(--semanticFormsTableBorder);
+    padding: 7px 10px;
+  }
 
-        input,
-        textarea,
-        select {
-          margin-top: var(--semanticFormsInputTopMargin);
-        }
+  th:last-of-type, td:last-of-type {
+    border-right: none;
+  }
 
-        input,
-        textarea {
-          transition: opacity 250ms;
-
-          // hide placeholder content until input is focused
-          &::placeholder {
-            opacity: 0;
-            transition: opacity 250ms;
-          }
-
-          &::-moz-placeholder {
-            opacity: 0;
-            transition: opacity 250ms;
-          }
-
-          &::-webkit-input-placeholder {
-            opacity: 0;
-            transition: opacity 250ms;
-          }
-
-          &:-ms-input-placeholder {
-            opacity: 0;
-            transition: opacity 250ms;
-          }
-
-          // show placeholder content when focused
-          &:focus {
-            &::placeholder {
-              opacity: 1;
-            }
-
-            &::-moz-placeholder {
-              opacity: 1;
-            }
-
-            &::-webkit-input-placeholder {
-              opacity: 1;
-            }
-
-            &:-ms-input-placeholder {
-              opacity: 1;
-            }
-          }
-        }
-
-        // keyboard shortcut indicator
-        span.focus-key {
-          color: var(--semanticFormsPlaceholderColor);
-          position: absolute;
-          top: calc(var(--semanticFormsInputTopMargin) + 11px);
-          right: 20px;
-
-          kbd {
-            line-height: 1;
-          }
-        }
-
-        &:has(input[type="number"]) {
-          .focus-key {
-            right: 45px;
-          }
-        }
-
-        &:has(input[type="search"]) {
-          label:first-of-type {
-            left: 32px;
-          }
-        }
-      }
-
-      // top level label for checkbox and radio groups
-      dt {
-        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);
-          font-size: var(--semanticFormsInputFontSize);
-          position: absolute;
-          transform-origin: left center;
-          transform: translateY(-100%) scale(0.7);
-          top: var(--semanticFormsInputTopMargin);
-          left: 10px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          min-width: 0;
-          width: 100%;
-
-          span.help {
-            display: grid;
-            place-items: center;
-            cursor: help;
-            pointer-events: auto;
-          }
-        }
-      }
-
-      &:has(dd input:required) {
-        dt {
-          label {
-            width: 100%;
-            padding-right:10px;
-          }
-
-          label > span {
-            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;
-          }
-        }
-      }
-    }
-
-    input, textarea {
-      &::placeholder {
-        color: var(--semanticFormsPlaceholderColor);
-        opacity: 1;
-      }
-    }
-    // #endregion
-  }
-
-  // #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;
-    }
-
-    &.colspan-3 {
-      grid-column: span 3;
-    }
-
-    &.colspan-2 {
-      grid-column: span 2;
-    }
-
-    &.colspan-1 {
-      grid-column: span 1;
-    }
-  }
-
-  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-5 dl,
-  dl.colspan-5 {
-    grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
-  }
-
-  fieldset.colspan-4 dl,
-  dl.colspan-4 {
-    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));
-  }
-
-  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));
-  }
-
-  fieldset.colspan-1 dl,
-  dl.colspan-1 {
-    dt:nth-of-type(n + 1),
-    dd:nth-of-type(n + 1) {
-      grid-column: 1;
-    }
-  }
-
-  fieldset.colspan-2 dl,
-  dl.colspan-2 {
-    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;
-    }
-  }
-
-  fieldset.colspan-3 dl,
-  dl.colspan-3 {
-    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;
-    }
-
-    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;
-    }
-  }
-
-  fieldset.colspan-5 dl,
-  dl.colspan-5 {
-    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;
-    }
-  }
-  // #endregion
-
-  // #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); /* this matches the max-width of js-enabled inputs */
-
-      label {
-        position: absolute;
-        display: block;
-        height: 11px;
-        transform: scale(0.7);
-        transform-origin: left center;
-        padding-left: 22px;
-        margin-top: -1px;
-      }
-
-      // add required asterisk
-      &:has(+ dd input:required) {
-        label::after {
-          content: ' *';
-          color: red;
-        }
-      }
-    }
-
-    // checkbox/radio groups
-    dt {
-      &:has(+ dd.checkboxes),
-      &:has(+ dd.radios) {
-        label {
-          padding-left: 15px;
-        }
-      }
-    }
-
-    // single checkbox label
-    dt {
-      &:not(:has(+ dd ul)){
-        &:has(+ dd input[type=checkbox]) {
-          label {
-            transform: scale(1);
-            margin-top: 0;
-            margin-left: 8px;
-          }
-        }
-
-        &:has(+ dd input[type=radio]) {
-          label {
-            transform: scale(1);
-            margin-top: 0;
-            margin-left: 8px;
-          }
-        }
-      }
-    } 
-
-
-    dd {
-      // margin-bottom: 10px;
-      margin-top: var(--semanticFormsInputTopMargin);
-      margin-bottom: 10px;
-      min-width: var(--semanticFormsInputMinWidth); /* 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;
-        }
-      }
-
-      // single checkbox/radio
-      &:not(:has(ul)){
-        &:has(input[type=checkbox], input[type=radio]) {
-          margin-top: 0;
-          padding-left: 10px;
-
-          input[type=checkbox],
-          input[type=radio] {
-            margin-left: 1px;
-            margin-top: 1px;
-            margin-right: auto;
-          }
-
-          // additional info text
-          label {
-            font-size: small;
-            margin-top: -1px;
-            padding-left: 11px;
-          }
-
-          input[type=radio] + label {
-            margin-top: -4px;
-          }
-        }
-      }
-
-      // 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;
-      }
-    }
-  }
-
-  .checkboxes ul,
-  .radios ul {
-    margin-top: var(--semanticFormsInputTopMargin);
-  }
-  // #endregion
-}
-
-// #region tables
-
-.semanticForms table,
-table.semanticForms {
-  table-layout: fixed;
-  width: 100%;
-  border-spacing: 0;
-  border: var(--semanticFormsBorder);
-  border-radius: 10px;
-  margin-bottom: 15px;
-  overflow: hidden;
-
-  tr.title th {
-    background-color: var(--semanticFormsTableTitleColor);
-  }
-
-  th {
-    background-color: var(--semanticFormsTableHeaderColor);
-    font-weight: bold;
-  }
-
-  tr:nth-child(odd) td {
-    background-color: var(--semanticFormsTableOddColor);
-  }
-
-  tr:nth-child(even) td {
-    background-color: var(--semanticFormsTableEvenColor);
-  }
-
-  td, th {
-    border-right: var(--semanticFormsTableBorder);
-    border-bottom: var(--semanticFormsTableBorder);
-    padding: 7px 10px;
-  }
-
-  th:last-of-type, td:last-of-type {
-    border-right: none;
-  }
-
-  tbody {
-    tr:last-of-type {
-      th, td {
-        border-bottom: none;
-      }
-    }
-  }
+  tbody {
+    tr:last-of-type {
+      th, td {
+        border-bottom: none;
+      }
+    }
+  }
 
   // adjust styling of button menus in tables
   menu:has(li > input, li > label, li > button, li > select, li > textarea, li > a) {
     width: max-content;
   }
 }
-// #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
diff --git a/styles/colspan.scss b/styles/colspan.scss
new file mode 100644
index 0000000..c076dcd
--- /dev/null
+++ b/styles/colspan.scss
@@ -0,0 +1,261 @@
+.semanticForms {
+  div {
+    &[class^=colspan-] {
+      max-width: 100% !important;
+    }
+
+    &.colspan-full {
+      grid-column: 1 / -1;
+    }
+
+    &.colspan-5 {
+      grid-column: span 5;
+    }
+
+    &.colspan-4 {
+      grid-column: span 4;
+    }
+
+    &.colspan-3 {
+      grid-column: span 3;
+    }
+
+    &.colspan-2 {
+      grid-column: span 2;
+    }
+
+    &.colspan-1 {
+      grid-column: span 1;
+    }
+  }
+
+  fieldset[class^=colspan-] dl,
+  dl[class^='colspan-'] {
+    div {
+      max-width: 100% !important;
+    }
+  }
+
+  fieldset.colspan-full dl,
+  dl.colspan-full {
+    grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  }
+
+  fieldset.colspan-5 dl,
+  dl.colspan-5 {
+    grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
+  }
+
+  fieldset.colspan-4 dl,
+  dl.colspan-4 {
+    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));
+  }
+
+  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));
+  }
+
+  fieldset.colspan-1 dl,
+  dl.colspan-1 {
+    dt:nth-of-type(n + 1),
+    dd:nth-of-type(n + 1) {
+      grid-column: 1;
+    }
+  }
+
+  fieldset.colspan-2 dl,
+  dl.colspan-2 {
+    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;
+    }
+  }
+
+  fieldset.colspan-3 dl,
+  dl.colspan-3 {
+    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;
+    }
+
+    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;
+    }
+  }
+
+  fieldset.colspan-5 dl,
+  dl.colspan-5 {
+    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;
+    }
+  }
+}
+
+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));
+    }
+  }
+
+  // max 6 columns
+  @container semanticForm (width >= 1550px) and (width < 1810px) {
+    & fieldset dl,
+    & dl {
+      grid-template-columns: repeat(6, minmax(var(--semanticFormsInputMinWidth), 1fr));
+    }
+  }
+
+  // max 5 columns
+  @container semanticForm (width >= 1290px) and (width < 1550px) {
+    & fieldset dl,
+    & dl {
+      grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
+    }
+  }
+
+  // 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;
+      }
+    }
+  }
+
+  // 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;
+      }
+    }
+  }
+
+  // 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;
+      }
+    }
+  }
+
+  // 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: 1fr;
+
+      div.colspan-2,
+      div.colspan-3,
+      div.colspan-4,
+      div.colspan-5 {
+        grid-column: span 1;
+      }
+    }
+  }
+}
diff --git a/styles/globals.scss b/styles/globals.scss
new file mode 100644
index 0000000..ad7d178
--- /dev/null
+++ b/styles/globals.scss
@@ -0,0 +1,147 @@
+form.semanticForms,
+form.semanticForms.light,
+table.semanticForms {
+  --semanticFormsFontFamily: sans-serif;
+  --semanticFormsFontSize: 16px;
+  --semanticFormsFormBgColor: #fff;
+  --semanticFormsFormSubBgColor: #f5f5f5;
+  --semanticFormsTextColor: #000;
+  --semanticFormsBorderColor: #c0c0c0;
+  --semanticFormsFocusColor: #c0c0c0;
+  --semanticFormsSubBorderColor: #c0c0c0;
+  --semanticFormsPlaceholderColor: rgba(0, 0, 0, 0.75);
+  --semanticFormsScrollbarColor: #c0c0c0;
+  --semanticFormsClearButtonColor: #000;
+  --semanticFormsButtonGradientLight: #fff;
+  --semanticFormsButtonGradientDark: #c0c0c0;
+  --semanticFormsInvalid: #f00;
+  --semanticFormsInvalidBorder: 1px solid var(--semanticFormsInvalid);
+  --semanticFormsWarn: #ffdd00;
+  --semanticFormsWarnBorder: 1px solid var(--semanticFormsWarn);
+  --semanticFormsInputHeight: 38px;
+  --semanticFormsInputFontSize: 16px;
+  --semanticFormsInputTopMargin: 15px;
+  --semanticFormsInputMinWidth: 250px;
+  --semanticFormsInputMaxWidth: 365px;
+  --semanticFormsBorderRadius: 10px;
+  --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;
+  --semanticFormsTableTitleColor: #fcfcfc;
+  --semanticFormsTableHeaderColor: #eeeeee;
+  --semanticFormsTableOddColor: #dddddd;
+  --semanticFormsTableEvenColor: #cccccc;
+  --semanticFormsTableBorder: 1px #c0c0c0 solid;
+  --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000'%3E%3Cpolygon points='0,0 100,0 50,50'/%3E%3C/svg%3E");
+  --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E");
+  --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
+
+  font-family: var(--semanticFormsFontFamily);
+  font-size: var(--semanticFormsFontSize);
+  width: 100%;
+  overflow-x: hidden;
+
+  &:not(table) {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  // 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;
+  }
+
+  // hides semantic forms divs if the field itself is hidden
+  div:has(dd[hidden]) {
+    display: none !important;
+  }
+
+  // input + container style reset
+  fieldset,
+  label,
+  input,
+  select,
+  textarea,
+  button,
+  menu:has(li > input, li > label, li > button, li > select, li > textarea),
+  dl:has(dt > label, dd > input, dd > select, dd > textarea),
+  dt:has(> input, > select, > textarea),
+  dd:has(> input, > select, > textarea, > ul, > menu),
+  div:has(dt, dd),
+  dd > p {
+    color: var(--semanticFormsTextColor);
+    font-family: var(--semanticFormsFontFamily);
+    box-sizing: border-box;
+  }
+
+  menu:has(li > input, li > label, li > button, li > select, li > textarea),
+  dl:has(dt > label, dd > input, dd > select, dd > textarea),
+  dt:has(> input, > select, > textarea),
+  dd:has(> input, > select, > textarea, > ul, > menu),
+  div:has(dt, dd),
+  dd > p {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@mixin dark-mode {
+  --semanticFormsFormBgColor: #555;
+  --inputBackgroudColor: rgba(85,85,85,0.1);
+  --semanticFormsFormSubBgColor: #2f2f2f;
+  --semanticFormsTextColor: #fff;
+  --semanticFormsBorderColor: #656565;
+  --semanticFormsFocusColor: #656565;
+  --semanticFormsSubBorderColor: #3f3f3f;
+  --semanticFormsPlaceholderColor: rgba(255, 255, 255, 0.85);
+  --semanticFormsScrollbarColor: #373737;
+  --semanticFormsClearButtonColor: #fff;
+  --semanticFormsButtonGradientLight: #6f6f6f;
+  --semanticFormsButtonGradientDark: #373737;
+  --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;
+  --semanticFormsTableTitleColor: #3f3f3f;
+  --semanticFormsTableHeaderColor: #4f4f4f;
+  --semanticFormsTableOddColor: #3f3f3f;
+  --semanticFormsTableEvenColor: #4f4f4f;
+  --semanticFormsTableBorder: 1px #656565 solid;
+  --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23fff'%3E%3Cpolygon stroke='%23fff' points='0,0 100,0 50,50'/%3E%3C/svg%3E");
+  --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E");
+  --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
+
+  input::-webkit-calendar-picker-indicator {
+    filter: invert(100%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not(.light) {
+    body:not(.light) {
+      form.semanticForms:not(.light), table.semanticForms:not(.light) {
+        @include dark-mode;
+      }
+    }
+  }
+}
+
+html:not(.light) {
+  body:not(.light) {
+    form.semanticForms.dark, table.semanticForms.dark {
+      @include dark-mode;
+    }
+  }
+}
+
+form.semanticForms.dark,
+table.semanticForms.dark {
+  @include dark-mode;
+}
\ No newline at end of file
diff --git a/styles/inputs.scss b/styles/inputs.scss
new file mode 100644
index 0000000..0b3849a
--- /dev/null
+++ b/styles/inputs.scss
@@ -0,0 +1,309 @@
+.semanticForms {
+  input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
+  select {
+    height: var(--semanticFormsInputHeight);
+  }
+
+  input[type=checkbox],
+  input[type=radio] {
+    width: 18px;
+    height: 18px;
+    margin: 3px 0;
+    cursor: pointer;
+
+    & ~ label:first-of-type {
+      color: var(--semanticFormsTextColor);
+    }
+  }
+
+  input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
+  select,
+  textarea {
+    font-size: var(--semanticFormsInputFontSize);
+    background: var(--semanticFormsFormBgColor);
+    border: var(--semanticFormsBorder);
+    border-radius: var(--semanticFormsBorderRadius);
+    width: 100%;
+    touch-action: manipulation;
+    outline: none;
+
+    // custom focus highlight
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 1px var(--semanticFormsFocusColor);
+    }
+
+    &:not([type=range]) {
+      padding: 6px 30px 6px 20px;
+    }
+
+    // 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=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;
+
+      ~ label:first-of-type {
+        opacity: 0.5;
+      }
+
+      ~ label + button {
+        display: none;
+      }
+    }
+  }
+
+  select {
+    cursor: pointer;
+
+    // single selects
+    &:not([multiple]) {
+      // custom dropdown graphic on select element
+      background-image: var(--semanticFormsSelectIcon);
+      background-size: 14px;
+      background-position: calc(100% - 8px) 16px;
+      background-repeat: no-repeat;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+    }
+
+    // multi-selects
+    &[multiple] {
+      min-height: 38px;
+      height: 100px;
+      padding: 0;
+
+      option {
+        padding: 6px 20px;
+
+        &:first-of-type {
+          border-top-left-radius: var(--semanticFormsBorderRadius);
+        }
+
+        &:last-of-type {
+          border-bottom-left-radius: var(--semanticFormsBorderRadius);
+        }
+      }
+    }
+  }
+
+  textarea {
+    resize: vertical;
+    line-height: 1.5;
+    width: 100%;
+    min-height: 38px;
+
+    &[data-auto-grow] {
+      field-sizing: content;
+    }
+  }
+
+  // buttons
+  button.clear, button.show {
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    position: absolute;
+    height: min-content;
+    // account for margin above each input
+    top: calc(var(--semanticFormsInputTopMargin) + 6px);
+    right: 0;
+    width: 25px;
+    height: 25px;
+    margin: auto 6px;
+    padding: 5px;
+    background: none;
+    border: none;
+    color: var(--semanticFormsClearButtonColor);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  button.show {
+    right: 25px;
+
+    svg {
+      height: 100%;
+    }
+  }
+
+  // custom styling of clear button on textarea
+  textarea ~ .clear {
+    bottom: auto;
+  }
+
+  // hide clear/show button while placeholder text is visible
+  input:placeholder-shown ~ .clear,
+  input:placeholder-shown ~ .show,
+  textarea:placeholder-shown ~ .clear,
+  input[type=file] ~ .clear {
+    display: none;
+  }
+
+  // button styling
+  input[type=submit],
+  input[type=reset],
+  input[type=button],
+  button:not(.clear, .show),
+  .button-link {
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+    max-width: max-content;
+    background-image: linear-gradient(to bottom, var(--semanticFormsButtonGradientLight) 0%, var(--semanticFormsButtonGradientDark) 100%);
+    background-origin: border-box; // prevents graphical errors in Firefox
+    border: 1px var(--semanticFormsButtonGradientDark) solid;
+    corner-shape: squircle;
+    border-radius: 20px;
+    padding: 5px 25px;
+    font-size: 100%;
+    line-height: 1;
+    user-select: none;
+    transform: scale(1);
+    transition: transform 180ms;
+    text-decoration: none;
+    color: var(--semanticFormsTextColor);
+
+    &:active {
+      transform: scale(0.97);
+    }
+  }
+
+  input[type=submit],
+  input[type=reset],
+  input[type=button],
+  input[type=image],
+  button:not(.clear):not(.show),
+  .button-link {
+    transition: filter 0.1s;
+
+    &:hover {
+      filter: brightness(1.05);
+    }
+  }
+
+  .button-link {
+    display: block;
+
+    &:visited,
+    &:link {
+      color: var(--semanticFormsTextColor);
+    }
+  }
+
+  // invalid styling
+  [data-invalid-text] {
+    display: none;
+    color: var(--semanticFormsInvalid);
+  }
+
+  input:not([type=submit], [type=reset], [type=button], [type=image]),
+  select,
+  textarea {
+    &.invalid,
+    &:user-invalid {
+      border: var(--semanticFormsInvalidBorder);
+
+      ~ label:nth-of-type(2) {
+        color: var(--semanticFormsInvalid);
+      }
+
+      ~ [data-invalid-text] {
+        font-size: small;
+        display: flex;
+      }
+    }
+
+    &.warn {
+      border: var(--semanticFormsWarnBorder);
+
+      ~ label:nth-of-type(2) {
+        color: var(--semanticFormsWarn);
+      }
+
+      ~ [data-invalid-text] {
+        font-size: small;
+        display: flex;
+      }
+    }
+  }
+
+  // disable autofill yellow
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  textarea:-webkit-autofill:active,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus,
+  select:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px var(--semanticFormsFormBgColor) inset;
+    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
+    transition-delay: 5000s;
+    transition-property: background-color, color;
+  }
+
+  // update for scrollbars
+  @supports (scrollbar-color: auto) {
+    textarea {
+      scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
+
+      &::-webkit-resizer {
+        border: none;
+        background-image: var(--semanticFormsCustomResizer);
+        background-size: 14px;
+        background-repeat: no-repeat;
+        background-position: 100%;
+        margin: 0 2px 2px 0;
+      }
+    }
+
+    select[multiple] {
+      scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
+    }
+  }
+}
diff --git a/styles/labels.scss b/styles/labels.scss
new file mode 100644
index 0000000..7615f57
--- /dev/null
+++ b/styles/labels.scss
@@ -0,0 +1,285 @@
+.semanticForms {
+  input[type=checkbox] + label:first-of-type,
+  input[type=radio] + label:first-of-type {
+    // shift text down to match center
+    padding-top: 2px;
+    font-size: var(--semanticFormsInputFontSize);
+    cursor: pointer;
+    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%;
+      }
+    }
+  }
+
+  .floatLabelForm {
+    div {
+      dt {
+        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);
+          font-size: var(--semanticFormsInputFontSize);
+          position: absolute;
+          transform-origin: left center;
+          transform: translateY(-100%) scale(0.7);
+          top: var(--semanticFormsInputTopMargin);
+          left: 10px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          min-width: 0;
+          width: 100%;
+
+          span.help {
+            display: grid;
+            place-items: center;
+            cursor: help;
+            pointer-events: auto;
+          }
+        }
+      }
+
+      &:has(dd input:required) {
+        dt {
+          label {
+            width: 100%;
+            padding-right: 10px;
+          }
+
+          label > span {
+            margin-left: 5px;
+            cursor: help;
+            pointer-events: auto;
+            color: red;
+          }
+        }
+      }
+
+      dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) {
+        input:not([type=submit], [type=reset], [type=button], [type=image]),
+        select,
+        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);
+            transform: translateY(-150%) scale(0.7);
+            width: 100%;
+          }
+        }
+
+        // hide float label if no-float-label class is present
+        input:not([type=submit], [type=reset], [type=button], [type=image]),
+        select,
+        textarea {
+          &:focus.no-float-label ~ label:first-of-type,
+          &:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type {
+            display: none;
+          }
+        }
+
+        select ~ label:first-of-type {
+          // force label to be correct color
+          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);
+          transform-origin: left center;
+          pointer-events: none;
+          transition: transform 250ms;
+          cursor: text;
+          flex: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          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%;
+            }
+          }
+        }
+
+        // focus-key styles
+        &:has(span.focus-key) {
+          // make room for focus key span
+          label:first-of-type {
+            width: calc(100% - 95px);
+          }
+
+          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;
+            }
+          }
+        }
+
+        // subtext label
+        label:nth-of-type(2) {
+          margin-top: -5px;
+          padding: 0 10px;
+          font-size: small;
+          color: var(--semanticFormsTextColor);
+        }
+
+        input,
+        textarea,
+        select {
+          margin-top: var(--semanticFormsInputTopMargin);
+        }
+
+        input,
+        textarea {
+          transition: opacity 250ms;
+
+          // hide placeholder content until input is focused
+          &::placeholder {
+            opacity: 0;
+            transition: opacity 250ms;
+          }
+
+          &::-moz-placeholder {
+            opacity: 0;
+            transition: opacity 250ms;
+          }
+
+          &::-webkit-input-placeholder {
+            opacity: 0;
+            transition: opacity 250ms;
+          }
+
+          &:-ms-input-placeholder {
+            opacity: 0;
+            transition: opacity 250ms;
+          }
+
+          // show placeholder content when focused
+          &:focus {
+            &::placeholder {
+              opacity: 1;
+            }
+
+            &::-moz-placeholder {
+              opacity: 1;
+            }
+
+            &::-webkit-input-placeholder {
+              opacity: 1;
+            }
+
+            &:-ms-input-placeholder {
+              opacity: 1;
+            }
+          }
+        }
+
+        // keyboard shortcut indicator
+        span.focus-key {
+          color: var(--semanticFormsPlaceholderColor);
+          position: absolute;
+          top: calc(var(--semanticFormsInputTopMargin) + 11px);
+          right: 20px;
+
+          kbd {
+            line-height: 1;
+          }
+        }
+
+        &:has(input[type=number]) {
+          .focus-key {
+            right: 45px;
+          }
+        }
+
+        &:has(input[type=search]) {
+          label:first-of-type {
+            left: 32px;
+          }
+        }
+      }
+
+      // 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;
+          }
+        }
+      }
+    }
+
+    input, textarea {
+      &::placeholder {
+        color: var(--semanticFormsPlaceholderColor);
+        opacity: 1;
+      }
+    }
+  }
+}
diff --git a/styles/lowFlow.scss b/styles/lowFlow.scss
new file mode 100644
index 0000000..27f7303
--- /dev/null
+++ b/styles/lowFlow.scss
@@ -0,0 +1,125 @@
+form.semanticForms.lowFlow,
+form.semanticForms:not(.semanticFormsActive) {
+  gap: 10px;
+
+  dl {
+    gap: 10px;
+    margin-bottom: 0px;
+  }
+
+  // single checkbox/radios
+  div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) {
+    padding-left: 11px;
+
+    &:has(dd > input[type=radio]) {
+      margin-top: -2px;
+    }
+
+    dt {
+      label {
+        transform: scale(1);
+        margin-top: 4px;
+        margin-left: -4px;
+      }
+    }
+
+    dd {
+      margin-top: 0;
+
+      // additional info text
+      label {
+        font-size: small;
+        margin-top: -2px;
+        padding-left: 10px;
+      }
+    }
+  }
+
+  dt {
+    min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */
+
+    label {
+      position: absolute;
+      display: block;
+      height: 11px;
+      transform: scale(0.7);
+      transform-origin: left center;
+      padding-left: 29px;
+      margin-top: -2px;
+    }
+
+    // add required asterisk
+    &:has(+ dd input:required) {
+      label::after {
+        content: ' *';
+        color: red;
+      }
+    }
+  }
+
+  // checkbox/radio groups
+  dt {
+    &:has(+ dd.checkboxes),
+    &:has(+ dd.radios) {
+      label {
+        padding-left: 15px;
+      }
+    }
+  }
+
+  dd {
+    margin-top: var(--semanticFormsInputTopMargin);
+    min-width: var(--semanticFormsInputMinWidth); /* 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;
+      }
+    }
+
+    // remove "x" padding
+    input:not([type=submit], [type=reset], [type=button], [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;
+    }
+  }
+}
+
+.checkboxes ul,
+.radios ul {
+  margin-top: var(--semanticFormsInputTopMargin);
+}
\ No newline at end of file
diff --git a/test/semanticForms.spec.js b/test/semanticForms.spec.js
new file mode 100644
index 0000000..38406e2
--- /dev/null
+++ b/test/semanticForms.spec.js
@@ -0,0 +1,475 @@
+const { test, expect } = require('@playwright/test')
+const os = require('os')
+const path = require('path')
+const fs = require('fs')
+
+test.describe('semantic forms', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:8080/fullDemo.html')
+
+    // uncomment this to reveal client-side console messages
+    // page.on('console', msg => console.log(msg.text()))
+  })
+
+  test.afterEach(async ({ page }) => {
+    if (process.env.NYC_PROCESS_ID) {
+      // extract coverage data
+      const coverage = await page.evaluate(() => window.__coverage__)
+      // write coverage data to a file
+      if (coverage) fs.writeFileSync(path.join(process.cwd(), '.nyc_output', `coverage-${test.info().testId}.json`), JSON.stringify(coverage))
+    }
+
+    await page.close()
+  })
+
+  test('should progressively enhance semantic forms', async ({ page }) => {
+    for (const form of await page.locator('form').all()) {
+      await expect(form).toContainClass('semanticForms')
+      await expect(form).toContainClass('semanticFormsActive')
+    }
+  })
+
+  test.describe('labels', () => {
+    test('should apply float labels to forms', async ({ page }) => {
+      // class should be applied
+      await expect(page.locator('article form').nth(0).locator('dl').nth(0)).toContainClass('floatLabelForm')
+
+      // <dt> labels should not be visible
+      for (const dt of await page.locator('article form').nth(0).locator('dl').nth(0).locator('dt').all()) {
+        await expect(dt).not.toBeVisible()
+      }
+
+      // a float label should be added to the <dd>
+      for (const dt of await page.locator('article form').nth(0).locator('dl').nth(0).locator('dd').all()) {
+        await expect(dt.locator('label.floatLabelFormAnimatedLabel')).toBeVisible()
+      }
+
+      // focusing the element should float the label above the input
+      await expect(page.locator('dd label[for="name"]')).toHaveCSS('transform', 'none')
+      await page.locator('[name="name"]').focus()
+      // TODO: this is wildly inaccurate across tests
+      // await expect(page.locator('dd label[for="name"]')).toHaveCSS('transform', 'matrix(0.7, 0, 0, 0.7, 0, -28.7812)') // playwright converts "translateY(-150%) scale(0.7)"
+      await page.locator('[name="name"]').blur()
+      await expect(page.locator('dd label[for="name"]')).toHaveCSS('transform', 'none')
+    })
+
+    test('should disable float labels with .no-float-label class', async ({ page }) => {
+      await expect(page.locator('dd label[for="search-no-float"]')).toHaveCSS('transform', 'none')
+      await page.locator('[name="search-no-float"]').focus()
+      await expect(page.locator('dd label[for="search-no-float"]')).not.toHaveCSS('transform', 'matrix(0.7, 0, 0, 0.7, 0, -28.7812)')
+      await expect(page.locator('dd label[for="search-no-float"]')).not.toBeVisible()
+    })
+
+    test('should apply a required symbol on required inputs', async ({ page }) => {
+      await expect(page.locator('dd input[name="password"]')).toHaveAttribute('required')
+      await expect(page.locator('dd label[for="password"]').locator('span.required')).toBeVisible()
+      await expect(page.locator('dd label[for="password"]').locator('span.required')).toHaveText('*')
+    })
+
+    test('should not apply a required symbol on required inputs when [data-no-asterisk] is present', async ({ page }) => {
+      await expect(page.locator('dd input[name="required-field-no-asterisk"]')).toHaveAttribute('required')
+      await expect(page.locator('dd label[for="required-field-no-asterisk"]').locator('span.required')).not.toBeVisible()
+      await expect(page.locator('dd label[for="required-field-no-asterisk"]')).not.toHaveText('*')
+    })
+
+    test('should allow a custom title on required symbols', async ({ page }) => {
+      await expect(page.locator('label[for="required-field-custom-title"] span.required')).toHaveAttribute('title', 'This is a custom title.')
+    })
+
+    test('should apply a help icon when [data-show-help-icon] is present', async ({ page }) => {
+      await expect(page.locator('dd label[for="label-help-icon"]').locator('span.help')).toBeVisible()
+    })
+  })
+
+  test.describe('inputs', () => {
+    test('should stylize invalid fields', async ({ page }) => {
+      await expect(page.locator('#invalid-field')).toContainClass('invalid')
+      await expect(page.locator('#invalid-field')).toHaveCSS('border', '1px solid rgb(255, 0, 0)')
+    })
+
+    test('should add range values to range inputs with the .displayValue class', async ({ page }) => {
+      await expect(page.locator('label[for="rangeValue"]').locator('output')).toBeVisible()
+      await expect(page.locator('label[for="rangeValue"]').locator('output')).toHaveText('50')
+    })
+
+    test('should show an icon on search inputs', async ({ page }) => {
+      const searchIcon = await page.evaluate(() => window.getComputedStyle(document.querySelector('.semanticForms')).getPropertyValue('--semanticFormsSearchIcon'))
+      await expect(page.locator('#search-field')).toHaveCSS('background-image', searchIcon)
+    })
+
+    test('should test clear fields work', async ({ page }) => {
+      // fill
+      await page.focus('#name')
+      await page.fill('#name', 'Some text')
+      await expect(page.locator('[name="name"]')).toHaveValue('Some text')
+
+      // clear
+      await page.click('#name ~ button.clear')
+      await expect(page.locator('[name="name"]')).toHaveValue('')
+    })
+
+    test('should test undoing clearing a field should work', async ({ page }) => {
+      // fill
+      await page.focus('#name')
+      await page.fill('#name', 'Some text')
+      await expect(page.locator('[name="name"]')).toHaveValue('Some text')
+
+      // clear
+      await page.click('#name ~ button.clear')
+      await expect(page.locator('[name="name"]')).toHaveValue('')
+
+      // undo
+      if (os.platform() === 'darwin') {
+        await page.keyboard.down('Meta')
+        await page.keyboard.press('z')
+        await page.keyboard.up('Meta')
+      } else {
+        await page.keyboard.down('Control')
+        await page.keyboard.press('z')
+        await page.keyboard.up('Control')
+      }
+      await expect(page.locator('[name="name"]')).toHaveValue('Some text')
+    })
+
+    // TODO: figure out why this is now broken
+    test('should test undoing and redoing clearing a field works', async ({ page, browserName }) => {
+      if (browserName !== 'firefox') test.skip() // TODO: this test is broken in the chromium driver for some reason
+
+      await page.locator('#name').focus()
+      await page.locator('#name').fill('Some text')
+      await expect(page.locator('#name')).toHaveValue('Some text')
+
+      // clear
+      await page.click('#name ~ button.clear')
+      await expect(page.locator('#name')).toHaveValue('')
+
+      // undo
+      if (os.platform() === 'darwin') {
+        await page.keyboard.down('Meta')
+        await page.keyboard.press('z')
+        await page.keyboard.up('Meta')
+      } else {
+        await page.keyboard.down('Control')
+        await page.keyboard.press('z')
+        await page.keyboard.up('Control')
+      }
+      await expect(page.locator('#name')).toHaveValue('Some text')
+
+      // append some extra text to the text field using type
+      await page.locator('#name').fill('Some text appended text')
+      await expect(page.locator('#name')).toHaveValue('Some text appended text')
+
+      // undo
+      if (os.platform() === 'darwin') {
+        await page.keyboard.down('Meta')
+        await page.keyboard.press('z')
+        await page.keyboard.up('Meta')
+      } else {
+        await page.keyboard.down('Control')
+        await page.keyboard.press('z')
+        await page.keyboard.up('Control')
+      }
+      await expect(page.locator('#name')).toHaveValue('Some text')
+
+      // redo
+      if (os.platform() === 'darwin') {
+        await page.keyboard.down('Meta')
+        await page.keyboard.down('Shift')
+        await page.keyboard.press('z')
+        await page.keyboard.up('Shift')
+        await page.keyboard.up('Meta')
+      } else {
+        await page.keyboard.down('Control')
+        await page.keyboard.press('y')
+        await page.keyboard.up('Control')
+      }
+      await expect(page.locator('#name')).toHaveValue('Some text appended text')
+    })
+
+    test('should display a "show password" button on password inputs', async ({ page }) => {
+      await page.locator('#password').fill('password1')
+      await expect(page.locator('#password')).toHaveAttribute('type', 'password')
+
+      const inputContainer = page.locator('article form').nth(0).locator('div').nth(3)
+      await expect(inputContainer.locator('button.show')).toBeVisible()
+      await expect(inputContainer.locator('button.show')).toHaveAttribute('title', 'Show password')
+
+      // show password
+      await inputContainer.locator('button.show').click()
+      await expect(page.locator('#password')).toHaveAttribute('type', 'text')
+      await expect(page.locator('#password')).toHaveValue('password1')
+      await expect(inputContainer.locator('button.show')).toBeVisible()
+      await expect(inputContainer.locator('button.show')).toHaveAttribute('title', 'Hide password')
+
+      // hide again
+      await inputContainer.locator('button.show').click()
+      await expect(page.locator('#password')).toHaveAttribute('type', 'password')
+      await expect(page.locator('#password')).toHaveValue('password1')
+      await expect(inputContainer.locator('button.show')).toBeVisible()
+      await expect(inputContainer.locator('button.show')).toHaveAttribute('title', 'Show password')
+    })
+
+    test('should not display a "show password" button when [data-no-reveal] is present', async ({ page }) => {
+      await expect(page.locator('article form').nth(0).locator('div').nth(4).locator('input')).toHaveAttribute('type', 'password')
+      await expect(page.locator('article form').nth(0).locator('div').nth(4).locator('input')).toHaveAttribute('data-no-reveal')
+      await expect(page.locator('article form').nth(0).locator('div').nth(4).locator('button.show')).not.toBeVisible()
+    })
+
+    test('should allow buttons to be placed next to inputs and selects', async ({ page }) => {
+      let container = page.locator('article form').nth(0).locator('div').nth(33)
+      await expect(container.locator('input[type="text"]')).toBeVisible()
+      await expect(container.locator('input[type="submit"]')).toBeVisible()
+      await expect(container.locator('dd')).toHaveCSS('display', 'grid')
+      // TODO: find a way to test for grid-template-columns: 2fr 1fr; (toHaveCSS returns absolute values)
+
+      container = page.locator('article form').nth(0).locator('div').nth(39)
+      await expect(container.locator('select')).toBeVisible()
+      await expect(container.locator('button')).toBeVisible()
+      await expect(container.locator('dd')).toHaveCSS('display', 'grid')
+    })
+
+    test('should properly stylize checkbox and radio groups', async ({ page }) => {
+      // checkboxes
+      await expect(page.locator('.checkboxes').nth(0).locator('ul')).toHaveCSS('display', 'flex')
+      await expect(page.locator('.checkboxes').nth(0).locator('ul')).toHaveCSS('flex-direction', 'column')
+      await expect(page.locator('.checkboxes').nth(0).locator('ul')).toHaveCSS('list-style-type', 'none')
+
+      let container = page.locator('#checkboxes + section div').nth(0)
+      await expect(container.locator('dt label')).toBeVisible()
+
+      // radios
+      await expect(page.locator('.radios').nth(0).locator('ul')).toHaveCSS('display', 'flex')
+      await expect(page.locator('.radios').nth(0).locator('ul')).toHaveCSS('flex-direction', 'column')
+      await expect(page.locator('.radios').nth(0).locator('ul')).toHaveCSS('list-style-type', 'none')
+
+      container = page.locator('#radios + section div').nth(0)
+      await expect(container.locator('dt label')).toBeVisible()
+    })
+
+    test('should properly stylize single checkboxes and radios', async ({ page }) => {
+      await expect(page.locator('.singleCheckbox').nth(0)).toHaveCSS('display', 'grid')
+      await expect(page.locator('.singleRadio').nth(0)).toHaveCSS('display', 'grid')
+    })
+
+    test('should limit textarea rows using the [data-max-rows] attribute', async ({ page }) => {
+      await expect(page.locator('#textarea-max-rows')).toHaveAttribute('rows', '3')
+
+      // add more text to max-rows textarea
+      await page.locator('#textarea-max-rows').fill('1\n2\n3\n4\n5\n6\n7')
+      await expect(page.locator('#textarea-max-rows')).toHaveAttribute('rows', '3')
+    })
+
+    test('should enhance inputs with the [data-max-content] attribute', async ({ page, browserName }) => {
+      // TODO: remove this once firefox supports field sizing https://caniuse.com/wf-field-sizing
+      if (browserName === 'firefox') test.skip()
+
+      await expect(page.locator('#max-content-input')).toHaveCSS('field-sizing', 'content')
+      await expect(page.locator('#max-content-input')).toHaveCSS('max-width', 'max-content')
+
+      // capture initial width to be compared with after typing
+      const initialWidth = await page.evaluate(() => parseInt(window.getComputedStyle(document.querySelector('#max-content-input')).width))
+
+      await page.locator('#max-content-input').fill('This is some text that is longer than the previous text.')
+      const longerWidth = await page.evaluate(() => parseInt(window.getComputedStyle(document.querySelector('#max-content-input')).width))
+
+      expect(initialWidth).toBeLessThan(longerWidth)
+    })
+
+    test('should enhance selects with the [data-max-content] attribute', async ({ page, browserName }) => {
+      // TODO: remove this once firefox supports field sizing https://caniuse.com/wf-field-sizing
+      if (browserName === 'firefox') test.skip()
+
+      await expect(page.locator('#max-content-select')).toHaveCSS('field-sizing', 'content')
+      await expect(page.locator('#max-content-select')).toHaveCSS('max-width', 'max-content')
+
+      // capture initial width before switching to a longer text option
+      const initialWidth = await page.evaluate(() => parseInt(window.getComputedStyle(document.querySelector('#max-content-select')).width))
+
+      await page.locator('#max-content-select').selectOption({ index: 1 })
+      const longerWidth = await page.evaluate(() => parseInt(window.getComputedStyle(document.querySelector('#max-content-select')).width))
+
+      expect(initialWidth).toBeLessThan(longerWidth)
+    })
+
+    test('should enhance textareas with the [data-auto-grow] attribute', async ({ page, browserName }) => {
+      // TODO: remove this once firefox supports field sizing https://caniuse.com/wf-field-sizing
+      if (browserName === 'firefox') test.skip()
+
+      await expect(page.locator('#auto-grow-textarea')).toHaveCSS('field-sizing', 'content')
+
+      // begins with 1 line
+      await expect(page.locator('#auto-grow-textarea')).toHaveCSS('height', '38px')
+
+      // replace with 2 lines of text
+      await page.locator('#auto-grow-textarea').fill('1\n2')
+      await expect(page.locator('#auto-grow-textarea')).toHaveCSS('height', '62px')
+
+      // go back to 1 line of text
+      await page.locator('#auto-grow-textarea').fill('1')
+      await expect(page.locator('#auto-grow-textarea')).toHaveCSS('height', '38px')
+
+      // replace with 3 lines of text
+      await page.locator('#auto-grow-textarea').fill('1\n2\n3')
+      await expect(page.locator('#auto-grow-textarea')).toHaveCSS('height', '86px')
+
+      // pressing Shift+Enter should add a new line
+      await page.locator('#auto-grow-textarea').press('Shift+Enter')
+      await expect(page.locator('#auto-grow-textarea')).toHaveCSS('height', '110px')
+      await page.locator('#auto-grow-textarea').press('Enter')
+
+      // some required values should be invalid since a submit was attempted
+      await expect(page.locator('#password')).toHaveCSS('border', '1px solid rgb(255, 0, 0)')
+    })
+
+    test('should enhance inputs with the [data-auto-grow] attribute', async ({ page, browserName }) => {
+      // TODO: remove this once firefox supports field sizing https://caniuse.com/wf-field-sizing
+      if (browserName === 'firefox') test.skip()
+
+      await expect(page.locator('#auto-grow-input')).toHaveCSS('field-sizing', 'content')
+
+      // begins with one row
+      await expect(page.locator('#auto-grow-input')).toHaveCSS('height', '38px')
+
+      // replace with 2 lines of text
+      await page.locator('#auto-grow-input').fill('1\n2')
+      await expect(page.locator('#auto-grow-input')).toHaveCSS('height', '62px')
+
+      // go back to 1 line of text
+      await page.locator('#auto-grow-input').fill('1')
+      await expect(page.locator('#auto-grow-input')).toHaveCSS('height', '38px')
+
+      // replace with 3 lines of text
+      await page.locator('#auto-grow-input').fill('1\n2\n3')
+      await expect(page.locator('#auto-grow-input')).toHaveCSS('height', '86px')
+
+      // pressing Shift+Enter should add a new line
+      await page.locator('#auto-grow-input').press('Shift+Enter')
+      await expect(page.locator('#auto-grow-input')).toHaveCSS('height', '110px')
+      await page.locator('#auto-grow-input').press('Enter')
+
+      // some required values should be invalid since a submit was attempted
+      await expect(page.locator('#password')).toHaveCSS('border', '1px solid rgb(255, 0, 0)')
+    })
+
+    test('should enhance inputs with .align- classes', async ({ page }) => {
+      // inputs
+      await expect(page.locator('.align-start').nth(0)).toHaveCSS('justify-self', 'start')
+      await expect(page.locator('.align-center').nth(0)).toHaveCSS('justify-self', 'center')
+      await expect(page.locator('.align-end').nth(0)).toHaveCSS('justify-self', 'end')
+
+      // buttons
+      await expect(page.locator('.align-start').nth(1)).toHaveCSS('justify-self', 'start')
+      await expect(page.locator('.align-center').nth(1)).toHaveCSS('justify-self', 'center')
+      await expect(page.locator('.align-end').nth(1)).toHaveCSS('justify-self', 'end')
+    })
+
+    test('should allow custom keyboard shortcuts that focus inputs when pressed', async ({ page }) => {
+      const container = page.locator('#keyboard_shortcuts + dl')
+
+      // metactrl+P
+      await expect(container.locator('div').nth(0).locator('dd .focus-key')).toBeVisible()
+      await expect(container.locator('div').nth(0).locator('dd .focus-key kbd')).toHaveText(/(⌘|◆|Ctrl) P/)
+      await page.keyboard.press('ControlOrMeta+P')
+      await expect(page.locator('#custom-focus-input')).toBeFocused()
+
+      // alt+P
+      await expect(container.locator('div').nth(2).locator('dd .focus-key')).toBeVisible()
+      await expect(container.locator('div').nth(2).locator('dd .focus-key kbd')).toHaveText(/(⌥|⎇) P/)
+      await page.keyboard.press('Alt+P')
+      await expect(page.locator('#custom-focus-alt-input')).toBeFocused()
+
+      // meta+Y
+      await expect(container.locator('div').nth(3).locator('dd .focus-key')).toBeVisible()
+      await expect(container.locator('div').nth(3).locator('dd .focus-key kbd')).toHaveText(/(⌘|◆|⊞) Y/)
+      await page.keyboard.press('Meta+Y')
+      await expect(page.locator('#custom-focus-meta-input')).toBeFocused()
+
+      // metactrl+L
+      await expect(container.locator('div').nth(4).locator('dd .focus-key')).toBeVisible()
+      await expect(container.locator('div').nth(4).locator('dd .focus-key kbd')).toHaveText(/(⌘|◆|Ctrl) L/)
+      await page.keyboard.press('ControlOrMeta+L')
+      await expect(page.locator('#custom-focus-number')).toBeFocused()
+
+      // metactrl+!
+      await expect(container.locator('div').nth(5).locator('dd .focus-key')).toBeVisible()
+      await expect(container.locator('div').nth(5).locator('dd .focus-key kbd')).toHaveText(/(⌘|◆|Ctrl) !/)
+      await page.keyboard.press('ControlOrMeta+!')
+      await expect(page.locator('#custom-focus-textarea')).toBeFocused()
+
+      // alt+$ (this input already has a title and the shortcut is appended)
+      await expect(container.locator('div').nth(6).locator('dd .focus-key')).not.toBeVisible()
+      await expect(page.locator('#custom-focus-color')).toHaveAttribute('title', /This input has a keyboard shortcut! \((⌥|⎇|Ctrl) \+ \$\)/)
+
+      // metactrl+U
+      await expect(container.locator('div').nth(7).locator('dd .focus-key')).not.toBeVisible()
+      await expect(page.locator('#custom-focus-range')).toHaveAttribute('title', /Focus with (⌘|Ctrl) \+ U/)
+      await page.keyboard.press('ControlOrMeta+U')
+      await expect(page.locator('#custom-focus-range')).toBeFocused()
+
+      // metactrl+K
+      await expect(container.locator('div').nth(8).locator('dd .focus-key')).not.toBeVisible()
+      await expect(page.locator('#custom-focus-select')).toHaveAttribute('title', /Focus with (⌘|Ctrl) \+ K/)
+      await page.keyboard.press('ControlOrMeta+K')
+      await expect(page.locator('#custom-focus-select')).toBeFocused()
+    })
+  })
+
+  // TODO: the visual tests require more consideration for running within the CI
+  test.describe.skip('visual tests', () => {
+    test('input section should match visually', async ({ page }) => {
+      await expect(page.locator('#inputs + dl')).toHaveScreenshot('inputs_section.png')
+    })
+
+    test('select section should match visually', async ({ page }) => {
+      await expect(page.locator('#selects + dl')).toHaveScreenshot('select_section.png')
+    })
+
+    test('checkboxes section should match visually', async ({ page }) => {
+      await expect(page.locator('#checkboxes + section')).toHaveScreenshot('checkboxes_section.png')
+    })
+
+    test('radios section should match visually', async ({ page }) => {
+      await expect(page.locator('#radios + section')).toHaveScreenshot('radios_section.png')
+    })
+
+    test('other section should match visually', async ({ page }) => {
+      await expect(page.locator('#other + dl')).toHaveScreenshot('other_section.png')
+    })
+
+    test('alignment section should match visually', async ({ page }) => {
+      await expect(page.locator('#alignment_classes + section')).toHaveScreenshot('alignment_section.png')
+    })
+
+    test('keyboard shortcuts section should match visually', async ({ page }) => {
+      await expect(page.locator('#keyboard_shortcuts + dl')).toHaveScreenshot('keyboard_shortcuts_section.png')
+    })
+
+    test('tables should match visually', async ({ page }) => {
+      await expect(page.locator('#tables + section')).toHaveScreenshot('table_with_inputs.png')
+
+      await expect(page.locator('#semantic_table + section')).toHaveScreenshot('semantic_table.png')
+    })
+
+    test('nested fieldsets should match visually', async ({ page }) => {
+      await expect(page.locator('#nested_fieldsets + fieldset')).toHaveScreenshot('nested_fieldsets.png')
+    })
+
+    test('details should match visually', async ({ page }) => {
+      const details = page.locator('#details + details + details')
+      await details.locator('summary').click()
+      await expect(details).toHaveScreenshot('details.png')
+    })
+
+    test('buttons should match visually', async ({ page }) => {
+      await expect(page.locator('#buttons + section')).toHaveScreenshot('buttons.png')
+    })
+
+    test('colspan- classes should match visually', async ({ page }) => {
+      await expect(page.locator('#colspan_classes + section')).toHaveScreenshot('colspan_classes.png')
+    })
+
+    test('p tag elements should match visually', async ({ page }) => {
+      await expect(page.locator('#p_tag_elements + section')).toHaveScreenshot('p_tag_elements.png')
+    })
+  })
+})
diff --git a/test/tests.spec.js b/test/tests.spec.js
deleted file mode 100644
index 14402d4..0000000
--- a/test/tests.spec.js
+++ /dev/null
@@ -1,146 +0,0 @@
-const { test, expect } = require('@playwright/test')
-const os = require('os')
-const path = require('path')
-const fs = require('fs')
-const { spawnSync } = require('child_process')
-const express = require('express')
-let server
-
-test.describe('semantic forms', () => {
-  test.beforeAll(async () => {
-    if (!fs.existsSync('docs/node_modules')) {
-      spawnSync('npm', ['ci'], {
-        stdio: 'inherit',
-        cwd: 'docs'
-      })
-    }
-
-    if (!fs.existsSync('docs/public')) {
-      spawnSync('npm', ['run', 'd'], {
-        stdio: 'inherit',
-        cwd: 'docs'
-      })
-    }
-
-    spawnSync('npm', ['run', 'build'], {
-      stdio: 'inherit'
-    })
-
-    spawnSync('node', ['build.js', '--development-mode'], {
-      stdio: 'inherit',
-      cwd: 'docs'
-    })
-
-    const app = express()
-    app.use(express.static(path.resolve(__dirname, '../docs/public')))
-    server = app.listen(3000)
-  })
-
-  test.afterAll(async () => {
-    server.close()
-  })
-
-  test.beforeEach(async ({ page }) => {
-    page.on('console', msg => console.log(msg.text()))
-  })
-
-  test.afterEach(async ({ page }) => {
-    if (process.env.NYC_PROCESS_ID) {
-      // extract coverage data
-      const coverage = await page.evaluate(() => window.__coverage__)
-      // write coverage data to a file
-      if (coverage) fs.writeFileSync(path.join(process.cwd(), '.nyc_output', `coverage-${test.info().testId}.json`), JSON.stringify(coverage))
-    }
-  })
-
-  test('should progressively enhance semantic forms', async ({ page, browserName }) => {
-    await page.goto('http://localhost:3000/fullDemo.html')
-    const result = await page.evaluate(() => {
-      return document.getElementById('name').className === 'semanticform'
-    })
-    expect(result).toBe(true)
-  })
-
-  test('should test clear fields work', async ({ page, browserName }) => {
-    await page.goto('http://localhost:3000/fullDemo.html')
-    await page.focus('#name')
-    await page.fill('#name', 'Some text')
-    await page.click('#name ~ button.clear')
-    const result = await page.evaluate(() => {
-      return document.getElementById('name').value === ''
-    })
-    expect(result).toBe(true)
-  })
-
-  test('should test undoing clearing a field should work', async ({ page, browserName }) => {
-    await page.goto('http://localhost:3000/fullDemo.html')
-    await page.focus('#name')
-    await page.fill('#name', 'Some text')
-    await page.click('#name ~ button.clear')
-    if (os.platform() === 'darwin') {
-      await page.keyboard.down('Meta')
-      await page.keyboard.press('z')
-      await page.keyboard.up('Meta')
-    } else {
-      await page.keyboard.down('Control')
-      await page.keyboard.press('z')
-      await page.keyboard.up('Control')
-    }
-    const result = await page.evaluate(() => {
-      return document.getElementById('name').value === 'Some text'
-    })
-    expect(result).toBe(true)
-  })
-
-  test('should test undoing and redoing clearing a field works', async ({ page, browserName }) => {
-    if (browserName !== 'firefox') test.skip() // TODO: this test is broken in the chromium driver for some reason
-    await page.goto('http://localhost:3000/fullDemo.html')
-    const nameInput = page.locator('#name')
-    await nameInput.focus()
-    await nameInput.fill('Some text')
-    await page.click('#name ~ button.clear')
-
-    // undo
-    if (os.platform() === 'darwin') {
-      await page.keyboard.down('Meta')
-      await page.keyboard.press('z')
-      await page.keyboard.up('Meta')
-    } else {
-      await page.keyboard.down('Control')
-      await page.keyboard.press('z')
-      await page.keyboard.up('Control')
-    }
-
-    // append some extra text to the text field using type
-    await nameInput.fill('Some text appended text')
-
-    // undo
-    if (os.platform() === 'darwin') {
-      await page.keyboard.down('Meta')
-      await page.keyboard.press('z')
-      await page.keyboard.up('Meta')
-    } else {
-      await page.keyboard.down('Control')
-      await page.keyboard.press('z')
-      await page.keyboard.up('Control')
-    }
-
-    // redo
-    if (os.platform() === 'darwin') {
-      await page.keyboard.down('Meta')
-      await page.keyboard.down('Shift')
-      await page.keyboard.press('z')
-      await page.keyboard.up('Shift')
-      await page.keyboard.up('Meta')
-    } else {
-      await page.keyboard.down('Control')
-      await page.keyboard.press('y')
-      await page.keyboard.up('Control')
-    }
-
-    const result = await page.evaluate(() => {
-      return document.getElementById('name').value === 'Some text appended text'
-    })
-    expect(result).toBe(true)
-  })
-})