@furystack/shades-common-components 11.0.0 → 12.0.1

package/esm/components/inputs/input.spec.js

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject';
 import { createComponent, initializeShadeRoot } from '@furystack/shades';
-import { sleepAsync } from '@furystack/utils';
+import { sleepAsync, usingAsync } from '@furystack/utils';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { ThemeProviderService } from '../../services/theme-provider-service.js';
 import { Form, FormService } from '../form.js';
@@ -14,563 +14,597 @@ describe('Input', () => {
         vi.restoreAllMocks();
     });
     it('should render with shadow DOM', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Input, null),
-        });
-        await sleepAsync(50);
-        const input = document.querySelector('shade-input');
-        expect(input).not.toBeNull();
-    });
-    it('should render the inner input element', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Input, { name: "testField" }),
-        });
-        await sleepAsync(50);
-        const input = document.querySelector('shade-input input');
-        expect(input).not.toBeNull();
-        expect(input.name).toBe('testField');
-    });
-    it('should render the label title', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(Input, { labelTitle: "Test Label" }),
-        });
-        await sleepAsync(50);
-        const label = document.querySelector('shade-input label');
-        expect(label).not.toBeNull();
-        expect(label.textContent).toContain('Test Label');
-    });
-    describe('variants', () => {
-        it('should set data-variant attribute for outlined variant', async () => {
-            const injector = new Injector();
+        await usingAsync(new Injector(), async (injector) => {
             const rootElement = document.getElementById('root');
             initializeShadeRoot({
                 injector,
                 rootElement,
-                jsxElement: createComponent(Input, { variant: "outlined" }),
+                jsxElement: createComponent(Input, null),
             });
             await sleepAsync(50);
             const input = document.querySelector('shade-input');
             expect(input).not.toBeNull();
-            expect(input.getAttribute('data-variant')).toBe('outlined');
         });
-        it('should set data-variant attribute for contained variant', async () => {
-            const injector = new Injector();
+    });
+    it('should render the inner input element', async () => {
+        await usingAsync(new Injector(), async (injector) => {
             const rootElement = document.getElementById('root');
             initializeShadeRoot({
                 injector,
                 rootElement,
-                jsxElement: createComponent(Input, { variant: "contained" }),
+                jsxElement: createComponent(Input, { name: "testField" }),
             });
             await sleepAsync(50);
-            const input = document.querySelector('shade-input');
+            const input = document.querySelector('shade-input input');
             expect(input).not.toBeNull();
-            expect(input.getAttribute('data-variant')).toBe('contained');
+            expect(input.name).toBe('testField');
         });
-        it('should not have data-variant when variant is not specified', async () => {
-            const injector = new Injector();
+    });
+    it('should render the label title', async () => {
+        await usingAsync(new Injector(), async (injector) => {
             const rootElement = document.getElementById('root');
             initializeShadeRoot({
                 injector,
                 rootElement,
-                jsxElement: createComponent(Input, null),
+                jsxElement: createComponent(Input, { labelTitle: "Test Label" }),
             });
             await sleepAsync(50);
-            const input = document.querySelector('shade-input');
-            expect(input).not.toBeNull();
-            expect(input.hasAttribute('data-variant')).toBe(false);
+            const label = document.querySelector('shade-input label');
+            expect(label).not.toBeNull();
+            expect(label.textContent).toContain('Test Label');
+        });
+    });
+    describe('variants', () => {
+        it('should set data-variant attribute for outlined variant', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { variant: "outlined" }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input');
+                expect(input).not.toBeNull();
+                expect(input.getAttribute('data-variant')).toBe('outlined');
+            });
+        });
+        it('should set data-variant attribute for contained variant', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { variant: "contained" }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input');
+                expect(input).not.toBeNull();
+                expect(input.getAttribute('data-variant')).toBe('contained');
+            });
+        });
+        it('should not have data-variant when variant is not specified', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, null),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input');
+                expect(input).not.toBeNull();
+                expect(input.hasAttribute('data-variant')).toBe(false);
+            });
         });
     });
     describe('disabled state', () => {
         it('should set data-disabled attribute when disabled', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { disabled: true }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { disabled: true }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input');
+                expect(input).not.toBeNull();
+                expect(input.hasAttribute('data-disabled')).toBe(true);
             });
-            await sleepAsync(50);
-            const input = document.querySelector('shade-input');
-            expect(input).not.toBeNull();
-            expect(input.hasAttribute('data-disabled')).toBe(true);
         });
         it('should not have data-disabled attribute when not disabled', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { disabled: false }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { disabled: false }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input');
+                expect(input).not.toBeNull();
+                expect(input.hasAttribute('data-disabled')).toBe(false);
             });
