ywana-core8 0.1.81 → 0.1.82

package/dist/index.css

@@ -3068,7 +3068,6 @@ textarea:read-only ~ label,
 }
 
 .list>header {
-  padding: .5rem 0 0 1.5rem;
   color: var(--text-color-light);
   text-transform: capitalize;
   font-size: .8rem;
@@ -3078,10 +3077,10 @@ textarea:read-only ~ label,
   overflow: auto;
   list-style: none;
   margin: 0;
-  padding: 0.5rem 0;
   cursor: pointer;
   display: flex;
   flex-direction: column;
+  padding: 0;
 }
 
 .list.grouped>ul {
@@ -3158,17 +3157,25 @@ textarea:read-only ~ label,
 /* Search functionality */
 .list__search {
   padding: 1rem;
-  border-bottom: 1px solid var(--divider-color, #e0e0e0);
   background-color: var(--background-color-light, #fafafa);
 }
 
+/* Outlined variant - search with border */
+.list--outlined .list__search {
+  border-bottom: 1px solid var(--divider-color, #e0e0e0);
+}
+
 /* Sort functionality */
 .list__sort {
   padding: 0.5rem 1rem;
-  border-bottom: 1px solid var(--divider-color, #e0e0e0);
   background-color: var(--background-color-light, #fafafa);
 }
 
+/* Outlined variant - sort with border */
+.list--outlined .list__sort {
+  border-bottom: 1px solid var(--divider-color, #e0e0e0);
+}
+
 .list__sort-button {
   display: flex;
   align-items: center;
@@ -3221,25 +3228,28 @@ textarea:read-only ~ label,
   align-items: center;
   padding: 0.75rem;
   cursor: pointer;
-  border-bottom: solid 1px var(--divider-color, #e0e0e0);
   transition: background-color 0.2s ease, transform 0.1s ease;
   outline: none;
   position: relative;
 }
 
+/* Outlined variant - items with borders */
+.list--outlined .list__item {
+  border-bottom: solid 1px var(--divider-color, #e0e0e0);
+}
+
 .list--dense .list__item {
   padding: 0.5rem 0.75rem;
 }
 
 .list__item:focus {
   background-color: var(--focus-color, rgba(0, 0, 0, 0.08));
-  outline: 2px solid var(--primary-color, #2196f3);
   outline-offset: -2px;
 }
 
 .list__item--selected {
   background-color: var(--primary-color-lighter, #e3f2fd);
-  border-left: 4px solid var(--primary-color, #2196f3);
+  border-left: .1rem solid var(--primary-color, #2196f3);
 }
 
 .list__item--disabled {
@@ -3372,7 +3382,6 @@ textarea:read-only ~ label,
   align-items: center;
   padding: 0.5rem 0.75rem;
   background-color: var(--background-color-light, #fafafa);
-  border-bottom: solid 1px var(--divider-color, #e0e0e0);
   font-weight: 600;
   color: var(--text-color-light, #666);
   cursor: pointer;
@@ -3380,6 +3389,11 @@ textarea:read-only ~ label,
   outline: none;
 }
 
+/* Outlined variant - group headers with border */
+.list--outlined .list__group-header {
+  border-bottom: solid 1px var(--divider-color, #e0e0e0);
+}
+
 .list__group-header:hover {
   background-color: var(--hover-color, rgba(0, 0, 0, 0.04));
 }
@@ -3471,7 +3485,7 @@ textarea:read-only ~ label,
 
 /* High Contrast Mode */
 @media (prefers-contrast: high) {
-  .list__item {
+  .list--outlined .list__item {
     border-bottom-width: 2px;
   }
 
@@ -3516,10 +3530,13 @@ textarea:read-only ~ label,
   .list__item {
     -moz-column-break-inside: avoid;
          break-inside: avoid;
-    border-bottom: 1px solid black !important;
     background: white !important;
   }
 
+  .list--outlined .list__item {
+    border-bottom: 1px solid black !important;
+  }
+
   .list__item-line1,
   .list__item-line2,
   .list__item-meta {
@@ -6204,22 +6221,22 @@ body.datatable2-resizing {
 }
 
 .datatable2__filter-cell {
-    padding: 8px 12px;
+    padding: .5rem;
 }
 
 .datatable2__filter-field {
     width: 100% !important;
     height: 32px !important;
-    border: 1px solid var(--divider-color, #e0e0e0) !important;
     border-radius: 4px !important;
-    padding: 4px 8px !important;
     font-size: 0.75rem !important;
     background: white !important;
+    padding-top: 0px !important;
+}
+
+.datatable2__filter-field>input {
 }
 
 .datatable2__filter-field:focus {
-    border-color: var(--primary-color, #2196f3) !important;
-    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
 }
 
 .datatable2__filter-actions-cell {
@@ -6532,11 +6549,19 @@ body.datatable2-resizing {
 .textfield2-clear,
 .textfield2-password-toggle {
     position: absolute;
-    top: 1.5rem;
-    right: 0.2rem;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0.75rem;  /* Más espacio desde el borde */
     color: var(--text-color-light, #666);
     cursor: pointer;
     transition: color 0.2s ease;
+    z-index: 2;
+}
+
+/* Icons positioning for outlined variant */
+.textfield2-outlined .textfield2-clear,
+.textfield2-outlined .textfield2-password-toggle {
+    right: 0.75rem;  /* Alineado con el padding del input */
 }
 
 .textfield2-clear:hover,
@@ -6544,13 +6569,28 @@ body.datatable2-resizing {
     color: var(--text-color, #333);
 }
 
+/* For fields without labels, the centering still works with transform */
 .textfield2.no-label .textfield2-clear,
 .textfield2.no-label .textfield2-password-toggle {
-    top: 0.5rem;
+    /* Remove top override - let transform handle centering */
 }
 
 .textfield2-password-toggle {
-    right: 2.2rem;
+    right: 2.5rem;  /* Más espacio para el clear button */
+}
+
+/* When both clear and password toggle are present */
+.textfield2.textfield2-password .textfield2-clear {
+    right: 2.5rem;
+}
+
+/* Outlined variant - icon spacing */
+.textfield2-outlined .textfield2-password-toggle {
+    right: 2.5rem;
+}
+
+.textfield2-outlined.textfield2-password .textfield2-clear {
+    right: 2.5rem;
 }
 
 .textfield2.textfield2-date .textfield2-clear,
@@ -6597,6 +6637,32 @@ body.datatable2-resizing {
     transform: scale(0.9);
 }
 
+/* Outlined variant - label positioning when active */
+.textfield2-outlined > input:focus ~ label,
+.textfield2-outlined > input:valid ~ label,
+.textfield2-outlined > input[value]:not([value=""]) ~ label,
+.textfield2-outlined > textarea:focus ~ label,
+.textfield2-outlined > textarea:valid ~ 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 */
+}
+
+/* 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 {
+    color: var(--error-color, #f44336);
+}
+
 .textfield2.error > input:focus ~ label,
 .textfield2.error > textarea:focus ~ label,
 .textfield2.invalid > input:focus ~ label,
@@ -6664,12 +6730,18 @@ body.datatable2-resizing {
     display: flex;
     align-items: center;
     gap: 0.25rem;
-    margin-top: 0.25rem;
+    margin-top: 0.5rem;  /* Más espacio desde el input */
     font-size: 0.75rem;
     line-height: 1.2;
     min-height: 1rem;
 }
 
+/* Helper text for outlined variant */
+.textfield2-outlined .textfield2-helper {
+    margin-top: 0.5rem;
+    margin-left: 0.75rem;  /* Alineado con el input */
+}
+
 .textfield2-helper.helper {
     color: var(--text-color-light, #666);
 }
@@ -6682,39 +6754,71 @@ body.datatable2-resizing {
     flex-shrink: 0;
 }
 
-/* Outlined variant */
+/* Outlined variant - Container structure */
 .textfield2-outlined {
-    border: 1px solid var(--divider-color, #e0e0e0);
-    border-radius: 4px;
-    padding: 0.5rem;
-    background-color: var(--paper-color, #fff);
+    position: relative;
+    margin-bottom: 1.5rem;  /* Espacio para helper text */
 }
 
+/* Outlined input container - solo el input tiene borde */
 .textfield2-outlined > input,
 .textfield2-outlined > textarea {
-    border: none;
-    padding: 0.5rem;
+    width: 100%;
+    border: 1px solid var(--divider-color, #e0e0e0);
+    border-radius: 4px;
+    padding: 1rem 3rem 1rem 0.75rem;  /* Espacio para iconos a la derecha */
+    background-color: var(--paper-color, #fff);
+    font-size: 1rem;
+    line-height: 1.5;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
 }
 
-.textfield2-outlined > label {
-    background-color: var(--paper-color, #fff);
-    padding: 0 0.25rem;
-    left: 0.75rem;
-    top: -0.5rem;
+/* Adjust padding when no icons are present */
+.textfield2-outlined:not(.has-icons) > input,
+.textfield2-outlined:not(.has-icons) > textarea {
+    padding-right: 0.75rem;
 }
 
-.textfield2-outlined.focused,
+/* Focus states for outlined inputs */
 .textfield2-outlined > input:focus,
-.textfield2-outlined > textarea:focus {
+.textfield2-outlined > textarea:focus,
+.textfield2-outlined.focused > input,
+.textfield2-outlined.focused > textarea {
     border-color: var(--primary-color, #2196f3);
-    outline: none;
+    box-shadow: 0 0 0 1px var(--primary-color, #2196f3);
 }
 
-.textfield2-outlined.error,
-.textfield2-outlined.invalid {
+/* Error states for outlined inputs */
+.textfield2-outlined.error > input,
+.textfield2-outlined.error > textarea,
+.textfield2-outlined.invalid > input,
+.textfield2-outlined.invalid > textarea {
     border-color: var(--error-color, #f44336);
 }
 
+.textfield2-outlined.error > input:focus,
+.textfield2-outlined.error > textarea:focus,
+.textfield2-outlined.invalid > input:focus,
+.textfield2-outlined.invalid > textarea:focus {
+    box-shadow: 0 0 0 1px var(--error-color, #f44336);
+}
+
+/* Outlined label positioning */
+.textfield2-outlined > label {
+    position: absolute;
+    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;
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* Hide the focus bar for outlined variant */
 .textfield2-outlined .textfield2-bar {
     display: none;
 }
@@ -9392,7 +9496,7 @@ li.selected,
   background-color: var(--paper-color);
 }
 
-.login-box > main {
+.login-box>main {
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -9424,24 +9528,26 @@ li.selected,
 }
 
 @keyframes rotation-counterclock {
-    from {
-      transform: rotate(359deg);
-    }
-    to {
-      transform: rotate(0deg);
-    }
+  from {
+    transform: rotate(359deg);
   }
 
+  to {
+    transform: rotate(0deg);
+  }
+}
+
 @keyframes rotation {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(359deg);
   }
 }
 
-.login-box > footer {
+.login-box>footer {
   grid-area: footer;
   padding: 1rem;
   display: flex;
@@ -9453,6 +9559,7 @@ li.selected,
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -9464,9 +9571,9 @@ li.selected,
 }
 
 .login-box .forgot-button {
-    text-align: right;
-    font-weight: 500;
-    max-width: 15rem;
+  text-align: right;
+  font-weight: 500;
+  max-width: 15rem;
 }
 .reset-password-box {
     background-color: var(--paper-color);