ywana-core8 0.2.58 → 0.2.59

package/dist/index.css

@@ -7446,40 +7446,25 @@ input:checked~.checkmark:after {
     min-width: max-content;
 }
 
-/* Active label states */
-.textfield2 > input:focus ~ label,
-.textfield2 > input[value]:not([value=""]) ~ label,
-.textfield2 > textarea:focus ~ label,
-.textfield2 > textarea[value]:not([value=""]) ~ label,
-.textfield2.focused > label,
-.textfield2.has-placeholder > label {
+/* Active label states - only for non-outlined variant */
+.textfield2:not(.textfield2-outlined) > input:focus ~ label,
+.textfield2:not(.textfield2-outlined) > input[value]:not([value=""]) ~ label,
+.textfield2:not(.textfield2-outlined) > textarea:focus ~ label,
+.textfield2:not(.textfield2-outlined) > textarea[value]:not([value=""]) ~ label,
+.textfield2:not(.textfield2-outlined).focused > label,
+.textfield2:not(.textfield2-outlined).has-placeholder > label {
     top: 0.3rem;
     font-size: 0.8rem;
     color: var(--primary-color, #2196f3);
     transform: scale(0.9);
 }
 
-/* Outlined variant - label positioning when active */
-.textfield2-outlined > input:focus ~ label,
-.textfield2-outlined > input[value]:not([value=""]) ~ label,
-.textfield2-outlined > textarea:focus ~ label,
-.textfield2-outlined > textarea[value]:not([value=""]) ~ label,
-.textfield2-outlined.focused > label,
-.textfield2-outlined.has-placeholder > label {
-    top: -0.5rem;  /* Flotando sobre el borde */
-    left: 0.75rem;
-    font-size: 0.875rem;  /* Tamaño más legible */
-    color: var(--primary-color, #2196f3);
-    transform: none;  /* Sin escala adicional */
-}
+/* Outlined variant - label always on top (like DropDown) */
+/* No animation, no position change - label is always visible above the input */
 
 /* Error state for outlined labels */
-.textfield2-outlined.error > input:focus ~ label,
-.textfield2-outlined.error > textarea:focus ~ label,
-.textfield2-outlined.invalid > input:focus ~ label,
-.textfield2-outlined.invalid > textarea:focus ~ label,
-.textfield2-outlined.error.focused > label,
-.textfield2-outlined.invalid.focused > label {
+.textfield2-outlined.error > label,
+.textfield2-outlined.invalid > label {
     color: var(--error-color, #f44336);
 }
 
@@ -7574,17 +7559,30 @@ input:checked~.checkmark:after {
     flex-shrink: 0;
 }
 
-/* Outlined variant - Container structure */
+/* Outlined variant - Same styles as DropDown */
 .textfield2-outlined {
     position: relative;
+    padding-top: 0;  /* No extra padding, like DropDown */
+    display: flex;
+    flex-direction: column;
 }
 
-/* Outlined input container - same dimensions as normal, just with border all around */
+/* Outlined input - same dimensions as dropdown2-control */
 .textfield2-outlined > input,
 .textfield2-outlined > textarea {
+    min-height: 2.5rem;
+    height: 2.5rem;
+    padding: 0.5rem;
     border: 1px solid var(--divider-color, #e0e0e0);
     border-radius: 4px;
+    background-color: var(--paper-color, #fff);
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    box-sizing: border-box;
+}
+
+.textfield2-outlined > textarea {
+    height: auto;
+    min-height: 4rem;
 }
 
 /* Focus states for outlined inputs */
@@ -7592,6 +7590,7 @@ input:checked~.checkmark:after {
 .textfield2-outlined > textarea:focus,
 .textfield2-outlined.focused > input,
 .textfield2-outlined.focused > textarea {
+    outline: none;
     border-color: var(--primary-color, #2196f3);
     box-shadow: 0 0 0 1px var(--primary-color, #2196f3);
 }
@@ -7611,18 +7610,18 @@ input:checked~.checkmark:after {
     box-shadow: 0 0 0 1px var(--error-color, #f44336);
 }
 
-/* Outlined label positioning */
+/* Outlined label - EXACTLY like dropdown2-label */
 .textfield2-outlined > label {
     position: absolute;
+    top: -0.5rem;
     left: 0.75rem;
-    top: 1rem;  /* Centrado en el input */
     background-color: var(--paper-color, #fff);
     padding: 0 0.25rem;
-    font-size: 1rem;
-    color: var(--text-color-light, #666);
-    transition: all 0.2s ease;
+    font-size: 0.8rem;
+    color: var(--primary-color, #2196f3);
     pointer-events: none;
     z-index: 1;
+    /* No transition, no animation - static like DropDown */
 }
 
 /* Hide the focus bar for outlined variant */
@@ -7630,6 +7629,13 @@ input:checked~.checkmark:after {
     display: none;
 }
 
+/* Outlined clear button positioning */
+.textfield2-outlined .textfield2-clear,
+.textfield2-outlined .textfield2-password-toggle {
+    top: 50%;
+    transform: translateY(-50%);
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .textfield2 {
@@ -7766,7 +7772,7 @@ input:checked~.checkmark:after {
     display: flex;
     align-items: center;
     min-height: 2.5rem;
-    padding: 0.5rem;
+    padding: 0 0.5rem;
     border: 1px solid var(--divider-color, #e0e0e0);
     border-radius: 4px;
     background-color: var(--paper-color, #fff);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.2.58",
+  "version": "0.2.59",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/textfield.css

@@ -157,40 +157,25 @@
     min-width: max-content;
 }
 
-/* Active label states */
-.textfield2 > input:focus ~ label,
-.textfield2 > input[value]:not([value=""]) ~ label,
-.textfield2 > textarea:focus ~ label,
-.textfield2 > textarea[value]:not([value=""]) ~ label,
-.textfield2.focused > label,
-.textfield2.has-placeholder > label {
+/* Active label states - only for non-outlined variant */
+.textfield2:not(.textfield2-outlined) > input:focus ~ label,
+.textfield2:not(.textfield2-outlined) > input[value]:not([value=""]) ~ label,
+.textfield2:not(.textfield2-outlined) > textarea:focus ~ label,
+.textfield2:not(.textfield2-outlined) > textarea[value]:not([value=""]) ~ label,
+.textfield2:not(.textfield2-outlined).focused > label,
+.textfield2:not(.textfield2-outlined).has-placeholder > label {
     top: 0.3rem;
     font-size: 0.8rem;
     color: var(--primary-color, #2196f3);
     transform: scale(0.9);
 }
 
-/* Outlined variant - label positioning when active */
-.textfield2-outlined > input:focus ~ label,
-.textfield2-outlined > input[value]:not([value=""]) ~ label,
-.textfield2-outlined > textarea:focus ~ label,
-.textfield2-outlined > textarea[value]:not([value=""]) ~ label,
-.textfield2-outlined.focused > label,
-.textfield2-outlined.has-placeholder > label {
-    top: -0.5rem;  /* Flotando sobre el borde */
-    left: 0.75rem;
-    font-size: 0.875rem;  /* Tamaño más legible */
-    color: var(--primary-color, #2196f3);
-    transform: none;  /* Sin escala adicional */
-}
+/* Outlined variant - label always on top (like DropDown) */
+/* No animation, no position change - label is always visible above the input */
 
 /* Error state for outlined labels */
-.textfield2-outlined.error > input:focus ~ label,
-.textfield2-outlined.error > textarea:focus ~ label,
-.textfield2-outlined.invalid > input:focus ~ label,
-.textfield2-outlined.invalid > textarea:focus ~ label,
-.textfield2-outlined.error.focused > label,
-.textfield2-outlined.invalid.focused > label {
+.textfield2-outlined.error > label,
+.textfield2-outlined.invalid > label {
     color: var(--error-color, #f44336);
 }
 
@@ -285,17 +270,30 @@
     flex-shrink: 0;
 }
 
-/* Outlined variant - Container structure */
+/* Outlined variant - Same styles as DropDown */
 .textfield2-outlined {
     position: relative;
+    padding-top: 0;  /* No extra padding, like DropDown */
+    display: flex;
+    flex-direction: column;
 }
 
-/* Outlined input container - same dimensions as normal, just with border all around */
+/* Outlined input - same dimensions as dropdown2-control */
 .textfield2-outlined > input,
 .textfield2-outlined > textarea {
+    min-height: 2.5rem;
+    height: 2.5rem;
+    padding: 0.5rem;
     border: 1px solid var(--divider-color, #e0e0e0);
     border-radius: 4px;
+    background-color: var(--paper-color, #fff);
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    box-sizing: border-box;
+}
+
+.textfield2-outlined > textarea {
+    height: auto;
+    min-height: 4rem;
 }
 
 /* Focus states for outlined inputs */
@@ -303,6 +301,7 @@
 .textfield2-outlined > textarea:focus,
 .textfield2-outlined.focused > input,
 .textfield2-outlined.focused > textarea {
+    outline: none;
     border-color: var(--primary-color, #2196f3);
     box-shadow: 0 0 0 1px var(--primary-color, #2196f3);
 }
@@ -322,18 +321,18 @@
     box-shadow: 0 0 0 1px var(--error-color, #f44336);
 }
 
-/* Outlined label positioning */
+/* Outlined label - EXACTLY like dropdown2-label */
 .textfield2-outlined > label {
     position: absolute;
+    top: -0.5rem;
     left: 0.75rem;
-    top: 1rem;  /* Centrado en el input */
     background-color: var(--paper-color, #fff);
     padding: 0 0.25rem;
-    font-size: 1rem;
-    color: var(--text-color-light, #666);
-    transition: all 0.2s ease;
+    font-size: 0.8rem;
+    color: var(--primary-color, #2196f3);
     pointer-events: none;
     z-index: 1;
+    /* No transition, no animation - static like DropDown */
 }
 
 /* Hide the focus bar for outlined variant */
@@ -341,6 +340,13 @@
     display: none;
 }
 
+/* Outlined clear button positioning */
+.textfield2-outlined .textfield2-clear,
+.textfield2-outlined .textfield2-password-toggle {
+    top: 50%;
+    transform: translateY(-50%);
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .textfield2 {
@@ -477,7 +483,7 @@
     display: flex;
     align-items: center;
     min-height: 2.5rem;
-    padding: 0.5rem;
+    padding: 0 0.5rem;
     border: 1px solid var(--divider-color, #e0e0e0);
     border-radius: 4px;
     background-color: var(--paper-color, #fff);