- Updated form validation to not validate when form[novalidate]

- Updated tooltips to go multiline, max width of 250px.
-Updated card footer, to remove the margin from the last element if they are buttons or groups when in the footer
- Made container, grid, and row classes to have a parent class, so they will not effect rest of page. This will only work if you use that style css.

- Added tabs
- Added floating labels
- Added responsive nav hamburger menu

Let me know if you find any bugs or have ideas for improvements!

scss/forms/_basics.scss

@@ -257,7 +257,7 @@
   }
 
   // Aria-invalid
-  #{$parent-selector} :where(input, select, textarea) {
+  #{$parent-selector} :not([novalidate]) :where(input, select, textarea) {
     &:not(
         [type="checkbox"],
         [type="radio"],
@@ -331,6 +331,7 @@
     }
 
     &[aria-invalid="true"] {
+      // --pico-form-element-invalid-border-color
       #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
 
       &:is(:active, :focus) {

scss/forms/_checkbox-radio-switch.scss

@@ -136,8 +136,8 @@
   }
 
   // Aria-invalid
-  #{$parent-selector} [type="checkbox"],
-  #{$parent-selector} [type="checkbox"][role="switch"] {
+  #{$parent-selector} :not([novalidate]) [type="checkbox"],
+  #{$parent-selector} :not([novalidate]) [type="checkbox"][role="switch"] {
     &[aria-invalid="false"] {
       &:checked,
       &:checked:active,
@@ -156,9 +156,9 @@
     }
   }
 
-  #{$parent-selector} [type="checkbox"],
-  #{$parent-selector} [type="radio"],
-  #{$parent-selector} [type="checkbox"][role="switch"] {
+  #{$parent-selector} :not([novalidate]) [type="checkbox"],
+  #{$parent-selector} :not([novalidate]) [type="radio"],
+  #{$parent-selector} :not([novalidate]) [type="checkbox"][role="switch"] {
     &[aria-invalid="false"] {
       &:checked,
       &:checked:active,

scss/forms/_floating.scss

@@ -0,0 +1,74 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/floating") {
+  // and $enable-classes {
+  $transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  #{$parent-selector} section[role="form"] {
+    position: relative;
+    margin-bottom: 0;
+
+    > input::placeholder,
+    > textarea::placeholder {
+      color: rgba(0, 0, 0, 0);
+      transition: color $transition-fast;
+    }
+
+    > input:focus::placeholder,
+    > textarea:focus::placeholder {
+      color: var(--pico-form-element-placeholder-color);
+    }
+
+    > input + label,
+    > textarea + label,
+    > select + label {
+      position: absolute;
+      top: 35%;
+      left: 0.8rem;
+      transform: translateY(-50%);
+      background: var(#{$css-var-prefix}form-element-background-color);
+      color: var(#{$css-var-prefix}form-element-placeholder-color);
+      cursor: text;
+      transition: 0.3s ease;
+    }
+
+    // Used this before I tried: >select:has(option:checked:not([disabled]))~label
+    //> select + label {
+    //  position: absolute;
+    //  top: -5%;
+    //  left: 0.8rem;
+    //  padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
+    //  transform: translateY(-50%) scale(0.85);
+    //  background: var(#{$css-var-prefix}form-element-background-color);
+    //  cursor: text;
+    //}
+
+    > input:not(:placeholder-shown) + label,
+    > input:focus + label,
+    > textarea:not(:placeholder-shown) + label,
+    > textarea:focus + label,
+    > select:focus + 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.75);
+      line-height: 1.25;
+      transition: all $transition-fast;
+    }
+
+    @if map.get($modules, "forms/validation") {
+      > input:user-invalid:not(:placeholder-shown) + label,
+      > textarea:user-invalid:not(:placeholder-shown) + label {
+        color: var(#{$css-var-prefix}form-element-invalid-border-color);
+      }
+
+      > input:user-valid:not(:placeholder-shown) + label,
+      > textarea:user-valid:not(:placeholder-shown) + label {
+        color: var(#{$css-var-prefix}form-element-valid-border-color);
+      }
+    }
+  }
+}

scss/forms/_validation.scss

@@ -4,7 +4,9 @@
 
 @if map.get($modules, "forms/validation") {
   #{$parent-selector}
+    form:not([novalidate])
     input:user-valid:not(
+      :placeholder-shown,
       [type="button"],
       [type="reset"],
       [type="image"],
@@ -13,7 +15,9 @@
       [type="radio"]
     ),
   #{$parent-selector}
+    form:not([novalidate])
     input:user-invalid:not(
+      :placeholder-shown,
       [type="button"],
       [type="reset"],
       [type="image"],
@@ -26,8 +30,8 @@
     background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
     background-repeat: no-repeat;
   }
-  #{$parent-selector} select:user-valid:not([multiple], [size]),
-  #{$parent-selector} select:user-invalid:not([multiple], [size]) {
+  #{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]),
+  #{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
     padding-right: calc(1.5em + 0.75rem);
     padding-right: 4.2rem;
     background-position:
@@ -35,21 +39,23 @@
       center right 2.25rem;
     background-repeat: no-repeat;
   }
-  #{$parent-selector} select:user-invalid:not([multiple], [size]) {
+  #{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
     background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-invalid);
   }
