@nuvia-ui/components 4.0.1

package/src/ds-input/ds-input.test.js

@@ -0,0 +1,792 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-input.js';
+import '../ds-icon/ds-icon.js';
+import '../ds-icon-button/ds-icon-button.js';
+
+describe('ds-input', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should render with default props', async () => {
+        container.innerHTML = '<ds-input></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(element).toBeTruthy();
+        expect(element.tagName.toLowerCase()).toBe('ds-input');
+    });
+
+    it('should display label when provided', async () => {
+        container.innerHTML = '<ds-input label="Email"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const label = element.shadowRoot.querySelector('label');
+        expect(label).toBeTruthy();
+        expect(label.textContent).toBe('Email');
+    });
+
+    it('should display info button when info prop is set', async () => {
+        container.innerHTML = '<ds-input label="Email" info="Info text"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const infoButton = element.shadowRoot.querySelector('ds-icon-button');
+        expect(infoButton).toBeTruthy();
+    });
+
+    it('should not display info button when info prop is empty', async () => {
+        container.innerHTML = '<ds-input label="Email"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const infoButton = element.shadowRoot.querySelector('ds-icon-button');
+        expect(infoButton).toBeFalsy();
+    });
+
+    it('should wrap info button with ds-tooltip when info prop is set', async () => {
+        container.innerHTML = '<ds-input label="Email" info="Info text"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const tooltip = element.shadowRoot.querySelector('ds-tooltip');
+        expect(tooltip).toBeTruthy();
+
+        // Verify tooltip wraps the info button
+        const infoButton = tooltip.querySelector('ds-icon-button');
+        expect(infoButton).toBeTruthy();
+    });
+
+    it('should set tooltip content to info text', async () => {
+        const infoText = 'This is helpful information';
+        container.innerHTML = `<ds-input label="Email" info="${infoText}"></ds-input>`;
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const tooltip = element.shadowRoot.querySelector('ds-tooltip');
+        expect(tooltip).toBeTruthy();
+        expect(tooltip.getAttribute('content')).toBe(infoText);
+    });
+
+    it('should set tooltip placement to top for info button', async () => {
+        container.innerHTML = '<ds-input label="Email" info="Info text"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const tooltip = element.shadowRoot.querySelector('ds-tooltip');
+        expect(tooltip).toBeTruthy();
+        expect(tooltip.getAttribute('placement')).toBe('top');
+    });
+
+    it('should not render ds-tooltip when info prop is empty', async () => {
+        container.innerHTML = '<ds-input label="Email"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const tooltip = element.shadowRoot.querySelector('ds-tooltip');
+        expect(tooltip).toBeFalsy();
+    });
+
+    it('should display placeholder', async () => {
+        container.innerHTML = '<ds-input placeholder="Enter email"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.placeholder).toBe('Enter email');
+    });
+
+    it('should display value', async () => {
+        container.innerHTML = '<ds-input value="test@example.com"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.value).toBe('test@example.com');
+    });
+
+    it('should update value on input', async () => {
+        container.innerHTML = '<ds-input></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.value = 'new value';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+
+        expect(element.value).toBe('new value');
+    });
+
+    it('should display helper text', async () => {
+        container.innerHTML = '<ds-input helper="This is help text"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const message = element.shadowRoot.querySelector('.field-message');
+        expect(message).toBeTruthy();
+        expect(message.textContent).toContain('This is help text');
+    });
+
+    it('should display error text with icon', async () => {
+        container.innerHTML = '<ds-input validation-status="error" validation-message="This is an error"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const message = element.shadowRoot.querySelector('.field-message--error');
+        const icon = message?.querySelector('ds-icon');
+
+        expect(message).toBeTruthy();
+        expect(message.textContent).toContain('This is an error');
+        expect(icon).toBeTruthy();
+        expect(icon.getAttribute('name')).toBe('warning');
+    });
+
+    it('should prioritize error over helper text', async () => {
+        container.innerHTML = '<ds-input helper="Helper text" validation-status="error" validation-message="Error text"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const message = element.shadowRoot.querySelector('.field-message');
+        expect(message.textContent).toContain('Error text');
+        expect(message.textContent).not.toContain('Helper text');
+    });
+
+    it('should respect disabled state', async () => {
+        container.innerHTML = '<ds-input disabled></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.disabled).toBe(true);
+        expect(element.hasAttribute('disabled')).toBe(true);
+    });
+
+    it('should respect readonly state', async () => {
+        container.innerHTML = '<ds-input readonly></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.readOnly).toBe(true);
+        expect(element.hasAttribute('readonly')).toBe(true);
+    });
+
+    it('should respect required state', async () => {
+        container.innerHTML = '<ds-input required></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.required).toBe(true);
+        expect(element.hasAttribute('required')).toBe(true);
+    });
+
+    it('should set input type', async () => {
+        container.innerHTML = '<ds-input type="email"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.type).toBe('email');
+    });
+
+    it('should render prefix slot content', async () => {
+        container.innerHTML = `
+      <ds-input>
+        <span slot="prefix">$</span>
+      </ds-input>
+    `;
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const slottedContent = element.querySelector('[slot="prefix"]');
+        expect(slottedContent).toBeTruthy();
+        expect(slottedContent.textContent).toBe('$');
+    });
+
+    it('should render suffix slot content', async () => {
+        container.innerHTML = `
+      <ds-input>
+        <span slot="suffix">USD</span>
+      </ds-input>
+    `;
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const slottedContent = element.querySelector('[slot="suffix"]');
+        expect(slottedContent).toBeTruthy();
+        expect(slottedContent.textContent).toBe('USD');
+    });
+
+    it('should render action slot content', async () => {
+        container.innerHTML = `
+      <ds-input>
+        <ds-icon-button slot="action" icon="search"></ds-icon-button>
+      </ds-input>
+    `;
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const slottedAction = element.querySelector('[slot="action"]');
+        expect(slottedAction).toBeTruthy();
+    });
+
+    it('should emit input event on value change', async () => {
+        container.innerHTML = '<ds-input></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        let eventFired = false;
+        let eventDetail = null;
+
+        element.addEventListener('input', (e) => {
+            eventFired = true;
+            eventDetail = e.detail;
+        });
+
+        const input = element.shadowRoot.querySelector('input');
+        input.value = 'test';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+
+        expect(eventFired).toBe(true);
+        expect(eventDetail.value).toBe('test');
+    });
+
+    it('should emit change event on blur', async () => {
+        container.innerHTML = '<ds-input></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        let eventFired = false;
+
+        element.addEventListener('change', () => {
+            eventFired = true;
+        });
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+
+        expect(eventFired).toBe(true);
+    });
+
+    it('should set aria-invalid when error is present', async () => {
+        container.innerHTML = '<ds-input validation-status="error" validation-message="Error message"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.getAttribute('aria-invalid')).toBe('true');
+    });
+
+    it('should set aria-required when required', async () => {
+        container.innerHTML = '<ds-input required></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.getAttribute('aria-required')).toBe('true');
+    });
+
+    it('should show password toggle button when showPasswordToggle is true', async () => {
+        container.innerHTML = '<ds-input type="password" show-password-toggle></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const toggleButton = element.shadowRoot.querySelectorAll('ds-icon-button');
+        // Filter to find the password toggle (not info button)
+        const passwordToggle = Array.from(toggleButton).find(btn =>
+            btn.getAttribute('icon') === 'visibility' || btn.getAttribute('icon') === 'visibility-off'
+        );
+        expect(passwordToggle).toBeTruthy();
+    });
+
+    it('should not show password toggle when showPasswordToggle is false', async () => {
+        container.innerHTML = '<ds-input type="password"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const toggleButton = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const passwordToggle = Array.from(toggleButton).find(btn =>
+            btn.getAttribute('icon') === 'visibility' || btn.getAttribute('icon') === 'visibility-off'
+        );
+        expect(passwordToggle).toBeFalsy();
+    });
+
+    it('should toggle password visibility when toggle button is clicked', async () => {
+        container.innerHTML = '<ds-input type="password" show-password-toggle></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.type).toBe('password');
+
+        const toggleButton = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const passwordToggle = Array.from(toggleButton).find(btn =>
+            btn.getAttribute('icon') === 'visibility' || btn.getAttribute('icon') === 'visibility-off'
+        );
+
+        passwordToggle.click();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(input.type).toBe('text');
+    });
+
+    it('should apply validation-status attribute', async () => {
+        container.innerHTML = '<ds-input validation-status="error"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(element.getAttribute('validation-status')).toBe('error');
+    });
+
+    it('should show number steppers for number type', async () => {
+        container.innerHTML = '<ds-input type="number"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const decrementBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'remove');
+        const incrementBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'add');
+
+        expect(decrementBtn).toBeTruthy();
+        expect(incrementBtn).toBeTruthy();
+    });
+
+    it('should increment number value when + button is clicked', async () => {
+        container.innerHTML = '<ds-input type="number" value="5" step="1"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const incrementBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'add');
+
+        incrementBtn.click();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(element.value).toBe('6');
+    });
+
+    it('should decrement number value when - button is clicked', async () => {
+        container.innerHTML = '<ds-input type="number" value="5" step="1"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const decrementBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'remove');
+
+        decrementBtn.click();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(element.value).toBe('4');
+    });
+
+    it('should respect custom step value', async () => {
+        container.innerHTML = '<ds-input type="number" value="10" step="0.5"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const incrementBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'add');
+
+        incrementBtn.click();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(element.value).toBe('10.5');
+    });
+
+    it('should not show password toggle for non-password types even if prop is true', async () => {
+        container.innerHTML = '<ds-input type="text" show-password-toggle></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const toggleButton = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const passwordToggle = Array.from(toggleButton).find(btn =>
+            btn.getAttribute('icon') === 'visibility' || btn.getAttribute('icon') === 'visibility-off'
+        );
+        expect(passwordToggle).toBeFalsy();
+    });
+
+    // Clearable tests
+    it('should not show clear button when clearable is false', async () => {
+        container.innerHTML = '<ds-input value="test" clearable="false"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const clearBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'close');
+        expect(clearBtn).toBeFalsy();
+    });
+
+    it('should not show clear button when value is empty', async () => {
+        container.innerHTML = '<ds-input clearable></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const clearBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'close');
+        expect(clearBtn).toBeFalsy();
+    });
+
+    it('should not show clear button when not focused', async () => {
+        container.innerHTML = '<ds-input value="test" clearable></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const clearBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'close');
+        expect(clearBtn).toBeFalsy();
+    });
+
+    it('should show clear button when clearable, has value, and is focused', async () => {
+        container.innerHTML = '<ds-input value="test" clearable></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.focus();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const clearBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'close');
+        expect(clearBtn).toBeTruthy();
+    });
+
+    it('should hide clear button when losing focus', async () => {
+        container.innerHTML = '<ds-input value="test" clearable></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.focus();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        let buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        let clearBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'close');
+        expect(clearBtn).toBeTruthy();
+
+        input.blur();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        clearBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'close');
+        expect(clearBtn).toBeFalsy();
+    });
+
+    it('should clear value when clear button is clicked', async () => {
+        container.innerHTML = '<ds-input value="test value" clearable></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.focus();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const clearBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'close');
+
+        clearBtn.click();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(element.value).toBe('');
+        expect(input.value).toBe('');
+    });
+
+    it('should refocus input after clearing', async () => {
+        container.innerHTML = '<ds-input value="test" clearable></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.focus();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const clearBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'close');
+
+        clearBtn.click();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(element.shadowRoot.activeElement).toBe(input);
+    });
+
+    it('should clear value when ESC key is pressed', async () => {
+        container.innerHTML = '<ds-input value="test value" clearable></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(element.value).toBe('');
+    });
+
+    it('should not clear value on ESC if clearable is false', async () => {
+        container.innerHTML = '<ds-input value="test value"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(element.value).toBe('test value');
+    });
+
+    it('should select all text on focus when input has value', async () => {
+        container.innerHTML = '<ds-input value="test value"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        let selectionCalled = false;
+        input.select = () => { selectionCalled = true; };
+
+        input.dispatchEvent(new Event('focus', { bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(selectionCalled).toBe(true);
+    });
+
+    it('should position clear button before other action buttons', async () => {
+        container.innerHTML = '<ds-input type="password" show-password-toggle value="test" clearable></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.focus();
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const buttonIcons = Array.from(buttons).map(btn => btn.getAttribute('icon'));
+
+        const clearIndex = buttonIcons.indexOf('close');
+        const visibilityIndex = Math.max(
+            buttonIcons.indexOf('visibility'),
+            buttonIcons.indexOf('visibility-off')
+        );
+
+        expect(clearIndex).toBeLessThan(visibilityIndex);
+    });
+
+    // New API tests: selectAll, forceValue, autocomplete, width, textAlign, min, max, clamp
+
+    it('should expose selectAll() method', async () => {
+        container.innerHTML = '<ds-input value="test value"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        let selectCalled = false;
+        input.select = () => { selectCalled = true; };
+
+        element.selectAll();
+
+        expect(selectCalled).toBe(true);
+    });
+
+    it('should expose forceValue() method', async () => {
+        container.innerHTML = '<ds-input value="original"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+
+        element.forceValue('forced');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('forced');
+        expect(input.value).toBe('forced');
+    });
+
+    it('should pass autocomplete attribute to native input', async () => {
+        container.innerHTML = '<ds-input autocomplete="new-password"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.getAttribute('autocomplete')).toBe('new-password');
+    });
+
+    it('should default autocomplete to off', async () => {
+        container.innerHTML = '<ds-input></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.getAttribute('autocomplete')).toBe('off');
+    });
+
+    it('should apply width prop as CSS variable', async () => {
+        container.innerHTML = '<ds-input width="200px"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const computedWidth = element.style.getPropertyValue('--ds-input-computed-width');
+        expect(computedWidth).toBe('200px');
+    });
+
+    it('should apply textAlign prop to native input', async () => {
+        container.innerHTML = '<ds-input text-align="center"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.style.textAlign).toBe('center');
+    });
+
+    it('should clamp value on blur when clamp prop is set', async () => {
+        container.innerHTML = '<ds-input type="number" min="1" max="10" clamp value="15"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new Event('blur'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('10');
+    });
+
+    it('should clamp to min when value is below minimum', async () => {
+        container.innerHTML = '<ds-input type="number" min="5" max="10" clamp value="-3"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new Event('blur'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('5');
+    });
+
+    it('should clamp on Enter key for number inputs', async () => {
+        container.innerHTML = '<ds-input type="number" min="1" max="10" clamp value="50"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('10');
+    });
+
+    it('should not clamp when clamp prop is false', async () => {
+        container.innerHTML = '<ds-input type="number" min="1" max="10" value="15"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new Event('blur'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('15');
+    });
+
+    it('should reset to min on NaN input when clamp is enabled', async () => {
+        container.innerHTML = '<ds-input type="number" min="1" max="10" clamp value="abc"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new Event('blur'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('1');
+    });
+
+    // Stepper and Arrow Key min/max constraint tests
+
+    it('should not increment beyond max with stepper button', async () => {
+        container.innerHTML = '<ds-input type="number" min="1" max="5" value="5"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const incrementBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'add');
+
+        // Button should be disabled at max
+        expect(incrementBtn.hasAttribute('disabled')).toBe(true);
+
+        // Try to increment anyway
+        incrementBtn.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('5');
+    });
+
+    it('should not decrement below min with stepper button', async () => {
+        container.innerHTML = '<ds-input type="number" min="1" max="10" value="1"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const buttons = element.shadowRoot.querySelectorAll('ds-icon-button');
+        const decrementBtn = Array.from(buttons).find(btn => btn.getAttribute('icon') === 'remove');
+
+        // Button should be disabled at min
+        expect(decrementBtn.hasAttribute('disabled')).toBe(true);
+
+        // Try to decrement anyway
+        decrementBtn.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('1');
+    });
+
+    it('should not increment beyond max with Arrow Up', async () => {
+        container.innerHTML = '<ds-input type="number" min="1" max="5" value="5"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('5');
+    });
+
+    it('should not decrement below min with Arrow Down', async () => {
+        container.innerHTML = '<ds-input type="number" min="1" max="10" value="1"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('1');
+    });
+
+    it('should increment with Arrow Up within bounds', async () => {
+        container.innerHTML = '<ds-input type="number" min="1" max="10" value="5"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('6');
+    });
+
+    it('should decrement with Arrow Down within bounds', async () => {
+        container.innerHTML = '<ds-input type="number" min="1" max="10" value="5"></ds-input>';
+        const element = container.querySelector('ds-input');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('4');
+    });
+});
+