ywana-core8 0.1.75 → 0.1.77

package/src/html/tokenfield.test.js

@@ -0,0 +1,423 @@
+import React from 'react'
+import { TokenField } from './tokenfield'
+
+// Pruebas unitarias para el componente TokenField mejorado
+describe('Enhanced TokenField Component', () => {
+    // Mock de los componentes dependientes
+    const mockIcon = jest.fn()
+    const mockText = jest.fn()
+    const mockDropDown = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        
+        // Mock de componentes
+        jest.doMock('./icon', () => ({ Icon: mockIcon }))
+        jest.doMock('./text', () => ({ Text: mockText }))
+        jest.doMock('./textfield', () => ({ DropDown: mockDropDown }))
+        
+        // Mock de console.warn
+        jest.spyOn(console, 'warn').mockImplementation(() => {})
+    })
+
+    afterEach(() => {
+        console.warn.mockRestore()
+    })
+
+    // TokenField Component Tests
+    describe('TokenField Component', () => {
+        test('component exports correctly', () => {
+            expect(TokenField).toBeDefined()
+            expect(typeof TokenField).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(TokenField.propTypes).toBeDefined()
+            expect(TokenField.propTypes.id).toBeDefined()
+            expect(TokenField.propTypes.label).toBeDefined()
+            expect(TokenField.propTypes.tokens).toBeDefined()
+            expect(TokenField.propTypes.readOnly).toBeDefined()
+            expect(TokenField.propTypes.options).toBeDefined()
+            expect(TokenField.propTypes.predictive).toBeDefined()
+            expect(TokenField.propTypes.onChange).toBeDefined()
+            expect(TokenField.propTypes.disabled).toBeDefined()
+            expect(TokenField.propTypes.maxTokens).toBeDefined()
+            expect(TokenField.propTypes.minTokens).toBeDefined()
+            expect(TokenField.propTypes.allowDuplicates).toBeDefined()
+            expect(TokenField.propTypes.validateToken).toBeDefined()
+            expect(TokenField.propTypes.tokenSeparators).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(TokenField.defaultProps).toBeDefined()
+            expect(TokenField.defaultProps.tokens).toEqual([])
+            expect(TokenField.defaultProps.predictive).toBe(true)
+            expect(TokenField.defaultProps.disabled).toBe(false)
+            expect(TokenField.defaultProps.required).toBe(false)
+            expect(TokenField.defaultProps.placeholder).toBe("Add token...")
+            expect(TokenField.defaultProps.minTokens).toBe(0)
+            expect(TokenField.defaultProps.allowDuplicates).toBe(true)
+            expect(TokenField.defaultProps.tokenSeparators).toEqual([',', ';', '\n'])
+            expect(TokenField.defaultProps.size).toBe('medium')
+            expect(TokenField.defaultProps.variant).toBe('default')
+        })
+
+        test('validates props correctly', () => {
+            const validateProps = (tokens, maxTokens, minTokens) => {
+                if (!Array.isArray(tokens)) {
+                    console.warn('TokenField: tokens prop must be an array')
+                }
+                if (maxTokens && tokens.length > maxTokens) {
+                    console.warn(`TokenField: tokens count (${tokens.length}) exceeds maxTokens (${maxTokens})`)
+                }
+                if (minTokens && tokens.length < minTokens) {
+                    console.warn(`TokenField: tokens count (${tokens.length}) is below minTokens (${minTokens})`)
+                }
+            }
+
+            // Invalid tokens prop
+            validateProps('not an array', null, 0)
+            expect(console.warn).toHaveBeenCalledWith('TokenField: tokens prop must be an array')
+
+            console.warn.mockClear()
+
+            // Exceeds max tokens
+            validateProps(['token1', 'token2', 'token3'], 2, 0)
+            expect(console.warn).toHaveBeenCalledWith('TokenField: tokens count (3) exceeds maxTokens (2)')
+
+            console.warn.mockClear()
+
+            // Below min tokens
+            validateProps(['token1'], null, 2)
+            expect(console.warn).toHaveBeenCalledWith('TokenField: tokens count (1) is below minTokens (2)')
+
+            console.warn.mockClear()
+
+            // Valid props
+            validateProps(['token1', 'token2'], 3, 1)
+            expect(console.warn).not.toHaveBeenCalled()
+        })
+
+        test('validates token correctly', () => {
+            const validateTokenValue = (tokenValue, allowDuplicates, tokens, maxTokens, validateToken) => {
+                if (!tokenValue || (typeof tokenValue === 'string' && tokenValue.trim() === '')) {
+                    return { isValid: false, error: 'Token cannot be empty' }
+                }
+
+                // Check duplicates
+                if (!allowDuplicates && tokens.includes(tokenValue)) {
+                    return { isValid: false, error: 'Duplicate token not allowed' }
+                }
+
+                // Check max tokens
+                if (maxTokens && tokens.length >= maxTokens) {
+                    return { isValid: false, error: `Maximum ${maxTokens} tokens allowed` }
+                }
+
+                // Custom validation
+                if (validateToken) {
+                    const customValidation = validateToken(tokenValue, tokens)
+                    if (customValidation && !customValidation.isValid) {
+                        return customValidation
+                    }
+                }
+
+                return { isValid: true }
+            }
+
+            // Empty token
+            expect(validateTokenValue('', true, [], null, null))
+                .toEqual({ isValid: false, error: 'Token cannot be empty' })
+
+            // Duplicate token
+            expect(validateTokenValue('token1', false, ['token1'], null, null))
+                .toEqual({ isValid: false, error: 'Duplicate token not allowed' })
+
+            // Max tokens reached
+            expect(validateTokenValue('token3', true, ['token1', 'token2'], 2, null))
+                .toEqual({ isValid: false, error: 'Maximum 2 tokens allowed' })
+
+            // Custom validation failure
+            const customValidator = (token) => ({ isValid: false, error: 'Custom error' })
+            expect(validateTokenValue('token1', true, [], null, customValidator))
+                .toEqual({ isValid: false, error: 'Custom error' })
+
+            // Valid token
+            expect(validateTokenValue('token1', true, [], null, null))
+                .toEqual({ isValid: true })
+        })
+
+        test('handles remove correctly', () => {
+            const mockOnChange = jest.fn()
+            const mockOnTokenRemove = jest.fn()
+
+            const remove = (index, disabled, readOnly, tokens, minTokens, id, onChange, onTokenRemove) => {
+                if (disabled || readOnly) return
+                
+                const next = tokens.slice()
+                const removedToken = next.splice(index, 1)[0]
+                
+                // Check minimum tokens
+                if (minTokens && next.length < minTokens) {
+                    console.warn(`TokenField: Cannot remove token. Minimum ${minTokens} tokens required.`)
+                    return
+                }
+                
+                if (onChange) onChange(id, next)
+                if (onTokenRemove) onTokenRemove(removedToken, index)
+            }
+
+            const tokens = ['token1', 'token2', 'token3']
+
+            // Normal remove
+            remove(1, false, false, tokens, 0, 'field1', mockOnChange, mockOnTokenRemove)
+            expect(mockOnChange).toHaveBeenCalledWith('field1', ['token1', 'token3'])
+            expect(mockOnTokenRemove).toHaveBeenCalledWith('token2', 1)
+
+            mockOnChange.mockClear()
+            mockOnTokenRemove.mockClear()
+
+            // Disabled remove
+            remove(1, true, false, tokens, 0, 'field1', mockOnChange, mockOnTokenRemove)
+            expect(mockOnChange).not.toHaveBeenCalled()
+
+            // ReadOnly remove
+            remove(1, false, true, tokens, 0, 'field1', mockOnChange, mockOnTokenRemove)
+            expect(mockOnChange).not.toHaveBeenCalled()
+
+            // Min tokens prevent remove
+            remove(0, false, false, ['token1'], 1, 'field1', mockOnChange, mockOnTokenRemove)
+            expect(console.warn).toHaveBeenCalledWith('TokenField: Cannot remove token. Minimum 1 tokens required.')
+            expect(mockOnChange).not.toHaveBeenCalled()
+        })
+
+        test('handles add token correctly', () => {
+            const mockOnChange = jest.fn()
+            const mockOnTokenAdd = jest.fn()
+            const mockOnValidationError = jest.fn()
+
+            const addToken = (tokenValue, disabled, readOnly, tokens, maxTokens, allowDuplicates, validateToken, id, onChange, onTokenAdd, onValidationError) => {
+                if (disabled || readOnly) return false
+
+                // Validation logic
+                if (!tokenValue || tokenValue.trim() === '') {
+                    const error = 'Token cannot be empty'
+                    if (onValidationError) onValidationError(error, tokenValue)
+                    return false
+                }
+
+                if (!allowDuplicates && tokens.includes(tokenValue)) {
+                    const error = 'Duplicate token not allowed'
+                    if (onValidationError) onValidationError(error, tokenValue)
+                    return false
+                }
+
+                if (maxTokens && tokens.length >= maxTokens) {
+                    const error = `Maximum ${maxTokens} tokens allowed`
+                    if (onValidationError) onValidationError(error, tokenValue)
+                    return false
+                }
+
+                const next = Array.isArray(tokens) ? tokens.concat(tokenValue) : [tokenValue]
+                if (onChange) onChange(id, next)
+                if (onTokenAdd) onTokenAdd(tokenValue, tokens.length)
+                
+                return true
+            }
+
+            // Normal add
+            expect(addToken('newToken', false, false, ['token1'], null, true, null, 'field1', mockOnChange, mockOnTokenAdd, mockOnValidationError))
+                .toBe(true)
+            expect(mockOnChange).toHaveBeenCalledWith('field1', ['token1', 'newToken'])
+            expect(mockOnTokenAdd).toHaveBeenCalledWith('newToken', 1)
+
+            mockOnChange.mockClear()
+            mockOnTokenAdd.mockClear()
+
+            // Disabled add
+            expect(addToken('newToken', true, false, ['token1'], null, true, null, 'field1', mockOnChange, mockOnTokenAdd, mockOnValidationError))
+                .toBe(false)
+            expect(mockOnChange).not.toHaveBeenCalled()
+
+            // Duplicate add
+            expect(addToken('token1', false, false, ['token1'], null, false, null, 'field1', mockOnChange, mockOnTokenAdd, mockOnValidationError))
+                .toBe(false)
+            expect(mockOnValidationError).toHaveBeenCalledWith('Duplicate token not allowed', 'token1')
+
+            // Max tokens reached
+            expect(addToken('newToken', false, false, ['token1', 'token2'], 2, true, null, 'field1', mockOnChange, mockOnTokenAdd, mockOnValidationError))
+                .toBe(false)
+            expect(mockOnValidationError).toHaveBeenCalledWith('Maximum 2 tokens allowed', 'newToken')
+        })
+
+        test('handles keyboard events correctly', () => {
+            const mockAddToken = jest.fn().mockReturnValue(true)
+            const mockRemove = jest.fn()
+            const mockSetValue = jest.fn()
+
+            const onEnter = (event, disabled, readOnly, tokenSeparators, value, tokens, addToken, remove, setValue) => {
+                if (disabled || readOnly) return
+
+                // Handle separators
+                if (tokenSeparators.includes(event.key) || event.key === 'Enter') {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    
+                    const token = event.target.value.trim()
+                    if (token && token.length > 0) {
+                        if (addToken(token)) {
+                            setValue('')
+                        }
+                    }
+                    return
+                }
+
+                // Handle backspace to remove last token
+                if (value === '' && tokens.length > 0 && event.key === 'Backspace') {
+                    event.preventDefault()
+                    remove(tokens.length - 1)
+                    return
+                }
+            }
+
+            const mockEvent = {
+                preventDefault: jest.fn(),
+                stopPropagation: jest.fn(),
+                target: { value: 'newToken' },
+                key: 'Enter'
+            }
+
+            // Enter key
+            onEnter(mockEvent, false, false, [',', ';', '\n'], 'currentValue', ['token1'], mockAddToken, mockRemove, mockSetValue)
+            expect(mockEvent.preventDefault).toHaveBeenCalled()
+            expect(mockEvent.stopPropagation).toHaveBeenCalled()
+            expect(mockAddToken).toHaveBeenCalledWith('newToken')
+            expect(mockSetValue).toHaveBeenCalledWith('')
+
+            mockAddToken.mockClear()
+            mockEvent.preventDefault.mockClear()
+
+            // Backspace with empty value
+            const backspaceEvent = { ...mockEvent, key: 'Backspace', target: { value: '' } }
+            onEnter(backspaceEvent, false, false, [',', ';', '\n'], '', ['token1'], mockAddToken, mockRemove, mockSetValue)
+            expect(backspaceEvent.preventDefault).toHaveBeenCalled()
+            expect(mockRemove).toHaveBeenCalledWith(0)
+
+            // Disabled state
+            onEnter(mockEvent, true, false, [',', ';', '\n'], 'currentValue', ['token1'], mockAddToken, mockRemove, mockSetValue)
+            expect(mockAddToken).not.toHaveBeenCalled()
+        })
+
+        test('filters options correctly', () => {
+            const getFilteredOptions = (options, tokens, searchable, value, sortable) => {
+                if (!options) return []
+                
+                const tks = tokens || []
+                const usedValues = tks.map(token => token)
+                let filteredOptions = options.filter(option => !usedValues.includes(option.value))
+                
+                if (searchable && value) {
+                    filteredOptions = filteredOptions.filter(option => 
+                        option.label?.toLowerCase().includes(value.toLowerCase()) ||
+                        option.value?.toString().toLowerCase().includes(value.toLowerCase())
+                    )
+                }
+                
+                if (sortable) {
+                    filteredOptions.sort((a, b) => {
+                        if (!a.label || !b.label) return 0
+                        try {
+                            return a.label.localeCompare(b.label)
+                        } catch (error) {
+                            return 0
+                        }
+                    })
+                }
+                
+                return filteredOptions
+            }
+
+            const options = [
+                { label: 'Apple', value: 'apple' },
+                { label: 'Banana', value: 'banana' },
+                { label: 'Cherry', value: 'cherry' }
+            ]
+
+            // Filter used tokens
+            expect(getFilteredOptions(options, ['apple'], false, '', false))
+                .toEqual([
+                    { label: 'Banana', value: 'banana' },
+                    { label: 'Cherry', value: 'cherry' }
+                ])
+
+            // Search filter
+            expect(getFilteredOptions(options, [], true, 'app', false))
+                .toEqual([{ label: 'Apple', value: 'apple' }])
+
+            // Sort options
+            const unsortedOptions = [
+                { label: 'Zebra', value: 'zebra' },
+                { label: 'Apple', value: 'apple' }
+            ]
+            expect(getFilteredOptions(unsortedOptions, [], false, '', true))
+                .toEqual([
+                    { label: 'Apple', value: 'apple' },
+                    { label: 'Zebra', value: 'zebra' }
+                ])
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (size, variant, disabled, readOnly, required, isFocused, error, className) => {
+                return [
+                    'tokenField',
+                    `tokenField--${size}`,
+                    `tokenField--${variant}`,
+                    disabled && 'tokenField--disabled',
+                    readOnly && 'tokenField--readonly',
+                    required && 'tokenField--required',
+                    isFocused && 'tokenField--focused',
+                    error && 'tokenField--error',
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses('medium', 'default', false, false, false, false, null, ''))
+                .toBe('tokenField tokenField--medium tokenField--default')
+            
+            expect(generateClasses('large', 'outlined', true, true, true, true, 'Error message', 'custom'))
+                .toBe('tokenField tokenField--large tokenField--outlined tokenField--disabled tokenField--readonly tokenField--required tokenField--focused tokenField--error custom')
+        })
+
+        test('handles clear all correctly', () => {
+            const mockOnChange = jest.fn()
+            const mockOnClear = jest.fn()
+            const mockSetValue = jest.fn()
+
+            const handleClear = (disabled, readOnly, minTokens, id, onChange, onClear, setValue) => {
+                if (disabled || readOnly || minTokens > 0) return
+                
+                if (onChange) onChange(id, [])
+                if (onClear) onClear()
+                setValue('')
+            }
+
+            // Normal clear
+            handleClear(false, false, 0, 'field1', mockOnChange, mockOnClear, mockSetValue)
+            expect(mockOnChange).toHaveBeenCalledWith('field1', [])
+            expect(mockOnClear).toHaveBeenCalled()
+            expect(mockSetValue).toHaveBeenCalledWith('')
+
+            mockOnChange.mockClear()
+            mockOnClear.mockClear()
+            mockSetValue.mockClear()
+
+            // Disabled clear
+            handleClear(true, false, 0, 'field1', mockOnChange, mockOnClear, mockSetValue)
+            expect(mockOnChange).not.toHaveBeenCalled()
+
+            // Min tokens prevent clear
+            handleClear(false, false, 1, 'field1', mockOnChange, mockOnClear, mockSetValue)
+            expect(mockOnChange).not.toHaveBeenCalled()
+        })
+    })
+})

