semantic-forms 5.1.3 → 5.1.5

package/docs/statics/pages/usage.html

@@ -121,6 +121,24 @@
         </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>
+    <dt><label for="search">Search</label></dt>
+    <dd><input id="search" name="search" type="search" placeholder="e.g. cool stuff" class="no-float-label"></dd>
+  </dl>
+</form>
+</escape></code></pre>
+
+      <form class="semanticForms">
+        <dl>
+          <dt><label for="search">Search</label></dt>
+          <dd><input id="search" name="search" type="search" placeholder="e.g. cool stuff" class="no-float-label"></dd>
+        </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>

package/package.json

@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/semantic-forms/graphs/contributors"
     }
   ],
-  "version": "5.1.3",
+  "version": "5.1.5",
   "files": [
     "dist",
     "semanticForms.scss",
@@ -21,13 +21,13 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@playwright/test": "1.54.2",
-    "eslint": "9.33.0",
+    "@playwright/test": "1.55.0",
+    "eslint": "9.35.0",
     "eslint-plugin-html": "8.1.3",
     "express": "5.1.0",
     "nodemon": "3.1.10",
     "nyc": "17.1.0",
-    "sass": "1.90.0",
+    "sass": "1.92.1",
     "http-server": "14.1.1",
     "standard": "17.1.2",
     "webpack-cli": "6.0.1"

package/semanticForms.js

@@ -7,7 +7,7 @@ const semanticForms = () => {
 
   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="14px" height="14px" viewBox="0 0 16 16" version="1.1"><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 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']

package/semanticForms.scss

@@ -564,8 +564,8 @@ table.semanticForms.light {
         input:not([type='submit'], [type='reset'], [type='image']),
         select,
         textarea {
-          &:focus:not([type=checkbox], [type=radio]) ~ label:first-of-type,
-          &:not(:placeholder-shown, [type=checkbox], [type=radio]) ~ label:first-of-type {
+          &:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
+          &:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type {
             color: var(--semanticFormsTextColor) !important;
             // TODO: finish this work on making the help icon responsive
             // width: 100%;
@@ -580,6 +580,16 @@ table.semanticForms.light {
           }
         }
 
+        // hide float label if no-float-label class is present
+        input:not([type='submit'], [type='reset'], [type='image']),
+        select,
+        textarea {
+          &:focus.no-float-label ~ label:first-of-type,
+          &:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type {
+            display: none;
+          }
+        }
+
         select ~ label:first-of-type {
           // force label to be correct color
           color: var(--semanticFormsTextColor) !important;