perf!: Removed animation and other styled classes

Author: unlight

index.html

@@ -13,7 +13,7 @@ <h1 class="text-xl font-bold mb-4 text-gray-800">Float Labels Example</h1>
 
       <form class="space-y-4">
         <div class="float-container">
-          <label for="name" class="float-label text-gray-600"
+          <label for="name" class="float-label px-2 text-gray-600"
             >Full Name (1: empty)</label
           >
           <input
@@ -25,7 +25,7 @@ <h1 class="text-xl font-bold mb-4 text-gray-800">Float Labels Example</h1>
         </div>
 
         <div class="float-container float-always">
-          <label for="sticky" class="float-label text-gray-600"
+          <label for="sticky" class="float-label px-2 text-gray-600"
             >Sticky (sticky)</label
           >
           <input
@@ -37,7 +37,7 @@ <h1 class="text-xl font-bold mb-4 text-gray-800">Float Labels Example</h1>
         </div>
 
         <div class="float-container">
-          <label for="email" class="float-label text-gray-600"
+          <label for="email" class="float-label px-2 text-gray-600"
             >Email Address (2: is focused)</label
           >
           <input
@@ -50,7 +50,7 @@ <h1 class="text-xl font-bold mb-4 text-gray-800">Float Labels Example</h1>
         </div>
 
         <div class="float-container">
-          <label class="float-label text-gray-600"
+          <label class="float-label px-2 text-gray-600"
             >What type of event is it?</label
           >
           <select class="float-input w-full px-3 py-2 border border-gray-300">
@@ -63,7 +63,9 @@ <h1 class="text-xl font-bold mb-4 text-gray-800">Float Labels Example</h1>
         </div>
 
         <div class="float-container">
-          <label class="float-label text-gray-600">Additional details</label>
+          <label class="float-label px-2 text-gray-600"
+            >Additional details</label
+          >
           <textarea
             class="float-input w-full border border-gray-300 p-2"
             rows="3"
@@ -86,13 +88,6 @@ <h1 class="text-xl font-bold mb-4 text-gray-800">Float Labels Example</h1>
   window.onload = () => {
     const focusedElement = document.querySelector('#name');
 
-    // email.addEventListener('blur', function (e) {
-    //   // Re-focus immediately after blur
-    //   setTimeout(() => {
-    //     email.focus();
-    //   }, 2000);
-    // });
-
     focusedElement.focus();
   };
 </script>

src/float-label.css

@@ -1,8 +1,6 @@
 @layer utilities {
   .float-container {
     display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: --spacing(1) 1fr;
 
     /* Label always float (sticky) */
     &.float-always,
@@ -11,13 +9,19 @@
     /* Label when input has value and no placeholder */
     &:has(.float-input:not(:placeholder-shown)) {
       & .float-label {
-        background-color: var(--float-label-background-color);
-        @apply opacity-100 text-xs w-fit self-start -translate-y-2 translate-x-2;
+        /*background-color: var(--float-label-background-color);*/
+        @apply bg-[var(--float-label-background-color)]
+          translate-x-2
+          opacity-100
+          text-xs
+          w-fit
+          self-start
+          -translate-y-1/2;
       }
     }
 
     .float-input {
-      @apply col-[1] row-[2];
+      @apply col-start-1 row-start-1;
     }
 
     &:not(.float-always) .float-input::placeholder {
@@ -26,8 +30,9 @@
 
     /** Placeholder replacement */
     .float-label {
-      @apply col-[1] row-[2] self-center pointer-events-none transition-all duration-200 origin-[0_0] opacity-50;
-      @apply px-2;
+      @apply col-start-1 row-start-1
+        opacity-50
+        /*transition-all duration-200*/;
     }
 
     &:has(textarea.float-input) .float-label {