semantic-forms 5.3.5 → 5.3.7

package/docs/statics/pages/usage.html

@@ -11,14 +11,14 @@
       <ul>
         <li><code>dist/semantic-forms.cjs</code>: CommonJS bundle: <code>const semanticForms = require('semantic-forms')</code></li>
         <li><code>dist/semantic-forms.js</code>: Standalone bundle that can be included via <code><!--#<script>--></code> tags. Declares a global variable called: <code>semanticForms</code></li>
-        <li><code>dist/semantic-forms.min.js</code>: Minified standalone bundle that can be included via <code><!--#<p>--></code> tags. Declares a global variable called: <code>semanticForms</code></li>
+        <li><code>dist/semantic-forms.min.js</code>: Minified standalone bundle that can be included via <code><!--#<script>--></code> tags. Declares a global variable called: <code>semanticForms</code></li>
         <li><code>dist/semantic-forms.mjs</code>: ES module: <code>import semanticForms from 'semantic-forms'</code></li>
         <li><code>dist/semantic-forms.min.mjs</code>: Minified ES module: <code>import semanticForms from 'semantic-forms/min'</code></li>
       </ul>
 
       <h2 id="use">Use</h2>
 
-      <p>Include the <code>dist/semantic-forms.css</code> and whichever of the above versions of the JS file you prefer from this repo into your project.</p>
+      <p>Include <code>dist/semantic-forms.css</code> and whichever of the above versions of the JS file you prefer into your project. Both ship in the npm package, and can also be loaded from any CDN that serves npm, for example <code>https://cdn.jsdelivr.net/npm/semantic-forms/dist/semantic-forms.js</code>. The <code>dist</code> folder is built from source, so it is not checked into the git repository.</p>
 
       <p>Then apply the <code>semanticForms</code> class to your <code><!--#<form>--></code> elements:</p>
 
@@ -36,798 +36,33 @@
 
       <p>If you make changes to the DOM after Semantic Forms is activated and want to activate any additional <code>semanticForms</code> forms you insert, you can re-scan for new forms by calling <code>semanticForms.reinitialize()</code> again. If you only want to reinitialize one form instead of all of them, call <code>semanticForms.reinitialize(formElement)</code>.</p>
 
-      <h3 id="features">Features</h3>
-
-      <h4 id="floatlabel">Float label inputs</h4>
-
-      <p>The float label input pattern is notoriously difficult to implement in a fashion that doesn't degrade HTML semantics or accessibility. This pattern library implements a solution that solves that problem. Your label doesn't need to be a sibling of your input like with other implementations. This implementation also has a custom clear button for each input.</p>
-
-      <p>Note: Although wrapping the input and label elements in a <code><!--#<div>--></code> is not required, it is highly recommended as it reduces <a href="https://en.wikipedia.org/wiki/Flash_of_unstyled_content"><abbr>FOUC</abbr></a>.</p>
-
-      <h5 id="floatlabelex">Example</h5>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <dl>
-    <div>
-      <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
-      <dt><label for="name">Name</label></dt>
-    </div>
-  </dl>
-</form>
-</escape></code></pre>
-
-      <form class="semanticForms">
-        <dl>
-          <div>
-            <dt><label for="name">Name</label></dt>
-            <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
-          </div>
-        </dl>
-      </form>
-
-      <h5 id="floatlabelextextarea">Or with a <code><!--#<textarea>--></code></h5>
+      <h3 id="shadowdom">Forms inside a shadow root</h3>
 
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <dl>
-    <div>
-      <dt><label for="textarea">Textarea</label></dt>
-      <dd><textarea id="textarea" name="textarea" rows="5" cols="50" placeholder="e.g. Long string of text"></textarea></dd>
-    </div>
-  </dl>
-</form>
-</escape></code></pre>
+      <p>A shadow root is a separate tree, so <code>semanticForms()</code> cannot see into one by default. Pass the root to enhance the forms inside it:</p>
 
-      <form class="semanticForms">
-        <dl>
-          <div>
-            <dt><label for="textarea">Textarea</label></dt>
-            <dd><textarea id="textarea" name="textarea" rows="5" cols="50" placeholder="e.g. Long string of text"></textarea></dd>
-          </div>
-        </dl>
-      </form>
+      <pre><code class='language-javascript'>semanticForms(myElement.shadowRoot)</code></pre>
 
