release: version 2025.2.5

Author: Sarmaged

README.md

@@ -41,6 +41,13 @@ If you feel awesome and want to support us in a small way, please consider starr
     <td><img src="https://img.shields.io/npm/v/style-forge.base" alt="npm"></td>
     <td>Basic styles and foundational components of the project.</td>
   </tr>
+  <tr>
+    <td>form</td>
+    <td><a href="https://github.com/Style-Forge/form" target="_blank">GitHub</a></td>
+    <td><a href="https://npmjs.com/package/style-forge.form" target="_blank">NPM</a></td>
+    <td><img src="https://img.shields.io/npm/v/style-forge.form" alt="npm"></td>
+    <td>Styles and components for creating forms.</td>
+  </tr>
   <tr>
     <td>helpers</td>
     <td><a href="https://github.com/Style-Forge/helpers" target="_blank">GitHub</a></td>
@@ -49,19 +56,12 @@ If you feel awesome and want to support us in a small way, please consider starr
     <td>Utility functions and helpers for the project.</td>
   </tr>
   <tr>
-    <td>└ media</td>
+    <td>└&nbsp;media</td>
     <td><a href="https://github.com/Style-Forge/media" target="_blank">GitHub</a></td>
     <td><a href="https://npmjs.com/package/style-forge.media" target="_blank">NPM</a></td>
     <td><img src="https://img.shields.io/npm/v/style-forge.media" alt="npm"></td>
     <td>Comprehensive CSS media query helpers for responsive web design.</td>
   </tr>
-  <tr>
-    <td>form</td>
-    <td><a href="https://github.com/Style-Forge/form" target="_blank">GitHub</a></td>
-    <td><a href="https://npmjs.com/package/style-forge.form" target="_blank">NPM</a></td>
-    <td><img src="https://img.shields.io/npm/v/style-forge.form" alt="npm"></td>
-    <td>Styles and components for creating forms.</td>
-  </tr>
   <tr>
     <td>themes</td>
     <td><a href="https://github.com/Style-Forge/themes" target="_blank">GitHub</a></td>

form.css

