- 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/_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);
+      }
+    }
+  }
+}