-      <p>Note: <code><!--#<textarea>--></code> elements autosize when you type in them. This can be disabled with <code>data-no-autosize</code> attribute. The row count can also be limited with the <code>data-max-rows</code> attribute.</p>
+      <p>Each tree you pass gets watched separately, so calling it for the document and for one or more shadow roots is fine and they do not interfere with each other. <code>semanticForms.reinitialize(formElement)</code> works out which tree the form belongs to on its own.</p>
 
-      <h5 id="addhelptext">Add help text</h5>
+      <p>Shadow roots do not inherit the page's stylesheets, so the shadow root needs its own copy of the CSS, either through a <code><!--#<link>--></code> inside it or by adopting a stylesheet:</p>
 
-      <p>Include a label in the <code><!--#<dd>--></code> element with a matching <code>for</code> attribute to place help text beneath the input:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms" method="post">
-  <dl>
-    <div>
-      <dt><label for="password">Password</label></dt>
-      <dd>
-        <input id="password" name="password" type="password" placeholder="Enter a password" minlength="8" required autocomplete="off">
-        <label for="password">Must be at least 8 characters long.</label>
-      </dd>
-    </div>
-  </dl>
-</form>
-</escape></code></pre>
-
-      <form class="semanticForms" method="post">
-        <dl>
-          <div>
-            <dt><label for="password">Password</label></dt>
-            <dd>
-              <input id="password" name="password" type="password" placeholder="Enter a password" minlength="8" required autocomplete="off">
-              <label for="password">Must be at least 8 characters long.</label>
-            </dd>
-          </div>
-        </dl>
-      </form>
-
-      <h5>Add inline buttons</h5>
-
-      <p>Include a button or input with the type "submit" in the <code><!--#<dd>--></code> element to place it next to the input:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms" method="post">
-  <dl>
-    <div>
-      <dt><label for="email">Email address</label></dt>
-      <dd>
-        <input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
-        <button type="submit">Sign up</button>
-      </dd>
-    </div>
-  </dl>
-</form>
+      <pre><code class='language-javascript'><escape>const sheet = new CSSStyleSheet()
+await sheet.replace(await (await fetch('/path/to/semantic-forms.css')).text())
+myElement.shadowRoot.adoptedStyleSheets = [sheet]
 </escape></code></pre>
-      
-      <form class="semanticForms" method="post">
-        <dl>
-          <div>
-            <dt><label for="email">Email address</label></dt>
-            <dd>
-              <input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
-              <button type="submit">Sign up!</button>
-            </dd>
-          </div>
-        </dl>
-      </form>
 