@@ -1,6 +1,6 @@
 {
   "name": "style-forge.form",
-  "version": "2025.1.31",
+  "version": "2025.2.5",
   "description": "Style-Forge.Form: versatile library for easy form creation, validation, styling, and submission in web apps.",
   "type": "module",
   "main": "form.css",

package.json

@@ -19,9 +19,9 @@
   text-decoration: none;
   text-transform: none;
 
-  border-radius: var(--sf-radius);
+  border-radius: 3px;
 
-  height: 32px;
+  min-height: var(--sf-input-hight);
 
   padding: var(--sf-elm-py) var(--sf-elm-px);
 
@@ -46,8 +46,8 @@ a.sf-button:not([href]),
 /* /// */
 
 html.var .sf-button {
-  border-radius: 3px;
   padding: 8px;
+  min-height: 32px;
 }
 
 html.var .sf-button:not([class*='sf-c-']) {

src/button.css

@@ -10,6 +10,7 @@
 
   width: auto;
   max-width: 100%;
+  min-height: var(--sf-input-hight);
 
   overflow: hidden;
   white-space: nowrap;
@@ -33,9 +34,9 @@
   background: hsl(var(--sf-c-form-bg) / 20%);
   border: 1px solid hsl(var(--sf-c-form-bd) / 20%);
 
-  height: 32px;
+  min-height: var(--sf-input-hight);
 
-  border-radius: var(--sf-radius);
+  border-radius: 3px;
 }
 .sf-input[type='file']:focus-visible { outline: none }
 .sf-input[type='file']:focus-visible::file-selector-button {
@@ -55,13 +56,14 @@
 
 html.var .sf-input[type='file'] {
   padding: 0; /* required */
+  min-height: 32px;
 }
 html.var .sf-input[type='file']::file-selector-button {
   color: hsl(0, 0%, 10%);
   background: hsla(0, 0%, 100%, 0.2);
   border: 1px solid hsla(0, 0%, 10%, 0.2);
 
-  border-radius: 3px;
+  min-height: 32px;
 }
 html.var .sf-input[type='file']:focus-visible::file-selector-button { outline: 1px solid hsl(200, 100%, 60%) }
 

src/file.css

@@ -26,9 +26,9 @@
   outline: none;
 
   width: 100%;
-  height: 32px;
+  min-height: var(--sf-input-hight);
 
-  padding: var(--sf-elm-py) var(--sf-elm-px);
+  padding: calc(var(--sf-elm-py) * 0.25) var(--sf-elm-px);
 
   box-sizing: border-box;
   vertical-align: top;
@@ -81,7 +81,10 @@
 
 /* /// */
 
-html.var .sf-input { padding: 8px }
+html.var .sf-input {
+  padding: 4px 8px;
+  min-height: 32px;
+}
 
 html.var .sf-input:not([class*='sf-c-']) {
   color: hsl(0, 0%, 10%);

src/input.css

@@ -28,7 +28,7 @@
 }
 
 .sf-select:not([multiple]) {
-  height: 32px;
+  min-height: var(--sf-input-hight);
   padding: 0 var(--sf-elm-px);
   border-width: 0 0 1px;
 }
@@ -50,7 +50,10 @@
 
 /* /// */
 
-html.var .sf-select:not([multiple]) { padding: 0 0 0 8px }
+html.var .sf-select:not([multiple]) {
+  padding: 0 0 0 8px;
+  min-height: 32px;
+}
 html.var .sf-select { padding: 8px 0 8px 8px }
 
 html.var .sf-select:not([class*='sf-c-']) {

src/select.css

@@ -17,7 +17,7 @@
 
   padding: var(--sf-elm-py) var(--sf-elm-px);
 
-  border-radius: var(--sf-radius);
+  border-radius: 3px;
 
   resize: vertical;
 
@@ -52,8 +52,6 @@ html.var .sf-textarea {
   min-height: calc((1.499535em + 2px + 0.5em) * 4);
 
   padding: 8px;
-
-  border-radius: 3px;
 }
 
 html.var .sf-textarea:not([class*='sf-c-']) {

src/textarea.css

@@ -12,11 +12,11 @@
   padding-bottom: 0.5em;
 }
 
-.sf-description { display: block }
-.sf-invalid, .sf-valid { display: none }
+html .sf-description { display: block }
+html .sf-invalid, html .sf-valid { display: none }
 
-.show.sf-description, .show.sf-invalid, .show.sf-valid { display: block }
-.hide.sf-description, .hide.sf-invalid, .hide.sf-valid { display: none }
+.show.sf-description, .show.sf-invalid, .show.sf-valid { display: block !important }
+.hide.sf-description, .hide.sf-invalid, .hide.sf-valid { display: none !important }
 
 .sf-invalid { color: hsl(var(--sf-c-form-error)) }
 .sf-valid:not(.sf-description) { color: hsl(var(--sf-c-form-txt)) }
@@ -96,5 +96,11 @@ html.var .validates:invalid:required { border-bottom-color: hsl(39, 100%, 50%) }
 html.var .validates:invalid:focus { border-bottom-color: hsl(0, 100%, 60%) }
 
 /* html.grid display: block (down) */
-html.grid .sf-description { display: block }
-html.grid .sf-invalid, html.grid .sf-valid { display: none }
+html.var.grid .sf-description { display: block }
+html.var.grid .sf-invalid, html.var.grid .sf-valid { display: none }
+
+html.var.grid .validates:focus ~ .sf-description { display: none }
+html.var.grid .validates:focus ~ .validates ~ .sf-description { display: block }
+
+html.var.grid .validates input[type='checkbox'] ~ .sf-invalid { display: block }
+html.var.grid .validates input[type='checkbox']:checked ~ .sf-invalid { display: none }

src/validate.css

@@ -1,5 +1,7 @@
 :root {
-  --sf-radius: 3px;
+  --sf-input-width: 32px;
+  --sf-input-hight: 32px;
+
   --sf-disabled: 0.4;
   --sf-elm-py: 0.5em;
   --sf-elm-px: 0.5em;