semantic-forms 5.1.1 → 5.1.3

package/docs/statics/pages/layouts/main.html

@@ -8,12 +8,12 @@
     <meta name="description" content="Describe your website here">
     <!--! this inline script makes it possible for check-if-CSS-is-disabled to listen for any CSS files that fail to load -->
     <script>window.addEventListener('error', (event) => { if (event?.target?.tagName === 'LINK') { window.linkTagError = true } }, true)</script>
-    <link rel="preload" href="/css/styles.css" as="style">
-    <link rel="preload" href="/js/main.js" as="script">
-    <link rel="stylesheet" href="/css/styles.css">
+    <link rel="preload" href="/css/semantic-forms-styles.css" as="style">
+    <link rel="preload" href="/js/semantic-forms-main.js" as="script">
+    <link rel="stylesheet" href="/css/semantic-forms-styles.css">
     <link rel="stylesheet" href="/css/highlight.js.light.css">
     <link rel="stylesheet" href="/css/highlight.js.dark.css" media="(prefers-color-scheme: dark)">
-    <script src="/js/main.js" defer></script>
+    <script src="/js/semantic-forms-main.js" defer></script>
   </head>
   <body class="no-js" id="semantic-forms-usage">
     <main>
@@ -25,6 +25,7 @@
         <ul>
           <li><a href="/index.html">About</a></li>
           <li><a href="/usage.html">Usage</a></li>
+          <li><a href="/fullDemo.html">Full demo</a></li>
         </ul>
       </nav>
       {pageContent|s}

package/docs/statics/pages/usage.html

@@ -503,6 +503,26 @@
         </dl>
       </form>
 
+      <h4 id="rangeInputsThatDisplayValues">Range inputs that display values</h4>
+
+      <p>Add a class of <code>displayValue</code> to any <code><!--#<input type="range">--></code> element to make its value display on the label:</p>
+
+      <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>
+  </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>
+        </dl>
+      </form>
+
       <h3 id="lightanddarkmode">Light mode and dark mode</h3>
 
       <p>Light mode and dark mode will be detected automatically based on operating system preference. To set it manually, you can apply an additional class of <code>light</code> or <code>dark</code> to your <code><!--#<form>--></code> elements to force the mode.</p>
@@ -534,7 +554,7 @@ form.semanticForms {
 
       <h3 id="more">More</h3>
 
-      <p>See a page demoing all features <a href="https://rooseveltframework.github.io/semantic-forms/test/semanticForms.html">here</a>.</p>
+      <p>See a page demoing all features <a href="https://rooseveltframework.org/docs/semantic-forms/latest/fullDemo/">here</a>.</p>
     </article>
   </arg>
 </include>

package/package.json

@@ -8,11 +8,11 @@
       "url": "https://github.com/rooseveltframework/semantic-forms/graphs/contributors"
     }
   ],
-  "version": "5.1.1",
+  "version": "5.1.3",
   "files": [
     "dist",
     "semanticForms.scss",
-    "docs/statics/pages",
+    "docs/statics",
     "*.md"
   ],
   "homepage": "https://rooseveltframework.org/docs/semantic-forms/latest",
@@ -21,25 +21,25 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@playwright/test": "1.54.1",
-    "eslint": "9.31.0",
+    "@playwright/test": "1.54.2",
+    "eslint": "9.33.0",
     "eslint-plugin-html": "8.1.3",
     "express": "5.1.0",
     "nodemon": "3.1.10",
     "nyc": "17.1.0",
-    "sass": "1.89.2",
-    "serve": "14.2.4",
+    "sass": "1.90.0",
+    "http-server": "14.1.1",
     "standard": "17.1.2",
     "webpack-cli": "6.0.1"
   },
   "scripts": {
     "build": "webpack && sass semanticForms.scss dist/semantic-forms.css",
     "watch": "webpack && sass --watch semanticForms.scss dist/semantic-forms.css",
-    "d": "nodemon --exec \"npm run build && serve\"",
-    "dev": "nodemon --exec \"npm run build && serve\"",
-    "development": "nodemon --exec \"npm run build && serve\"",
-    "lint": "standard && standard --plugin html test/*.html",
-    "lint-fix": "standard --fix && standard --plugin html test/*.html --fix",
+    "d": "nodemon dev-server.js --ext js,scss",
+    "dev": "nodemon dev-server.js --ext js,scss",
+    "development": "nodemon dev-server.js --ext js,scss",
+    "lint": "standard && standard --plugin html docs/statics/pages/*.html",
+    "lint-fix": "standard --fix && standard --plugin html docs/statics/pages/*.html --fix",
     "test": "npm run build && playwright test",
     "coverage": "webpack --env coverage && sass semanticForms.scss dist/semantic-forms.css && nyc playwright test && npm run build"
   },

package/semanticForms.js