-            await sleepAsync(50);
-            const input = document.querySelector('shade-input');
-            expect(input).not.toBeNull();
-            expect(input.hasAttribute('data-disabled')).toBe(false);
         });
     });
     describe('validation', () => {
         it('should call custom validation callback', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const getValidationResult = vi.fn().mockReturnValue({ isValid: true });
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "email", getValidationResult: getValidationResult }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const getValidationResult = vi.fn().mockReturnValue({ isValid: true });
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "email", getValidationResult: getValidationResult }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input input');
+                input.value = 'test@example.com';
+                input.dispatchEvent(new Event('change', { bubbles: true }));
+                await sleepAsync(50);
+                expect(getValidationResult).toHaveBeenCalled();
             });
-            await sleepAsync(50);
-            const input = document.querySelector('shade-input input');
-            input.value = 'test@example.com';
-            input.dispatchEvent(new Event('change', { bubbles: true }));
-            await sleepAsync(50);
-            expect(getValidationResult).toHaveBeenCalled();
         });
         it('should set data-invalid when validation fails', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Input, { name: "email", getValidationResult: () => ({ isValid: false, message: 'Invalid email' }), value: "invalid" })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Input, { name: "email", getValidationResult: () => ({ isValid: false, message: 'Invalid email' }), value: "invalid" })),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const input = inputWrapper.querySelector('input');
+                input.value = 'invalid';
+                input.dispatchEvent(new Event('change', { bubbles: true }));
+                await sleepAsync(50);
+                expect(inputWrapper.hasAttribute('data-invalid')).toBe(true);
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const input = inputWrapper.querySelector('input');
-            input.value = 'invalid';
-            input.dispatchEvent(new Event('change', { bubbles: true }));
-            await sleepAsync(50);
-            expect(inputWrapper.hasAttribute('data-invalid')).toBe(true);
         });
         it('should not have data-invalid when validation passes', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "email", getValidationResult: () => ({ isValid: true }), value: "valid@email.com" }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "email", getValidationResult: () => ({ isValid: true }), value: "valid@email.com" }),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const input = inputWrapper.querySelector('input');
+                input.value = 'valid@email.com';
+                input.dispatchEvent(new Event('change', { bubbles: true }));
+                await sleepAsync(50);
+                expect(inputWrapper.hasAttribute('data-invalid')).toBe(false);
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const input = inputWrapper.querySelector('input');
-            input.value = 'valid@email.com';
-            input.dispatchEvent(new Event('change', { bubbles: true }));
-            await sleepAsync(50);
-            expect(inputWrapper.hasAttribute('data-invalid')).toBe(false);
         });
         it('should display validation message in helper text when validation fails', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Input, { name: "email", getValidationResult: () => ({ isValid: false, message: 'Email is required' }) })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Input, { name: "email", getValidationResult: () => ({ isValid: false, message: 'Email is required' }) })),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const input = inputWrapper.querySelector('input');
+                input.value = '';
+                input.dispatchEvent(new Event('change', { bubbles: true }));
+                await sleepAsync(50);
+                const helperText = inputWrapper.querySelector('.helperText');
+                expect(helperText.textContent).toBe('Email is required');
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const input = inputWrapper.querySelector('input');
-            input.value = '';
-            input.dispatchEvent(new Event('change', { bubbles: true }));
-            await sleepAsync(50);
-            const helperText = inputWrapper.querySelector('.helperText');
-            expect(helperText.textContent).toBe('Email is required');
         });
         it('should show default validation message for required field', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field", required: true }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field", required: true }),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const input = inputWrapper.querySelector('input');
+                const invalidEvent = new Event('invalid', { bubbles: true, cancelable: true });
+                input.dispatchEvent(invalidEvent);
+                await sleepAsync(50);
+                const helperText = inputWrapper.querySelector('.helperText');
+                expect(helperText.textContent).toBe('Value is required');
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const input = inputWrapper.querySelector('input');
-            const invalidEvent = new Event('invalid', { bubbles: true, cancelable: true });
-            input.dispatchEvent(invalidEvent);
-            await sleepAsync(50);
-            const helperText = inputWrapper.querySelector('.helperText');
-            expect(helperText.textContent).toBe('Value is required');
         });
     });
     describe('helper text', () => {
         it('should render custom helper text', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "email", getHelperText: () => 'Enter your email address' }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "email", getHelperText: () => 'Enter your email address' }),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const helperText = inputWrapper.querySelector('.helperText');
