Reverted back to before prettier

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

Author: Yohn

.gitignore

@@ -36,4 +36,5 @@ package-lock.json
 docs/js/DialogManager.js
 docs/modal.html
 
-/.yohn
+/.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} fieldset legend {
+  #{$parent-selector} *:not([role="group"]) > label,
+  #{$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,21 +245,22 @@
 
   // 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) {
     opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
     pointer-events: none;
   }
 
-  #{$parent-selector} label[aria-disabled="true"] input[disabled],
-  #{$parent-selector} [role="group"] > label,
-  #{$parent-selector} [role="group"] > legend {
+  #{$parent-selector} label[aria-disabled="true"] input[disabled] {
+    //},
+    //#{$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);
-      transform: translateY(-50%) scale(0.85);
-      color: var(--pico-form-element-active-border-color);
-      font-size: calc(var(--pico-font-size) * 0.85);
-      line-height: 1.25;
+      padding: calc(var(#{$css-var-prefix}spacing) * 0.15)
+        calc(var(#{$css-var-prefix}spacing) * 0.5);
+      transform: translateY(-55%) scale(0.8);
+      color: var(#{$css-var-prefix}form-element-active-border-color);
+      font-size: var(#{$css-var-prefix}font-size);
+      line-height: 1.15;
       transition: all $transition-fast;
     }