@@ -68,6 +68,14 @@ const semanticForms = () => {
               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')) {
@@ -141,7 +149,7 @@ const semanticForms = () => {
             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', (event) => {
+            clearBtn.addEventListener('click', () => {
               input.previousValue = input.value
               input.value = ''
               input.focus()
@@ -149,7 +157,7 @@ const semanticForms = () => {
             })
             insertAfter(clearBtn, dd.querySelector('label'))
           }
-          input.addEventListener('focus', (event) => {
+          input.addEventListener('focus', event => {
             if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target
           })
           // #endregion
@@ -171,14 +179,24 @@ const semanticForms = () => {
         // handle file input clear btn, cannot be handled with CSS
         if (type === 'file') {
           const clearBtn = input.parentElement.querySelector('.clear')
-          input.addEventListener('input', e => {
-            clearBtn.style.display = e.target.files.length ? 'flex' : 'none'
+          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')
@@ -194,7 +212,7 @@ const semanticForms = () => {
             console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)
             continue
           }
-          showBtn.addEventListener('click', (event) => {
+          showBtn.addEventListener('click', () => {
             if (input.type === 'password') {
               showBtn.innerHTML = passwordHide
               showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password'
@@ -240,7 +258,7 @@ const semanticForms = () => {
   // handle undo/redo
   let lastFocusedInput
   let lastClearFieldPressed
-  document.addEventListener('keydown', (event) => {
+  document.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) {
       // undo clearing a field
       if (lastFocusedInput) {
@@ -266,7 +284,7 @@ const semanticForms = () => {
 
   // monitor changes to the DOM and enhance new semanticForms forms that get added
   if (!window.semanticFormsObserver) {
-    window.semanticFormsObserver = new window.MutationObserver((mutations) => {
+    window.semanticFormsObserver = new window.MutationObserver(mutations => {
       let stop = false
       for (const mutation of mutations) {
         for (const node of mutation.addedNodes) {
@@ -281,7 +299,7 @@ const semanticForms = () => {
     window.semanticFormsObserver.observe(document.body, { attributes: false, childList: true, characterData: false, subtree: true })
   }
 
-  semanticForms.reinitialize = (form) => {
+  semanticForms.reinitialize = form => {
     form.classList.remove('semanticFormsActive')
     semanticForms()
   }

package/semanticForms.scss

@@ -1,5 +1,5 @@
 // #region global styles
-form.semanticForms, form.semanticForms.light {
+form.semanticForms, form.semanticForms.light, table.semanticForms {
   --semanticFormsFontFamily: sans-serif;
   --semanticFormsFormBgColor: #fff;
   --semanticFormsFormSubBgColor: #f5f5f5;
@@ -22,8 +22,14 @@ form.semanticForms, form.semanticForms.light {
   --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")
+  --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 {
@@ -42,8 +48,14 @@ form.semanticForms, form.semanticForms.light {
   --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%);
@@ -53,7 +65,7 @@ form.semanticForms, form.semanticForms.light {
 @media (prefers-color-scheme: dark) {
   html:not(.light) {
     body:not(.light) {
-      form.semanticForms {
+      form.semanticForms, table.semanticForms {
         @include dark-mode;
       }
     }
@@ -62,21 +74,27 @@ form.semanticForms, form.semanticForms.light {
 
 html:not(.light) {
   body:not(.light) {
-    form.semanticForms.dark {
+    form.semanticForms.dark, table.semanticForms.dark {
       @include dark-mode;
     }
   }
 }
 // #endregion
 
-form.semanticForms, form.semanticForms.light {
+form.semanticForms,
+form.semanticForms.light,
+table.semanticForms,
+table.semanticForms.light {
   font-family: var(--semanticFormsFontFamily);
   width: 100%;
   container-type: inline-size;
   container-name: semanticForm;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+
+  &:not(table) {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
 
   // style reset
   fieldset,
@@ -175,14 +193,35 @@ form.semanticForms, form.semanticForms.light {
 
   select {
     cursor: pointer;
-    // 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;
+
+    &: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;
+    }
+
+    &[multiple] {
+      min-height: 38px;
+      height: 100px;
+      padding: 0 !important;
+
+      option {
+        padding: 6px 20px;
+
+        &:first-of-type {
+          border-top-left-radius: var(--semanticFormsBorderRadius);
+        }
+
+        &:last-of-type {
+          border-bottom-left-radius: var(--semanticFormsBorderRadius);
+        }
+      }
+    }
   }
 
   textarea {
@@ -192,9 +231,27 @@ form.semanticForms, form.semanticForms.light {
     height: 100px;
   }
 
-  // hide native cancel button
-  input[type="search"]::-webkit-search-cancel-button {
-    display: none;
+  input[type="search"] {
+    background: var(--semanticFormsSearchIcon) no-repeat 10px;
+    background-color: var(--semanticFormsFormBgColor);
+    background-size: 18px;
+    padding-left: 32px !important; // shift values to the right
+
+    & + label.floatLabelFormAnimatedLabel {
+      left: 32px !important; // override float label
+    }
+
+    &:focus,
+    &:not(:placeholder-shown) {
+      & + label.floatLabelFormAnimatedLabel {
+        left: 20px !important;
+      }
+    }
+
+    // hide native cancel button
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
   }
   // #endregion
 
@@ -253,6 +310,7 @@ form.semanticForms, form.semanticForms.light {
     padding: 5px 25px;
     font-size: 100%;
     line-height: 1;
+    user-select: none;
 
     &:active {
       background-image: linear-gradient(to bottom, var(--semanticFormsButtonGradientDark) 0%, var(--semanticFormsButtonGradientLight) 100%);
@@ -362,6 +420,10 @@ form.semanticForms, form.semanticForms.light {
         margin: 0 2px 2px 0;
       }
     }
+
+    select[multiple] {
+      scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
+    }
   }
 
   // #region container layout
@@ -375,22 +437,52 @@ form.semanticForms, form.semanticForms.light {
     dd {
       position: relative;
 
+      &.checkboxes, &.radios {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        // checkbox subtext
+        & > label {
+          padding-left: 20px;
+          font-size: small;
+          color: var(--semanticFormsTextColor);
+        }
+      }
+
       &:not(.checkboxes, .radios) {
         gap: 10px;
         max-width: 100%;
 
-        // places all items within the <dd> horizontally
-        &:not(.singleCheckbox) {
+        // places all items within the <dd> vertically
+        &:not(.singleCheckbox, .singleRadio) {
           display: flex;
           flex-direction: column;
         }
 
-        &.singleCheckbox {
-          display: flex;
+        &.singleCheckbox,
+        &.singleRadio {
+          display: grid;
+          grid-template-columns: 15px 1fr;
           align-items: center;
+          padding-left: 11px;
+
+          & > :not(input[type='checkbox'], input[type='radio'], label) {
+            grid-column: 1 / -1;
+          }
 
-          & > :not(input[type='checkbox'], label) {
+          // single checkbox subtext
+          label:nth-of-type(2) {
             grid-column: 1 / -1;
+            padding-left: 20px;
+            font-size: small;
+            color: var(--semanticFormsTextColor);
+          }
+        }
+
+        &.singleRadio {
+          input {
+            margin: 0;
           }
         }
       }
@@ -468,7 +560,7 @@ form.semanticForms, form.semanticForms.light {
       max-width: 100%;
       max-width: 365px;
 
-      dd:not(.singleCheckbox, .checkboxes, .radios) {
+      dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) {
         input:not([type='submit'], [type='reset'], [type='image']),
         select,
         textarea {
@@ -620,6 +712,7 @@ form.semanticForms, form.semanticForms.light {
         position: relative;
 
         label {
+          z-index: 2; // ensure the hoverable icon is interactable
           user-select: auto;
           color: var(--semanticFormsTextColor);
           font-size: var(--semanticFormsInputFontSize);
@@ -633,7 +726,7 @@ form.semanticForms, form.semanticForms.light {
           text-overflow: ellipsis;
           min-width: 0;
           width: calc(100% + 20px);
-          
+
           // TODO: remove this? // &:has(span.help) {
             // width: 100%;
             // padding-right: 20px;
@@ -976,22 +1069,22 @@ form.semanticForms, form.semanticForms.light {
         dl {
           grid-auto-flow: dense;
         }
-  
+
         // 1, 4, 7, ...
         & > dt:nth-of-type(2n + 1),
         & > dd:nth-of-type(2n + 1) {
           grid-column: 1;
         }
-  
+
         // 2, 5, 8, ...
         & > dt:nth-of-type(2n + 2),
         & > dd:nth-of-type(2n + 2) {
           grid-column: 2;
         }
-  
+
         dt {
            min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
-  
+
           // add required asterisk
           &:has(+ dd input:required) {
             label::after {
@@ -1000,26 +1093,26 @@ form.semanticForms, form.semanticForms.light {
             }
           }
         }
-  
-  
+
+
         dd {
           margin-bottom: 10px;
           min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
-  
+
           // nudge single checkboxes to match checkbox groups
           &:not(.checkboxes) {
             input[type=checkbox] {
               margin-left: 10px;
             }
           }
-  
+
           // remove "x" padding
           input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
           select,
           textarea {
             padding-right: 6px;
           }
-  
+
           // subtext
           label {
             margin-top: -5px;
@@ -1028,11 +1121,66 @@ form.semanticForms, form.semanticForms.light {
           }
         }
       }
-  
+
       .checkboxes ul,
       .radios ul {
-        margin-top: calc(var(--semanticFormsInputTopMargin) / 2);
+        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;
+      }
+    }
+  }
+
+  // adjust styling of button menus in tables
+  menu:has(li > input, li > label, li > button, li > select, li > textarea) {
+    width: max-content;
+  }
+
+}
+// #endregion