+                expect(helperText.textContent).toBe('Enter your email address');
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const helperText = inputWrapper.querySelector('.helperText');
-            expect(helperText.textContent).toBe('Enter your email address');
         });
         it('should call getHelperText with state and validation result when validation passes', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const getHelperText = vi.fn().mockReturnValue('Helper text');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Input, { name: "email", getHelperText: getHelperText, getValidationResult: () => ({ isValid: true }) })),
-            });
-            await sleepAsync(50);
-            const input = document.querySelector('shade-input input');
-            input.value = 'test';
-            input.dispatchEvent(new Event('change', { bubbles: true }));
-            await sleepAsync(50);
-            expect(getHelperText).toHaveBeenCalled();
-            const { calls } = getHelperText.mock;
-            const callWithValidation = calls.find((call) => call[0].validationResult !== undefined);
-            expect(callWithValidation).toBeDefined();
-            expect(callWithValidation[0].validationResult).toEqual({
-                isValid: true,
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const getHelperText = vi.fn().mockReturnValue('Helper text');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Input, { name: "email", getHelperText: getHelperText, getValidationResult: () => ({ isValid: true }) })),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input input');
+                input.value = 'test';
+                input.dispatchEvent(new Event('change', { bubbles: true }));
+                await sleepAsync(50);
+                expect(getHelperText).toHaveBeenCalled();
+                const { calls } = getHelperText.mock;
+                const callWithValidation = calls.find((call) => call[0].validationResult !== undefined);
+                expect(callWithValidation).toBeDefined();
+                expect(callWithValidation[0].validationResult).toEqual({
+                    isValid: true,
+                });
+                expect(callWithValidation[0].state).toBeDefined();
             });
-            expect(callWithValidation[0].state).toBeDefined();
         });
         it('should use validation message instead of getHelperText when validation fails with message', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const getHelperText = vi.fn().mockReturnValue('Fallback helper');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Input, { name: "email", getHelperText: getHelperText, getValidationResult: () => ({ isValid: false, message: 'Validation error message' }) })),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const getHelperText = vi.fn().mockReturnValue('Fallback helper');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Input, { name: "email", getHelperText: getHelperText, getValidationResult: () => ({ isValid: false, message: 'Validation error message' }) })),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input input');
+                input.value = 'test';
+                input.dispatchEvent(new Event('change', { bubbles: true }));
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const helperText = inputWrapper.querySelector('.helperText');
+                expect(helperText.textContent).toBe('Validation error message');
             });
-            await sleepAsync(50);
-            const input = document.querySelector('shade-input input');
-            input.value = 'test';
-            input.dispatchEvent(new Event('change', { bubbles: true }));
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const helperText = inputWrapper.querySelector('.helperText');
-            expect(helperText.textContent).toBe('Validation error message');
         });
     });
     describe('icons', () => {
         it('should render start icon when getStartIcon is provided', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "search", getStartIcon: () => '🔍' }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "search", getStartIcon: () => '🔍' }),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const startIcon = inputWrapper.querySelector('.startIcon');
+                expect(startIcon).not.toBeNull();
+                expect(startIcon.textContent).toBe('🔍');
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const startIcon = inputWrapper.querySelector('.startIcon');
-            expect(startIcon).not.toBeNull();
-            expect(startIcon.textContent).toBe('🔍');
         });
         it('should render end icon when getEndIcon is provided', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "password", getEndIcon: () => '👁️' }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "password", getEndIcon: () => '👁️' }),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const endIcon = inputWrapper.querySelector('.endIcon');
+                expect(endIcon).not.toBeNull();
+                expect(endIcon.textContent).toBe('👁️');
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const endIcon = inputWrapper.querySelector('.endIcon');
-            expect(endIcon).not.toBeNull();
-            expect(endIcon.textContent).toBe('👁️');
         });
         it('should not render icon container when getStartIcon is not provided', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field" }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field" }),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const startIcon = inputWrapper.querySelector('.startIcon');
