semantic-forms 5.1.0 → 5.1.2

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

@@ -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

@@ -534,7 +534,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.0",
+  "version": "5.1.2",
   "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.53.2",
-    "eslint": "9.30.1",
+    "@playwright/test": "1.54.2",
+    "eslint": "9.32.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')) {

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
 
@@ -247,6 +304,7 @@ form.semanticForms, form.semanticForms.light {
     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: 2px var(--semanticFormsButtonGradientDark) solid;
     border-radius: 20px;
     padding: 5px 25px;
@@ -326,7 +384,7 @@ form.semanticForms, form.semanticForms.light {
     margin-bottom: 15px;
 
     // nested fieldsets are darkened
-    > fieldset {
+    fieldset {
       background-color: var(--semanticFormsNestedFieldsetBgColor);
       border: var(--semanticFormsNestedFieldsetBorder);
 
@@ -351,7 +409,7 @@ form.semanticForms, form.semanticForms.light {
   @supports (scrollbar-color: auto) {
     textarea {
       scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
-
+      
       &::-webkit-resizer {
         border: none;
         background-image: var(--semanticFormsCustomResizer);
@@ -361,6 +419,10 @@ form.semanticForms, form.semanticForms.light {
         margin: 0 2px 2px 0;
       }
     }
+    
+    select[multiple] {
+      scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
+    }
   }
 
   // #region container layout
@@ -374,23 +436,53 @@ 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'], label) {
+          & > :not(input[type='checkbox'], input[type='radio'], label) {
             grid-column: 1 / -1;
           }
+
+          // 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;
+          }
         }
       }
 
@@ -467,7 +559,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 {
@@ -619,6 +711,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);
@@ -632,7 +725,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;
@@ -967,59 +1060,126 @@ form.semanticForms, form.semanticForms.light {
       }
     }
     // #endregion
-  }
 
-  // #region low flow form
-  &:not(.semanticFormsActive) {
-    dl {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
+    // #region low flow form
+    &.lowFlow {
+        gap: 5px;
 
-      dt {
-         max-width: 365px !important; /* this matches the max-width of js-enabled inputs */
+        dl {
+          grid-auto-flow: dense;
+        }
 
-        // add required asterisk
-        &:has(+ dd input:required) {
-          label::after {
-            content: ' *';
-            color: red;
-          }
+        // 1, 4, 7, ...
+        & > dt:nth-of-type(2n + 1),
+        & > dd:nth-of-type(2n + 1) {
+          grid-column: 1;
         }
-      }
 
+        // 2, 5, 8, ...
+        & > dt:nth-of-type(2n + 2),
+        & > dd:nth-of-type(2n + 2) {
+          grid-column: 2;
+        }
 
-      dd {
-        margin-bottom: 10px;
-        max-width: 365px !important; /* this matches the max-width of js-enabled inputs */
+        dt {
+           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;
+          // add required asterisk
+          &:has(+ dd input:required) {
+            label::after {
+              content: ' *';
+              color: red;
+            }
           }
         }
 
-        // 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;
-          font-size: small;
-          color: var(--semanticFormsPlaceholderColor);
+        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;
+            font-size: small;
+            color: var(--semanticFormsPlaceholderColor);
+          }
         }
       }
+
+      .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;
+  }
 
-    .checkboxes ul,
-    .radios ul {
-      margin-top: calc(var(--semanticFormsInputTopMargin) / 2);
+  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;
+      }
     }
   }
-  // #endregion
+
+  // adjust styling of button menus in tables
+  menu:has(li > input, li > label, li > button, li > select, li > textarea) {
+    width: max-content;
+  }
+  
 }
+// #endregion