package/src/html/tooltip-positioning-demo.js

@@ -0,0 +1,187 @@
+import React from 'react'
+import { Section } from './section'
+import { Icon } from './icon'
+import { Button } from './button'
+
+/**
+ * Demostración de la corrección del posicionamiento de tooltips
+ */
+export const TooltipPositioningDemo = () => {
+    return (
+        <div style={{ padding: '2rem', maxWidth: '800px' }}>
+            <h1>Corrección del Posicionamiento de Tooltips</h1>
+            
+            <div style={{ 
+                background: '#f8f9fa', 
+                padding: '1rem', 
+                borderRadius: '8px',
+                marginBottom: '2rem',
+                border: '1px solid #e9ecef'
+            }}>
+                <h3>🐛 Problema Identificado:</h3>
+                <p>Los tooltips se posicionaban encima del icono, dificultando hacer clic en él.</p>
+                
+                <h3>✅ Solución Implementada:</h3>
+                <ul>
+                    <li><strong>Posicionamiento mejorado:</strong> <code>top: '-3rem', left: '-2rem'</code></li>
+                    <li><strong>pointer-events: none</strong> en el tooltip para evitar interferencia</li>
+                    <li><strong>z-index: 1000</strong> para asegurar visibilidad</li>
+                    <li><strong>Animación suave</strong> con delay para evitar tooltips accidentales</li>
+                    <li><strong>Tamaño compacto</strong> y sombra sutil para mejor UX</li>
+                </ul>
+            </div>
+
+            {/* Ejemplo de sección con tooltip corregido */}
+            <Section 
+                title="Sección con Tooltip Corregido" 
+                icon="bug_report"
+                open={false}
+            >
+                <div style={{ padding: '1rem' }}>
+                    <p>✅ <strong>Tooltip posicionado correctamente</strong></p>
+                    <p>Ahora el tooltip aparece arriba y a la izquierda del icono, sin interferir con los clics.</p>
+                    
+                    <div style={{ 
+                        background: '#e8f5e8', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        margin: '1rem 0'
+                    }}>
+                        <strong>Prueba la funcionalidad:</strong>
+                        <ol>
+                            <li>Haz hover sobre el icono de expansión/contracción</li>
+                            <li>Observa que el tooltip aparece sin tapar el icono</li>
+                            <li>Haz clic en el icono - debería funcionar sin problemas</li>
+                            <li>El tooltip desaparece al hacer clic</li>
+                        </ol>
+                    </div>
+                </div>
+            </Section>
+
+            {/* Comparación con otros iconos */}
+            <Section 
+                title="Comparación con Otros Iconos" 
+                icon="compare"
+                open={true}
+            >
+                <div style={{ padding: '1rem' }}>
+                    <p>Otros iconos en el sistema también se benefician de estas mejoras:</p>
+                    
+                    <div style={{ 
+                        display: 'flex', 
+                        gap: '1rem', 
+                        alignItems: 'center',
+                        margin: '1rem 0'
+                    }}>
+                        <Icon 
+                            icon="info" 
+                            clickable 
+                            tooltip={{ 
+                                text: 'Información',
+                                top: '-3rem',
+                                left: '-1rem'
+                            }} 
+                        />
+                        <Icon 
+                            icon="settings" 
+                            clickable 
+                            tooltip={{ 
+                                text: 'Configuración',
+                                top: '-3rem',
+                                left: '-2rem'
+                            }} 
+                        />
+                        <Icon 
+                            icon="help" 
+                            clickable 
+                            tooltip={{ 
+                                text: 'Ayuda',
+                                top: '-3rem',
+                                left: '-1rem'
+                            }} 
+                        />
+                        <Button 
+                            label="Botón con Tooltip" 
+                            icon="star"
+                            outlined
+                        />
+                    </div>
+                </div>
+            </Section>
+
+            {/* Mejoras técnicas */}
+            <Section 
+                title="Mejoras Técnicas Implementadas" 
+                icon="engineering"
+                open={true}
+            >
+                <div style={{ padding: '1rem' }}>
+                    <h4>CSS Mejorado:</h4>
+                    <pre style={{ 
+                        background: '#f8f9fa', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        fontSize: '0.9rem',
+                        overflow: 'auto'
+                    }}>
+{`.tooltip-text {
+    pointer-events: none; /* No interfiere con clics */
+    z-index: 1000; /* Siempre visible */
+    white-space: nowrap; /* Texto en una línea */
+    font-size: 0.8rem; /* Tamaño compacto */
+}
+
+.tooltip:hover .tooltip-text {
+    animation: tooltip-fade-in 0.2s ease-in-out;
+    animation-delay: 0.5s; /* Evita tooltips accidentales */
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}`}
+                    </pre>
+
+                    <h4>Posicionamiento Específico:</h4>
+                    <pre style={{ 
+                        background: '#f8f9fa', 
+                        padding: '1rem', 
+                        borderRadius: '4px',
+                        fontSize: '0.9rem'
+                    }}>
+{`tooltip={{ 
+    text: isOpen ? 'Contraer sección' : 'Expandir sección',
+    top: '-3rem',  // Arriba del icono
+    left: '-2rem'  // Ligeramente a la izquierda
+}}`}
+                    </pre>
+                </div>
+            </Section>
+
+            {/* Pruebas actualizadas */}
+            <Section 
+                title="Pruebas Actualizadas" 
+                icon="verified"
+                open={false}
+            >
+                <div style={{ padding: '1rem' }}>
+                    <p>Las pruebas unitarias se actualizaron para verificar:</p>
+                    <ul>
+                        <li>✅ Texto del tooltip correcto según el estado</li>
+                        <li>✅ Posicionamiento que evita superposición</li>
+                        <li>✅ Configuración completa del tooltip</li>
+                    </ul>
+                    
+                    <p>Ejecuta las pruebas con:</p>
+                    <code style={{ 
+                        background: '#f8f9fa', 
+                        padding: '0.5rem', 
+                        borderRadius: '4px',
+                        display: 'block',
+                        margin: '0.5rem 0'
+                    }}>
+                        npm test -- --testPathPattern=section.test.js --watchAll=false
+                    </code>
+                </div>
+            </Section>
+        </div>
+    )
+}
+
+export default TooltipPositioningDemo

package/src/html/tooltip.css

@@ -5,7 +5,10 @@
 
 .tooltip-text {
     display: none;
-    z-index: 10;
+    z-index: 1000;
+    pointer-events: none; /* Evita que el tooltip interfiera con los clics */
+    white-space: nowrap; /* Evita que el texto se rompa en múltiples líneas */
+    font-size: 0.8rem; /* Tamaño de fuente más pequeño */
 }
 
 .tooltip:hover .tooltip-text {
@@ -14,6 +17,26 @@
     border: solid 1px var(--divider-color);
     background-color: var(--text-color-light);
     color: var(--paper-color);
-    padding: .5rem;
+    padding: .4rem .6rem; /* Padding más compacto */
     border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Sombra sutil */
+    animation: tooltip-fade-in 0.2s ease-in-out; /* Animación suave */
+}
+
+/* Animación de aparición del tooltip */
+@keyframes tooltip-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Delay para evitar tooltips accidentales */
+.tooltip:hover .tooltip-text {
+    animation-delay: 0.5s;
+    animation-fill-mode: both;
 }