Reverted back to before prettier

Better floating label handling
organized validation for better scss
Updated copyright for 2025

.gitignore

@@ -37,3 +37,4 @@ docs/js/DialogManager.js
 docs/modal.html
 
 /.yohn
+_docs/

scss/components/_group.scss

@@ -208,3 +208,58 @@
     }
   }
 }
+
+@if map.get($modules, "forms/floating") {
+  #{$parent-selector} [role="group"] > section[role="form"] {
+    flex: 1;
+
+    > *,
+    > input:not([type="checkbox"], [type="radio"]),
+    > select,
+    > label,
+    > legend,
+    > details {
+      // need to check this for details > summary
+      &:focus {
+        z-index: 4;
+      }
+    }
+
+    > input:not([type="checkbox"], [type="radio"]),
+    > select {
+      &:focus {
+        z-index: 10;
+      }
+      + label {
+        z-index: 10;
+        // label was positioned above placeholder..
+        margin-top: 5px;
+      }
+    }
+
+    &:not(:first-child) {
+      > *,
+      > input:not([type="checkbox"], [type="radio"]),
+      > select,
+      > label,
+      > legend,
+      > details > summary {
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      > *,
+      > input:not([type="checkbox"], [type="radio"]),
+      > select,
+      > label,
+      > legend,
+      > details > summary {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}

scss/forms/_basics.scss

@@ -42,7 +42,7 @@
   // 2. Correct the color inheritance from `fieldset` elements in IE
   // 3. Remove the padding so developers are not caught out when they zero out
   // `fieldset` elements in all browsers
-  #{$parent-selector} legend {
+  #{$parent-selector} *:not([role="group"]) legend {
     max-width: 100%; // 1
     padding: 0; // 3
     color: inherit; // 2
@@ -138,15 +138,15 @@
   }
 
   // Label & legend
-  #{$parent-selector} label,
+  #{$parent-selector} *:not([role="group"]) > label,
-  #{$parent-selector} fieldset legend {
+  #{$parent-selector} fieldset:not([role="group"]) > legend {
     display: block;
     margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
     color: var(#{$css-var-prefix}color);
     font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
   }
 
-  #{$parent-selector} fieldset legend {
+  #{$parent-selector} fieldset:not([role="group"]) > legend {
     margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
   }
 
@@ -245,11 +245,11 @@
 
   // Disabled
   #{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
-  #{$parent-selector} [role="group"] > label,
-  #{$parent-selector} [role="group"] > legend,
   #{$parent-selector} select[disabled],
   #{$parent-selector} textarea[disabled],
   #{$parent-selector} label[aria-disabled="true"],
+  #{$parent-selector} [role="group"] > label[aria-disabled="true"],
+  #{$parent-selector} [role="group"] > legend[aria-disabled="true"],
   #{$parent-selector}
     :where(fieldset[disabled])
     :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
@@ -257,9 +257,10 @@
     pointer-events: none;
   }
 
-  #{$parent-selector} label[aria-disabled="true"] input[disabled],
+  #{$parent-selector} label[aria-disabled="true"] input[disabled] {
-  #{$parent-selector} [role="group"] > label,
+    //},
-  #{$parent-selector} [role="group"] > legend {
+    //#{$parent-selector} [role="group"] > label,
+    //#{$parent-selector} [role="group"] > legend {
     opacity: 1;
   }
 

scss/forms/_floating.scss

@@ -33,7 +33,7 @@
       transition: 0.3s ease;
     }
 
-    // Used this before I tried: >select:has(option:checked:not([disabled]))~label
+    // Used this before I tried: >select:has(option:checked:not([disabled]))+label
     //> select + label {
     //  position: absolute;
     //  top: -5%;
@@ -49,13 +49,14 @@
     > textarea:not(:placeholder-shown) + label,
     > textarea:focus + label,
     > select:focus + label,
