semantic-forms 5.1.10 → 5.1.12

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 5.1.12
+
+- Fixed a visual bug with details element arrows.
+- Added the ability to place buttons and submit inputs next to other form inputs.
+- Added the ability to allow fixed-width form elements to grow with their content using the `data-max-content` attribute.
+- Added the ability to create one-line textareas that grow in height using the `data-auto-grow` attribute.
+
+## 5.1.11
+
+- Fixed offset of `button-link` elements when in menus.
+
 ## 5.1.10
 
 - Added ability to style links to look like Semantic Forms buttons using the `button-link` class.

package/dist/semantic-forms.cjs

@@ -6,11 +6,11 @@
   \**************************/
 /***/module=>{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;margin-top:1px;"><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"];
+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"];
 // progressively enhance form elements that have the semanticForms class
 const forms=document.querySelectorAll("form.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(const input of inputs){
+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
@@ -22,17 +22,26 @@ let dd=input.parentNode;while(dd&&dd.nodeName!=="DD")dd=dd.parentNode;if(!dd){co
 // 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{const newLabel=document.createElement("label");newLabel.setAttribute("for",input.id);newLabel.className="floatLabelFormAnimatedLabel";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
-// standard inputs
-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 clear button
+// #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)}div.append(dt,dd);dl.append(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);
 // 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
@@ -62,6 +71,11 @@ const rows=Math.round((scrollHeight-blockPadding)/lineHeight);
 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)input.style.height=input.scrollHeight+"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()}}}}
 /**

package/dist/semantic-forms.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"semantic-forms.cjs","mappings":"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","sources":["webpack://semanticForms/webpack/universalModuleDefinition","webpack://semanticForms/./semanticForms.js","webpack://semanticForms/webpack/bootstrap","webpack://semanticForms/webpack/startup"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"semanticForms\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"semanticForms\"] = factory();\n\telse\n\t\troot[\"semanticForms\"] = factory();\n})(this, () => {\nreturn ","const semanticForms = () => {\n  // do some feature detection so none of the JS executes if the browser is too old\n  if (typeof document.getElementsByClassName !== 'function' || typeof document.querySelector !== 'function' || !document.body.classList || !window.MutationObserver) {\n    console.warn('semantic-forms was loaded into an unsupported browser and will not execute.')\n    return\n  }\n\n  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>'\n  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>'\n  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;margin-top:1px;\"><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>'\n\n  const nodeNameLookup = ['TEXTAREA', 'SELECT']\n  const inputTypeLookup = ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week']\n\n  // progressively enhance form elements that have the semanticForms class\n  const forms = document.querySelectorAll('form.semanticForms:not(.semanticFormsActive)')\n\n  for (const form of forms) {\n    form.classList.add('semanticFormsActive')\n    if (form.classList.contains('lowFlow')) continue\n\n    // update each input in the semantic form\n    const inputs = Array.from(form.querySelectorAll('input, textarea, select'))\n    for (const input of inputs) {\n      // ignore input if it has previously been formatted\n      if (input.classList.contains('semanticform') || !input.id) continue\n\n      const type = input.getAttribute('type')\n      if (nodeNameLookup.includes(input.nodeName) || inputTypeLookup.includes(type)) {\n        // recursively find <dl> element\n        let dl = input.parentNode\n        while (dl && dl.nodeName !== 'DL') dl = dl.parentNode\n\n        if (!dl) continue\n        if (!dl.classList.contains('floatLabelForm')) dl.classList.add('floatLabelForm')\n\n        const label = input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio')\n          ? document.querySelector('label[data-for=' + input.parentNode.parentNode.id.replace(/\\./g, '\\\\.') + ']')\n          : document.querySelector('label[for=' + input.id.replace(/\\./g, '\\\\.') + ']')\n\n        if (!label) {\n          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.`)\n        }\n\n        input.classList.add('semanticform')\n\n        // #region create labels\n\n        if (type === 'checkbox' || type === 'radio') {\n          // recursively find <dd> element\n          let dd = input.parentNode\n          while (dd && dd.nodeName !== 'DD') dd = dd.parentNode\n\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)\n            continue\n          }\n\n          if (dd.firstChild.nodeName !== 'LABEL') {\n            const newLabel = document.createElement('label')\n            newLabel.className = 'floatLabelFormAnimatedLabel'\n\n            if (type === 'checkbox' && input.parentNode.nodeName === 'DD') {\n              newLabel.setAttribute('for', input.id)\n              input.parentNode.classList.add('singleCheckbox')\n              newLabel.className = ''\n              label.setAttribute('hidden', 'hidden')\n              insertAfter(newLabel, input)\n            }\n\n            if (type === 'radio' && input.parentNode.nodeName === 'DD') {\n              newLabel.setAttribute('for', input.id)\n              input.parentNode.classList.add('singleRadio')\n              newLabel.className = ''\n              label.setAttribute('hidden', 'hidden')\n              insertAfter(newLabel, input)\n            }\n\n            newLabel.innerHTML = label.innerHTML\n\n            if (label.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {\n              const text = label.getAttribute('title')\n              label.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n              newLabel.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n            }\n\n            if (dd.querySelector(':required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {\n              const text = label.getAttribute('data-asterisk-text') || 'This field is required.'\n              label.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n              newLabel.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n            }\n\n            if (!dd.querySelector('label')) dd.append(newLabel)\n          }\n\n          // removes old div that a radio or checkbox may have been added to\n          if (dd.parentElement.nodeName === 'DIV') dd.parentElement.remove()\n\n          const div = document.createElement('div')\n          div.append(label.closest('dt'), dd)\n          dl.append(div)\n        } else {\n          const newLabel = document.createElement('label')\n          newLabel.setAttribute('for', input.id)\n          newLabel.className = 'floatLabelFormAnimatedLabel'\n\n          newLabel.innerHTML = label.innerHTML\n\n          if (input.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {\n            const text = input.getAttribute('title')\n            newLabel.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n          }\n\n          if (input.hasAttribute('required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {\n            const text = label.getAttribute('data-asterisk-text') || 'This field is required.'\n            newLabel.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n          }\n\n          label.setAttribute('hidden', 'hidden')\n\n          insertAfter(newLabel, input)\n        }\n        // #endregion\n\n        // standard inputs\n        if (type !== 'checkbox' && type !== 'radio') {\n          if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ')\n\n          const div = document.createElement('div')\n          const dt = label.closest('dt')\n          const dd = input.closest('dd')\n\n          if (!dt) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding <dt> element.`)\n            continue\n          }\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding <dd> element.`)\n            continue\n          }\n\n          // #region clear button\n          if (input.nodeName !== 'SELECT' && type !== 'range') {\n            const clearBtn = document.createElement('button')\n            clearBtn.type = 'button'\n            clearBtn.title = input.getAttribute('data-clear-field-text') || 'Clear field'\n            clearBtn.ariaLabel = input.getAttribute('data-clear-field-text') || 'Clear field'\n            clearBtn.tabIndex = -1\n            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\" />'\n            clearBtn.classList.add('clear')\n            clearBtn.id = `semanticFormsClearButton_${input.id}`\n            clearBtn.addEventListener('click', () => {\n              input.previousValue = input.value\n              input.value = ''\n              input.focus()\n              lastClearFieldPressed = input.id\n\n              // used for any other updates required by various inputs\n              input.dispatchEvent(new Event('input', { bubbles: true }))\n            })\n            insertAfter(clearBtn, dd.querySelector('label'))\n          }\n          input.addEventListener('focus', event => {\n            if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target\n          })\n          // #endregion\n\n          // check for colspan- utility class\n          if (/colspan-/.test(dd.className)) {\n            const match = dd.className.match(/colspan-([0-9]|full)/)[0]\n            dd.classList.remove(match)\n            div.classList.add(match)\n          }\n\n          div.append(dt, dd)\n          dl.append(div)\n\n          // determine visibility of newly created <div>\n          if (dt.style.display === 'none' && dd.style.display === 'none') div.style.display = 'none'\n        }\n\n        // handle file input clear btn, cannot be handled with CSS\n        if (type === 'file') {\n          const clearBtn = input.parentElement.querySelector('.clear')\n          input.addEventListener('input', event => {\n            clearBtn.style.display = event.target.files.length ? 'flex' : 'none'\n          })\n          clearBtn.addEventListener('click', () => {\n            clearBtn.style.display = 'none'\n          })\n        }\n\n        // handle range inputs with a class to display the value\n        if (type === 'range' && input.classList.contains('displayValue')) {\n          const label = input.parentNode.parentNode.querySelector('dd label')\n          label.innerHTML += `<span class=\"seperator\">: </span><output>${input.value}</output>`\n          input.addEventListener('input', event => {\n            const output = event.target.parentNode.parentNode.querySelector('output')\n            output.innerHTML = event.target.value\n          })\n        }\n\n        // #region show password button\n        if (type === 'password' && input.getAttribute('data-no-reveal') === null) {\n          const showBtn = document.createElement('button')\n          showBtn.type = 'button'\n          showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'\n          showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'\n          showBtn.tabIndex = -1\n          showBtn.innerHTML = passwordShow\n          showBtn.classList.add('show')\n          showBtn.id = `semanticFormsShowButton_${input.id}`\n          const dd = input.closest('dd')\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)\n            continue\n          }\n          showBtn.addEventListener('click', () => {\n            if (input.type === 'password') {\n              showBtn.innerHTML = passwordHide\n              showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password'\n              showBtn.ariaLabel = input.getAttribute('data-hide-password-text') || 'Hide password'\n              input.type = 'text'\n            } else {\n              showBtn.innerHTML = passwordShow\n              showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'\n              showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'\n              input.type = 'password'\n            }\n            input.focus()\n          })\n          insertAfter(showBtn, dd.querySelector('label'))\n        }\n        // #endregion\n\n        // add listener to shift clear button when scrollbar present\n        if (input.nodeName === 'TEXTAREA') {\n          if (input.getAttribute('data-disable-autosize') === null) {\n            // add auto-sizing\n            input.style.setProperty('resize', 'none')\n            input.style.setProperty('min-height', '0')\n            input.style.setProperty('max-height', 'none')\n            input.style.setProperty('height', 'auto')\n\n            const handleInput = () => {\n              // reset rows attribute to get accurate scrollHeight\n              let maxRows = input.getAttribute('data-max-rows')\n\n              if (maxRows) {\n                if (isNaN(maxRows) || Number(maxRows) <= 0) {\n                  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')}`)\n                  maxRows = null\n                }\n              }\n\n              const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5'\n              input.setAttribute('rows', minRows)\n\n              // get the computed values object reference\n              const style = window.getComputedStyle(input)\n\n              // 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)\n              const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right'])\n              const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width'])\n              input.style.setProperty('overflow', 'hidden', 'important')\n              input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px')\n              input.style.setProperty('box-sizing', 'content-box')\n              input.style.setProperty('padding-inline', '0')\n              input.style.setProperty('border-width', '0')\n\n              // get the base line height, and top / bottom padding\n              const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom'])\n              const lineHeight = style['line-height'] === 'normal'\n                ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box)\n                : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value\n\n              // get the scroll height (rounding to be safe to ensure cross browser consistency)\n              const scrollHeight = Math.round(input.scrollHeight)\n\n              // undo overflow, width, border-width, box-sizing & inline padding overrides\n              input.style.removeProperty('width')\n              input.style.removeProperty('box-sizing')\n              input.style.removeProperty('padding-inline')\n              input.style.removeProperty('border-width')\n              input.style.removeProperty('overflow')\n\n              // 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\n              const rows = Math.round((scrollHeight - blockPadding) / lineHeight)\n\n              // set the calculated rows attribute (limited by rowLimit)\n              if (maxRows) {\n                input.setAttribute('rows', '' + Math.min(rows, Number(maxRows)))\n              } else {\n                input.setAttribute('rows', '' + rows)\n              }\n            }\n\n            input.addEventListener('input', handleInput)\n\n            // trigger the event to set the initial rows value\n            input.dispatchEvent(new Event('input', { bubbles: true }))\n          }\n\n          // shifts the clear button to the right if a scrollbar is present\n          const shiftClearBtn = () => {\n            const clearBtn = input.parentElement?.querySelector('button.clear')\n            if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : ''\n          }\n          input.addEventListener('input', shiftClearBtn)\n          input.addEventListener('mouseup', shiftClearBtn)\n          shiftClearBtn()\n        }\n      }\n    }\n  }\n\n  /**\n   * Places an element immediately after another element\n   * @param {Object} newNode element being placed after the reference node\n   * @param {*} referenceNode element to be used as reference for new node\n   */\n  function insertAfter (newNode, referenceNode) {\n    if (referenceNode.nextSibling) referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)\n    else referenceNode.parentNode.appendChild(newNode)\n  }\n\n  // handle undo/redo\n  let lastFocusedInput\n  let lastClearFieldPressed\n  document.addEventListener('keydown', event => {\n    if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) {\n      // undo clearing a field\n      if (lastFocusedInput) {\n        if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {\n          if (lastFocusedInput.previousValue) {\n            lastFocusedInput.redoValue = lastFocusedInput.value\n            lastFocusedInput.value = lastFocusedInput.previousValue\n          }\n        }\n      }\n    } else if ((event.ctrlKey && event.key === 'y') || (event.metaKey && event.shiftKey && event.key === 'z')) {\n      // redo clearing a field\n      if (lastFocusedInput) {\n        if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {\n          if (lastFocusedInput.redoValue) {\n            lastFocusedInput.previousValue = lastFocusedInput.value\n            lastFocusedInput.value = lastFocusedInput.redoValue\n          }\n        }\n      }\n    }\n  })\n\n  // monitor changes to the DOM and enhance new semanticForms forms that get added\n  if (!window.semanticFormsObserver) {\n    window.semanticFormsObserver = new window.MutationObserver(mutations => {\n      let stop = false\n      for (const mutation of mutations) {\n        for (const node of mutation.addedNodes) {\n          if (node.nodeName === 'FORM' || node?.querySelector?.('form')) {\n            semanticForms()\n            stop = true\n          }\n        }\n        if (stop) break\n      }\n    })\n    window.semanticFormsObserver.observe(document.body, { attributes: false, childList: true, characterData: false, subtree: true })\n  }\n\n  semanticForms.reinitialize = form => {\n    form.classList.remove('semanticFormsActive')\n    semanticForms()\n  }\n}\n\nmodule.exports = semanticForms\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(\"./semanticForms.js\");\n"],"names":["root","factory","exports","module","define","amd","this","semanticForms","document","getElementsByClassName","querySelector","body","classList","window","MutationObserver","console","warn","passwordShow","passwordHide","helpTextIcon","nodeNameLookup","inputTypeLookup","forms","querySelectorAll","form","add","contains","inputs","Array","from","input","id","type","getAttribute","includes","nodeName","dl","parentNode","label","replace","error","dd","firstChild","newLabel","createElement","className","setAttribute","insertAfter","innerHTML","hasAttribute","text","append","parentElement","remove","div","closest","dt","clearBtn","title","ariaLabel","tabIndex","addEventListener","previousValue","value","focus","lastClearFieldPressed","dispatchEvent","Event","bubbles","event","target","lastFocusedInput","test","match","style","display","files","length","output","showBtn","setProperty","handleInput","maxRows","isNaN","Number","minRows","getComputedStyle","inlinePadding","parseFloat","inlineBorderWidth","width","blockPadding","lineHeight","height","scrollHeight","Math","round","removeProperty","rows","min","shiftClearBtn","marginRight","clientHeight","newNode","referenceNode","nextSibling","insertBefore","appendChild","ctrlKey","metaKey","key","shiftKey","name","redoValue","semanticFormsObserver","mutations","stop","mutation","node","addedNodes","observe","attributes","childList","characterData","subtree","reinitialize","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","__webpack_exports__"],"sourceRoot":""}
+{"version":3,"file":"semantic-forms.cjs","mappings":"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","sources":["webpack://semanticForms/webpack/universalModuleDefinition","webpack://semanticForms/./semanticForms.js","webpack://semanticForms/webpack/bootstrap","webpack://semanticForms/webpack/startup"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"semanticForms\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"semanticForms\"] = factory();\n\telse\n\t\troot[\"semanticForms\"] = factory();\n})(this, () => {\nreturn ","const semanticForms = () => {\n  // do some feature detection so none of the JS executes if the browser is too old\n  if (typeof document.getElementsByClassName !== 'function' || typeof document.querySelector !== 'function' || !document.body.classList || !window.MutationObserver) {\n    console.warn('semantic-forms was loaded into an unsupported browser and will not execute.')\n    return\n  }\n\n  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>'\n  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>'\n  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>'\n\n  const nodeNameLookup = ['TEXTAREA', 'SELECT']\n  const inputTypeLookup = ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week']\n\n  // progressively enhance form elements that have the semanticForms class\n  const forms = document.querySelectorAll('form.semanticForms:not(.semanticFormsActive)')\n\n  for (const form of forms) {\n    form.classList.add('semanticFormsActive')\n    if (form.classList.contains('lowFlow')) continue\n\n    // update each input in the semantic form\n    const inputs = Array.from(form.querySelectorAll('input, textarea, select'))\n    for (let input of inputs) {\n      // ignore input if it has previously been formatted\n      if (input.classList.contains('semanticform') || !input.id) continue\n\n      const type = input.getAttribute('type')\n      if (nodeNameLookup.includes(input.nodeName) || inputTypeLookup.includes(type)) {\n        // recursively find <dl> element\n        let dl = input.parentNode\n        while (dl && dl.nodeName !== 'DL') dl = dl.parentNode\n\n        if (!dl) continue\n        if (!dl.classList.contains('floatLabelForm')) dl.classList.add('floatLabelForm')\n\n        const label = input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio')\n          ? document.querySelector('label[data-for=' + input.parentNode.parentNode.id.replace(/\\./g, '\\\\.') + ']')\n          : document.querySelector('label[for=' + input.id.replace(/\\./g, '\\\\.') + ']')\n\n        if (!label) {\n          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.`)\n        }\n\n        input.classList.add('semanticform')\n\n        // #region create labels\n        if (type === 'checkbox' || type === 'radio') {\n          // recursively find <dd> element\n          let dd = input.parentNode\n          while (dd && dd.nodeName !== 'DD') dd = dd.parentNode\n\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)\n            continue\n          }\n\n          if (dd.firstChild.nodeName !== 'LABEL') {\n            const newLabel = document.createElement('label')\n            newLabel.className = 'floatLabelFormAnimatedLabel'\n\n            if (type === 'checkbox' && input.parentNode.nodeName === 'DD') {\n              newLabel.setAttribute('for', input.id)\n              input.parentNode.classList.add('singleCheckbox')\n              newLabel.className = ''\n              label.setAttribute('hidden', 'hidden')\n              insertAfter(newLabel, input)\n            }\n\n            if (type === 'radio' && input.parentNode.nodeName === 'DD') {\n              newLabel.setAttribute('for', input.id)\n              input.parentNode.classList.add('singleRadio')\n              newLabel.className = ''\n              label.setAttribute('hidden', 'hidden')\n              insertAfter(newLabel, input)\n            }\n\n            newLabel.innerHTML = label.innerHTML\n\n            if (label.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {\n              const text = label.getAttribute('title')\n              label.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n              newLabel.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n            }\n\n            if (dd.querySelector(':required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {\n              const text = label.getAttribute('data-asterisk-text') || 'This field is required.'\n              label.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n              newLabel.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n            }\n\n            if (!dd.querySelector('label')) dd.append(newLabel)\n          }\n\n          // removes old div that a radio or checkbox may have been added to\n          if (dd.parentElement.nodeName === 'DIV') dd.parentElement.remove()\n\n          const div = document.createElement('div')\n          div.append(label.closest('dt'), dd)\n          dl.append(div)\n        } else {\n          const newLabel = document.createElement('label')\n          newLabel.setAttribute('for', input.id)\n          newLabel.className = 'floatLabelFormAnimatedLabel'\n\n          newLabel.innerHTML = label.innerHTML\n\n          if (input.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {\n            const text = input.getAttribute('title')\n            newLabel.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n          }\n\n          if (input.hasAttribute('required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {\n            const text = label.getAttribute('data-asterisk-text') || 'This field is required.'\n            newLabel.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n          }\n\n          label.setAttribute('hidden', 'hidden')\n\n          insertAfter(newLabel, input)\n        }\n        // #endregion\n\n        // #region standard inputs\n        // check for auto-grow attribute on textareas\n        if (input.getAttribute('data-auto-grow') !== null) {\n          // progressively enhance inputs into textareas\n          if (input.nodeName === 'INPUT' && input.type === 'text') {\n            const newInput = document.createElement('textarea')\n            newInput.id = input.id\n            newInput.class = input.class\n            newInput.innerText = input.value\n            newInput.setAttribute('data-auto-grow', '')\n            input.replaceWith(newInput)\n            input = newInput\n\n          }\n\n          if (input.nodeName === 'TEXTAREA') {\n            // when pressing enter while this input is focused, we want to submit\n            input.addEventListener('keypress', (e) => {\n              if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return\n              e.preventDefault()\n              form.requestSubmit()\n            })\n          }\n        }\n\n        if (type !== 'checkbox' && type !== 'radio') {\n          if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ')\n\n          const div = document.createElement('div')\n          const dt = label.closest('dt')\n          const dd = input.closest('dd')\n\n          if (!dt) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding <dt> element.`)\n            continue\n          }\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding <dd> element.`)\n            continue\n          }\n\n          // #region input clear button\n          if (input.nodeName !== 'SELECT' && type !== 'range') {\n            const clearBtn = document.createElement('button')\n            clearBtn.type = 'button'\n            clearBtn.title = input.getAttribute('data-clear-field-text') || 'Clear field'\n            clearBtn.ariaLabel = input.getAttribute('data-clear-field-text') || 'Clear field'\n            clearBtn.tabIndex = -1\n            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\" />'\n            clearBtn.classList.add('clear')\n            clearBtn.id = `semanticFormsClearButton_${input.id}`\n            clearBtn.addEventListener('click', () => {\n              input.previousValue = input.value\n              input.value = ''\n              input.focus()\n              lastClearFieldPressed = input.id\n\n              // used for any other updates required by various inputs\n              input.dispatchEvent(new Event('input', { bubbles: true }))\n            })\n            insertAfter(clearBtn, dd.querySelector('label'))\n          }\n          input.addEventListener('focus', event => {\n            if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target\n          })\n          // #endregion\n\n          // check for colspan- utility class\n          if (/colspan-/.test(dd.className)) {\n            const match = dd.className.match(/colspan-([0-9]|full)/)[0]\n            dd.classList.remove(match)\n            div.classList.add(match)\n          }\n          \n          // check for max-content attribute\n          // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing \n          if (input.getAttribute('data-max-content') !== null) {\n            if (!('fieldSizing' in document.createElement('input').style)) {\n              const adjustWidth = () => {\n                const value = input.value !== '' ? input.value : input.placeholder\n                const width = value.length * 8 + 40\n                input.style.width = width + 'px'\n                input.style.maxWidth = '100%'\n                div.style.width = width + 'px'\n              }\n              adjustWidth()\n              input.addEventListener('input', adjustWidth)\n            }\n          }\n\n          div.append(dt, dd)\n          dl.append(div)\n\n          // determine visibility of newly created <div>\n          if (dt.style.display === 'none' && dd.style.display === 'none') div.style.display = 'none'\n        }\n        // #endregion\n\n        // handle file input clear btn, cannot be handled with CSS\n        if (type === 'file') {\n          const clearBtn = input.parentElement.querySelector('.clear')\n          input.addEventListener('input', event => {\n            clearBtn.style.display = event.target.files.length ? 'flex' : 'none'\n          })\n          clearBtn.addEventListener('click', () => {\n            clearBtn.style.display = 'none'\n          })\n        }\n\n        // handle range inputs with a class to display the value\n        if (type === 'range' && input.classList.contains('displayValue')) {\n          const label = input.parentNode.parentNode.querySelector('dd label')\n          label.innerHTML += `<span class=\"seperator\">: </span><output>${input.value}</output>`\n          input.addEventListener('input', event => {\n            const output = event.target.parentNode.parentNode.querySelector('output')\n            output.innerHTML = event.target.value\n          })\n        }\n\n        // #region show password button\n        if (type === 'password' && input.getAttribute('data-no-reveal') === null) {\n          const showBtn = document.createElement('button')\n          showBtn.type = 'button'\n          showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'\n          showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'\n          showBtn.tabIndex = -1\n          showBtn.innerHTML = passwordShow\n          showBtn.classList.add('show')\n          showBtn.id = `semanticFormsShowButton_${input.id}`\n          const dd = input.closest('dd')\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)\n            continue\n          }\n          showBtn.addEventListener('click', () => {\n            if (input.type === 'password') {\n              showBtn.innerHTML = passwordHide\n              showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password'\n              showBtn.ariaLabel = input.getAttribute('data-hide-password-text') || 'Hide password'\n              input.type = 'text'\n            } else {\n              showBtn.innerHTML = passwordShow\n              showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'\n              showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'\n              input.type = 'password'\n            }\n            input.focus()\n          })\n          insertAfter(showBtn, dd.querySelector('label'))\n        }\n        // #endregion\n\n        // add listener to shift clear button when scrollbar present\n        if (input.nodeName === 'TEXTAREA') {\n          if (input.getAttribute('data-disable-autosize') === null) {\n            // add auto-sizing\n            input.style.setProperty('resize', 'none')\n            input.style.setProperty('min-height', '0')\n            input.style.setProperty('max-height', 'none')\n            input.style.setProperty('height', 'auto')\n\n            const handleInput = () => {\n              // reset rows attribute to get accurate scrollHeight\n              let maxRows = input.getAttribute('data-max-rows')\n\n              if (maxRows) {\n                if (isNaN(maxRows) || Number(maxRows) <= 0) {\n                  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')}`)\n                  maxRows = null\n                }\n              }\n\n              const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5'\n              input.setAttribute('rows', minRows)\n\n              // get the computed values object reference\n              const style = window.getComputedStyle(input)\n\n              // 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)\n              const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right'])\n              const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width'])\n              input.style.setProperty('overflow', 'hidden', 'important')\n              input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px')\n              input.style.setProperty('box-sizing', 'content-box')\n              input.style.setProperty('padding-inline', '0')\n              input.style.setProperty('border-width', '0')\n\n              // get the base line height, and top / bottom padding\n              const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom'])\n              const lineHeight = style['line-height'] === 'normal'\n                ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box)\n                : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value\n\n              // get the scroll height (rounding to be safe to ensure cross browser consistency)\n              const scrollHeight = Math.round(input.scrollHeight)\n\n              // undo overflow, width, border-width, box-sizing & inline padding overrides\n              input.style.removeProperty('width')\n              input.style.removeProperty('box-sizing')\n              input.style.removeProperty('padding-inline')\n              input.style.removeProperty('border-width')\n              input.style.removeProperty('overflow')\n\n              // 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\n              const rows = Math.round((scrollHeight - blockPadding) / lineHeight)\n\n              // set the calculated rows attribute (limited by rowLimit)\n              if (maxRows) {\n                input.setAttribute('rows', '' + Math.min(rows, Number(maxRows)))\n              } else {\n                input.setAttribute('rows', '' + rows)\n              }\n            }\n\n            input.addEventListener('input', handleInput)\n\n            // trigger the event to set the initial rows value\n            input.dispatchEvent(new Event('input', { bubbles: true }))\n          }\n\n          // progressively enhance textarea for Firefox and Safari\n          // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing \n          if (input.getAttribute('data-auto-grow') !== null) {\n            const adjustHeight = () => {\n              if (input.value.length) {\n                input.style.height = input.scrollHeight + 'px'\n              } else {\n                input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')\n              }\n            }\n\n            // set initial height to semantic-forms CSS variable\n            input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')\n            input.addEventListener('input', adjustHeight)\n          }\n\n          // shifts the clear button to the right if a scrollbar is present\n          const shiftClearBtn = () => {\n            const clearBtn = input.parentElement?.querySelector('button.clear')\n            if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : ''\n          }\n          input.addEventListener('input', shiftClearBtn)\n          input.addEventListener('mouseup', shiftClearBtn)\n          shiftClearBtn()\n        }\n      }\n    }\n  }\n\n  /**\n   * Places an element immediately after another element\n   * @param {Object} newNode element being placed after the reference node\n   * @param {*} referenceNode element to be used as reference for new node\n   */\n  function insertAfter (newNode, referenceNode) {\n    if (referenceNode.nextSibling) referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)\n    else referenceNode.parentNode.appendChild(newNode)\n  }\n\n  // handle undo/redo\n  let lastFocusedInput\n  let lastClearFieldPressed\n  document.addEventListener('keydown', event => {\n    if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) {\n      // undo clearing a field\n      if (lastFocusedInput) {\n        if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {\n          if (lastFocusedInput.previousValue) {\n            lastFocusedInput.redoValue = lastFocusedInput.value\n            lastFocusedInput.value = lastFocusedInput.previousValue\n          }\n        }\n      }\n    } else if ((event.ctrlKey && event.key === 'y') || (event.metaKey && event.shiftKey && event.key === 'z')) {\n      // redo clearing a field\n      if (lastFocusedInput) {\n        if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {\n          if (lastFocusedInput.redoValue) {\n            lastFocusedInput.previousValue = lastFocusedInput.value\n            lastFocusedInput.value = lastFocusedInput.redoValue\n          }\n        }\n      }\n    }\n  })\n\n  // monitor changes to the DOM and enhance new semanticForms forms that get added\n  if (!window.semanticFormsObserver) {\n    window.semanticFormsObserver = new window.MutationObserver(mutations => {\n      let stop = false\n      for (const mutation of mutations) {\n        for (const node of mutation.addedNodes) {\n          if (node.nodeName === 'FORM' || node?.querySelector?.('form')) {\n            semanticForms()\n            stop = true\n          }\n        }\n        if (stop) break\n      }\n    })\n    window.semanticFormsObserver.observe(document.body, { attributes: false, childList: true, characterData: false, subtree: true })\n  }\n\n  semanticForms.reinitialize = form => {\n    form.classList.remove('semanticFormsActive')\n    semanticForms()\n  }\n}\n\nmodule.exports = semanticForms\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(\"./semanticForms.js\");\n"],"names":["root","factory","exports","module","define","amd","this","semanticForms","document","getElementsByClassName","querySelector","body","classList","window","MutationObserver","console","warn","passwordShow","passwordHide","helpTextIcon","nodeNameLookup","inputTypeLookup","forms","querySelectorAll","form","add","contains","inputs","Array","from","input","id","type","getAttribute","includes","nodeName","dl","parentNode","label","replace","error","dd","firstChild","newLabel","createElement","className","setAttribute","insertAfter","innerHTML","hasAttribute","text","append","parentElement","remove","div","closest","newInput","class","innerText","value","replaceWith","addEventListener","e","key","shiftKey","preventDefault","requestSubmit","dt","clearBtn","title","ariaLabel","tabIndex","previousValue","focus","lastClearFieldPressed","dispatchEvent","Event","bubbles","event","target","lastFocusedInput","test","match","style","adjustWidth","placeholder","width","length","maxWidth","display","files","output","showBtn","setProperty","handleInput","maxRows","isNaN","Number","minRows","getComputedStyle","inlinePadding","parseFloat","inlineBorderWidth","blockPadding","lineHeight","height","scrollHeight","Math","round","removeProperty","rows","min","adjustHeight","getPropertyValue","shiftClearBtn","marginRight","clientHeight","newNode","referenceNode","nextSibling","insertBefore","appendChild","ctrlKey","metaKey","name","redoValue","semanticFormsObserver","mutations","stop","mutation","node","addedNodes","observe","attributes","childList","characterData","subtree","reinitialize","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","__webpack_exports__"],"sourceRoot":""}