+                expect(startIcon).toBeNull();
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const startIcon = inputWrapper.querySelector('.startIcon');
-            expect(startIcon).toBeNull();
         });
         it('should update icons on state change', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field", getEndIcon: ({ state }) => (state.focused ? '✓' : '○') }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field", getEndIcon: ({ state }) => (state.focused ? '✓' : '○') }),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const input = inputWrapper.querySelector('input');
+                const endIcon = inputWrapper.querySelector('.endIcon');
+                expect(endIcon.textContent).toBe('○');
+                input.dispatchEvent(new FocusEvent('focus'));
+                await sleepAsync(50);
+                expect(endIcon.textContent).toBe('✓');
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const input = inputWrapper.querySelector('input');
-            const endIcon = inputWrapper.querySelector('.endIcon');
-            expect(endIcon.textContent).toBe('○');
-            input.dispatchEvent(new FocusEvent('focus'));
-            await sleepAsync(50);
-            expect(endIcon.textContent).toBe('✓');
         });
     });
     describe('theme integration', () => {
         it('should set CSS color variables from theme', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field" }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field" }),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const themeService = injector.getInstance(ThemeProviderService);
+                expect(inputWrapper.style.getPropertyValue('--input-primary-color')).toBe(themeService.theme.palette.primary.main);
+                expect(inputWrapper.style.getPropertyValue('--input-error-color')).toBe(themeService.theme.palette.error.main);
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const themeService = injector.getInstance(ThemeProviderService);
-            expect(inputWrapper.style.getPropertyValue('--input-primary-color')).toBe(themeService.theme.palette.primary.main);
-            expect(inputWrapper.style.getPropertyValue('--input-error-color')).toBe(themeService.theme.palette.error.main);
         });
         it('should use custom color from defaultColor prop', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field", defaultColor: "secondary" }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field", defaultColor: "secondary" }),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const themeService = injector.getInstance(ThemeProviderService);
+                expect(inputWrapper.style.getPropertyValue('--input-primary-color')).toBe(themeService.theme.palette.secondary.main);
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const themeService = injector.getInstance(ThemeProviderService);
-            expect(inputWrapper.style.getPropertyValue('--input-primary-color')).toBe(themeService.theme.palette.secondary.main);
         });
     });
     describe('callbacks', () => {
         it('should call onTextChange when input value changes', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onTextChange = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field", onTextChange: onTextChange }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onTextChange = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field", onTextChange: onTextChange }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input input');
+                input.value = 'new value';
+                input.dispatchEvent(new Event('change', { bubbles: true }));
+                await sleepAsync(50);
+                expect(onTextChange).toHaveBeenCalledWith('new value');
             });
-            await sleepAsync(50);
-            const input = document.querySelector('shade-input input');
-            input.value = 'new value';
-            input.dispatchEvent(new Event('change', { bubbles: true }));
-            await sleepAsync(50);
-            expect(onTextChange).toHaveBeenCalledWith('new value');
         });
         it('should call onchange when input value changes', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const onchange = vi.fn();
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field", onchange: onchange }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const onchange = vi.fn();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field", onchange: onchange }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input input');
+                input.value = 'test';
+                input.dispatchEvent(new Event('change', { bubbles: true }));
+                await sleepAsync(50);
+                expect(onchange).toHaveBeenCalled();
             });
-            await sleepAsync(50);
-            const input = document.querySelector('shade-input input');
-            input.value = 'test';
-            input.dispatchEvent(new Event('change', { bubbles: true }));
-            await sleepAsync(50);
-            expect(onchange).toHaveBeenCalled();
         });
     });
     describe('focus and blur', () => {
         it('should update state on focus', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const getEndIcon = vi.fn().mockReturnValue('icon');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field", getEndIcon: getEndIcon }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const getEndIcon = vi.fn().mockReturnValue('icon');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field", getEndIcon: getEndIcon }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input input');
+                input.dispatchEvent(new FocusEvent('focus'));
+                await sleepAsync(50);
+                expect(getEndIcon).toHaveBeenLastCalledWith(expect.objectContaining({
+                    state: expect.objectContaining({
+                        focused: true,
+                    }),
+                }));
             });
-            await sleepAsync(50);
-            const input = document.querySelector('shade-input input');
-            input.dispatchEvent(new FocusEvent('focus'));
-            await sleepAsync(50);
-            expect(getEndIcon).toHaveBeenLastCalledWith(expect.objectContaining({
-                state: expect.objectContaining({
-                    focused: true,
-                }),
-            }));
         });
         it('should update state on blur', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const getEndIcon = vi.fn().mockReturnValue('icon');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field", getEndIcon: getEndIcon }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const getEndIcon = vi.fn().mockReturnValue('icon');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field", getEndIcon: getEndIcon }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input input');
