ywana-core8 0.1.80 → 0.1.82

package/package.json

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

package/src/html/button.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useEffect, useState, useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { Icon } from './icon'
 import { Text } from './text'
@@ -88,6 +88,24 @@ export const Button = (props) => {
         'aria-describedby': tooltip ? `${id}-tooltip` : undefined
     }
 
+    // Label text - support both string and React components
+    const labelElement = useMemo(() => {
+        if (!label) return null
+
+        // If label is already a React element, use it directly
+        if (React.isValidElement(label)) {
+            return label
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+            return <Text>{label}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(label)}</Text>
+    }, [label])
+
     // Icon configuration
     const iconProps = {
         icon: loading ? 'hourglass_empty' : icon,
@@ -111,7 +129,7 @@ export const Button = (props) => {
             {...restProps}
         >
             {(icon || loading) && <Icon {...iconProps} />}
-            {label && <Text>{label}</Text>}
+            {labelElement}
             {loading && !icon && <span className="loading-text">Loading...</span>}
         </button>
     )
@@ -207,8 +225,8 @@ export const ActionButton = (props) => {
 Button.propTypes = {
     /** Unique identifier for the button */
     id: PropTypes.string,
-    /** Button text label */
-    label: PropTypes.string,
+    /** Button text label - can be string or React element */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     /** Icon name for Material Icons */
     icon: PropTypes.string,
     /** Click handler function */

package/src/html/header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Icon } from './icon';
 import { Text } from './text';
 import './header.css';
@@ -18,11 +18,28 @@ export const Header = (props) => {
 
     const style = props.img ? { backgroundImage: `url(${props.img })` } : {}
 
-    const title=<Text>{props.title}</Text>
+    // Title element - support both string and React components
+    const titleElement = useMemo(() => {
+        if (!props.title) return null
+
+        // If title is already a React element, use it directly
+        if (React.isValidElement(props.title)) {
+            return props.title
+        }
+
+        // If title is a string, wrap it in Text component
+        if (typeof props.title === 'string') {
+            return <Text>{props.title}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(props.title)}</Text>
+    }, [props.title])
+
     return (
         <header className={`header ${caption} ${prominent} ${dense} ${theme} ${props.className}`} style={style}>
             {icon}
-            {props.title ? <label>{title}</label> : null }
+            {props.title ? <label>{titleElement}</label> : null }
             <span className="actions">{props.children}</span>
         </header>
     )

package/src/html/list.css

@@ -10,7 +10,6 @@
 }
 
 .list>header {
-  padding: .5rem 0 0 1.5rem;
   color: var(--text-color-light);
   text-transform: capitalize;
   font-size: .8rem;
@@ -20,10 +19,10 @@
   overflow: auto;
   list-style: none;
   margin: 0;
-  padding: 0.5rem 0;
   cursor: pointer;
   display: flex;
   flex-direction: column;
+  padding: 0;
 }
 
 .list.grouped>ul {
@@ -100,17 +99,25 @@
 /* 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;
@@ -163,25 +170,28 @@
   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 {
@@ -313,7 +323,6 @@
   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;
@@ -321,6 +330,11 @@
   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));
 }
@@ -412,7 +426,7 @@
 
 /* High Contrast Mode */
 @media (prefers-contrast: high) {
-  .list__item {
+  .list--outlined .list__item {
     border-bottom-width: 2px;
   }
 
@@ -455,10 +469,13 @@
 
   .list__item {
     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 {