ywana-core8 0.1.74 → 0.1.76

package/src/html/components_enhanced.test.js

@@ -0,0 +1,581 @@
+import React from 'react'
+import { Thumbnail } from './thumbnail'
+import { MultiSelector, ToggleButton } from './selector'
+import { Text, TEXTFORMATS } from './text'
+
+// Pruebas unitarias para los componentes mejorados
+describe('Enhanced Components - Thumbnail, Selector, Text', () => {
+    // Mock de los componentes dependientes
+    const mockIcon = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        
+        // Mock de componentes
+        jest.doMock('./icon', () => ({ Icon: mockIcon }))
+        
+        // Mock de console.warn
+        jest.spyOn(console, 'warn').mockImplementation(() => {})
+        
+        // Mock de navigator.clipboard
+        global.navigator = {
+            clipboard: {
+                writeText: jest.fn().mockResolvedValue(undefined)
+            },
+            language: 'en-US'
+        }
+    })
+
+    afterEach(() => {
+        console.warn.mockRestore()
+    })
+
+    // Thumbnail Component Tests
+    describe('Thumbnail Component', () => {
+        test('component exports correctly', () => {
+            expect(Thumbnail).toBeDefined()
+            expect(typeof Thumbnail).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(Thumbnail.propTypes).toBeDefined()
+            expect(Thumbnail.propTypes.src).toBeDefined()
+            expect(Thumbnail.propTypes.empty).toBeDefined()
+            expect(Thumbnail.propTypes.objectFit).toBeDefined()
+            expect(Thumbnail.propTypes.alt).toBeDefined()
+            expect(Thumbnail.propTypes.size).toBeDefined()
+            expect(Thumbnail.propTypes.shape).toBeDefined()
+            expect(Thumbnail.propTypes.clickable).toBeDefined()
+            expect(Thumbnail.propTypes.disabled).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(Thumbnail.defaultProps).toBeDefined()
+            expect(Thumbnail.defaultProps.src).toBe("https://www.w3schools.com/howto/img_forest.jpg")
+            expect(Thumbnail.defaultProps.empty).toBe("")
+            expect(Thumbnail.defaultProps.objectFit).toBe("cover")
+            expect(Thumbnail.defaultProps.size).toBe("medium")
+            expect(Thumbnail.defaultProps.shape).toBe("square")
+            expect(Thumbnail.defaultProps.clickable).toBe(false)
+            expect(Thumbnail.defaultProps.disabled).toBe(false)
+        })
+
+        test('handles image load correctly', () => {
+            const mockOnLoad = jest.fn()
+            const mockSetImageLoaded = jest.fn()
+            const mockSetIsLoading = jest.fn()
+            const mockSetImageError = jest.fn()
+
+            const handleLoad = (event, onLoad, setImageLoaded, setIsLoading, setImageError) => {
+                setImageLoaded(true)
+                setIsLoading(false)
+                setImageError(false)
+                if (onLoad) onLoad(event)
+            }
+
+            const mockEvent = { target: { src: 'test.jpg' } }
+            handleLoad(mockEvent, mockOnLoad, mockSetImageLoaded, mockSetIsLoading, mockSetImageError)
+
+            expect(mockSetImageLoaded).toHaveBeenCalledWith(true)
+            expect(mockSetIsLoading).toHaveBeenCalledWith(false)
+            expect(mockSetImageError).toHaveBeenCalledWith(false)
+            expect(mockOnLoad).toHaveBeenCalledWith(mockEvent)
+        })
+
+        test('handles image error correctly', () => {
+            const mockOnError = jest.fn()
+            const mockSetImageError = jest.fn()
+            const mockSetIsLoading = jest.fn()
+            const mockSetImageLoaded = jest.fn()
+
+            const handleError = (event, onError, setImageError, setIsLoading, setImageLoaded) => {
+                setImageError(true)
+                setIsLoading(false)
+                setImageLoaded(false)
+                if (onError) onError(event)
+            }
+
+            const mockEvent = { target: { src: 'test.jpg' } }
+            handleError(mockEvent, mockOnError, mockSetImageError, mockSetIsLoading, mockSetImageLoaded)
+
+            expect(mockSetImageError).toHaveBeenCalledWith(true)
+            expect(mockSetIsLoading).toHaveBeenCalledWith(false)
+            expect(mockSetImageLoaded).toHaveBeenCalledWith(false)
+            expect(mockOnError).toHaveBeenCalledWith(mockEvent)
+        })
+
+        test('handles click correctly', () => {
+            const mockOnClick = jest.fn()
+
+            const handleClick = (event, disabled, clickable, onClick) => {
+                if (disabled || !clickable) return
+                if (onClick) onClick(event)
+            }
+
+            const mockEvent = { target: {} }
+
+            // Normal click
+            handleClick(mockEvent, false, true, mockOnClick)
+            expect(mockOnClick).toHaveBeenCalledWith(mockEvent)
+
+            mockOnClick.mockClear()
+
+            // Disabled state
+            handleClick(mockEvent, true, true, mockOnClick)
+            expect(mockOnClick).not.toHaveBeenCalled()
+
+            // Not clickable
+            handleClick(mockEvent, false, false, mockOnClick)
+            expect(mockOnClick).not.toHaveBeenCalled()
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (size, shape, bordered, shadow, clickable, disabled, isLoading, imageError, imageLoaded, className) => {
+                return [
+                    'thumbnail',
+                    `thumbnail--${size}`,
+                    `thumbnail--${shape}`,
+                    bordered && 'thumbnail--bordered',
+                    shadow && 'thumbnail--shadow',
+                    clickable && 'thumbnail--clickable',
+                    disabled && 'thumbnail--disabled',
+                    isLoading && 'thumbnail--loading',
+                    imageError && 'thumbnail--error',
+                    imageLoaded && 'thumbnail--loaded',
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses('medium', 'square', false, false, false, false, false, false, false, ''))
+                .toBe('thumbnail thumbnail--medium thumbnail--square')
+            
+            expect(generateClasses('large', 'circle', true, true, true, true, true, true, true, 'custom'))
+                .toBe('thumbnail thumbnail--large thumbnail--circle thumbnail--bordered thumbnail--shadow thumbnail--clickable thumbnail--disabled thumbnail--loading thumbnail--error thumbnail--loaded custom')
+        })
+    })
+
+    // MultiSelector Component Tests
+    describe('MultiSelector Component', () => {
+        test('component exports correctly', () => {
+            expect(MultiSelector).toBeDefined()
+            expect(typeof MultiSelector).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(MultiSelector.propTypes).toBeDefined()
+            expect(MultiSelector.propTypes.options).toBeDefined()
+            expect(MultiSelector.propTypes.className).toBeDefined()
+            expect(MultiSelector.propTypes.onChange).toBeDefined()
+            expect(MultiSelector.propTypes.disabled).toBeDefined()
+            expect(MultiSelector.propTypes.maxSelections).toBeDefined()
+            expect(MultiSelector.propTypes.minSelections).toBeDefined()
+            expect(MultiSelector.propTypes.searchable).toBeDefined()
+            expect(MultiSelector.propTypes.variant).toBeDefined()
+            expect(MultiSelector.propTypes.size).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(MultiSelector.defaultProps).toBeDefined()
+            expect(MultiSelector.defaultProps.options).toEqual([])
+            expect(MultiSelector.defaultProps.disabled).toBe(false)
+            expect(MultiSelector.defaultProps.minSelections).toBe(0)
+            expect(MultiSelector.defaultProps.searchable).toBe(false)
+            expect(MultiSelector.defaultProps.variant).toBe('default')
+            expect(MultiSelector.defaultProps.size).toBe('medium')
+        })
+
+        test('validates options prop', () => {
+            const validateOptions = (options) => {
+                if (!Array.isArray(options)) {
+                    console.warn('MultiSelector: options prop must be an array')
+                }
+            }
+
+            validateOptions('not an array')
+            expect(console.warn).toHaveBeenCalledWith('MultiSelector: options prop must be an array')
+
+            console.warn.mockClear()
+            validateOptions([])
+            expect(console.warn).not.toHaveBeenCalled()
+        })
+
+        test('handles toggle selection correctly', () => {
+            const mockOnChange = jest.fn()
+            const mockSetSelections = jest.fn()
+
+            const toggleSelection = (value, disabled, selections, maxSelections, minSelections, onChange, setSelections) => {
+                if (disabled) return
+
+                const isSelected = selections.includes(value)
+                let next
+
+                if (isSelected) {
+                    if (selections.length <= minSelections) {
+                        console.warn(`MultiSelector: Cannot remove selection. Minimum ${minSelections} selections required.`)
+                        return
+                    }
+                    next = selections.filter(item => item !== value)
+                } else {
+                    if (maxSelections && selections.length >= maxSelections) {
+                        console.warn(`MultiSelector: Cannot add selection. Maximum ${maxSelections} selections allowed.`)
+                        return
+                    }
+                    next = selections.concat([value])
+                }
+
+                setSelections(next)
+                if (onChange) onChange(next)
+            }
+
+            // Normal toggle
+            toggleSelection('item1', false, [], null, 0, mockOnChange, mockSetSelections)
+            expect(mockSetSelections).toHaveBeenCalledWith(['item1'])
+            expect(mockOnChange).toHaveBeenCalledWith(['item1'])
+
+            mockOnChange.mockClear()
+            mockSetSelections.mockClear()
+
+            // Max selections reached
+            toggleSelection('item3', false, ['item1', 'item2'], 2, 0, mockOnChange, mockSetSelections)
+            expect(console.warn).toHaveBeenCalledWith('MultiSelector: Cannot add selection. Maximum 2 selections allowed.')
+            expect(mockSetSelections).not.toHaveBeenCalled()
+
+            console.warn.mockClear()
+
+            // Min selections required
+            toggleSelection('item1', false, ['item1'], null, 1, mockOnChange, mockSetSelections)
+            expect(console.warn).toHaveBeenCalledWith('MultiSelector: Cannot remove selection. Minimum 1 selections required.')
+            expect(mockSetSelections).not.toHaveBeenCalled()
+        })
+
+        test('handles clear all correctly', () => {
+            const mockOnChange = jest.fn()
+            const mockOnClear = jest.fn()
+            const mockSetSelections = jest.fn()
+
+            const handleClear = (disabled, minSelections, setSelections, onChange, onClear) => {
+                if (disabled || minSelections > 0) return
+                
+                setSelections([])
+                if (onChange) onChange([])
+                if (onClear) onClear()
+            }
+
+            // Normal clear
+            handleClear(false, 0, mockSetSelections, mockOnChange, mockOnClear)
+            expect(mockSetSelections).toHaveBeenCalledWith([])
+            expect(mockOnChange).toHaveBeenCalledWith([])
+            expect(mockOnClear).toHaveBeenCalled()
+
+            mockSetSelections.mockClear()
+            mockOnChange.mockClear()
+            mockOnClear.mockClear()
+
+            // Disabled clear
+            handleClear(true, 0, mockSetSelections, mockOnChange, mockOnClear)
+            expect(mockSetSelections).not.toHaveBeenCalled()
+
+            // Min selections prevent clear
+            handleClear(false, 1, mockSetSelections, mockOnChange, mockOnClear)
+            expect(mockSetSelections).not.toHaveBeenCalled()
+        })
+
+        test('filters options based on search', () => {
+            const options = [
+                { label: 'Apple', value: 'apple' },
+                { label: 'Banana', value: 'banana' },
+                { label: 'Cherry', value: 'cherry' }
+            ]
+
+            const filterOptions = (options, searchable, searchTerm) => {
+                return searchable && searchTerm
+                    ? options.filter(option => 
+                        option.label?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                        option.value?.toString().toLowerCase().includes(searchTerm.toLowerCase())
+                      )
+                    : options
+            }
+
+            // No search
+            expect(filterOptions(options, false, 'app')).toEqual(options)
+
+            // Search enabled
+            expect(filterOptions(options, true, 'app')).toEqual([{ label: 'Apple', value: 'apple' }])
+            expect(filterOptions(options, true, 'ban')).toEqual([{ label: 'Banana', value: 'banana' }])
+            expect(filterOptions(options, true, '')).toEqual(options)
+        })
+    })
+
+    // ToggleButton Component Tests
+    describe('ToggleButton Component', () => {
+        test('component has correct PropTypes', () => {
+            expect(ToggleButton.propTypes).toBeDefined()
+            expect(ToggleButton.propTypes.label).toBeDefined()
+            expect(ToggleButton.propTypes.value).toBeDefined()
+            expect(ToggleButton.propTypes.selected).toBeDefined()
+            expect(ToggleButton.propTypes.onToggle).toBeDefined()
+            expect(ToggleButton.propTypes.disabled).toBeDefined()
+            expect(ToggleButton.propTypes.icon).toBeDefined()
+            expect(ToggleButton.propTypes.variant).toBeDefined()
+            expect(ToggleButton.propTypes.size).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(ToggleButton.defaultProps).toBeDefined()
+            expect(ToggleButton.defaultProps.selected).toBe(false)
+            expect(ToggleButton.defaultProps.disabled).toBe(false)
+            expect(ToggleButton.defaultProps.variant).toBe('default')
+            expect(ToggleButton.defaultProps.size).toBe('medium')
+        })
+
+        test('handles toggle correctly', () => {
+            const mockOnToggle = jest.fn()
+
+            const handleToggle = (disabled, onToggle, value) => {
+                if (disabled) return
+                if (onToggle) onToggle(value)
+            }
+
+            // Normal toggle
+            handleToggle(false, mockOnToggle, 'test-value')
+            expect(mockOnToggle).toHaveBeenCalledWith('test-value')
+
+            mockOnToggle.mockClear()
+
+            // Disabled state
+            handleToggle(true, mockOnToggle, 'test-value')
+            expect(mockOnToggle).not.toHaveBeenCalled()
+        })
+
+        test('handles keyboard interaction correctly', () => {
+            const mockOnToggle = jest.fn()
+
+            const handleKeyDown = (event, disabled, onToggle, value) => {
+                if (disabled) return
+
+                switch (event.key) {
+                    case 'Enter':
+                    case ' ':
+                        event.preventDefault()
+                        if (onToggle) onToggle(value)
+                        break
+                    default:
+                        break
+                }
+            }
+
+            const mockEvent = { preventDefault: jest.fn() }
+
+            // Enter key
+            handleKeyDown({ ...mockEvent, key: 'Enter' }, false, mockOnToggle, 'test-value')
+            expect(mockEvent.preventDefault).toHaveBeenCalled()
+            expect(mockOnToggle).toHaveBeenCalledWith('test-value')
+
+            mockOnToggle.mockClear()
+            mockEvent.preventDefault.mockClear()
+
+            // Space key
+            handleKeyDown({ ...mockEvent, key: ' ' }, false, mockOnToggle, 'test-value')
+            expect(mockEvent.preventDefault).toHaveBeenCalled()
+            expect(mockOnToggle).toHaveBeenCalledWith('test-value')
+
+            mockOnToggle.mockClear()
+
+            // Other key
+            handleKeyDown({ ...mockEvent, key: 'Tab' }, false, mockOnToggle, 'test-value')
+            expect(mockOnToggle).not.toHaveBeenCalled()
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (selected, variant, size, disabled, value, className) => {
+                return [
+                    'toggle-button',
+                    selected && 'selected',
+                    `toggle-button--${variant}`,
+                    `toggle-button--${size}`,
+                    disabled && 'toggle-button--disabled',
+                    value && `toggle-button--${value}`,
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses(false, 'default', 'medium', false, 'test', ''))
+                .toBe('toggle-button toggle-button--default toggle-button--medium toggle-button--test')
+            
+            expect(generateClasses(true, 'outlined', 'large', true, 'test', 'custom'))
+                .toBe('toggle-button selected toggle-button--outlined toggle-button--large toggle-button--disabled toggle-button--test custom')
+        })
+
+        test('generates accessibility attributes correctly', () => {
+            const generateAriaAttributes = (selected, disabled, tooltip, label, value) => {
+                return {
+                    'aria-pressed': selected,
+                    'aria-disabled': disabled,
+                    'aria-label': tooltip || (typeof label === 'string' ? label : `Toggle ${value}`),
+                    role: 'button',
+                    tabIndex: disabled ? -1 : 0
+                }
+            }
+
+            const result1 = generateAriaAttributes(true, false, 'Custom tooltip', 'Test Label', 'test')
+            expect(result1['aria-pressed']).toBe(true)
+            expect(result1['aria-disabled']).toBe(false)
+            expect(result1['aria-label']).toBe('Custom tooltip')
+            expect(result1.role).toBe('button')
+            expect(result1.tabIndex).toBe(0)
+
+            const result2 = generateAriaAttributes(false, true, null, 'Test Label', 'test')
+            expect(result2['aria-pressed']).toBe(false)
+            expect(result2['aria-disabled']).toBe(true)
+            expect(result2['aria-label']).toBe('Test Label')
+            expect(result2.tabIndex).toBe(-1)
+        })
+    })
+
+    // Text Component Tests
+    describe('Text Component', () => {
+        test('component exports correctly', () => {
+            expect(Text).toBeDefined()
+            expect(typeof Text).toBe('function')
+            expect(TEXTFORMATS).toBeDefined()
+        })
+
+        test('TEXTFORMATS contains all expected formats', () => {
+            expect(TEXTFORMATS.NONE).toBe('')
+            expect(TEXTFORMATS.NUMERIC).toBe('numeric')
+            expect(TEXTFORMATS.DATE).toBe('date')
+            expect(TEXTFORMATS.TIME).toBe('time')
+            expect(TEXTFORMATS.EMAIL).toBe('email')
+            expect(TEXTFORMATS.HTML).toBe('HTML')
+            expect(TEXTFORMATS.URL).toBe('URL')
+            expect(TEXTFORMATS.STRING).toBe('string')
+            expect(TEXTFORMATS.CURRENCY).toBe('currency')
+            expect(TEXTFORMATS.PERCENTAGE).toBe('percentage')
+            expect(TEXTFORMATS.PHONE).toBe('phone')
+            expect(TEXTFORMATS.CAPITALIZE).toBe('capitalize')
+            expect(TEXTFORMATS.UPPERCASE).toBe('uppercase')
+            expect(TEXTFORMATS.LOWERCASE).toBe('lowercase')
+            expect(TEXTFORMATS.TRUNCATE).toBe('truncate')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(Text.propTypes).toBeDefined()
+            expect(Text.propTypes.format).toBeDefined()
+            expect(Text.propTypes.children).toBeDefined()
+            expect(Text.propTypes.className).toBeDefined()
+            expect(Text.propTypes.size).toBeDefined()
+            expect(Text.propTypes.weight).toBeDefined()
+            expect(Text.propTypes.color).toBeDefined()
+            expect(Text.propTypes.copyable).toBeDefined()
+            expect(Text.propTypes.loading).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(Text.defaultProps).toBeDefined()
+            expect(Text.defaultProps.format).toBe(TEXTFORMATS.HTML)
+            expect(Text.defaultProps.currency).toBe('USD')
+            expect(Text.defaultProps.loading).toBe(false)
+            expect(Text.defaultProps.copyable).toBe(false)
+            expect(Text.defaultProps.selectable).toBe(true)
+            expect(Text.defaultProps.as).toBe('span')
+        })
+
+        test('formats text correctly', () => {
+            // Mock Intl for consistent testing
+            const mockNumberFormat = jest.fn().mockImplementation(() => ({
+                format: jest.fn().mockReturnValue('1,234.56')
+            }))
+            global.Intl = { NumberFormat: mockNumberFormat }
+
+            const formatText = (children, format, locale = 'en-US') => {
+                try {
+                    switch (format) {
+                        case TEXTFORMATS.NUMERIC: {
+                            const formatter = new Intl.NumberFormat(locale)
+                            return formatter.format(Number(children))
+                        }
+                        case TEXTFORMATS.CAPITALIZE: {
+                            return String(children).charAt(0).toUpperCase() + String(children).slice(1).toLowerCase()
+                        }
+                        case TEXTFORMATS.UPPERCASE: {
+                            return String(children).toUpperCase()
+                        }
+                        case TEXTFORMATS.LOWERCASE: {
+                            return String(children).toLowerCase()
+                        }
+                        case TEXTFORMATS.PHONE: {
+                            const cleaned = String(children).replace(/\D/g, '')
+                            if (cleaned.length === 10) {
+                                return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`
+                            }
+                            return String(children)
+                        }
+                        default: {
+                            return String(children)
+                        }
+                    }
+                } catch (error) {
+                    return String(children)
+                }
+            }
+
+            expect(formatText('hello world', TEXTFORMATS.CAPITALIZE)).toBe('Hello world')
+            expect(formatText('hello world', TEXTFORMATS.UPPERCASE)).toBe('HELLO WORLD')
+            expect(formatText('HELLO WORLD', TEXTFORMATS.LOWERCASE)).toBe('hello world')
+            expect(formatText('1234567890', TEXTFORMATS.PHONE)).toBe('(123) 456-7890')
+            expect(formatText('123', TEXTFORMATS.PHONE)).toBe('123')
+        })
+
+        test('handles copy functionality correctly', async () => {
+            const handleCopy = async (copyable, formattedValue) => {
+                if (!copyable || !formattedValue) return
+                
+                try {
+                    await navigator.clipboard.writeText(formattedValue)
+                } catch (error) {
+                    console.warn('Failed to copy text:', error)
+                }
+            }
+
+            // Normal copy
+            await handleCopy(true, 'test text')
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test text')
+
+            navigator.clipboard.writeText.mockClear()
+
+            // Copy disabled
+            await handleCopy(false, 'test text')
+            expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
+
+            // Empty text
+            await handleCopy(true, '')
+            expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (size, weight, color, align, transform, decoration, truncate, loading, skeleton, copyable, selectable, className) => {
+                return [
+                    'text',
+                    size && `text--${size}`,
+                    weight && `text--${weight}`,
+                    color && `text--${color}`,
+                    align && `text--${align}`,
+                    transform && `text--${transform}`,
+                    decoration && `text--${decoration}`,
+                    truncate && 'text--truncate',
+                    loading && 'text--loading',
+                    skeleton && 'text--skeleton',
+                    copyable && 'text--copyable',
+                    !selectable && 'text--no-select',
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses('md', 'bold', 'primary', 'center', 'uppercase', 'underline', true, false, false, true, true, 'custom'))
+                .toBe('text text--md text--bold text--primary text--center text--uppercase text--underline text--truncate text--copyable custom')
+            
+            expect(generateClasses(null, null, null, null, null, null, false, true, true, false, false, ''))
+                .toBe('text text--loading text--skeleton text--no-select')
+        })
+    })
+})

package/src/html/form.css

@@ -4,14 +4,81 @@
 
 .form-grid {
     display: grid;
-    grid-auto-rows: 4.2rem;
-    grid-gap: 0rem;
+    grid-auto-rows: auto;
+    gap: 1rem;
+    align-items: start;
+}
+
+.form-grid.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.form-grid.loading {
+    opacity: 0.8;
+    cursor: wait;
 }
 
 .field-wrapper {
     display: flex;
 }
 
-.field-wrapper>* {
+.field-wrapper > * {
     flex: 1;
+    min-height: auto;
+}
+
+/* Form header improvements */
+.form-header {
+    margin-bottom: 1rem;
+}
+
+.form-header .text {
+    color: var(--text-color);
+    font-weight: 500;
+}
+
+/* Field wrapper improvements */
+.field-wrapper {
+    align-items: stretch;
+    min-height: auto;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .form-grid {
+        gap: 0.75rem;
+    }
+
+    .form-header {
+        padding: 0 0.5rem;
+        margin-bottom: 0.75rem;
+    }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .form-grid.disabled {
+        opacity: 0.8;
+    }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    .form-grid.loading {
+        cursor: default;
+    }
+}
+
+/* Print styles */
+@media print {
+    .form-grid {
+        gap: 0.5rem;
+    }
+
+    .form-grid.disabled,
+    .form-grid.loading {
+        opacity: 1;
+        cursor: default;
+    }
 }