-    > select:has(option:checked:not([disabled])) ~ label {
+    > select:has(option:checked:not([disabled])) + label {
       top: -5%;
-      padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
+      padding: calc(var(#{$css-var-prefix}spacing) * 0.15)
-      transform: translateY(-50%) scale(0.85);
+        calc(var(#{$css-var-prefix}spacing) * 0.5);
-      color: var(--pico-form-element-active-border-color);
+      transform: translateY(-55%) scale(0.8);
-      font-size: calc(var(--pico-font-size) * 0.85);
+      color: var(#{$css-var-prefix}form-element-active-border-color);
-      line-height: 1.25;
+      font-size: var(#{$css-var-prefix}font-size);
+      line-height: 1.15;
       transition: all $transition-fast;
     }
 

scss/forms/_validation.scss

@@ -3,35 +3,20 @@
 @use "../settings" as *;
 
 @if map.get($modules, "forms/validation") {
-  #{$parent-selector}
+  // these are used so much below, and was making it too long for my liking.
-    form:not([novalidate])
+  $excluded-elements: ':placeholder-shown, [type="button"], [type="reset"], [type="image"], [type="submit"], [type="checkbox"], [type="radio"]';
-    input:user-valid:not(
+
-      :placeholder-shown,
+  #{$parent-selector} form:not([novalidate]) {
-      [type="button"],
+    input:user-valid:not(#{$excluded-elements}),
-      [type="reset"],
+    input:user-invalid:not(#{$excluded-elements}) {
-      [type="image"],
-      [type="submit"],
-      [type="checkbox"],
-      [type="radio"]
-    ),
-  #{$parent-selector}
-    form:not([novalidate])
-    input:user-invalid:not(
-      :placeholder-shown,
-      [type="button"],
-      [type="reset"],
-      [type="image"],
-      [type="submit"],
-      [type="checkbox"],
-      [type="radio"]
-    ) {
       padding-right: calc(1.5em + 0.75rem);
       background-position: right calc(0.375em + 0.1875rem) center;
       background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
       background-repeat: no-repeat;
     }
-  #{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]),
+
-  #{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
+    select:user-valid:not([multiple], [size]),
+    select:user-invalid:not([multiple], [size]) {
       padding-right: calc(1.5em + 0.75rem);
       padding-right: 4.2rem;
       background-position:
@@ -39,32 +24,26 @@
         center right 2.25rem;
       background-repeat: no-repeat;
     }
-  #{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
+
+    select:user-invalid:not([multiple], [size]) {
       background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-invalid);
     }
-  #{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]) {
+
+    select:user-valid:not([multiple], [size]) {
       background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-valid);
     }
-  #{$parent-selector} form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
+
-  #{$parent-selector} form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
+    textarea:user-valid:not(:placeholder-shown),
+    textarea:user-invalid:not(:placeholder-shown) {
       padding-right: calc(1.5em + 0.75rem);
       background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
       background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
       background-repeat: no-repeat;
     }
-  #{$parent-selector}
+
-    form:not([novalidate])
+    input:user-invalid:not(#{$excluded-elements}),
-    input:user-invalid:not(
+    select:user-invalid:not([multiple], [size]),
-      :placeholder-shown,
+    textarea:user-invalid:not(:placeholder-shown) {
-      [type="button"],
-      [type="reset"],
-      [type="image"],
-      [type="submit"],
-      [type="checkbox"],
-      [type="radio"]
-    ),
-  #{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]),
-  #{$parent-selector} form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
       border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
       background-image: var(#{$css-var-prefix}icon-invalid);
 
@@ -72,19 +51,10 @@
         border-color: var(#{$css-var-prefix}form-element-invalid-active-border-color);
       }
     }
-  #{$parent-selector}
+
-    form:not([novalidate])
+    input:user-valid:not(#{$excluded-elements}),
-    input:user-valid:not(
+    select:user-valid:not([multiple], [size]),
-      :placeholder-shown,
+    textarea:user-valid:not(:placeholder-shown) {
-      [type="button"],
-      [type="reset"],
-      [type="image"],
-      [type="submit"],
-      [type="checkbox"],
-      [type="radio"]
-    ),
-  #{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]),
-  #{$parent-selector} form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
       border-color: var(#{$css-var-prefix}form-element-valid-border-color);
       background-image: var(#{$css-var-prefix}icon-valid);
 
@@ -92,116 +62,47 @@
         border-color: var(#{$css-var-prefix}form-element-valid-active-border-color);
       }
     }
-  #{$parent-selector} form:not([novalidate]) input:required:user-invalid:is([type="checkbox"]) {
+
+    input:required:user-invalid:is([type="checkbox"]) {
       border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
     }
 
-  #{$parent-selector}
+    input:user-valid:not(#{$excluded-elements}) + small[data-valid]::after,
-    form:not([novalidate])
+    select:user-valid:not([multiple], [size]) + small[data-valid]::after,
-    input:user-valid:not(
+    textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
-      :placeholder-shown,
-      [type="button"],
-      [type="reset"],
-      [type="image"],
-      [type="submit"],
-      [type="checkbox"],
-      [type="radio"]
-    )
-    + small[data-valid]::after,
-  #{$parent-selector}
-    form:not([novalidate])
-    select:user-valid:not([multiple], [size])
-    + small[data-valid]::after,
-  #{$parent-selector}
-    form:not([novalidate])
-    textarea:user-valid:not(:placeholder-shown)
-    + small[data-valid]::after {
       content: attr(data-valid);
       color: var(#{$css-var-prefix}form-element-valid-border-color);
     }
-  #{$parent-selector}
+
-    form:not([novalidate])
+    textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
-    textarea:user-invalid:not(:placeholder-shown)
+    select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
-    + small[data-invalid]::after,
+    input:user-invalid:not(#{$excluded-elements}) + [data-invalid]::after,
-  #{$parent-selector}
+    input[type="file"]:user-invalid + ul + [data-invalid]::after {
-    form:not([novalidate])
-    select:user-invalid:not([multiple], [size])
-    + small[data-invalid]::after,
-  #{$parent-selector}
-    form:not([novalidate])
-    input:user-invalid:not(
-      :placeholder-shown,
-      [type="button"],
-      [type="reset"],
-      [type="image"],
-      [type="submit"],
-      [type="checkbox"],
-      [type="radio"]
-    )
-    + [data-invalid]::after,
-  #{$parent-selector}
-    form:not([novalidate])
-    input[type="file"]:user-invalid
-    + ul
-    + [data-invalid]::after {
       content: attr(data-invalid);
       color: var(#{$css-var-prefix}form-element-invalid-border-color);
     }
-  #{$parent-selector}
+
-    form:not([novalidate])
+    input:user-valid:not(#{$excluded-elements}) + [data-valid]::after,
-    input:user-valid:not(
+    input:user-invalid:not(#{$excluded-elements}) + [data-invalid]::after,
-      :placeholder-shown,
+    textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
-      [type="button"],
+    input[type="file"]:user-invalid + [data-invalid]::after,
-      [type="reset"],
+    input[type="file"]:user-invalid + ul + [data-invalid]::after {
-      [type="image"],
-      [type="submit"],
-      [type="checkbox"],
-      [type="radio"]
-    )
-    + [data-valid]::after,
-  #{$parent-selector}
-    form:not([novalidate])
-    input:user-invalid:not(
-      :placeholder-shown,
-      [type="button"],
-      [type="reset"],
-      [type="submit"],
-      [type="checkbox"],
-      [type="radio"]
-    )
-    + [data-invalid]::after,
-  #{$parent-selector}
-    form:not([novalidate])
-    textarea:user-valid:not(:placeholder-shown)
-    + [data-valid]::after,
-  #{$parent-selector}
-    form:not([novalidate])
-    input[type="file"]:user-invalid
-    + [data-invalid]::after,
-  #{$parent-selector}
-    form:not([novalidate])
-    input[type="file"]:user-invalid
-    + ul
-    + [data-invalid]::after {
       display: block;
     }
 
-  #{$parent-selector}
+    input[type="file"]:user-invalid + ul + [data-invalid]::after {
-    form:not([novalidate])
-    input[type="file"]:user-invalid
-    + ul
-    + [data-invalid]::after {
       position: relative;
       top: -2rem;
     }
+
     // the file btn
-  #{$parent-selector} form:not([novalidate]) input[type="file"]:user-invalid::file-selector-button {
+    input[type="file"]:user-invalid::file-selector-button {
       border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
       background-color: var(#{$css-var-prefix}form-element-invalid-border-color);
     }
 
     /* File list when selected from the file input */
-  #{$parent-selector} .file-list {
+    .file-list {
       padding-left: 0;
       li {
         display: flex;
@@ -241,4 +142,5 @@
         }
       }
     }
+  }
 }

scss/helpers/_copyright.scss

@@ -1,4 +1,4 @@
 /*!
  * Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
- * Copyright 2019-2024 - Licensed under MIT
+ * Copyright 2019-2025 - Licensed under MIT
  */