+                input.dispatchEvent(new FocusEvent('focus'));
+                await sleepAsync(50);
+                input.dispatchEvent(new FocusEvent('blur'));
+                await sleepAsync(50);
+                expect(getEndIcon).toHaveBeenLastCalledWith(expect.objectContaining({
+                    state: expect.objectContaining({
+                        focused: false,
+                    }),
+                }));
             });
-            await sleepAsync(50);
-            const input = document.querySelector('shade-input input');
-            input.dispatchEvent(new FocusEvent('focus'));
-            await sleepAsync(50);
-            input.dispatchEvent(new FocusEvent('blur'));
-            await sleepAsync(50);
-            expect(getEndIcon).toHaveBeenLastCalledWith(expect.objectContaining({
-                state: expect.objectContaining({
-                    focused: false,
-                }),
-            }));
         });
     });
     describe('autofocus', () => {
         it('should set initial focused state based on autofocus prop', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            const getEndIcon = vi.fn().mockReturnValue('icon');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field", autofocus: true, getEndIcon: getEndIcon }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const getEndIcon = vi.fn().mockReturnValue('icon');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field", autofocus: true, getEndIcon: getEndIcon }),
+                });
+                await sleepAsync(50);
+                expect(getEndIcon).toHaveBeenCalledWith(expect.objectContaining({
+                    state: expect.objectContaining({
+                        focused: true,
+                    }),
+                }));
             });
-            await sleepAsync(50);
-            expect(getEndIcon).toHaveBeenCalledWith(expect.objectContaining({
-                state: expect.objectContaining({
-                    focused: true,
-                }),
-            }));
         });
     });
     describe('FormService integration', () => {
         it('should register input with FormService when inside a Form', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Form, { onSubmit: () => { }, validate: (_data) => true },
-                    createComponent(Input, { name: "email", labelTitle: "Email" }))),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Form, { onSubmit: () => { }, validate: (_data) => true },
+                        createComponent(Input, { name: "email", labelTitle: "Email" }))),
+                });
+                await sleepAsync(50);
+                const form = document.querySelector('form[is="shade-form"]');
+                const formInjector = form.injector;
+                const formService = formInjector.getInstance(FormService);
+                expect(formService.inputs.size).toBe(1);
             });
-            await sleepAsync(50);
-            const form = document.querySelector('form[is="shade-form"]');
-            const formInjector = form.injector;
-            const formService = formInjector.getInstance(FormService);
-            expect(formService.inputs.size).toBe(1);
         });
         it('should update FormService field state on validation', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Form, { onSubmit: () => { }, validate: (_data) => true },
-                    createComponent(Input, { name: "email", labelTitle: "Email", getValidationResult: ({ state }) => {
-                            if (state.value.includes('@')) {
-                                return { isValid: true };
-                            }
-                            return { isValid: false, message: 'Invalid email format' };
-                        } }))),
-            });
-            await sleepAsync(50);
-            const form = document.querySelector('form[is="shade-form"]');
-            const inputWrapper = form.querySelector('shade-input');
-            const input = inputWrapper.querySelector('input');
-            input.value = 'invalid';
-            input.dispatchEvent(new Event('change', { bubbles: true }));
-            await sleepAsync(50);
-            const formInjector = form.injector;
-            const formService = formInjector.getInstance(FormService);
-            const fieldErrors = formService.fieldErrors.getValue();
-            expect(fieldErrors.email).toBeDefined();
-            expect(fieldErrors.email?.validationResult).toEqual({
-                isValid: false,
-                message: 'Invalid email format',
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Form, { onSubmit: () => { }, validate: (_data) => true },
+                        createComponent(Input, { name: "email", labelTitle: "Email", getValidationResult: ({ state }) => {
+                                if (state.value.includes('@')) {
+                                    return { isValid: true };
+                                }
+                                return { isValid: false, message: 'Invalid email format' };
+                            } }))),
+                });
+                await sleepAsync(50);
+                const form = document.querySelector('form[is="shade-form"]');
+                const inputWrapper = form.querySelector('shade-input');
+                const input = inputWrapper.querySelector('input');
+                input.value = 'invalid';
+                input.dispatchEvent(new Event('change', { bubbles: true }));
+                await sleepAsync(50);
+                const formInjector = form.injector;
+                const formService = formInjector.getInstance(FormService);
+                const fieldErrors = formService.fieldErrors.getValue();
+                expect(fieldErrors.email).toBeDefined();
+                expect(fieldErrors.email?.validationResult).toEqual({
+                    isValid: false,
+                    message: 'Invalid email format',
+                });
             });
         });
         it('should unregister input from FormService on cleanup', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: (createComponent(Form, { onSubmit: () => { }, validate: (_data) => true },
-                    createComponent(Input, { name: "email", labelTitle: "Email" }))),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(Form, { onSubmit: () => { }, validate: (_data) => true },
+                        createComponent(Input, { name: "email", labelTitle: "Email" }))),
+                });
+                await sleepAsync(50);
+                const form = document.querySelector('form[is="shade-form"]');
+                const formInjector = form.injector;
+                const formService = formInjector.getInstance(FormService);
+                expect(formService.inputs.size).toBe(1);
+                rootElement.innerHTML = '';
+                await sleepAsync(50);
             });