-  #{$parent-selector} select:user-valid:not([multiple], [size]) {
+  #{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]) {
     background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-valid);
   }
-  #{$parent-selector} textarea:user-valid,
-  #{$parent-selector} textarea:user-invalid {
+  #{$parent-selector} form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
+  #{$parent-selector} form:not([novalidate]) 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(
+      :placeholder-shown,
       [type="button"],
       [type="reset"],
       [type="image"],
@@ -57,13 +63,19 @@
       [type="checkbox"],
       [type="radio"]
     ),
-  #{$parent-selector} select:user-invalid,
-  #{$parent-selector} textarea:user-invalid {
+  #{$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);
+
+    &:focus {
+      border-color: var(#{$css-var-prefix}form-element-invalid-active-border-color);
+    }
   }
   #{$parent-selector}
+    form:not([novalidate])
     input:user-valid:not(
+      :placeholder-shown,
       [type="button"],
       [type="reset"],
       [type="image"],
@@ -71,17 +83,23 @@
       [type="checkbox"],
       [type="radio"]
     ),
-  #{$parent-selector} select:user-valid,
-  #{$parent-selector} textarea:user-valid {
+  #{$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);
+
+    &:focus {
+      border-color: var(#{$css-var-prefix}form-element-valid-active-border-color);
+    }
   }
-  #{$parent-selector} input:required:user-invalid:is([type="checkbox"]) {
+  #{$parent-selector} form:not([novalidate]) input:required:user-invalid:is([type="checkbox"]) {
     border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
   }
-  /********** To include a message after the element with info ************/
+
   #{$parent-selector}
+    form:not([novalidate])
     input:user-valid:not(
+      :placeholder-shown,
       [type="button"],
       [type="reset"],
       [type="image"],
@@ -90,15 +108,29 @@
       [type="radio"]
     )
     + small[data-valid]::after,
-  #{$parent-selector} select:user-valid:not([multiple], [size]) + small[data-valid]::after,
-  #{$parent-selector} textarea:user-valid + 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} textarea:user-invalid + small[data-invalid]::after,
-  #{$parent-selector} select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
   #{$parent-selector}
+    form:not([novalidate])
+    textarea:user-invalid:not(:placeholder-shown)
+    + small[data-invalid]::after,
+  #{$parent-selector}
+    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"],
@@ -107,12 +139,18 @@
       [type="radio"]
     )
     + [data-invalid]::after,
-  #{$parent-selector} input[type="file"]:user-invalid + ul + [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(
+      :placeholder-shown,
       [type="button"],
       [type="reset"],
       [type="image"],
@@ -122,27 +160,42 @@
     )
     + [data-valid]::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} textarea:user-valid + [data-valid]::after,
-  #{$parent-selector} input[type="file"]:user-invalid + [data-invalid]::after,
-  #{$parent-selector} input[type="file"]:user-invalid + ul + [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;
   }
-  //input[type="file"]:user-invalid + [data-invalid]::after,
-  #{$parent-selector} input[type="file"]:user-invalid + ul + [data-invalid]::after {
+
+  #{$parent-selector}
+    form:not([novalidate])
+    input[type="file"]:user-invalid
+    + ul
+    + [data-invalid]::after {
     position: relative;
     top: -2rem;
   }
   // the file btn
-  #{$parent-selector} input[type="file"]:user-invalid::file-selector-button {
+  #{$parent-selector} form:not([novalidate]) 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);
   }