package/dist/semantic-forms.css

@@ -130,6 +130,14 @@ table.semanticForms.light {
   container-type: inline-size;
   container-name: semanticForm;
 }
+@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],
@@ -461,6 +469,12 @@ table.semanticForms.light textarea {
   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] {
+  field-sizing: content;
+}
 form.semanticForms input[type=search],
 form.semanticForms.light input[type=search],
 table.semanticForms input[type=search],
@@ -643,6 +657,21 @@ table.semanticForms.light button:not(.clear):not(.show):hover,
 table.semanticForms.light .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 {
+  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 {
+  color: var(--semanticFormsTextColor) !important;
+}
 form.semanticForms [data-invalid-text],
 form.semanticForms.light [data-invalid-text],
 table.semanticForms [data-invalid-text],
@@ -837,10 +866,28 @@ table.semanticForms.light details::details-content {
   opacity: 0;
   transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
 }
+@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;
@@ -872,12 +919,6 @@ table.semanticForms.light details summary::before {
   transform-origin: 0.2rem 50%;
   transition: 250ms transform ease;
 }
-form.semanticForms details[open],
-form.semanticForms.light details[open],
-table.semanticForms details[open],
-table.semanticForms.light details[open] {
-  padding-top: 35px;
-}
 form.semanticForms details[open]::details-content,
 form.semanticForms.light details[open]::details-content,
 table.semanticForms details[open]::details-content,
@@ -886,10 +927,18 @@ table.semanticForms.light details[open]::details-content {
   opacity: 1;
   transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
 }
-form.semanticForms details[open] summary::after,
-form.semanticForms.light details[open] summary::after,
-table.semanticForms details[open] summary::after,
-table.semanticForms.light details[open] summary::after {
+@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], form.semanticForms summary,
@@ -901,12 +950,6 @@ table.semanticForms.light details[open],
 table.semanticForms.light summary {
   margin-bottom: 10px;
 }
-form.semanticForms summary,
-form.semanticForms.light summary,
-table.semanticForms summary,
-table.semanticForms.light summary {
-  cursor: pointer;
-}
 @supports (scrollbar-color: auto) {
   form.semanticForms textarea,
   form.semanticForms.light textarea,
@@ -983,6 +1026,62 @@ table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > texta
   display: flex;
   flex-direction: column;
 }
+form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)),
+table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) input[type=submit]:not(.clear, .show) {
+  grid-row: 1/2;
+  grid-column: 2/3;
+  width: 100%;
+  max-width: 100%;
+  padding: 10px;
+  margin-top: var(--semanticFormsInputTopMargin);
+  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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):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:not(.checkboxes, .radios):not(.singleCheckbox, .singleRadio):has(button:not(.clear, .show), input[type=submit]:not(.clear, .show)) label:nth-of-type(2) {
+  grid-row: 2/3;
+  grid-column: 1/-1;
+}
 form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:not(.checkboxes, .radios).singleCheckbox, form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:not(.checkboxes, .radios).singleRadio,
 form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:not(.checkboxes, .radios).singleCheckbox,
 form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:not(.checkboxes, .radios).singleRadio,
