semantic-forms 5.3.5 → 5.3.7

package/package.json

@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/semantic-forms/graphs/contributors"
     }
   ],
-  "version": "5.3.5",
+  "version": "5.3.7",
   "files": [
     "dist",
     "semanticForms.scss",
@@ -26,30 +26,34 @@
   },
   "homepage": "https://rooseveltframework.org/docs/semantic-forms/latest",
   "license": "CC-BY-4.0",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "main": "semanticForms.js",
   "readmeFilename": "README.md",
   "devDependencies": {
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@playwright/test": "1.58.2",
-    "eslint": "10.0.0",
-    "eslint-plugin-html": "8.1.4",
-    "express": "5.2.1",
-    "nodemon": "3.1.11",
-    "nyc": "17.1.0",
-    "sass": "1.97.3",
-    "http-server": "14.1.1",
+    "@playwright/test": "1.63.0",
+    "eslint-plugin-html": "8.2.0",
+    "nyc": "18.0.0",
+    "sass": "1.104.1",
     "standard": "17.1.2",
-    "webpack-cli": "6.0.1"
+    "terser-webpack-plugin": "5.6.1",
+    "webpack": "5.111.0",
+    "webpack-cli": "7.2.3"
   },
   "scripts": {
+    "prepare": "npm run build",
     "build": "webpack && sass semanticForms.scss dist/semantic-forms.css",
     "watch": "webpack && sass --watch semanticForms.scss dist/semantic-forms.css",
-    "d": "nodemon dev-server.js --ext js,scss",
-    "dev": "nodemon dev-server.js --ext js,scss",
-    "development": "nodemon dev-server.js --ext js,scss",
+    "d": "node --watch-path=semanticForms.js --watch-path=lib --watch-path=semanticForms.scss --watch-path=styles --watch-path=docs/statics dev-server.js",
+    "dev": "node --watch-path=semanticForms.js --watch-path=lib --watch-path=semanticForms.scss --watch-path=styles --watch-path=docs/statics dev-server.js",
+    "development": "node --watch-path=semanticForms.js --watch-path=lib --watch-path=semanticForms.scss --watch-path=styles --watch-path=docs/statics dev-server.js",
     "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",
+    "test-visual": "playwright test --config=playwright.visual.config.js",
+    "test-visual-docker": "node visual-tests.js",
     "coverage": "webpack --env coverage && sass semanticForms.scss dist/semantic-forms.css && nyc playwright test && npm run build"
   },
   "standard": {
@@ -58,6 +62,16 @@
       "docs/public"
     ]
   },
+  "nyc": {
+    "include": [
+      "semanticForms.js",
+      "lib/**/*.js"
+    ],
+    "reporter": [
+      "text",
+      "html"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "git://github.com/rooseveltframework/semantic-forms.git"

package/semanticForms.js

@@ -1,7 +1,15 @@
 const { createKeyboardShortcut, shortcutListener } = require('./lib/keyboardShortcuts.js')
 const { enhanceInput, handleUndoRedo } = require('./lib/inputEnhancements.js')
+const { enhanceTabs } = require('./lib/tabs.js')
+const { setInkOffset } = require('./lib/helpers.js')
 
-const semanticForms = () => {
+// one observer per tree that has been handed to semanticForms, so that a shadow root gets its own without replacing the document's
+const observers = new WeakMap()
+
+// progressively enhances every semanticForms form in a tree
+//
+// root: document or shadow root to search; defaults to the main document
+const semanticForms = (root = document) => {
   // 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.')
@@ -13,12 +21,15 @@ const semanticForms = () => {
   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)')
+  const forms = root.querySelectorAll('form.semanticForms:not(.semanticFormsActive), table.semanticForms:not(.semanticFormsActive)')
 
   for (const form of forms) {
     form.classList.add('semanticFormsActive')
     if (form.classList.contains('lowFlow')) continue
 
+    // how far this font's letters sit from the middle of their own line box, which the stylesheet subtracts wherever it centers text. it is measured per form rather than per field, so that a form holding nothing but buttons is corrected too
+    setInkOffset(form, form)
+
     // update each input in the semantic form
     const inputs = Array.from(form.querySelectorAll('input, textarea, select'))
     for (const input of inputs) {
@@ -30,32 +41,46 @@ const semanticForms = () => {
         keyboardShortcuts.push(shortcut)
       }
     }
+
+    // done after the inputs so that anything sizing itself measures while it is still on screen
+    enhanceTabs(form)
   }
 
   // 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 => {
+  // monitor changes to this tree and enhance new semanticForms forms that get added to it
+  if (!observers.has(root)) {
+    const observer = 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()
+            semanticForms(root)
             stop = true
           }
         }
         if (stop) break
       }
     })