-            await sleepAsync(50);
-            const form = document.querySelector('form[is="shade-form"]');
-            const formInjector = form.injector;
-            const formService = formInjector.getInstance(FormService);
-            expect(formService.inputs.size).toBe(1);
-            rootElement.innerHTML = '';
-            await sleepAsync(50);
         });
     });
     describe('default validation messages', () => {
         it('should show message for typeMismatch', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "email", type: "email" }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "email", type: "email" }),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const input = inputWrapper.querySelector('input');
+                input.value = 'not-an-email';
+                const invalidEvent = new Event('invalid', { bubbles: true, cancelable: true });
+                input.dispatchEvent(invalidEvent);
+                await sleepAsync(50);
+                const helperText = inputWrapper.querySelector('.helperText');
+                expect(helperText.textContent).toBe('Value is not valid');
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const input = inputWrapper.querySelector('input');
-            input.value = 'not-an-email';
-            const invalidEvent = new Event('invalid', { bubbles: true, cancelable: true });
-            input.dispatchEvent(invalidEvent);
-            await sleepAsync(50);
-            const helperText = inputWrapper.querySelector('.helperText');
-            expect(helperText.textContent).toBe('Value is not valid');
         });
         it('should handle pattern mismatch validation', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "code", pattern: "[A-Z]{3}" }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "code", pattern: "[A-Z]{3}" }),
+                });
+                await sleepAsync(50);
+                const inputWrapper = document.querySelector('shade-input');
+                const input = inputWrapper.querySelector('input');
+                input.value = '123';
+                const invalidEvent = new Event('invalid', { bubbles: true, cancelable: true });
+                input.dispatchEvent(invalidEvent);
+                await sleepAsync(50);
+                const helperText = inputWrapper.querySelector('.helperText');
+                expect(helperText.textContent).toBe('Value does not match the pattern');
             });
-            await sleepAsync(50);
-            const inputWrapper = document.querySelector('shade-input');
-            const input = inputWrapper.querySelector('input');
-            input.value = '123';
-            const invalidEvent = new Event('invalid', { bubbles: true, cancelable: true });
-            input.dispatchEvent(invalidEvent);
-            await sleepAsync(50);
-            const helperText = inputWrapper.querySelector('.helperText');
-            expect(helperText.textContent).toBe('Value does not match the pattern');
         });
     });
     describe('value handling', () => {
         it('should use initial value prop', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field", value: "initial value" }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field", value: "initial value" }),
+                });
+                await sleepAsync(50);
+                const input = document.querySelector('shade-input input');
+                expect(input.value).toBe('initial value');
             });
-            await sleepAsync(50);
-            const input = document.querySelector('shade-input input');
-            expect(input.value).toBe('initial value');
         });
     });
     describe('labelProps', () => {
         it('should pass labelProps to the label element', async () => {
-            const injector = new Injector();
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Input, { name: "field", labelProps: { className: 'custom-label' } }),
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(Input, { name: "field", labelProps: { className: 'custom-label' } }),
+                });
+                await sleepAsync(50);
+                const label = document.querySelector('shade-input label');
+                expect(label.className).toContain('custom-label');
             });
-            await sleepAsync(50);
-            const label = document.querySelector('shade-input label');
-            expect(label.className).toContain('custom-label');
         });
     });
 });