@@ -1012,7 +1111,7 @@ table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea) d
 table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:not(.checkboxes, .radios).singleCheckbox label:nth-of-type(2),
 table.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea) dd:not(.checkboxes, .radios).singleRadio label:nth-of-type(2) {
   grid-column: 1/-1;
-  padding-left: 20px;
+  padding: 0 10px;
   font-size: small;
   color: var(--semanticFormsTextColor);
 }
@@ -1112,6 +1211,8 @@ 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;
 }
@@ -1166,6 +1267,7 @@ table.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRad
 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 {
   color: var(--semanticFormsTextColor) !important;
   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,
@@ -1223,7 +1325,7 @@ form.semanticForms.light .floatLabelForm div dd:not(.singleCheckbox, .singleRadi
 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) {
   margin-top: -5px;
-  padding-left: 20px;
+  padding: 0 10px;
   font-size: small;
   color: var(--semanticFormsTextColor);
 }
@@ -1358,6 +1460,8 @@ form.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .ch
 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 {
+  display: grid;
+  place-items: center;
   cursor: help;
   pointer-events: auto;
 }
@@ -1377,6 +1481,9 @@ 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);
@@ -1390,12 +1497,14 @@ table.semanticForms.light .floatLabelForm div dt label {
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
-  width: calc(100% + 20px);
+  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;
 }
@@ -1415,6 +1524,30 @@ table.semanticForms.light .floatLabelForm div:has(dd input:required) dt label >
   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]) {
+  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 {
+  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 {
+  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,
@@ -2487,8 +2620,8 @@ 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),
-table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea) {
+.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;
 }