-    window.semanticFormsObserver.observe(document.body, { attributes: false, childList: true, characterData: false, subtree: true })
+
+    // a shadow root is observed directly; the document is observed through its body
+    observer.observe(root === document ? document.body : root, { attributes: false, childList: true, characterData: false, subtree: true })
+    observers.set(root, observer)
+
+    // long standing name for the document's observer, kept for anything already using it
+    if (root === document) window.semanticFormsObserver = observer
   }
 
   semanticForms.reinitialize = form => {
+    // with no form given this just rescans for forms that are not active yet
+    if (!form) return semanticForms(root)
+
     form.classList.remove('semanticFormsActive')
-    semanticForms()
+
+    // the form knows which tree it belongs to, so a form in a shadow root reinitializes there
+    semanticForms(form.getRootNode())
   }
 }
 

package/semanticForms.scss

@@ -2,6 +2,7 @@
 @use 'styles/inputs.scss';
 @use 'styles/labels.scss';
 @use 'styles/colspan.scss';
+@use 'styles/tabs.scss';
 @use 'styles/lowFlow.scss';
 
 .semanticForms {
@@ -66,7 +67,8 @@
       margin-bottom: 10px;
       line-height: 1;
       position: absolute;
-      top: 10px;
+      // the ink offset comes off here as it does elsewhere, so the words rather than the box holding them line up
+      top: calc(10px - var(--semanticFormsTextInkOffset, 0px));
       left: 22px;
       transition: top 250ms;
 
@@ -82,8 +84,10 @@
         border-style: solid;
         border-color: transparent transparent transparent var(--semanticFormsTextColor);
         position: absolute;
-        top: 0;
-        left: -10px;
+        // centered on the line of text beside it: the arrow is 0.8rem tall and the line is 1em, so half the difference puts it in the middle, less the measured ink offset because the letters do not sit in the middle of their own line either. it was pinned to the top of the line before
+        top: calc((1em - 0.8rem) / 2 + var(--semanticFormsFieldTextInkOffset, 0px));
+        // far enough from the words to read as a separate mark rather than part of the first letter
+        left: -14px;
         transform: rotate(0);
         transform-origin: .2rem 50%;
         transition: 250ms transform ease;
@@ -135,7 +139,7 @@
 
   dl {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), var(--semanticFormsInputColumnMaxWidth)));
     gap: 10px;
     margin: 0;
 
@@ -183,6 +187,11 @@
           padding-left: 11px;
           gap: 5px 10px;
 
+          // a switch is wider than a checkbox, so it needs a wider column to sit in
+          &:has(input[type=checkbox][switch]) {
+            grid-template-columns: 34px 1fr;
+          }
+
           // anything that is not the radio/checkbox and its label
           & > :not(input[type='checkbox'], input[type='radio'], label) {
             grid-column: 1 / -1;
@@ -257,7 +266,8 @@
             grid-column: 2 / 3;
             width: 100%;
             max-width: 100%;
-            padding: 10px; // reduce default padding to allow more button text to show
+            // reduced from the default so more of the button's text fits. the vertical halves carry the measured ink offset, as they do on every other control, so the words sit in the middle of the button rather than the box holding them sitting there
+            padding: calc(10px - var(--semanticFormsFieldTextInkOffset, 0px)) 10px calc(10px + var(--semanticFormsFieldTextInkOffset, 0px));
             height: var(--semanticFormsInputHeight);
             text-overflow: ellipsis;
             white-space: nowrap;