ywana-core8 0.1.76 → 0.1.77

package/package.json

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

package/src/html/index.js

@@ -4,6 +4,7 @@ export { CheckBox } from './checkbox'
 export { Chips, Chip } from './chip'
 export { Form } from './form'
 export { Header } from './header'
+export { Header2 } from './header2'
 export { Icon } from './icon'
 export { List } from './list'
 export { MenuIcon, Menu, MenuItem, MenuSeparator } from './menu'
@@ -13,8 +14,10 @@ export { RadioButton, RadioGroup } from './radio'
 export { Section } from './section'
 export { Tabs, Tab, Stack } from './tab'
 export { DataTable } from './table'
+export { DataTable2 } from './table2'
 export { Text, TEXTFORMATS } from './text'
 export { TextField, DropDown, TextArea, DateRange, PasswordField } from './textfield'
+export { TextField2, TextArea2, PasswordField2, DropDown2, DateRange2 } from './textfield2'
 export { TokenField } from './tokenfield'
 export { Tree, TreeNode, TreeItem } from './tree'
 export { Switch, Switch2 } from './switch'

package/src/html/tab.css

@@ -92,9 +92,9 @@
   transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
 }
 
+/* Removed focus outline to avoid interfering with selected tab design */
 .tab:focus {
-  outline: 2px solid var(--primary-color, #2196f3);
-  outline-offset: -2px;
+  outline: none;
 }
 
 .tab--disabled {
@@ -126,6 +126,7 @@
 .tab--vertical.selected {
   border-right-width: 0;
   border-left: solid 3px var(--primary-color, #2196f3);
+  border-bottom: solid 1px var(--divider-color);
 }
 
 /* Tab content */
@@ -278,7 +279,7 @@
   }
 
   .tab:focus {
-    outline-width: 3px;
+    outline: none;
   }
 
   .tab.selected {

package/src/html/table2.example.js

@@ -395,7 +395,7 @@ export const DataTable2Examples = () => {
                         borderRadius: '4px',
                         border: '1px solid #bbdefb'
                     }}>
-                        <Text size="sm" color="info">
+                        <Text size="sm" color="prima">
                             💡 <strong>Tip:</strong> Pasa el mouse sobre el borde derecho de cualquier columna para ver el cursor de redimensionamiento.
                             Arrastra para cambiar el ancho. Los cambios se registran en la consola.
                         </Text>

package/src/html/table2.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useState, useCallback, useRef, useEffect, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { FORMATS, TYPES } from '../domain/ContentType'
-import { DropDown, TextField } from './textfield'
+import { DropDown2 as DropDown, TextField2 as TextField } from './textfield2'
 import { CheckBox } from './checkbox'
 import { Icon } from './icon'
 import { Text } from './text'

package/src/html/textfield2.css

@@ -153,7 +153,8 @@
 .textfield2 > textarea:focus ~ label,
 .textfield2 > textarea:valid ~ label,
 .textfield2 > textarea[value]:not([value=""]) ~ label,
-.textfield2.focused > label {
+.textfield2.focused > label,
+.textfield2.has-placeholder > label {
     top: 0.3rem;
     font-size: 0.8rem;
     color: var(--primary-color, #2196f3);
@@ -270,13 +271,12 @@
 .textfield2-outlined > input:focus,
 .textfield2-outlined > textarea:focus {
     border-color: var(--primary-color, #2196f3);
-    box-shadow: 0 0 0 1px var(--primary-color, #2196f3);
+    outline: none;
 }
 
 .textfield2-outlined.error,
 .textfield2-outlined.invalid {
     border-color: var(--error-color, #f44336);
-    box-shadow: 0 0 0 1px var(--error-color, #f44336);
 }
 
 .textfield2-outlined .textfield2-bar {
@@ -407,7 +407,6 @@
 .dropdown2-control:focus {
     outline: none;
     border-color: var(--primary-color, #2196f3);
-    box-shadow: 0 0 0 1px var(--primary-color, #2196f3);
 }
 
 .dropdown2.disabled .dropdown2-control {