-      <h5>Add custom keyboard shortcuts</h5>
-
-      <p>Add keyboard shortcuts on specific inputs to focus them by adding a <code>data-focus-key</code> attribute and optional <code>data-focus-modifier</code> attribute.</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms" method="post">
-  <dl>
-    <div>
-      <dt><label for="focus-1">Focus me!</label></dt>
-      <dd><input id="focus-1" name="focus-1" type="text" data-focus-key="Y"></dd>
-    </div>
-
-    <!-- change the modifier -->
-    <div>
-      <dt><label for="focus-2">Focus me!</label></dt>
-      <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Y" data-focus-modifier="alt"></dd>
-    </div>
-
-    <!-- specify modifier by OS -->
-    <div>
-      <dt><label for="focus-2">Focus me!</label></dt>
-      <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Z" data-focus-modifier-win="alt" data-focus-modifier-linux="meta" data-focus-modifier-mac="cmd"></dd>
-    </div>
-  </dl>
-</form>
-</escape></code></pre>
-      
-      <form class="semanticForms" method="post">
-        <dl>
-          <div>
-            <dt><label for="focus-1">Focus me!</label></dt>
-            <dd><input id="focus-1" name="focus-1" type="text" data-focus-key="Y"></dd>
-          </div>
-      
-          <!-- change the modifier -->
-          <div>
-            <dt><label for="focus-2">Focus me!</label></dt>
-            <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Y" data-focus-modifier="alt"></dd>
-          </div>
-      
-          <!-- specify modifier by OS -->
-          <div>
-            <dt><label for="focus-3">Focus me!</label></dt>
-            <dd><input id="focus-3" name="focus-3" type="text" data-focus-key="Z" data-focus-modifier-win="alt" data-focus-modifier-linux="meta" data-focus-modifier-max="cmd"></dd>
-          </div>
-        </dl>
-      </form>
-
-      <ul>
-        <li><p>The focus key should be a single character, and is not case-sensitive. If multiple characters are detected, only the first one will be used. Special characters (!, @, #, etc.) will require <kbd>Shift</kbd> to be pressed with the keyboard shortcut.</p></li>
-        <li>
-          <p>The modifier key value may be "metactrl," "ctrl," "cmd," "meta," or "alt." The default value is "metactrl" and will automatically be applied if the <code>data-focus-modifier</code> attribute is not present.</p>
-          <ul>
-            <li>Some combinations are unable to be used due to conflicts with browser and OS keyboard shortcuts. See <a href="https://rooseveltframework.org/docs/semantic-forms/latest/reservedKeyboardShortcuts">reserved keyboard shortcuts</a> for a full overview.</li>
-            <li><p>OS-specific modifier keys can be set with <code>data-focus-modifier-win</code> (Windows), <code>data-focus-modifier-linux</code> (Linux) and <code>data-focus-modifier-mac</code> (Mac).</p></li>
-            <li><p>Due to a limited range of available shortcuts, the "Start" (win) key on Windows will be replaced with "Ctrl."</p></li>
-          </ul>
-        </li>
-      </ul>
-
-      <h5 id="custominputfields">Customizing input fields</h5>
+      <h3 id="features">Features</h3>
 
-      <p>By default, input fields will display an X icon to clear the text and password fields will also display a show/hide toggle for displaying the password in plain text. You can customize this behavior as follows:</p>
+      <p>Each of these has a page of its own:</p>
 
       <ul>
-        <li><p>Customize the hover text of the clear field button by applying a <code>data-clear-field-text=&quot;your text&quot;</code> attribute to the input.</p></li>
-        <li><p>Customize the hover text of the show password button by applying a <code>data-show-password-text=&quot;your text&quot;</code> attribute to the input.</p></li>
-        <li><p>Customize the hover text of the hide password button by applying a <code>data-hide-password-text=&quot;your text&quot;</code> attribute to the input.</p></li>
-        <li><p>Prevent the show/hide toggle from appearing on password fields by applying a <code>data-no-reveal</code> attribute to the input.</p></li>
-        <li>
-          <p>Show a help text icon next to labels of inputs that contain a <code>title</code> attribute by applying a <code>data-show-help-icon</code> attribute to the label.</p>
-          <ul>
-            <li>Note that checkboxes and radios should have a <code>title</code> attribute on the label instead of the inputs.</li>
-          </ul>
-        </li>
-        <li><p>Allow fixed-width inputs to grow/shrink to their longest content by applying a <code>data-max-content</code> attribute to the input.</p></li>
-        <li>
-          <p>Create a one-line text input that grows in height by applying a <code>data-auto-grow</code> attribute to a <code>textarea</code> or <code>input</code> (with type "text") element.</p>
-          <ul>
-            <li>Note that pressing <kbd>Enter</kbd> with this attribute will attempt to submit the form. Use <kbd>Shift + Enter</kbd> to add new lines.</li>
-          </ul>
-        </li>
+        <li><a href="/inputs.html">Inputs</a></li>
+        <li><a href="/checkboxes.html">Checkboxes, radios and switches</a></li>
+        <li><a href="/buttons.html">Buttons</a></li>
+        <li><a href="/layout.html">Layout</a></li>
+        <li><a href="/theming.html">Theming</a></li>
       </ul>
 
-      <p>You can also disable float labels on a per-field basis with the <code>no-float-label</code> class:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <dl>
-    <div>
-      <dt><label for="search-field">Search</label></dt>
-      <dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cool stuff" class="no-float-label"></dd>
-    </div>
-  </dl>
-</form>
-</escape></code></pre>
-
-      <form class="semanticForms">
-        <dl>
-          <div>
-            <dt><label for="search-field">Search</label></dt>
-            <dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cool stuff" class="no-float-label"></dd>
-          </div>
-        </dl>
-      </form>
-
-      <h4 id="responsivecolumns">Responsive columns</h4>
-
-      <p>This feature makes it so the form fields will grow, shrink, expand the number of columns, or reduce the number of columns based on how much space exists in the container. You can customize it by applying various <code>colspan-#</code> classes to various elements in the form markup structure.</p>
-
-      <h5 id="colspan">Set number of columns for a group of forms</h5>
-
-      <p>You can limit the number of columns on your forms using the <code>colspan-#</code> class on a <code><!--#<dl>--></code> element:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <dl class="colspan-2">
-    <div>
-      <dt><label for="input-a">Input A</label></dt>
-      <dd><input type="text" id="input-a" name="input-a"></dd>
-    </div>
-
-    <div>
-      <dt><label for="input-b">Input B</label></dt>
-      <dd><input type="text" id="input-b" name="input-b"></dd>
-    </div>
-
-    <!-- wraps to the next row -->
-    <div>
-      <dt><label for="input-c">Input C</label></dt>
-      <dd><input type="text" id="input-c" name="input-c"></dd>
-    </div>
-  </dl>
-</form>
-</escape></code></pre>
-
-      <form class="semanticForms">
-        <dl class="colspan-2">
-          <div>
-            <dt><label for="input-a">Input A</label></dt>
-            <dd><input type="text" id="input-a" name="input-a"></dd>
-          </div>
-
-          <div>
-            <dt><label for="input-b">Input B</label></dt>
-            <dd><input type="text" id="input-b" name="input-b"></dd>
-          </div>
-
-          <!-- wraps to the next row -->
-          <div>
-            <dt><label for="input-c">Input C</label></dt>
-            <dd><input type="text" id="input-c" name="input-c"></dd>
-          </div>
-        </dl>
-      </form>
-
-      <p>You can also apply the class to a <code><!--#<fieldset>--></code> which will apply that styling to all nested <code><!--#<dl>--></code> elements:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <fieldset class="colspan-3">
-    <!-- inherits 3 column class -->
-    <dl>
-      <div>
-        <dt><label for="f-ex-input-a">Input A</label></dt>
-        <dd><input type="text" id="f-ex-input-a" name="f-ex-input-a"></dd>
-      </div>
-
-      <div>
-        <dt><label for="f-ex-input-b">Input B</label></dt>
-        <dd><input type="text" id="f-ex-input-b" name="f-ex-input-b"></dd>
-      </div>
-
-      <div>
-        <dt><label for="f-ex-input-c">Input C</label></dt>
-        <dd><input type="text" id="f-ex-input-c" name="f-ex-input-c"></dd>
-      </div>
-    </dl>
-
-    <!-- has 4 columns -->
-    <dl class="colspan-4">
-      <div>
-        <dt><label for="f-ex-input-d">Input D</label></dt>
-        <dd><input type="text" id="f-ex-input-d" name="f-ex-input-d"></dd>
-      </div>
-
-      <div>
-        <dt><label for="f-ex-input-e">Input E</label></dt>
-        <dd><input type="text" id="f-ex-input-e" name="f-ex-input-e"></dd>
-      </div>
-
-      <div>
-        <dt><label for="f-ex-input-f">Input F</label></dt>
-        <dd><input type="text" id="f-ex-input-f" name="f-ex-input-f"></dd>
-      </div>
-    </dl>
-  </fieldset>
-</form>
-      </escape></code></pre>
-
-      <form class="semanticForms">
-        <fieldset class="colspan-3">
-          <!-- inherits 3 column class -->
-          <dl>
-            <div>
-              <dt><label for="f-ex-input-a">Input A</label></dt>
-              <dd><input type="text" id="f-ex-input-a" name="f-ex-input-a"></dd>
-            </div>
-
-            <div>
-              <dt><label for="f-ex-input-b">Input B</label></dt>
-              <dd><input type="text" id="f-ex-input-b" name="f-ex-input-b"></dd>
-            </div>
-
-            <div>
-              <dt><label for="f-ex-input-c">Input C</label></dt>
-              <dd><input type="text" id="f-ex-input-c" name="f-ex-input-c"></dd>
-            </div>
-          </dl>
-
-          <!-- has 4 columns -->
-          <dl class="colspan-4">
-            <div>
-              <dt><label for="f-ex-input-d">Input D</label></dt>
-              <dd><input type="text" id="f-ex-input-d" name="f-ex-input-d"></dd>
-            </div>
-
-            <div>
-              <dt><label for="f-ex-input-e">Input E</label></dt>
-              <dd><input type="text" id="f-ex-input-e" name="f-ex-input-e"></dd>
-            </div>
-
-            <div>
-              <dt><label for="f-ex-input-f">Input F</label></dt>
-              <dd><input type="text" id="f-ex-input-f" name="f-ex-input-f"></dd>
-            </div>
-          </dl>
-        </fieldset>
-      </form>
-
-      <h5 id="setcolspannumber">Set number of columns a single input field takes up</h5>
-
-      <p>You can specify the number of columns an input will span using the <code>colspan-#</code> class on the <code><!--#<dd>--></code> element. The inputs are responsive and will shrink according to available space. Available numbered classes are <code>colspan-1</code> through <code>colspan-5</code>:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <fieldset>
-    <dl>
-      <div>
-        <dt><label for="cspan-ex-input-a">Input A</label></dt>
-        <!-- 1 column -->
-        <dd class="colspan-1"><input type="text" id="cspan-ex-input-a" name="cspan-ex-input-a"></dd>
-      </div>
-
-      <div>
-        <dt><label for="cspan-ex-input-b">Input B</label></dt>
-        <!-- 2 columns  -->
-        <dd class="colspan-2"><input type="text" id="cspan-ex-input-b" name="cspan-ex-input-b"></dd>
-      </div>
-
-      <div>
-        <dt><label for="cspan-ex-input-c">Input C</label></dt>
-        <!-- 5 columns (max) -->
-        <dd class="colspan-5"><input type="text" id="cspan-ex-input-c" name="cspan-ex-input-c"></dd>
-      </div>
-    </dl>
-  </fieldset>
-</form>
-</escape></code></pre>
-
-      <form class="semanticForms">
-        <fieldset>
-          <dl>
-            <div>
-              <dt><label for="cspan-ex-input-a">Input A</label></dt>
-              <!-- 1 column -->
-              <dd class="colspan-1"><input type="text" id="cspan-ex-input-a" name="cspan-ex-input-a"></dd>
-            </div>
-
-            <div>
-              <dt><label for="cspan-ex-input-b">Input B</label></dt>
-              <!-- 2 columns  -->
-              <dd class="colspan-2"><input type="text" id="cspan-ex-input-b" name="cspan-ex-input-b"></dd>
-            </div>
-
-            <div>
-              <dt><label for="cspan-ex-input-c">Input C</label></dt>
-              <!-- 5 columns (max) -->
-              <dd class="colspan-5"><input type="text" id="cspan-ex-input-c" name="cspan-ex-input-c"></dd>
-            </div>
-          </dl>
-        </fieldset>
-      </form>
-
-      <p><code>colspan-full</code> can also be used to force an input to take up the entire width of a form:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <fieldset>
-    <dl>
-      <div>
-        <dt><label for="cspanfull-ex-input-a">Input A</label></dt>
-        <!-- this spans 2 columns on row 1 -->
-        <dd class="colspan-2"><input type="text" id="cspanfull-ex-input-a" name="cspanfull-ex-input-a"></dd>
-      </div>
-
-      <div>
-        <dt><label for="cspanfull-ex-input-b">Input B</label></dt>
-        <!-- this spans the full width of row 2 -->
-        <dd class="colspan-full"><input type="text" id="cspanfull-ex-input-b" name="cspanfull-ex-input-b"></dd>
-      </div>
-
-      <div>
-        <!-- this spans 1 column on row 3 -->
-        <dt><label for="cspanfull-ex-input-c">Input C</label></dt>
-        <dd><input type="text" id="cspanfull-ex-input-c" name="cspanfull-ex-input-c"></dd>
-      </div>
-    </dl>
-  </fieldset>
-</form>
-      </escape></code></pre>
-
-      <form class="semanticForms">
-        <fieldset>
-          <dl>
-            <div>
-              <dt><label for="cspanfull-ex-input-a">Input A</label></dt>
-              <!-- this spans 2 columns on row 1 -->
-              <dd class="colspan-2"><input type="text" id="cspanfull-ex-input-a" name="cspanfull-ex-input-a"></dd>
-            </div>
-
-            <div>
-              <dt><label for="cspanfull-ex-input-b">Input B</label></dt>
-              <!-- this spans the full width of row 2 -->
-              <dd class="colspan-full"><input type="text" id="cspanfull-ex-input-b" name="cspanfull-ex-input-b"></dd>
-            </div>
-
-            <div>
-              <!-- this spans 1 column on row 3 -->
-              <dt><label for="cspanfull-ex-input-c">Input C</label></dt>
-              <dd><input type="text" id="cspanfull-ex-input-c" name="cspanfull-ex-input-c"></dd>
-            </div>
-          </dl>
-        </fieldset>
-      </form>
-
-      <h5>Align elements within the responsive grid</h5>
-      
-      <p>Use classes to align an element at the start, center, or end of its available space. Available classes are <code>align-start</code>, <code>align-center</code>, and <code>align-end</code>.</p>
-      
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms" method="post">
-  <dl class="colspan-3">
-    <div>
-      <dt><label for="align-start">align-start</label></dt>
-      <dd class="align-start"><input id="align-start" name="align-start" type="text"></dd>
-    </div>
-
-    <div>
-      <dt><label for="align-center">align-center</label></dt>
-      <dd class="align-center"><input id="align-center" name="align-center" type="text"></dd>
-    </div>
-
-    <div>
-      <dt><label for="align-end">align-end</label></dt>
-      <dd class="align-end"><input id="align-end" name="align-end" type="text"></dd>
-    </div>
-  </dl>
-</form>
-</escape></code></pre>
-      
-      <form class="semanticForms" method="post">
-        <dl class="colspan-3">
-          <div>
-            <dt><label for="align-start">align-start</label></dt>
-            <dd class="align-start"><input id="align-start" name="align-start" type="text"></dd>
-          </div>
-      
-          <div>
-            <dt><label for="align-center">align-center</label></dt>
-            <dd class="align-center"><input id="align-center" name="align-center" type="text"></dd>
-          </div>
-      
-          <div>
-            <dt><label for="align-end">align-end</label></dt>
-            <dd class="align-end"><input id="align-end" name="align-end" type="text"></dd>
-          </div>
-        </dl>
-      </form>
-
-      <h4 id="buttongroups">Button groups</h4>
-
-      <p>You can align buttons side-by-side, or in left/right/center groups.</p>
-
-      <h5 id="nongroupedbuttons">Non-grouped example</h5>
-
-      <p>Nothing fancy here:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms" method="post">
-  <button type="submit" name="submit">Non-grouped submit button</button>
-  <button type="submit" name="submit">Another one</button>
-</form>
-      </escape></code></pre>
-
-      <form class="semanticForms" method="post">
-        <button type="submit" name="submit">Non-grouped submit button</button>
-        <button type="submit" name="submit">Another one</button>
-      </form>
-
-      <h6 id="buttongroupex">Button groups</h6>
-
-      <p>Driven by flexbox to intelligently align the buttons based on how many are in the group:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms" method="post">
-  <!-- aligns left/right -->
-  <menu>
-    <li><button type="submit" name="submit">Button 1</button></li>
-    <li><button type="submit" name="submit">Button 2</button></li>
-  </menu>
-
-  <!-- aligns left/center/right -->
-  <menu>
-    <li><button type="submit" name="submit">Button 1</button></li>
-    <li><button type="submit" name="submit">Button 2</button></li>
-    <li><button type="submit" name="submit">Button 3</button></li>
-  </menu>
-</form>
-      </escape></code></pre>
-
-      <form class="semanticForms" method="post">
-        <!-- aligns left/right -->
-        <menu>
-          <li><button type="submit" name="submit">Button 1</button></li>
-          <li><button type="submit" name="submit">Button 2</button></li>
-        </menu>
-
-        <!-- aligns left/center/right -->
-        <menu>
-          <li><button type="submit" name="submit">Button 1</button></li>
-          <li><button type="submit" name="submit">Button 2</button></li>
-          <li><button type="submit" name="submit">Button 3</button></li>
-        </menu>
-      </form>
-
-      <p>Buttons may also be integrated into the responsive grid by treating it like a standard form input.</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms" method="post">
-  <dl>
-    <div>
-      <dt><label for="inline-btn-input">Some input</label></dt>
-      <dd><input type="text" name="inline-btn-input" id="inline-btn-input"></dd>
-    </div>
-
-    <div>
-      <dt><label for="inline-btn">Inline button</label></dt>
-      <dd><button id="inline-btn">Inline button</button></dd>
-    </div>
-  </dl>
-</form>
-</escape></code></pre>
-      
-      <form class="semanticForms" method="post">
-        <dl>
-          <div>
-            <dt><label for="inline-btn-input">Some input</label></dt>
-            <dd><input type="text" name="inline-btn-input" id="inline-btn-input"></dd>
-          </div>
-        
-          <div>
-            <dt><label for="inline-btn">Inline button</label></dt>
-            <dd><button id="inline-btn">Inline button</button></dd>
-          </div>
-        </dl>
-      </form>
-
-      <p>You can also style a link like a Semantic Forms button by applying a class of <code>button-link</code> to it.</p>
-
-      <h4 id="checkboxesandradios">Checkboxes and radio buttons</h4>
-
-      <p>Checkboxes and radio buttons need to follow the following markup structure:</p>
-
-      <h5 id="singlecheckbox">A single checkbox</h5>
-
-      <p>Not too different than other inputs:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <dl>
-    <div>
-      <dt><label for="some_field_name">Single checkbox</label></dt>
-      <dd><input type="checkbox" name="some_field_name" id="some_field_name"></dd>
-    </div>
-  </dl>
-</form>
-      </escape></code></pre>
-
-      <form class="semanticForms">
-        <dl>
-          <div>
-            <dt><label for="some_field_name">Single checkbox</label></dt>
-            <dd><input type="checkbox" name="some_field_name" id="some_field_name"></dd>
-          </div>
-        </dl>
-      </form>
-
-      <h5 id="checkboxgroup">Checkbox group</h5>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <dl>
-    <div>
-      <dt><label data-for="some_checkboxes">Checkboxes:</label></dt>
-      <dd class="checkboxes">
-        <ul id="some_checkboxes">
-          <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_one"> <label for="some_field_name_checkboxes_one">One</label></li>
-          <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_two"> <label for="some_field_name_checkboxes_two">Two</label></li>
-          <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_three"> <label for="some_field_name_checkboxes_three">Three</label></li>
-        </ul>
-      </dd>
-    </div>
-  </dl>
-</form>
-      </escape></code></pre>
-
-      <form class="semanticForms">
-        <dl>
-          <div>
-            <dt><label data-for="some_checkboxes">Checkboxes:</label></dt>
-            <dd class="checkboxes">
-              <ul id="some_checkboxes">
-                <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_one"> <label for="some_field_name_checkboxes_one">One</label></li>
-                <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_two"> <label for="some_field_name_checkboxes_two">Two</label></li>
-                <li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_three"> <label for="some_field_name_checkboxes_three">Three</label></li>
-              </ul>
-            </dd>
-          </div>
-        </dl>
-      </form>
-
-      <h5 id="radiobuttons">Radio buttons</h5>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <dl>
-    <div>
-      <dt><label data-for="some_radios">Radios:</label></dt>
-      <dd class="radios">
-        <ul id="some_radios">
-          <li><input type="radio" name="some_field_name" id="some_field_name_radios_one"> <label for="some_field_name_radios_one">One</label></li>
-          <li><input type="radio" name="some_field_name" id="some_field_name_radios_two"> <label for="some_field_name_radios_two">Two</label></li>
-          <li><input type="radio" name="some_field_name" id="some_field_name_radios_three"> <label for="some_field_name_radios_three">Three</label></li>
-        </ul>
-      </dd>
-    </div>
-  </dl>
-</form>
-      </escape></code></pre>
-
-      <form class="semanticForms">
-        <dl>
-          <div>
-            <dt><label data-for="some_radios">Radios:</label></dt>
-            <dd class="radios">
-              <ul id="some_radios">
-                <li><input type="radio" name="some_field_name" id="some_field_name_radios_one"> <label for="some_field_name_radios_one">One</label></li>
-                <li><input type="radio" name="some_field_name" id="some_field_name_radios_two"> <label for="some_field_name_radios_two">Two</label></li>
-                <li><input type="radio" name="some_field_name" id="some_field_name_radios_three"> <label for="some_field_name_radios_three">Three</label></li>
-              </ul>
-            </dd>
-          </div>
-        </dl>
-      </form>
-
-      <h4 id="validationstyles">Validation styles</h4>
-
-      <p>Inputs with the <code>required</code> attribute will result in a visual indicator (*) being added to its label. You can disable this indicator with the <code>data-no-asterisk</code> attribute on the label element:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <dl>
-    <div>
-      <dt><label for="input" data-no-asterisk>Input label</label></dt>
-      <dd><input type="text" name="input" id="input" required>
-    </div>
-  </dl>
-</form>
-      </escape></code></pre>
-
-      <form class="semanticForms">
-        <dl>
-          <div>
-            <dt><label for="input" data-no-asterisk>Input label</label></dt>
-            <dd><input type="text" name="input" id="input" required>
-          </div>
-        </dl>
-      </form>
-
-      <p>You can set a paragraph of text below a field to only appear when a field is invalid with the <code>data-invalid-text</code> attribute:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms" method="post">
-  <dl>
-    <div>
-      <dt><label for="password_validation">Password label</label></dt>
-      <dd>
-        <input type="password" name="password" id="password_validation" minlength="8" autocomplete="off">
-        <p data-invalid-text>Password must be at least 8 characters long.</p>
-      </dd>
-    </div>
-  </dl>
-</form>
-      </escape></code></pre>
-
-      <form class="semanticForms" method="post">
-        <dl>
-          <div>
-            <dt><label for="password_validation">Password label</label></dt>
-            <dd>
-              <input type="password" name="password" id="password_validation" minlength="8" autocomplete="off">
-              <p data-invalid-text>Password must be at least 8 characters long.</p>
-            </dd>
-          </div>
-        </dl>
-      </form>
-
-      <p>You can adjust the tooltip text of the asterisk with the <code>data-asterisk-text</code> attribute:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <dl>
-    <div>
-      <dt><label for="input_validation" data-asterisk-text="This is a custom tooltip.">Input label</label></dt>
-      <dd><input type="text" name="input" id="input_validation" required>
-    </div>
-  </dl>
-</form>
-      </escape></code></pre>
-
-      <form class="semanticForms">
-        <dl>
-          <div>
-            <dt><label for="input_validation" data-asterisk-text="This is a custom tooltip.">Input label</label></dt>
-            <dd><input type="text" name="input" id="input_validation" required>
-          </div>
-        </dl>
-      </form>
-
-      <h4 id="rangeInputsThatDisplayValues">Range inputs that display values</h4>
-
-      <p>Add a class of <code>displayValue</code> to any <code><!--#<input type="range">--></code> element to make its value display on the label:</p>
-
-      <pre><code class='language-html' lang='html'><escape>
-<form class="semanticForms">
-  <dl>
-    <div>
-      <dt><label for="rangeValue">Range value</label></dt>
-      <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
-    </div>
-  </dl>
-</form>
-      </escape></code></pre>
-
-      <form class="semanticForms">
-        <dl>
-          <div>
-            <dt><label for="rangeValue">Range value</label></dt>
-            <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
-          </div>
-        </dl>
-      </form>
-
-      <h3 id="lightanddarkmode">Light mode and dark mode</h3>
-
-      <p>Light mode and dark mode will be detected automatically based on operating system preference. To set it manually, you can apply an additional class of <code>light</code> or <code>dark</code> to your <code><!--#<form>--></code> elements to force the mode.</p>
-
       <h3 id="lowflowmode">Low flow (JavaScript disabled) mode</h3>
 
       <p>The low flow will be displayed if JS is disabled.</p>
@@ -836,23 +71,6 @@
 
       <p>The low-flow mode reverts the float label pattern to traditional labels and doesn't include other JS-exclusive enhancements, but preserves the other visual design enhancements driven purely by CSS.</p>
 
-      <h3 id="overriding">Overriding default styles</h3>
-
-      <p>The most convenient way to override the default styles in Semantic Forms is to override the built-in CSS variables.</p>
-
-      <p>For example:</p>
-
-      <pre><code class='language-css' lang='css'><escape>
-form.semanticForms {
-  /* will overwrite the default semantic-forms values */
-  --semanticFormsFontFamily: monospace;
-  --semanticFormsTextColor: blue;
-  --semanticFormsInputMinWidth: 300px;
-}
-      </escape></code></pre>
-
-      <p>For a complete list of CSS variables you can override, <a href="https://github.com/rooseveltframework/semantic-forms/blob/main/semanticForms.scss">see the top of semanticForms.scss</a>.</p>
-
       <h3 id="more">More</h3>
 
       <p>See a page demoing all features <a href="https://rooseveltframework.org/docs/semantic-forms/latest/fullDemo/">here</a>.</p>