q2-tecton-elements 1.51.0 → 1.52.0

package/dist/collection/components/q2-input/test/q2-input-test.e2e.js

@@ -1,1370 +1,164 @@
-import { evaluateA11y, setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getActiveElementTestId, getNestedAssignedElementLength, getNestedElementStyle, getListOfStyleCompilationIssues, getNestedElementAttribute, } from "../../../utils/helpers";
+import { evaluateA11y, setup, dispatchEvent, getNestedAssignedElementLength, getNestedElementStyle, getListOfStyleCompilationIssues, getNestedElementAttribute, } from "../../../utils/helpers";
 describe('q2-input', () => {
-    it('properly compiles CSS vars and functions', async () => {
-        const page = await setup({ html: '<q2-input></q2-input>' });
-        expect(await getListOfStyleCompilationIssues(page, 'q2-input')).toHaveLength(0);
-    });
     async function getInnerInputDimensions(page) {
         return page.$eval('body', () => document.querySelector('q2-input').shadowRoot.querySelector('input').getClientRects()[0].toJSON());
     }
-    it('should be registered in the dom and accept values', async function () {
-        const page = await setup({ html: '<q2-input label="platform is awesome" />' });
-        const label = await page.find('q2-input >>> label');
-        expect(label.innerText.trim()).toEqual('platform is awesome');
-    });
-    describe('focus', () => {
-        let page;
-        let input;
-        let fieldContainer;
-        beforeEach(async () => {
-            page = await setup({ html: `<q2-input></q2-input>` });
-            input = await page.find('q2-input');
-            fieldContainer = await page.find('q2-input >>> .field-container');
-            expect(await innerActiveTestId(page)).toBeUndefined();
-            expect(fieldContainer).not.toHaveClass('has-focus');
-        });
-        const innerActiveTestId = async (page) => {
-            return page.$eval('q2-input', el => { var _a; return (_a = el.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('test-id'); });
-        };
-        it('focuses inner button when focus event is dispatched', async function () {
-            await input.triggerEvent('focus');
-            await page.waitForChanges();
-            expect(await innerActiveTestId(page)).toEqual('inputField');
-            expect(fieldContainer).toHaveClass('has-focus');
-        });
-        it('focuses inner button when element.focus() is called', async function () {
-            await input.focus();
-            await page.waitForChanges();
-            expect(await innerActiveTestId(page)).toEqual('inputField');
-            expect(fieldContainer).toHaveClass('has-focus');
-        });
-        it('adds has-focus to fieldContainer when input focused', async () => {
-            const innerInput = await page.find('q2-input >>> input.input-field');
-            await innerInput.focus();
-            await page.waitForChanges();
-            expect(await innerActiveTestId(page)).toEqual('inputField');
-            expect(fieldContainer).toHaveClass('has-focus');
+    describe('Styling', () => {
+        it('properly compiles CSS vars and functions', async () => {
+            const page = await setup({ html: '<q2-input></q2-input>' });
+            expect(await getListOfStyleCompilationIssues(page, 'q2-input')).toHaveLength(0);
         });
-        describe('when pseudo is true', () => {
-            beforeEach(async () => {
-                await input.setProperty('pseudo', true);
-                await page.waitForChanges();
-                fieldContainer = await page.find('q2-input >>> .field-container');
-                expect(fieldContainer).not.toHaveClass('has-focus');
-            });
-            it('focuses inner button when focus event is dispatched', async function () {
-                await input.triggerEvent('focus');
-                await page.waitForChanges();
-                expect(await innerActiveTestId(page)).toEqual('q2InputInnerClearButton');
-                expect(fieldContainer).toHaveClass('has-focus');
+        describe('pseudo', () => {
+            let page;
+            beforeEach(async function () {
+                page = await setup({ html: '<q2-input label="label text" value="value" pseudo />' });
             });
-            it('focuses inner button when element.focus() is called', async function () {
-                await input.focus();
+            it('should not extend beyond the container when the value is long', async () => {
+                const input = await page.find('q2-input');
+                await input.setProperty('value', 'This is a very very very very very very very very very very very very very very very very very long value that should be truncated');
                 await page.waitForChanges();
-                expect(await innerActiveTestId(page)).toEqual('q2InputInnerClearButton');
-                expect(fieldContainer).toHaveClass('has-focus');
+                const { clientWidth, scrollWidth } = await page.$eval('q2-input', (el) => {
+                    const { clientWidth, scrollWidth } = el.shadowRoot.querySelector('.input-container');
+                    return { clientWidth, scrollWidth };
+                });
+                expect(clientWidth).toEqual(scrollWidth);
             });
-            it('adds has-focus to fieldContainer when button is focused', async () => {
-                const innerInput = await page.find('q2-input >>> button.input-field');
-                await innerInput.focus();
+            it('should fill the the container when the value is short', async () => {
+                const input = await page.find('q2-input');
+                await input.setProperty('value', 'Short value');
                 await page.waitForChanges();
-                expect(await innerActiveTestId(page)).toEqual('q2InputInnerClearButton');
-                expect(fieldContainer).toHaveClass('has-focus');
-            });
-        });
-    });
-    it('when readonly label text should include (read only) ', async function () {
-        const readonlyText = '(read only)';
-        const page = await setup({ html: `<q2-input label="label text"></q2-input>` });
-        await setTestStrings(page, {
-            'tecton.element.input.readonly': readonlyText,
-        });
-        const element = await page.find('q2-input');
-        await element.setProperty('readonly', true);
-        await page.waitForChanges();
-        const label = await page.find('q2-input >>> label');
-        expect(label.textContent).toEqual(`label text${readonlyText}`);
-    });
-    it('should show errors when the element has focus if error array is populated', async function () {
-        const page = await setup({ html: '<q2-input label="foo" />' });
-        const input = await page.find('q2-input');
-        input.setProperty('errors', ['broke']);
-        await page.waitForChanges();
-        const { messagesHeight, hasErrorClass } = await page.$eval('q2-input', element => {
-            return {
-                messagesHeight: element.shadowRoot.querySelector('.messages-container').clientHeight,
-                hasErrorClass: !!element.shadowRoot.querySelector('.has-error'),
-            };
-        });
-        // errors are not visible when not in focus
-        expect(messagesHeight).toEqual(0);
-        // error indicator is present
-        expect(hasErrorClass).toBe(true);
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'focus');
-        const { expandedMessagesHeight, messagesText } = await page.$eval('q2-input', element => {
-            const messageContainer = element.shadowRoot.querySelector('.messages-container');
-            return {
-                expandedMessagesHeight: element.shadowRoot.querySelector('.messages-container').clientHeight,
-                messagesText: messageContainer.innerText.trim(),
-            };
-        });
-        // errors are displayed when in focus
-        expect(expandedMessagesHeight).toBeGreaterThan(0);
-        // error message is correct
-        expect(messagesText).toEqual('broke');
-    });
-    it('should not show messages when strings are present if hideMessages is true', async function () {
-        const page = await setup({ html: '<q2-input label="foo" hide-messages />' });
-        const input = await page.find('q2-input');
-        input.setProperty('errors', ['broke']);
-        await page.waitForChanges();
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'focus');
-        const { messagesHeight, hasErrorClass } = await page.$eval('q2-input', element => {
-            return {
-                messagesHeight: element.shadowRoot.querySelector('.messages-container').clientHeight,
-                hasErrorClass: !!element.shadowRoot.querySelector('.has-error'),
-            };
-        });
-        // errors are not displayed WHILE in focus
-        expect(messagesHeight).toEqual(0);
-        // indicator is still shown
-        expect(hasErrorClass).toBe(true);
-    });
-    it('should show error message when error icon is clicked', async function () {
-        const page = await setup({ html: '<q2-input label="foo" />' });
-        const input = await page.find('q2-input');
-        input.setProperty('errors', ['broke']);
-        await page.waitForChanges();
-        const { messagesHeight, hasErrorClass } = await page.$eval('q2-input', element => {
-            return {
-                messagesHeight: element.shadowRoot.querySelector('.messages-container').clientHeight,
-                hasErrorClass: !!element.shadowRoot.querySelector('.has-error'),
-            };
-        });
-        // errors are not visible when not in focus
-        expect(messagesHeight).toEqual(0);
-        // error indicator is present
-        expect(hasErrorClass).toBe(true);
-        await dispatchEvent(page, ['q2-input', '[test-id="divIconError"]'], 'click');
-        const { expandedMessagesHeight, messagesText } = await page.$eval('q2-input', element => {
-            const messageContainer = element.shadowRoot.querySelector('.messages-container');
-            return {
-                expandedMessagesHeight: element.shadowRoot.querySelector('.messages-container').clientHeight,
-                messagesText: messageContainer.innerText.trim(),
-            };
-        });
-        // errors are displayed when in focus
-        expect(expandedMessagesHeight).toBeGreaterThan(0);
-        // error message is correct
-        expect(messagesText).toEqual('broke');
-    });
-    it('should show error message when error icon is clicked and input is currency type', async function () {
-        const page = await setup({ html: '<q2-input type="currency" label="foo" />' });
-        const input = await page.find('q2-input');
-        input.setProperty('errors', ['broke']);
-        await page.waitForChanges();
-        const { messagesHeight, hasErrorClass } = await page.$eval('q2-input', element => {
-            return {
-                messagesHeight: element.shadowRoot.querySelector('.messages-container').clientHeight,
-                hasErrorClass: !!element.shadowRoot.querySelector('.has-error'),
-            };
-        });
-        // errors are not visible when not in focus
-        expect(messagesHeight).toEqual(0);
-        // error indicator is present
-        expect(hasErrorClass).toBe(true);
-        await dispatchEvent(page, ['q2-input', '[test-id="divIconError"]'], 'click');
-        const { expandedMessagesHeight, messagesText } = await page.$eval('q2-input', element => {
-            const messageContainer = element.shadowRoot.querySelector('.messages-container');
-            return {
-                expandedMessagesHeight: element.shadowRoot.querySelector('.messages-container').clientHeight,
-                messagesText: messageContainer.innerText.trim(),
-            };
-        });
-        // errors are displayed when in focus
-        expect(expandedMessagesHeight).toBeGreaterThan(0);
-        // error message is correct
-        expect(messagesText).toEqual('broke');
-    });
-    it('does not allow invalid input types', async function () {
-        const page = await setup({ html: '<q2-input label="foo" type="fire" />' });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        // sets input type to text if invalid type is passed in
-        expect(await innerInput.getProperty('type')).toEqual('text');
-    });
-    it('should allow input types to be passed in', async function () {
-        const page = await setup({ html: '<q2-input label="foo" type="tel" />' });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        // sets input to type tel
-        expect(await innerInput.getProperty('type')).toEqual('tel');
-        expect(await innerInput.getAttribute('inputmode')).toBeNull();
-    });
-    it('maintains formattedValue on load', async () => {
-        const page = await setup({
-            html: `<q2-input type='phone' value='1234567890'></q2-input>`,
-        });
-        const inputField = await page.find('q2-input');
-        const formattedVal = await inputField.getProperty('formattedValue');
-        await page.waitForChanges();
-        expect(formattedVal).toBe('(123) 456-7890');
-    });
-    it('should default to text if no type is passed in', async function () {
-        const page = await setup({ html: '<q2-input label="foo" />' });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        // defaults input to type text
-        expect(await innerInput.getProperty('type')).toEqual('text');
-        expect(await innerInput.getAttribute('inputmode')).toBeNull();
-    });
-    it('should fire input event that proxies inner input event', async function () {
-        const page = await setup({ html: '<q2-input label="foo" />' });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        await innerInput.press('f');
-        await page.waitForChanges();
-        // should receive a formatted input event
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: 'f',
-            formattedValue: 'f',
-            // minFormattedLength: undefined  /* This present but filtered out by the test helper */
-        });
-    });
-    it('should fire change event that proxies change(blur) input event', async function () {
-        const page = await setup({ html: '<q2-input label="foo" value="test inpu"/>' });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        await innerInput.press('t');
-        const changeSpy = await input.spyOnEvent('change');
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'blur');
-        // should receive formatted change event
-        expect(changeSpy).toHaveReceivedEventDetail({
-            value: 'test input',
-            formattedValue: 'test input',
-        });
-        expect(changeSpy).toHaveReceivedEventTimes(1);
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'focus');
-        await innerInput.press(' ');
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'input');
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'keydown', { key: 'Enter' });
-        expect(changeSpy).toHaveReceivedEventDetail({
-            value: 'test input ',
-            formattedValue: 'test input ',
-        });
-        expect(changeSpy).toHaveReceivedEventTimes(2);
-        const onInput = (event) => {
-            event.target.value = event.detail.value;
-        };
-        input.setProperty('oninput', onInput);
-        await page.waitForChanges();
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'focus');
-        await innerInput.press(' ');
-        expect(changeSpy).toHaveReceivedEventTimes(2);
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'keydown', { key: 'Enter' });
-        expect(changeSpy).toHaveReceivedEventDetail({
-            value: 'test input  ',
-            formattedValue: 'test input  ',
-        });
-        expect(changeSpy).toHaveReceivedEventTimes(3);
-    });
-    it('should fire input event after content pasted into field', async function () {
-        const page = await setup({ html: '<q2-input label="foo" value="test" />' });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        expect(await innerInput.getProperty('value')).toEqual('test');
-        // fully replaces value on paste if nothing selected
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'paste', {
-            pastedValue: 'pasted value',
-        });
-        expect(await innerInput.getProperty('value')).toEqual('testpasted value');
-        await page.waitForChanges();
-        expect(inputSpy).toHaveReceivedEventTimes(1);
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: 'testpasted value',
-            formattedValue: 'testpasted value',
-            // minFormattedLength: undefined  /* This present but filtered out by the test helper */
-        });
-        // only replaces selected content on paste
-        await input.setProperty('value', 'reset');
-        await page.$eval('q2-input', element => {
-            const inputEl = element.shadowRoot.querySelector('.input-field');
-            inputEl.setSelectionRange(5, 7);
-        });
-        await page.waitForChanges();
-        // in practice, the paste event triggers the input event tested above
-        // this segment validates that the paste flow follows native browser behavior if an incomplete selection is made
-        expect(inputSpy).toHaveReceivedEventTimes(1);
-    });
-    it('should fire input event after content pasted into currency field', async function () {
-        const page = await setup({ html: '<q2-input label="foo" value="4.44" type="currency" />' });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        expect(await innerInput.getProperty('value')).toEqual('4.44');
-        // fully replaces value on paste if nothing selected
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'paste', {
-            pastedValue: '2.3',
-        });
-        expect(await innerInput.getProperty('value')).toEqual('2.30');
-        await page.waitForChanges();
-        expect(inputSpy).toHaveReceivedEventTimes(1);
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '2.30',
-            formattedValue: '$2.30',
-            // minFormattedLength: undefined  /* This present but filtered out by the test helper */
-        });
-        // only replaces selected content on paste
-        await input.setProperty('value', 'reset');
-        await page.$eval('q2-input', element => {
-            const inputEl = element.shadowRoot.querySelector('.input-field');
-            inputEl.setSelectionRange(5, 7);
-        });
-        await page.waitForChanges();
-        // in practice, the paste event triggers the input event tested above
-        // this segment validates that the paste flow follows native browser behavior if an incomplete selection is made
-        expect(inputSpy).toHaveReceivedEventTimes(1);
-    });
-    it('should show hints when hints are present and error array is empty', async function () {
-        const page = await setup({ html: '<q2-input label="foo"/>' });
-        const input = await page.find('q2-input');
-        await input.setProperty('hints', ['try harder']);
-        await input.setProperty('errors', []);
-        await page.waitForChanges();
-        const messagesContainer = await page.find('q2-input >>> .messages-container');
-        // hints are shown when errors are empty
-        expect(messagesContainer.innerText.trim()).toEqual('try harder');
-        await input.setProperty('errors', ['you did it wrong']);
-        await page.waitForChanges();
-        // errors shown instead of hints when errors are present
-        expect(messagesContainer.innerText.trim()).toEqual('you did it wrong');
-    });
-    it('should render a localized optional string when the optional attribute is passed', async function () {
-        const page = await setup({ html: '<q2-input label="foo" optional />' });
-        const inputLabel = await page.find('q2-input >>> label');
-        // a localized optional is shown in the label
-        expect(inputLabel.innerText.trim()).toEqual('footecton.element.input.optional');
-    });
-    describe('pseudo', () => {
-        let page;
-        let innerInput;
-        let inputLabel;
-        beforeEach(async function () {
-            page = await setup({ html: '<q2-input label="label text" value="value" pseudo />' });
-            innerInput = await page.find('q2-input >>> .input-field');
-            inputLabel = await page.find('q2-input >>> .input-label');
-        });
-        it('should correctly render pseudo state', async function () {
-            // pseudo input should be a button
-            expect(innerInput.tagName).toEqual('BUTTON');
-            expect(await innerInput.getProperty('type')).toEqual('button');
-            expect(inputLabel.innerText).toEqual('label text');
-        });
-        it('should not extend beyond the container when the value is long', async () => {
-            const input = await page.find('q2-input');
-            await input.setProperty('value', 'This is a very very very very very very very very very very very very very very very very very long value that should be truncated');
-            await page.waitForChanges();
-            const { clientWidth, scrollWidth } = await page.$eval('q2-input', (el) => {
-                const { clientWidth, scrollWidth } = el.shadowRoot.querySelector('.input-container');
-                return { clientWidth, scrollWidth };
+                const { clientWidth, scrollWidth } = await page.$eval('q2-input', (el) => {
+                    const { clientWidth, scrollWidth } = el.shadowRoot.querySelector('.input-container');
+                    return { clientWidth, scrollWidth };
+                });
+                expect(clientWidth).toEqual(scrollWidth);
             });
-            expect(clientWidth).toEqual(scrollWidth);
         });
-        it('should fill the the container when the value is short', async () => {
-            const input = await page.find('q2-input');
-            await input.setProperty('value', 'Short value');
-            await page.waitForChanges();
-            const { clientWidth, scrollWidth } = await page.$eval('q2-input', (el) => {
-                const { clientWidth, scrollWidth } = el.shadowRoot.querySelector('.input-container');
-                return { clientWidth, scrollWidth };
+        describe('clearable', () => {
+            describe('when false (default)', () => {
+                it('starts observing width when added at runtime', async () => {
+                    const page = await setup({ html: '<q2-input value="Tony" />' });
+                    await page.evaluate(() => {
+                        document.body.style.margin = '0';
+                    });
+                    await page.waitForChanges();
+                    const input = await page.find('q2-input');
+                    input.setProperty('clearable', true);
+                    await page.waitForChanges();
+                    let clearButtonWidth = await getNestedElementStyle(page, ['q2-input', '[test-id="clearButton"]'], 'width');
+                    expect(clearButtonWidth).toBe('44px');
+                    await page.setViewport({ width: 189, height: 400 });
+                    await page.waitForChanges();
+                    clearButtonWidth = await getNestedElementStyle(page, ['q2-input', '[test-id="clearButton"]'], 'width');
+                    expect(clearButtonWidth).toBe('20px');
+                });
             });
-            expect(clientWidth).toEqual(scrollWidth);
-        });
-        describe('when optional', () => {
-            it('should correctly render pseudo state', async function () {
-                await setTestStrings(page, {
-                    'tecton.element.input.optional': '(Optional)',
+            describe('when true', () => {
+                it('clear button is 44px when component is more than 190px wide', async () => {
+                    const page = await setup({ html: '<q2-input value="Tony" clearable/>' });
+                    await page.setViewport({ width: 193, height: 400 });
+                    await page.evaluate(() => {
+                        document.body.style.margin = '0';
+                    });
+                    await page.waitForChanges();
+                    const clearButtonWidth = await getNestedElementStyle(page, ['q2-input', '[test-id="clearButton"]'], 'width');
+                    expect(clearButtonWidth).toBe('44px');
+                });
+                it('clear button is 20px when component is less than 190px wide', async () => {
+                    const page = await setup({ html: '<q2-input value="Tony" clearable/>' });
+                    await page.setViewport({ width: 189, height: 400 });
+                    await page.evaluate(() => {
+                        document.body.style.margin = '0';
+                    });
+                    await page.waitForChanges();
+                    const clearButtonWidth = await getNestedElementStyle(page, ['q2-input', '[test-id="clearButton"]'], 'width');
+                    expect(clearButtonWidth).toBe('20px');
                 });
-                const element = await page.find('q2-input');
-                element.setProperty('optional', true);
-                await page.waitForChanges();
-                expect(inputLabel.innerText).toEqual('label text(Optional)');
             });
         });
     });
-    it('should localize appropriate attribute strings', async function () {
-        const page = await setup({ html: '<q2-input />' });
-        await setTestStrings(page, {
-            'q2-input.label': 'Label Text',
-            'tecton.element.input.optional': '(Optional)',
-            'q2-input.ariaLabel': 'Aria-Label Text',
-            'q2-input.placeholder': 'Placeholder Text',
-            'q2-input.hint1': 'Hint 1 Text',
-            'q2-input.error1': 'Error 1 Text',
-        });
-        const input = await page.find('q2-input');
-        input.setProperty('label', 'q2-input.label');
-        input.setProperty('placeholder', 'q2-input.placeholder');
-        input.setProperty('hints', ['q2-input.hint1']);
-        await page.waitForChanges();
-        const label = await page.find('q2-input >>> label');
-        const labelText = label.innerText;
-        const innerInput = await page.find('q2-input >>> .input-field');
-        let ariaLabel = innerInput.getAttribute('aria-label');
-        // label bound correctly
-        expect(labelText).toEqual('Label Text');
-        expect(ariaLabel).toEqual(null);
-        input.setProperty('ariaLabel', 'q2-input.ariaLabel');
-        await page.waitForChanges();
-        const messageContainer = await page.find('q2-input >>> .messages-container');
-        ariaLabel = innerInput.getAttribute('aria-label');
-        const placeholder = innerInput.getAttribute('placeholder');
-        // label is updated, hide-label is added, and aria-label is removed
-        expect(await input.getProperty('aria-label')).toEqual(undefined);
-        expect(await input.getProperty('label')).toEqual('Aria-Label Text');
-        expect(await input.getProperty('hideLabel')).toEqual(true);
-        // expect placeholder to be bound correctly
-        expect(placeholder).toEqual('Placeholder Text');
-        // expect localized hint to be shown since errors are not present
-        expect(messageContainer.innerText).toEqual('Hint 1 Text');
-        input.setProperty('hints', []);
-        input.setProperty('errors', ['q2-input.error1']);
-        await page.waitForChanges();
-        // expect errors to be localized
-        expect(messageContainer.innerText).toEqual('Error 1 Text');
-    });
-    /* Masking */
-    // Currency
-    it('should handle currency masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="currency" label="Amount" value="10" autocomplete="on" />',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        let inputValue = await innerInput.getProperty('value');
-        const inputPrefix = await page.find('q2-input >>> .input-prefix');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('type')).toEqual('text');
-        expect(await innerInput.getAttribute('inputmode')).toEqual('numeric');
-        expect(await innerInput.getProperty('autocomplete')).toEqual('transaction-amount');
-        expect(inputPrefix).not.toBeNull();
-        expect(inputPrefix.innerText).toEqual('$');
-        // formats value on initial input
-        expect(inputValue).toEqual('10.00');
-        await innerInput.press('3');
-        // input value gets reformatted correctly and emits value and formattedValue
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '100.03',
-            formattedValue: '$100.03',
-        });
-        inputValue = await innerInput.getProperty('value');
-        // formatted value is set back on inner input
-        expect(inputValue).toEqual('100.03');
-        await innerInput.press('4');
-        await innerInput.press('5');
-        await innerInput.press('6');
-        await innerInput.press('7');
-        await innerInput.press('8');
-        await innerInput.press('9');
-        // input value is formatted correctly with thousands
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '100034567.89',
-            formattedValue: '$100,034,567.89',
-        });
-        // formatted value is set correctly back on inner input
-        inputValue = await innerInput.getProperty('value');
-        expect(inputValue).toEqual('100,034,567.89');
-        await innerInput.press('e');
-        await innerInput.press('a');
-        await innerInput.press('0');
-        await innerInput.press('1');
-        await innerInput.press('2');
-        // invalid input is ignored
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '100034567890.12',
-            formattedValue: '$100,034,567,890.12',
-        });
-        inputValue = await innerInput.getProperty('value');
-        // input value is reset to formatted value removing invalid input
-        expect(inputValue).toEqual('100,034,567,890.12');
-        await input.setProperty('value', '50');
-        await page.waitForChanges();
-        inputValue = await innerInput.getProperty('value');
-        // setting value programatically from property allows numeric interpretation
-        expect(inputValue).toEqual('50.00');
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'paste', {
-            pastedValue: '2.3',
-        });
-        await page.waitForChanges();
-        inputValue = await innerInput.getProperty('value');
-        // setting value from paste allows numeric interpretation
-        expect(inputValue).toEqual('2.30');
-    });
-    it('should reformat currency on format modifier change', async function () {
-        const page = await setup({
-            html: '<q2-input type="currency" label="Amount" value="10" />',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        let inputPrefix = await page.find('q2-input >>> .input-prefix');
-        expect(inputPrefix).not.toBeNull();
-        expect(inputPrefix.innerText).toEqual('$');
-        input.setProperty('formatModifier', 'EUR');
-        await page.waitForChanges();
-        await innerInput.press('0');
-        // format modifier property change will update formatting
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '100.00',
-            formattedValue: '€100.00',
-        });
-        inputPrefix = await page.find('q2-input >>> .input-prefix');
-        expect(inputPrefix).not.toBeNull();
-        expect(inputPrefix.innerText).toEqual('€');
-    });
-    it('should convert value property to string to prevent non string values from blowing up, especially for currency', async function () {
-        const page = await setup({ html: '<q2-input type="currency" />' });
-        const input = await page.find('q2-input');
-        input.setProperty('value', 50);
-        await page.waitForChanges();
-        const innerInput = await page.find('q2-input >>> input');
-        const innerInputValue = await innerInput.getProperty('value');
-        expect(innerInputValue).toEqual('50.00');
-    });
-    it('should remove decimals if "-integer" appended to currency code', async function () {
-        const page = await setup({
-            html: '<q2-input type="currency" label="Amount" value="10" format-modifier="BHD-integer" />',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        let inputValue = await innerInput.getProperty('value');
-        const inputPrefix = await page.find('q2-input >>> .input-prefix');
-        await page.waitForChanges();
-        expect(inputPrefix.innerText).toEqual('ب.د');
-        expect(inputValue).toEqual('10');
-        await innerInput.press('3');
-        // input value gets reformatted correctly and emits value and formattedValue
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '103',
-            formattedValue: '103ب.د',
-        });
-        inputValue = await innerInput.getProperty('value');
-        // formatted value is set back on inner input
-        expect(inputValue).toEqual('103');
-    });
-    // Phone Number
-    it('handles phone number masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="phone" label="Phone Number" value="10" />',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        const inputPrefix = await page.find('q2-input >>> .input-prefix');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('type')).toEqual('tel');
-        expect(await innerInput.getAttribute('inputmode')).toBeNull;
-        // Prefix not rendered for US/default
-        expect(inputPrefix).toBeNull();
-        // formats value on initial input
-        expect(await innerInput.getProperty('value')).toEqual('(10');
-        await innerInput.press('3');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '103',
-            formattedValue: '(103',
-            minFormattedLength: 14,
-        });
-        expect(await innerInput.getProperty('value')).toEqual('(103');
-        // correct formatting character allowed
-        await innerInput.press(')');
-        expect(await innerInput.getProperty('value')).toEqual('(103)');
-        // incorrect formatting character replaced by correct one
-        await innerInput.press('-');
-        expect(await innerInput.getProperty('value')).toEqual('(103) ');
-        await innerInput.press('4');
-        expect(await innerInput.getProperty('value')).toEqual('(103) 4');
-        // letter ignored
-        await innerInput.press('a');
-        expect(await innerInput.getProperty('value')).toEqual('(103) 4');
-        // invalid characters ignored
-        await innerInput.press('!');
-        await innerInput.press('@');
-        await innerInput.press('#');
-        await innerInput.press('$');
-        await innerInput.press('%');
-        await innerInput.press('^');
-        await innerInput.press('*');
-        expect(await innerInput.getProperty('value')).toEqual('(103) 4');
-        await innerInput.press('5');
-        expect(await innerInput.getProperty('value')).toEqual('(103) 45');
-        await innerInput.press('6');
-        expect(await innerInput.getProperty('value')).toEqual('(103) 456');
-        await innerInput.press('7');
-        expect(await innerInput.getProperty('value')).toEqual('(103) 456-7');
-        await innerInput.press('8');
-        expect(await innerInput.getProperty('value')).toEqual('(103) 456-78');
-        await innerInput.press('9');
-        expect(await innerInput.getProperty('value')).toEqual('(103) 456-789');
-        await innerInput.press('0');
-        expect(await innerInput.getProperty('value')).toEqual('(103) 456-7890');
-        // Excess character not added
-        await innerInput.press('0');
-        expect(await innerInput.getProperty('value')).toEqual('(103) 456-7890');
-        input.setProperty('value', '1234567890');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('(123) 456-7890');
-        input.setProperty('value', '(098) 765-4321');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('(098) 765-4321');
-        input.setProperty('value', '(123) 45678-90');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('(123) 456-7890');
-        input.setProperty('value', '(1) 234-567890');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('(123) 456-7890');
-    });
-    // Brazil land phone number (xx) xxxx-xxxx
-    it('handles brazil mobile phone number masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="phone" label="Phone Number" format-modifier="BR" />',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        input.setProperty('value', '2233334444');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('(22) 3333-4444');
-    });
-    // Brazil mobile number (xx) xxxxx-xxxx
-    it('handles brazil mobile phone number masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="phone" label="Phone Number" format-modifier="BR" />',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        input.setProperty('value', '22333334444');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('(22) 33333-4444');
-        expect(await innerInput.getProperty('value')).not.toEqual('(22) 3333-34444');
-    });
-    // UK land phone number https://en.wikipedia.org/wiki/Telephone_numbers_in_the_United_Kingdom
-    it('handles UK mobile phone number masking', async function () {
-        const page = await setup({
-            html: '<q2-input label="label text" type="phone" format-modifier="US" value="1" />',
-        });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const input = await page.find('q2-input');
-        const inputSpy = await input.spyOnEvent('input');
-        await innerInput.press('0');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '10',
-            formattedValue: '(10',
-            minFormattedLength: 14,
-        });
-        input.setProperty('value', '10');
-        input.setProperty('formatModifier', 'GB');
-        await page.waitForChanges();
-        await innerInput.press('3');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '103',
-            formattedValue: '+44 103',
-            minFormattedLength: 13, // 9 + '+44 '
-        });
-    });
-    it('handles alternate format modifiers for phone number masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="phone" label="Amount" value="1234567890" />',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        let inputPrefix = await page.find('q2-input >>> .input-prefix');
-        // Prefix not rendered for US/default
-        expect(inputPrefix).toBeNull();
-        expect(await innerInput.getProperty('value')).toEqual('(123) 456-7890');
-        input.setProperty('formatModifier', 'MX');
-        await page.waitForChanges();
-        inputPrefix = await page.find('q2-input >>> .input-prefix');
-        expect(inputPrefix).not.toBeNull();
-        expect(inputPrefix.innerText).toEqual('+52');
-        expect(await innerInput.getProperty('value')).toEqual('(123) 456-7890');
-        input.setProperty('formatModifier', 'MT');
-        input.setProperty('value', '12345678');
-        await page.waitForChanges();
-        inputPrefix = await page.find('q2-input >>> .input-prefix');
-        expect(inputPrefix.innerText).toEqual('+356');
-        expect(await innerInput.getProperty('value')).toEqual('12-34-56-78');
-    });
-    it('should incorporate phone prefix characters into minFormattedLength', async function () {
-        const page = await setup({
-            html: '<q2-input label="label text" type="phone" format-modifier="US" value="1" />',
-        });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const input = await page.find('q2-input');
-        const inputSpy = await input.spyOnEvent('input');
-        await innerInput.press('0');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '10',
-            formattedValue: '(10',
-            minFormattedLength: 14,
-        });
-        input.setProperty('value', '10');
-        input.setProperty('formatModifier', 'MX');
-        await page.waitForChanges();
-        await innerInput.press('3');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '103',
-            formattedValue: '+52 (103',
-            minFormattedLength: 18, // 14 + '+52 '
-        });
-    });
-    // SSN
-    it('handles ssn masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="ssn" label="SSN" value="123456789" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('type')).toEqual('text');
-        expect(await innerInput.getAttribute('inputmode')).toEqual('numeric');
-        // formats value on initial input
-        expect(await innerInput.getProperty('value')).toEqual('123-45-6789');
-        input.setProperty('value', '123');
-        await page.waitForChanges();
-        await innerInput.press('4');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '1234',
-            formattedValue: '123-4',
-            minFormattedLength: 11,
-        });
-        expect(await innerInput.getProperty('value')).toEqual('123-4');
-        await innerInput.press('5');
-        expect(await innerInput.getProperty('value')).toEqual('123-45');
-        // correct formatting character allowed
-        await innerInput.press('-');
-        expect(await innerInput.getProperty('value')).toEqual('123-45-');
-        // letter ignored
-        await innerInput.press('a');
-        expect(await innerInput.getProperty('value')).toEqual('123-45-');
-        // invalid characters ignored
-        await innerInput.press('!');
-        await innerInput.press('@');
-        await innerInput.press('#');
-        await innerInput.press('$');
-        await innerInput.press('%');
-        await innerInput.press('^');
-        await innerInput.press('*');
-        expect(await innerInput.getProperty('value')).toEqual('123-45-');
-        await innerInput.press('6');
-        expect(await innerInput.getProperty('value')).toEqual('123-45-6');
-        await innerInput.press('7');
-        expect(await innerInput.getProperty('value')).toEqual('123-45-67');
-        await innerInput.press('8');
-        expect(await innerInput.getProperty('value')).toEqual('123-45-678');
-        await innerInput.press('9');
-        expect(await innerInput.getProperty('value')).toEqual('123-45-6789');
-        // Excess character not added
-        await innerInput.press('0');
-        expect(await innerInput.getProperty('value')).toEqual('123-45-6789');
-        input.setProperty('value', '987654321');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('987-65-4321');
-        input.setProperty('value', '123-45-6789');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('123-45-6789');
-        input.setProperty('value', '1-2345678-9');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('123-45-6789');
-        input.setProperty('value', '123-4-5678-9');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('123-45-6789');
-    });
-    // TIN
-    it('handles tin masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="tin" label="Tax Identification Number" value="123456789" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('type')).toEqual('text');
-        expect(await innerInput.getAttribute('inputmode')).toEqual('numeric');
-        // formats value on initial input
-        expect(await innerInput.getProperty('value')).toEqual('12-3456789');
-        input.setProperty('value', '12');
-        await page.waitForChanges();
-        await innerInput.press('3');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '123',
-            formattedValue: '12-3',
-            minFormattedLength: 10,
-        });
-        expect(await innerInput.getProperty('value')).toEqual('12-3');
-        // ignore non numeric
-        await innerInput.press('@');
-        expect(await innerInput.getProperty('value')).toEqual('12-3');
-        await innerInput.press('4');
-        await innerInput.press('5');
-        await innerInput.press('6');
-        await innerInput.press('7');
-        await innerInput.press('8');
-        await innerInput.press('9');
-        expect(await innerInput.getProperty('value')).toEqual('12-3456789');
-    });
-    // Alphanumeric
-    it('handles alphanumeric masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="alphanumeric" label="Alphanumeric" value="" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        expect(await innerInput.getProperty('type')).toEqual('text');
-        await innerInput.press('1');
-        // Allows numbers
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '1',
-            formattedValue: '1',
-        });
-        expect(await innerInput.getProperty('value')).toEqual('1');
-        // Allows lowercase letters
-        await innerInput.press('a');
-        expect(await innerInput.getProperty('value')).toEqual('1a');
-        // Allows uppercase letters
-        await innerInput.press('A');
-        expect(await innerInput.getProperty('value')).toEqual('1aA');
-        // invalid characters ignored
-        await innerInput.press('!');
-        await innerInput.press('@');
-        await innerInput.press('#');
-        await innerInput.press('$');
-        await innerInput.press('%');
-        await innerInput.press('^');
-        await innerInput.press('*');
-        expect(await innerInput.getProperty('value')).toEqual('1aA');
-    });
-    // Alpha
-    it('handles alpha masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="alpha" label="Alpha" value="" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        expect(await innerInput.getProperty('type')).toEqual('text');
-        await innerInput.press('a');
-        // Allows lowercase letters
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: 'a',
-            formattedValue: 'a',
-        });
-        expect(await innerInput.getProperty('value')).toEqual('a');
-        // Allows uppercase letters
-        await innerInput.press('A');
-        expect(await innerInput.getProperty('value')).toEqual('aA');
-        // invalid characters ignored
-        await innerInput.press('1');
-        await innerInput.press('!');
-        await innerInput.press('@');
-        await innerInput.press('#');
-        await innerInput.press('$');
-        await innerInput.press('%');
-        await innerInput.press('^');
-        await innerInput.press('*');
-        expect(await innerInput.getProperty('value')).toEqual('aA');
-    });
-    // Numeric
-    it('handles numeric masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="numeric" label="Numeric" value="" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        expect(await innerInput.getProperty('type')).toEqual('text');
-        expect(await innerInput.getAttribute('inputmode')).toEqual('decimal');
-        await innerInput.press('-');
-        // Allows hyphen for negative
-        expect(await innerInput.getProperty('value')).toEqual('-');
-        // Allows numbers
-        await innerInput.press('1');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '-1',
-            formattedValue: '-1',
-        });
-        expect(await innerInput.getProperty('value')).toEqual('-1');
-        // Allows period
-        await innerInput.press('.');
-        expect(await innerInput.getProperty('value')).toEqual('-1.');
-        // Allows comma and invalid value.
-        await innerInput.press(',');
-        expect(await innerInput.getProperty('value')).toEqual('-1.,');
-        // invalid characters ignored
-        await innerInput.press('a');
-        await innerInput.press('A');
-        await innerInput.press('!');
-        await innerInput.press('@');
-        await innerInput.press('#');
-        await innerInput.press('$');
-        await innerInput.press('%');
-        await innerInput.press('^');
-        await innerInput.press('*');
-        expect(await innerInput.getProperty('value')).toEqual('-1.,');
-    });
-    it('handles alternate format modifiers for numeric masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="numeric" label="Numeric" value="" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        input.setProperty('formatModifier', 'delimited');
-        await page.waitForChanges();
-        await innerInput.press('-');
-        // Allows hyphen for negative
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '-',
-            formattedValue: '-',
-        });
-        expect(await innerInput.getProperty('value')).toEqual('-');
-        // Allows numbers
-        await innerInput.press('1');
-        expect(await innerInput.getProperty('value')).toEqual('-1');
-        await innerInput.press('2');
-        expect(await innerInput.getProperty('value')).toEqual('-12');
-        await innerInput.press('3');
-        expect(await innerInput.getProperty('value')).toEqual('-123');
-        await innerInput.press('4');
-        expect(await innerInput.getProperty('value')).toEqual('-1,234');
-        await innerInput.press('5');
-        await innerInput.press('6');
-        await innerInput.press('7');
-        expect(await innerInput.getProperty('value')).toEqual('-1,234,567');
-        // invalid characters ignored
-        await innerInput.press('.');
-        await innerInput.press(',');
-        await innerInput.press('a');
-        await innerInput.press('A');
-        await innerInput.press('!');
-        await innerInput.press('@');
-        await innerInput.press('#');
-        await innerInput.press('$');
-        await innerInput.press('%');
-        await innerInput.press('^');
-        await innerInput.press('*');
-        expect(await innerInput.getProperty('value')).toEqual('-1,234,567');
-        input.setProperty('formatModifier', 'integer');
-        input.setProperty('value', '-1,234,567');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('-1234567');
-        input.setProperty('formatModifier', '1dec');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('-1,234,567.0');
-        input.setProperty('formatModifier', '4dec');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('-1,234,567.0000');
-    });
-    // Percentage
-    it('handles percentage masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="percentage" label="Percentage" value="" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        const inputPrefix = await page.find('q2-input >>> .input-prefix');
-        expect(await innerInput.getProperty('type')).toEqual('text');
-        expect(await innerInput.getAttribute('inputmode')).toEqual('decimal');
-        expect(inputPrefix).not.toBeNull();
-        expect(inputPrefix.innerText).toEqual('%');
-        await innerInput.press('-');
-        // Allows hyphen for negative
-        expect(await innerInput.getProperty('value')).toEqual('-');
-        // Allows numbers
-        await innerInput.press('1');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '-1',
-            formattedValue: '-1%',
-        });
-        expect(await innerInput.getProperty('value')).toEqual('-1');
-        // Allows period
-        await innerInput.press('.');
-        expect(await innerInput.getProperty('value')).toEqual('-1.');
-        // Allows comma and invalid value.
-        await innerInput.press(',');
-        expect(await innerInput.getProperty('value')).toEqual('-1.,');
-        // invalid characters ignored
-        await innerInput.press('a');
-        await innerInput.press('A');
-        await innerInput.press('!');
-        await innerInput.press('@');
-        await innerInput.press('#');
-        await innerInput.press('$');
-        await innerInput.press('%');
-        await innerInput.press('^');
-        await innerInput.press('*');
-        expect(await innerInput.getProperty('value')).toEqual('-1.,');
-    });
-    it('handles alternate format modifiers for percentage masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="percentage" label="Percentage" value="" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        const inputPrefix = await page.find('q2-input >>> .input-prefix');
-        expect(inputPrefix).not.toBeNull();
-        expect(inputPrefix.innerText).toEqual('%');
-        input.setProperty('formatModifier', 'delimited');
-        await page.waitForChanges();
-        await innerInput.press('-');
-        // Allows hyphen for negative
-        expect(await innerInput.getProperty('value')).toEqual('-');
-        // Allows numbers
-        await innerInput.press('1');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '-1',
-            formattedValue: '-1%',
-        });
-        expect(await innerInput.getProperty('value')).toEqual('-1');
-        await innerInput.press('2');
-        expect(await innerInput.getProperty('value')).toEqual('-12');
-        await innerInput.press('3');
-        expect(await innerInput.getProperty('value')).toEqual('-123');
-        await innerInput.press('4');
-        expect(await innerInput.getProperty('value')).toEqual('-1,234');
-        await innerInput.press('5');
-        await innerInput.press('6');
-        await innerInput.press('7');
-        expect(await innerInput.getProperty('value')).toEqual('-1,234,567');
-        // invalid characters ignored
-        await innerInput.press('.');
-        await innerInput.press(',');
-        await innerInput.press('a');
-        await innerInput.press('A');
-        await innerInput.press('!');
-        await innerInput.press('@');
-        await innerInput.press('#');
-        await innerInput.press('$');
-        await innerInput.press('%');
-        await innerInput.press('^');
-        await innerInput.press('*');
-        expect(await innerInput.getProperty('value')).toEqual('-1,234,567');
-        input.setProperty('formatModifier', 'integer');
-        input.setProperty('value', '-1,234,567');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('-1234567');
-        input.setProperty('formatModifier', '1dec');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('-1,234,567.0');
-        input.setProperty('formatModifier', '4dec');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('-1,234,567.0000');
-    });
-    // Postal
-    it('handles postal code masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="postal" label="Postal Code" value="12345" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('type')).toEqual('text');
-        expect(innerInput.getAttribute('inputmode')).toBeNull();
-        // formats value on initial input
-        expect(await innerInput.getProperty('value')).toEqual('12345');
-        input.setProperty('value', '123');
-        await page.waitForChanges();
-        await innerInput.press('4');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '1234',
-            formattedValue: '1234',
-            minFormattedLength: 5,
-        });
-        expect(await innerInput.getProperty('value')).toEqual('1234');
-        // letter ignored
-        await innerInput.press('a');
-        expect(await innerInput.getProperty('value')).toEqual('1234');
-        // invalid characters ignored
-        await innerInput.press('!');
-        await innerInput.press('@');
-        await innerInput.press('#');
-        await innerInput.press('$');
-        await innerInput.press('%');
-        await innerInput.press('^');
-        await innerInput.press('*');
-        expect(await innerInput.getProperty('value')).toEqual('1234');
-        await innerInput.press('5');
-        expect(await innerInput.getProperty('value')).toEqual('12345');
-        input.setProperty('value', '12345sdfg');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('12345');
-    });
-    it('handles alternate format modifiers for postal code masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="postal" label="Postal Code" value="12345" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        await page.waitForChanges();
-        // formats value on initial input
-        expect(await innerInput.getProperty('value')).toEqual('12345');
-        input.setProperty('formatModifier', 'US+4');
-        await page.waitForChanges();
-        await innerInput.press('6');
-        await innerInput.press('7');
-        await innerInput.press('8');
-        await innerInput.press('9');
-        expect(await innerInput.getProperty('value')).toEqual('12345-6789');
-    });
-    it('should not set inputmode for postal code', async function () {
-        const page = await setup({
-            html: '<q2-input type="postal" label="Postal Code" value="A1A 1A1" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        input.setProperty('formatModifier', 'CA');
-        await page.waitForChanges();
-        // formats value on initial input
-        expect(await innerInput.getProperty('value')).toEqual('A1A 1A1');
-        expect(innerInput.getAttribute('inputmode')).toBeNull();
-    });
-    // Date
-    it('handles date masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="date" label="Date" value="10102019" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        const inputSpy = await input.spyOnEvent('input');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('type')).toEqual('text');
-        expect(await innerInput.getAttribute('inputmode')).toEqual('numeric');
-        // formats value on initial input
-        expect(await innerInput.getProperty('value')).toEqual('10/10/2019');
-        input.setProperty('value', '1234');
-        await page.waitForChanges();
-        await innerInput.press('5');
-        expect(inputSpy).toHaveReceivedEventDetail({
-            value: '12/34/5',
-            formattedValue: '12/34/5',
-            minFormattedLength: 10,
-        });
-        expect(await innerInput.getProperty('value')).toEqual('12/34/5');
-        // letter ignored
-        await innerInput.press('a');
-        expect(await innerInput.getProperty('value')).toEqual('12/34/5');
-        // invalid characters ignored
-        await innerInput.press('!');
-        await innerInput.press('@');
-        await innerInput.press('#');
-        await innerInput.press('$');
-        await innerInput.press('%');
-        await innerInput.press('^');
-        await innerInput.press('*');
-        expect(await innerInput.getProperty('value')).toEqual('12/34/5');
-        await innerInput.press('6');
-        await innerInput.press('7');
-        await innerInput.press('8');
-        expect(await innerInput.getProperty('value')).toEqual('12/34/5678');
-        await innerInput.press('8');
-        expect(await innerInput.getProperty('value')).toEqual('12/34/5678');
-    });
-    it('handles alternate format modifiers for date masking', async function () {
-        const page = await setup({
-            html: '<q2-input type="date" label="Date" value="10102019" ></q2-input>',
-        });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('10/10/2019');
-        input.setProperty('formatModifier', 'M-D-YYYY');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('10-10-2019');
-        input.setProperty('value', '');
-        await page.waitForChanges();
-        await innerInput.press('1');
-        expect(await innerInput.getProperty('value')).toEqual('1');
-        // incorrect formatting char ignored
-        await innerInput.press('/');
-        expect(await innerInput.getProperty('value')).toEqual('1');
-        // correct formatting char accepted
-        await innerInput.press('-');
-        expect(await innerInput.getProperty('value')).toEqual('1-');
-        await innerInput.press('1');
-        await innerInput.press('0');
-        await innerInput.press('2');
-        await innerInput.press('0');
-        await innerInput.press('1');
-        await innerInput.press('9');
-        expect(await innerInput.getProperty('value')).toEqual('1-10-2019');
-    });
-    it('should only allow permitted, nonformatting characters up to maxlength', async () => {
-        const page = await setup({
-            html: '<q2-input type="date" maxlength="3" label="Date"></q2-input>',
-        });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        await page.waitForChanges();
-        await innerInput.press('1');
-        await innerInput.press('0');
-        await innerInput.press('2');
-        expect(await innerInput.getProperty('value')).toEqual('10/2');
-        await innerInput.press('2');
-        expect(await innerInput.getProperty('value')).toEqual('10/2');
-        await page.waitForChanges();
-        // correct formatting char accepted
-        await innerInput.press('Backspace');
-        expect(await innerInput.getProperty('value')).toEqual('10/');
-        await innerInput.press('/');
-        await innerInput.press('1');
-        expect(await innerInput.getProperty('value')).toEqual('10/1');
-    });
-    it('should allow inserting permitted characters up to maxlength when our input provides a placeholder', async () => {
-        const page = await setup({
-            html: '<q2-input type="currency" maxlength="2" label="Amount"></q2-input>',
-        });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        await page.waitForChanges();
-        await innerInput.press('1');
-        await innerInput.press('0');
-        await innerInput.press('2');
-        expect(await innerInput.getProperty('value')).toEqual('0.10');
-    });
-    it('should allow pasting text up to the character limit and truncate whatever is left over', async function () {
-        const page = await setup({
-            html: '<q2-input type="text" maxlength=10 label="text-test"></q2input>',
-        });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        await page.waitForChanges();
-        const pasteValue = '01234567890123456789';
-        const expectedValue = '0123456789';
-        await dispatchEvent(page, ['q2-input', '.input-field'], 'paste', {
-            pastedValue: pasteValue,
-        });
-        expect(await innerInput.getProperty('value')).toEqual(expectedValue);
-    });
-    describe('cursor', () => {
-        it('does not allow type when the length of value is greater than equal the maxlength', async () => {
-            const maxlength = 4;
-            const page = await setup({
-                html: '<q2-input maxlength="' + maxlength.toString() + '" ></q2input>',
-            });
-            const innerInput = await page.find('q2-input >>> .input-field');
-            await page.waitForChanges();
-            // max length is 4, so we should be able to enter 4 characters
-            for (let i = 0; i < maxlength; i++) {
-                await innerInput.press('a');
-            }
-            // move the cursor to the middle of the string
-            await innerInput.press('ArrowLeft');
-            await innerInput.press('ArrowLeft');
-            // add characters to the middle of the string
-            await innerInput.press('f');
-            await innerInput.press('o');
-            expect(await innerInput.getProperty('value')).toEqual('aaaa');
-        });
-        it('does not move the cursor position when first character is deleted', async () => {
-            const page = await setup({
-                html: '<q2-input type="text" value="abcde 12345"></q2input>',
-            });
-            const innerInput = await page.find('q2-input >>> .input-field');
-            await page.waitForChanges();
-            const currentPosition = await innerInput.getProperty('selectionStart');
-            for (let i = 0; i < currentPosition - 1; i++) {
-                await innerInput.press('ArrowLeft');
-            }
-            await innerInput.press('Backspace');
-            await page.waitForChanges();
-            const newPosition = await innerInput.getProperty('selectionStart');
-            expect(newPosition).toEqual(0);
-        });
-        it('sets the cursor to where the user clicks to focus', async () => {
-            const page = await setup({
-                html: '<q2-input type="text" value="Tony Stark"></q2input>',
-            });
-            const innerInput = await page.find('q2-input >>> .input-field');
-            const valueLength = (await innerInput.getProperty('value')).length;
-            const dimensions = await getInnerInputDimensions(page);
-            // Simulate clicking a character in the middle of the input
-            await page.mouse.click(dimensions.left + 50, dimensions.top + dimensions.height / 2);
-            await page.waitForChanges();
-            expect(await innerInput.getProperty('selectionStart')).toBeLessThan(valueLength);
-        });
-        it('sets the cursor to where the user clicks if the input is already focused', async () => {
-            const page = await setup({
-                html: '<q2-input type="text" value="Tony Stark"></q2input>',
-            });
-            const innerInput = await page.find('q2-input >>> .input-field');
-            const valueLength = (await innerInput.getProperty('value')).length;
-            const dimensions = await getInnerInputDimensions(page);
-            await innerInput.focus();
-            await page.waitForChanges();
-            // Simulate clicking a character in the middle of the input
-            await page.mouse.click(dimensions.left + 50, dimensions.top + dimensions.height / 2);
+    describe('User Interactions', () => {
+        it('should show error message when error icon is clicked', async function () {
+            const page = await setup({ html: '<q2-input label="foo" />' });
+            const input = await page.find('q2-input');
+            input.setProperty('errors', ['broke']);
             await page.waitForChanges();
-            expect(await innerInput.getProperty('selectionStart')).toBeLessThan(valueLength);
-        });
-        describe("when type is 'currency'", () => {
-            it('does not move the cursor to the end when first character is deleted', async () => {
+            const { messagesHeight, hasErrorClass } = await page.$eval('q2-input', element => {
+                return {
+                    messagesHeight: element.shadowRoot.querySelector('.messages-container').clientHeight,
+                    hasErrorClass: !!element.shadowRoot.querySelector('.has-error'),
+                };
+            });
+            // errors are not visible when not in focus
+            expect(messagesHeight).toEqual(0);
+            // error indicator is present
+            expect(hasErrorClass).toBe(true);
+            await dispatchEvent(page, ['q2-input', '[test-id="divIconError"]'], 'click');
+            const { expandedMessagesHeight, messagesText } = await page.$eval('q2-input', element => {
+                const messageContainer = element.shadowRoot.querySelector('.messages-container');
+                return {
+                    expandedMessagesHeight: element.shadowRoot.querySelector('.messages-container').clientHeight,
+                    messagesText: messageContainer.innerText.trim(),
+                };
+            });
+            // errors are displayed when in focus
+            expect(expandedMessagesHeight).toBeGreaterThan(0);
+            // error message is correct
+            expect(messagesText).toEqual('broke');
+        });
+        describe('Cursor Behavior', () => {
+            it('does not allow type when the length of value is greater than equal the maxlength', async () => {
+                const maxlength = 4;
                 const page = await setup({
-                    html: '<q2-input type="currency" value="123"></q2input>',
+                    html: '<q2-input maxlength="' + maxlength.toString() + '" ></q2input>',
                 });
                 const innerInput = await page.find('q2-input >>> .input-field');
                 await page.waitForChanges();
-                const currentPosition = await innerInput.getProperty('selectionStart');
-                // For loop pushes cursor to left end position of input.value
-                for (let i = 0; i < currentPosition - 1; i++) {
-                    await innerInput.press('ArrowLeft');
+                // max length is 4, so we should be able to enter 4 characters
+                for (let i = 0; i < maxlength; i++) {
+                    await innerInput.press('a');
                     await page.waitForChanges();
                 }
-                await innerInput.press('Backspace');
+                // move the cursor to the middle of the string
+                await innerInput.press('ArrowLeft');
+                await innerInput.press('ArrowLeft');
+                // add characters to the middle of the string
+                await innerInput.press('f');
+                await innerInput.press('o');
                 await page.waitForChanges();
-                const newPosition = await innerInput.getProperty('selectionStart');
-                // 0 represents that cursor stays at far left (beginning position of input.value)
-                expect(newPosition).toEqual(0);
+                expect(await innerInput.getProperty('value')).toEqual('aaaa');
             });
-            it('moves the cursor to the left and right when pressing the arrow keys', async () => {
+            it('does not move the cursor position when first character is deleted', async () => {
                 const page = await setup({
-                    html: '<q2-input type="currency" value="185940958"></q2input>',
+                    html: '<q2-input type="text" value="abcde 12345"></q2input>',
                 });
                 const innerInput = await page.find('q2-input >>> .input-field');
                 await page.waitForChanges();
-                let value = await innerInput.getProperty('value');
-                // move the cursor to the middle of the string
-                const pressTimes = 4;
-                for (let i = 0; i < pressTimes; i++) {
+                const currentPosition = await innerInput.getProperty('selectionStart');
+                for (let i = 0; i < currentPosition - 1; i++) {
                     await innerInput.press('ArrowLeft');
                     await page.waitForChanges();
                 }
-                expect(await innerInput.getProperty('selectionStart')).toEqual(value.length - pressTimes);
-                // add characters to the middle of the string
-                await innerInput.press('3');
-                await innerInput.press('3');
-                expect(await innerInput.getProperty('value')).toEqual('18,594,095,338.00');
-                // move the cursor back to the end of the string
-                for (let i = 0; i < pressTimes; i++)
-                    await innerInput.press('ArrowRight');
-                value = await innerInput.getProperty('value');
-                expect(await innerInput.getProperty('selectionStart')).toEqual(value.length);
+                await innerInput.press('Backspace');
+                await page.waitForChanges();
+                const newPosition = await innerInput.getProperty('selectionStart');
+                expect(newPosition).toEqual(0);
             });
-            it('sets the cursor to the end regardless of where the user clicks to focus', async () => {
+            it('sets the cursor to where the user clicks to focus', async () => {
                 const page = await setup({
-                    html: '<q2-input type="currency" value="185940958"></q2input>',
+                    html: '<q2-input type="text" value="Tony Stark"></q2input>',
                 });
                 const innerInput = await page.find('q2-input >>> .input-field');
                 const valueLength = (await innerInput.getProperty('value')).length;
                 const dimensions = await getInnerInputDimensions(page);
                 // Simulate clicking a character in the middle of the input
-                await page.mouse.click(dimensions.right - 50, dimensions.top + dimensions.height / 2);
+                await page.mouse.click(dimensions.left + 50, dimensions.top + dimensions.height / 2);
                 await page.waitForChanges();
-                expect(await innerInput.getProperty('selectionStart')).toEqual(valueLength);
+                expect(await innerInput.getProperty('selectionStart')).toBeLessThan(valueLength);
             });
             it('sets the cursor to where the user clicks if the input is already focused', async () => {
                 const page = await setup({
-                    html: '<q2-input type="currency" value="185940958"></q2input>',
+                    html: '<q2-input type="text" value="Tony Stark"></q2input>',
                 });
                 const innerInput = await page.find('q2-input >>> .input-field');
                 const valueLength = (await innerInput.getProperty('value')).length;
@@ -1372,10 +166,83 @@ describe('q2-input', () => {
                 await innerInput.focus();
                 await page.waitForChanges();
                 // Simulate clicking a character in the middle of the input
-                await page.mouse.click(dimensions.right - 50, dimensions.top + dimensions.height / 2);
+                await page.mouse.click(dimensions.left + 50, dimensions.top + dimensions.height / 2);
                 await page.waitForChanges();
                 expect(await innerInput.getProperty('selectionStart')).toBeLessThan(valueLength);
             });
+            describe("when type is 'currency'", () => {
+                it('does not move the cursor to the end when first character is deleted', async () => {
+                    const page = await setup({
+                        html: '<q2-input type="currency" value="123"></q2input>',
+                    });
+                    const innerInput = await page.find('q2-input >>> .input-field');
+                    await page.waitForChanges();
+                    const currentPosition = await innerInput.getProperty('selectionStart');
+                    // For loop pushes cursor to left end position of input.value
+                    for (let i = 0; i < currentPosition - 1; i++) {
+                        await innerInput.press('ArrowLeft');
+                        await page.waitForChanges();
+                    }
+                    await innerInput.press('Backspace');
+                    await page.waitForChanges();
+                    const newPosition = await innerInput.getProperty('selectionStart');
+                    // 0 represents that cursor stays at far left (beginning position of input.value)
+                    expect(newPosition).toEqual(0);
+                });
+                it('moves the cursor to the left and right when pressing the arrow keys', async () => {
+                    const page = await setup({
+                        html: '<q2-input type="currency" value="185940958"></q2input>',
+                    });
+                    const innerInput = await page.find('q2-input >>> .input-field');
+                    await page.waitForChanges();
+                    let value = await innerInput.getProperty('value');
+                    // move the cursor to the middle of the string
+                    const pressTimes = 4;
+                    for (let i = 0; i < pressTimes; i++) {
+                        await innerInput.press('ArrowLeft');
+                        await page.waitForChanges();
+                    }
+                    expect(await innerInput.getProperty('selectionStart')).toEqual(value.length - pressTimes);
+                    // add characters to the middle of the string
+                    await innerInput.press('3');
+                    await innerInput.press('3');
+                    await page.waitForChanges();
+                    expect(await innerInput.getProperty('value')).toEqual('18,594,095,338.00');
+                    // move the cursor back to the end of the string
+                    for (let i = 0; i < pressTimes; i++) {
+                        await innerInput.press('ArrowRight');
+                        await page.waitForChanges();
+                    }
+                    value = await innerInput.getProperty('value');
+                    expect(await innerInput.getProperty('selectionStart')).toEqual(value.length);
+                });
+                it('sets the cursor to the end regardless of where the user clicks to focus', async () => {
+                    const page = await setup({
+                        html: '<q2-input type="currency" value="185940958"></q2input>',
+                    });
+                    const innerInput = await page.find('q2-input >>> .input-field');
+                    const valueLength = (await innerInput.getProperty('value')).length;
+                    const dimensions = await getInnerInputDimensions(page);
+                    // Simulate clicking a character in the middle of the input
+                    await page.mouse.click(dimensions.right - 50, dimensions.top + dimensions.height / 2);
+                    await page.waitForChanges();
+                    expect(await innerInput.getProperty('selectionStart')).toEqual(valueLength);
+                });
+                it('sets the cursor to where the user clicks if the input is already focused', async () => {
+                    const page = await setup({
+                        html: '<q2-input type="currency" value="185940958"></q2input>',
+                    });
+                    const innerInput = await page.find('q2-input >>> .input-field');
+                    const valueLength = (await innerInput.getProperty('value')).length;
+                    const dimensions = await getInnerInputDimensions(page);
+                    await innerInput.focus();
+                    await page.waitForChanges();
+                    // Simulate clicking a character in the middle of the input
+                    await page.mouse.click(dimensions.right - 50, dimensions.top + dimensions.height / 2);
+                    await page.waitForChanges();
+                    expect(await innerInput.getProperty('selectionStart')).toBeLessThan(valueLength);
+                });
+            });
         });
         describe('when on mobile', () => {
             let page;
@@ -1395,39 +262,47 @@ describe('q2-input', () => {
             });
             it('moves the cursor when ArrowLeft is pressed', async () => {
                 const pressTimes = 4;
-                for (let i = 0; i < pressTimes; i++)
+                for (let i = 0; i < pressTimes; i++) {
                     await innerInput.press('ArrowLeft');
+                    await page.waitForChanges();
+                }
                 expect(await innerInput.getProperty('selectionStart')).toEqual(3);
             });
             it('moves the cursor when ArrowRight is pressed', async () => {
                 await innerInput.press('ArrowRight');
+                await page.waitForChanges();
                 expect(await innerInput.getProperty('selectionStart')).toEqual(8);
             });
             it('moves the cursor to the beginning when ArrowUp is pressed', async () => {
                 await innerInput.press('ArrowUp');
+                await page.waitForChanges();
                 expect(await innerInput.getProperty('selectionStart')).toEqual(0);
             });
             it('moves the cursor to the end when ArrowDown is pressed', async () => {
                 await innerInput.press('ArrowDown');
+                await page.waitForChanges();
                 expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
             });
             it('moves the cursor to the end when End is pressed', async () => {
                 await innerInput.press('End');
+                await page.waitForChanges();
                 expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
             });
             it('moves the cursor to the beginning when Home is pressed', async () => {
                 await innerInput.press('Home');
+                await page.waitForChanges();
                 expect(await innerInput.getProperty('selectionStart')).toEqual(0);
             });
             describe("when type is 'currency'", () => {
                 beforeEach(async () => {
                     const input = await page.find('q2-input');
-                    await input.setProperty('type', 'currency');
-                    await input.setProperty('value', '1234567890');
+                    input.setProperty('type', 'currency');
+                    input.setProperty('value', '1234567890');
                     await page.waitForChanges();
                     innerInput = await page.find('q2-input >>> .input-field');
                     inputValueLength = (await innerInput.getProperty('value')).length;
                     await innerInput.focus();
+                    await page.waitForChanges();
                     const dimensions = await getInnerInputDimensions(page);
                     await page.touchscreen.tap(dimensions.left - 50, dimensions.top + dimensions.height / 2);
                     await page.waitForChanges();
@@ -1435,28 +310,35 @@ describe('q2-input', () => {
                 });
                 it('does not move the cursor when ArrowLeft is pressed', async () => {
                     const pressTimes = 4;
-                    for (let i = 0; i < pressTimes; i++)
+                    for (let i = 0; i < pressTimes; i++) {
                         await innerInput.press('ArrowLeft');
+                        await page.waitForChanges();
+                    }
                     expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
                 });
                 it('does not move the cursor when ArrowRight is pressed', async () => {
                     await innerInput.press('ArrowRight');
+                    await page.waitForChanges();
                     expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
                 });
                 it('does not move the cursor when ArrowUp is pressed', async () => {
                     await innerInput.press('ArrowUp');
+                    await page.waitForChanges();
                     expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
                 });
                 it('does not move the cursor when ArrowDown is pressed', async () => {
                     await innerInput.press('ArrowDown');
+                    await page.waitForChanges();
                     expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
                 });
                 it('does not move the cursor when End is pressed', async () => {
                     await innerInput.press('End');
+                    await page.waitForChanges();
                     expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
                 });
                 it('does not move the cursor when Home is pressed', async () => {
                     await innerInput.press('Home');
+                    await page.waitForChanges();
                     expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
                 });
                 it('sets the cursor at the end regardless of where the user clicks', async () => {
@@ -1469,775 +351,31 @@ describe('q2-input', () => {
             });
         });
     });
-    it('does not allow invalid autocomplete types', async function () {
-        const page = await setup({ html: '<q2-input autocomplete />' });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        // sets input autocomplete to nothing to make sure 'off' is returned
-        expect(await innerInput.getProperty('autocomplete')).toEqual('off');
-        input.setProperty('autocomplete', '');
-        await page.waitForChanges();
-        // sets input autocomplete to empty string to make sure 'off' is returned
-        expect(await innerInput.getProperty('autocomplete')).toEqual('off');
-    });
-    it('allows autocomplete types', async function () {
-        const page = await setup({ html: '<q2-input autocomplete="name" />' });
-        const input = await page.find('q2-input');
-        const innerInput = await page.find('q2-input >>> .input-field');
-        // sets input autocomplete to null to make sure 'off' is returned
-        expect(await innerInput.getProperty('autocomplete')).toEqual('name');
-        input.setProperty('autocomplete', 'on');
-        await page.waitForChanges();
-        // sets input autocomplete to null to make sure 'off' is returned
-        expect(await innerInput.getProperty('autocomplete')).toEqual('on');
-    });
-    describe(' when show-toggle visibility is set ', () => {
-        it('should show toggle button when visibility toggle is enabled and pass localized aria-label to innerButton', async function () {
-            const page = await setup({ html: '' });
-            await setTestStrings(page, {
-                'tecton.element.input.toggleAriaLabel.hide': 'Hide {label}',
-                'tecton.element.input.toggleAriaLabel.show': 'Show {label}',
-            });
-            await page.setContent('<q2-input type="text" label="foo" show-visibility-toggle />');
-            await page.waitForChanges();
-            const toggleButton = await page.find('q2-input >>> [test-id="toggleVisibilityButton"]');
-            expect(toggleButton).not.toBeNull();
-            const innerButtonAriaLabelHide = await getNestedElementAttribute(page, ['q2-input', "[test-id='toggleVisibilityButton']", 'button'], 'aria-label');
-            expect(innerButtonAriaLabelHide).toBe('Hide foo');
-            await dispatchEvent(page, ['q2-input', '[test-id="toggleVisibilityButton"]'], 'click');
-            await page.waitForChanges();
-            const innerButtonAriaLabelShow = await getNestedElementAttribute(page, ['q2-input', "[test-id='toggleVisibilityButton']", 'button'], 'aria-label');
-            expect(innerButtonAriaLabelShow).toBe('Show foo');
-        });
-        it('should not show toggle button when visibility toggle is not enabled', async function () {
-            const page = await setup({ html: '<q2-input />' });
-            const toggleButton = await page.find('q2-input >>> [test-id="toggleVisibilityButton"]');
-            expect(toggleButton).toBeNull();
-        });
-        it('should not show toggle button even if visibility toggle is enabled but the type is not text/password', async function () {
-            const page = await setup({ html: '<q2-input show-visibility-toggle type="number" />' });
-            const toggleButton = await page.find('q2-input >>> [test-id="toggleVisibilityButton"]');
-            expect(toggleButton).toBeNull();
-        });
-        it('should switch inner input type to "password" when visibility toggle is clicked for type=text', async function () {
-            const page = await setup({ html: '<q2-input type="text" show-visibility-toggle />' });
-            await dispatchEvent(page, ['q2-input', '[test-id="toggleVisibilityButton"]'], 'click');
-            const innerInput = await page.find('q2-input >>> .input-field');
-            expect(await innerInput.getProperty('type')).toEqual('password');
-            // clicking again should change it back to "text"
-            await dispatchEvent(page, ['q2-input', '[test-id="toggleVisibilityButton"]'], 'click');
-            expect(await innerInput.getProperty('type')).toEqual('text');
-        });
-        it('should switch inner input type to "text" when visibility toggle is clicked for type=password', async function () {
-            const page = await setup({ html: '<q2-input type="password" show-visibility-toggle />' });
-            await dispatchEvent(page, ['q2-input', '[test-id="toggleVisibilityButton"]'], 'click');
-            const innerInput = await page.find('q2-input >>> .input-field');
-            expect(await innerInput.getProperty('type')).toEqual('text');
-            // clicking again should change it back to "password"
-            await dispatchEvent(page, ['q2-input', '[test-id="toggleVisibilityButton"]'], 'click');
-            expect(await innerInput.getProperty('type')).toEqual('password');
-        });
-        it('should move focus to q2-input when visibility toggle is clicked for type=password', async function () {
-            const page = await setup({ html: '<q2-input type="password" show-visibility-toggle />' });
-            const innerInput = await page.find('q2-input >>> .input-field');
-            const inputFocusSpy = await innerInput.spyOnEvent('focus');
-            expect(await innerInput.getProperty('type')).toEqual('password');
-            expect(inputFocusSpy).toHaveReceivedEventTimes(0);
-            await dispatchEvent(page, ['q2-input', '[test-id="toggleVisibilityButton"]'], 'click');
-            expect(await innerInput.getProperty('type')).toEqual('text');
-            expect(inputFocusSpy).toHaveReceivedEventTimes(1);
-        });
-        it('should switch inner input type to "password" when visibility toggle is clicked for type=ssn', async function () {
-            const page = await setup({ html: '<q2-input type="ssn" show-visibility-toggle />' });
-            await dispatchEvent(page, ['q2-input', '[test-id="toggleVisibilityButton"]'], 'click');
-            const innerInput = await page.find('q2-input >>> .input-field');
-            expect(await innerInput.getProperty('type')).toEqual('password');
-            expect(await innerInput.getAttribute('inputmode')).toEqual('numeric');
-            // clicking again should change it back to "tel"
-            await dispatchEvent(page, ['q2-input', '[test-id="toggleVisibilityButton"]'], 'click');
-            expect(await innerInput.getProperty('type')).toEqual('text');
-            expect(await innerInput.getAttribute('inputmode')).toEqual('numeric');
-        });
-    });
-    it('should match the input entered when the user types quickly', async () => {
-        const page = await setup({ html: '<q2-input type="currency" />' });
-        const innerInput = await page.find('q2-input >>> [test-id="inputField"]');
-        await innerInput.type('12233445678', { delay: 5 });
-        const innerInputValue = await innerInput.getProperty('value');
-        expect(innerInputValue).toEqual('122,334,456.78');
-    });
-    // Number
-    it('handles number type', async function () {
-        const page = await setup({
-            html: '<q2-input type="number" label="Number" value="1" ></q2-input>',
-        });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('type')).toEqual('number');
-        await innerInput.press('ArrowUp');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('2');
-    });
-    it('handles number type with valid positive decimal number', async function () {
-        const page = await setup({
-            html: '<q2-input type="number" label="Number" ></q2-input>',
-        });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('type')).toEqual('number');
-        await innerInput.press('1');
-        await innerInput.press('.');
-        await innerInput.press('2');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('1.2');
-    });
-    it('handles number type with incomplete positive decimal number (ends with period)', async function () {
-        const page = await setup({
-            html: '<q2-input type="number" label="Number" ></q2-input>',
-        });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('type')).toEqual('number');
-        await innerInput.press('1');
-        await innerInput.press('.');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('1');
-    });
-    it('handles number type with negative decimal number', async function () {
-        const page = await setup({
-            html: '<q2-input type="number" label="Number" ></q2-input>',
-        });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('type')).toEqual('number');
-        await innerInput.type('-1.2');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('-1.2');
-    });
-    it('handles number type with step', async function () {
-        const page = await setup({
-            html: '<q2-input type="number" label="Number" value="10" step="5" ></q2-input>',
-        });
-        const innerInput = await page.find('q2-input >>> .input-field');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('type')).toEqual('number');
-        await innerInput.press('ArrowUp');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('15');
-        await innerInput.press('ArrowDown');
-        await innerInput.press('ArrowDown');
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('value')).toEqual('5');
-    });
-    describe('Events', () => {
-        let page;
-        let innerInput;
-        let input;
-        beforeEach(async () => {
-            page = await setup({ html: '<q2-input/>' });
-            input = await page.find('q2-input');
-            innerInput = await page.find('q2-input >>> .input-field');
-        });
-        describe('Standard events', () => {
-            it('events all necessary events when printable keys are pressed', async () => {
-                const keydownSpy = await input.spyOnEvent('keydown');
-                const inputSpy = await input.spyOnEvent('input');
-                const keyupSpy = await input.spyOnEvent('keyup');
-                await innerInput.press('a');
-                await page.waitForChanges();
-                expect(keydownSpy).toHaveReceivedEventTimes(1);
-                expect(keydownSpy).toHaveReceivedEventDetail(0);
-                expect(inputSpy).toHaveReceivedEventTimes(1);
-                expect(inputSpy).toHaveReceivedEventDetail({ value: 'a', formattedValue: 'a' });
-                expect(keyupSpy).toHaveReceivedEventTimes(1);
-                expect(keyupSpy).toHaveReceivedEventDetail(0);
-            });
-            it('events all necessary events when non-printable keys are pressed', async () => {
-                const keydownSpy = await input.spyOnEvent('keydown');
-                const inputSpy = await input.spyOnEvent('input');
-                const keyupSpy = await input.spyOnEvent('keyup');
-                await innerInput.press('Home');
-                await page.waitForChanges();
-                expect(keydownSpy).toHaveReceivedEventTimes(1);
-                expect(keydownSpy).toHaveReceivedEventDetail(0);
-                expect(inputSpy).toHaveReceivedEventTimes(0);
-                expect(keyupSpy).toHaveReceivedEventTimes(1);
-                expect(keyupSpy).toHaveReceivedEventDetail(0);
-            });
-        });
-    });
-    describe('Props', () => {
-        describe('ariaExpanded', () => {
-            it('uses "true" as value when provided', async () => {
-                const page = await setup({
-                    html: `<q2-input aria-expanded="true" value="Tony" />`,
-                });
-                const innerButton = await page.find('q2-input >>> [test-id="inputField"]');
-                expect(innerButton).toEqualAttribute('aria-expanded', 'true');
-            });
-            it('uses "false" as value when provided', async () => {
-                const page = await setup({
-                    html: `<q2-input aria-expanded="false" value="Tony" />`,
-                });
-                const innerButton = await page.find('q2-input >>> [test-id="inputField"]');
-                expect(innerButton).toEqualAttribute('aria-expanded', 'false');
-            });
-            it('is not added when it is not provided', async () => {
-                const page = await setup({
-                    html: `<q2-input value="Tony" />`,
-                });
-                const innerButton = await page.find('q2-input >>> [test-id="inputField"]');
-                expect(innerButton).not.toHaveAttribute('aria-expanded');
-            });
-            it('no value unless explicitly set', async () => {
-                const page = await setup({
-                    html: `<q2-input aria-expanded value="Tony" />`,
-                });
-                const innerButton = await page.find('q2-input >>> [test-id="inputField"]');
-                expect(innerButton).toEqualAttribute('aria-expanded', '');
-            });
-        });
-        describe('ariaHasPopup', () => {
-            it('uses "true" as value when provided', async () => {
-                const page = await setup({
-                    html: `<q2-input aria-haspopup="true" value="Tony" />`,
-                });
-                const innerButton = await page.find('q2-input >>> [test-id="inputField"]');
-                expect(innerButton).toEqualAttribute('aria-haspopup', 'true');
-            });
-            it('uses "false" as value when provided', async () => {
-                const page = await setup({
-                    html: `<q2-input aria-haspopup="false" value="Tony" />`,
-                });
-                const innerButton = await page.find('q2-input >>> [test-id="inputField"]');
-                expect(innerButton).toEqualAttribute('aria-haspopup', 'false');
-            });
-            it('is not added when it is not provided', async () => {
-                const page = await setup({
-                    html: `<q2-input value="Tony" />`,
-                });
-                const innerButton = await page.find('q2-input >>> [test-id="inputField"]');
-                expect(innerButton).not.toHaveAttribute('aria-haspopup');
-            });
-            it('translates to empty string if not passed a value', async () => {
-                const page = await setup({
-                    html: `<q2-input aria-haspopup value="Tony" />`,
-                });
-                const innerButton = await page.find('q2-input >>> [test-id="inputField"]');
-                expect(innerButton).toEqualAttribute('aria-haspopup', '');
-            });
-            const hasPopupValues = ['true', 'false', 'menu', 'listbox', 'tree', 'grid', 'dialog'];
-            hasPopupValues.forEach(async (value) => {
-                it(`sets aria-haspopup to "${value}" when passed value "${value}"`, async () => {
-                    const page = await setup({
-                        html: `<q2-input aria-haspopup='${value}' value="Tony" />`,
-                    });
-                    const innerButton = await page.find('q2-input >>> [test-id="inputField"]');
-                    expect(innerButton).toEqualAttribute('aria-haspopup', value);
-                });
-            });
-            it('sets aria-haspopup to `null` when not provided a valid string', async () => {
-                const page = await setup({
-                    html: `<q2-input aria-haspopup='foo' value="Tony" />`,
-                });
-                const innerButton = await page.find('q2-input >>> [test-id="inputField"]');
-                expect(innerButton).toEqualAttribute('aria-haspopup', null);
-            });
-        });
-        describe('clearable', () => {
-            describe('when false (default)', () => {
-                it('does not display the clear icon when not provided (default)', async () => {
-                    const page = await setup({ html: '<q2-input value="Tony"/>' });
-                    const clearButton = await page.find('q2-input >>> [test-id="clearButton"]');
-                    expect(clearButton).toHaveClass('hidden');
-                });
-                it('starts observing width when added at runtime', async () => {
-                    const page = await setup({ html: '<q2-input value="Tony" />' });
-                    await page.evaluate(() => {
-                        document.body.style.margin = '0';
-                    });
-                    await page.waitForChanges();
-                    const input = await page.find('q2-input');
-                    await input.setProperty('clearable', true);
-                    await page.waitForChanges();
-                    let clearButtonWidth = await getNestedElementStyle(page, ['q2-input', '[test-id="clearButton"]'], 'width');
-                    expect(clearButtonWidth).toBe('44px');
-                    await page.setViewport({ width: 189, height: 400 });
-                    await page.waitForChanges();
-                    clearButtonWidth = await getNestedElementStyle(page, ['q2-input', '[test-id="clearButton"]'], 'width');
-                    expect(clearButtonWidth).toBe('20px');
-                });
-            });
-            describe('when true', () => {
-                it('displays the clear button when there is a value', async () => {
-                    const page = await setup({ html: '<q2-input value="Tony" clearable/>' });
-                    const clearButton = await page.find('q2-input >>> [test-id="clearButton"]');
-                    expect(clearButton).toBeTruthy();
-                });
-                it('clears the value and emits events when the clear button is clicked', async () => {
-                    const page = await setup({ html: '<q2-input value="Tony" clearable/>' });
-                    const input = await page.find('q2-input');
-                    const innerInput = await page.find('q2-input >>> input');
-                    const clearButton = await page.find('q2-input >>> [test-id="clearButton"]');
-                    const inputSpy = await input.spyOnEvent('input');
-                    const changeSpy = await input.spyOnEvent('change');
-                    const clearSpy = await input.spyOnEvent('clear');
-                    expect(await innerInput.getProperty('value')).toEqual('Tony');
-                    expect(inputSpy).toHaveReceivedEventTimes(0);
-                    expect(changeSpy).toHaveReceivedEventTimes(0);
-                    expect(clearSpy).toHaveReceivedEventTimes(0);
-                    await clearButton.click();
-                    await page.waitForChanges();
-                    const eventDetail = { value: '', formattedValue: '' };
-                    expect(await innerInput.getProperty('value')).toEqual('');
-                    expect(inputSpy).toHaveReceivedEventDetail(eventDetail);
-                    expect(changeSpy).toHaveReceivedEventDetail(eventDetail);
-                    expect(clearSpy).toHaveReceivedEventTimes(1);
-                });
-                it('clear button is 44px when component is more than 190px wide', async () => {
-                    const page = await setup({ html: '<q2-input value="Tony" clearable/>' });
-                    await page.setViewport({ width: 193, height: 400 });
-                    await page.evaluate(() => {
-                        document.body.style.margin = '0';
-                    });
-                    await page.waitForChanges();
-                    const clearButtonWidth = await getNestedElementStyle(page, ['q2-input', '[test-id="clearButton"]'], 'width');
-                    expect(clearButtonWidth).toBe('44px');
-                });
-                it('clear button is 20px when component is less than 190px wide', async () => {
-                    const page = await setup({ html: '<q2-input value="Tony" clearable/>' });
-                    await page.setViewport({ width: 189, height: 400 });
-                    await page.evaluate(() => {
-                        document.body.style.margin = '0';
-                    });
-                    await page.waitForChanges();
-                    const clearButtonWidth = await getNestedElementStyle(page, ['q2-input', '[test-id="clearButton"]'], 'width');
-                    expect(clearButtonWidth).toBe('20px');
-                });
-            });
-        });
-        describe('autofocus', () => {
-            describe('when autofocus is enabled', () => {
-                it('focuses on input element on page load', async () => {
-                    const page = await setup({
-                        html: `<q2-input autofocus></q2-input>`,
-                    });
-                    const q2Input = await page.find('q2-input >>> input');
-                    expect(q2Input).toHaveAttribute('autofocus');
-                    expect(await getActiveElementTestId(page)).toBe('inputField');
-                });
-            });
-            describe('when autofocus is disabled', () => {
-                it('does not focus on input element on page load', async () => {
-                    const page = await setup({
-                        html: `<q2-input></q2-input>`,
-                    });
-                    const q2Input = await page.find('q2-input >>> input');
-                    expect(q2Input).not.toHaveAttribute('autofocus');
-                    expect(await getActiveElementTestId(page)).toBeNull();
-                });
-            });
-        });
-        describe('badgeValue', () => {
-            describe('when not provided', () => {
-                it('does not add the badge element', async () => {
-                    const page = await setup({ html: '<q2-input />' });
-                    const badge = await page.find('q2-input >>> q2-badge');
-                    expect(badge).toBeNull();
-                });
-            });
-            describe('when provided', () => {
-                it('adds badge element', async () => {
-                    const page = await setup({ html: '<q2-input badge-value="5"/>' });
-                    const badge = await page.find('q2-input >>> q2-badge');
-                    expect(badge.textContent).toEqual('5');
-                });
-            });
-        });
-        describe('badgeTheme', () => {
-            let page;
-            let input;
-            let badge;
-            beforeEach(async () => {
-                page = await setup({ html: '<q2-input badge-value="5"/>' });
-                input = await page.find('q2-input');
-                badge = await page.find('q2-input >>> q2-badge');
-            });
-            describe('when not provided', () => {
-                it('does not add the badge element', async () => {
-                    expect(badge).not.toHaveAttribute('theme');
-                });
-            });
-            describe('when provided', () => {
-                beforeEach(async () => {
-                    await input.setProperty('badgeTheme', 'primary');
-                    await page.waitForChanges();
-                });
-                it('adds badge element', async () => {
-                    expect(badge).toEqualAttribute('theme', 'primary');
-                });
-            });
-        });
-        describe('textHidden', () => {
-            describe('when not provided', () => {
-                it('is not automatically added', async () => {
-                    const page = await setup({ html: '<q2-input />' });
-                    const input = await page.find('q2-input');
-                    expect(await input).not.toHaveAttribute('text-hidden');
-                });
-                it('is automatically added when type="password"', async () => {
-                    const page = await setup({ html: '<q2-input type="password"/>' });
-                    const input = await page.find('q2-input');
-                    expect(await input).toHaveAttribute('text-hidden');
-                });
-            });
-            describe('when provided', () => {
-                it('persists after render', async () => {
-                    const page = await setup({ html: '<q2-input text-hidden/>' });
-                    const input = await page.find('q2-input');
-                    expect(await input).toHaveAttribute('text-hidden');
-                });
-            });
-        });
-        describe('hideLabel', () => {
-            describe('when hideLabel is provided', () => {
-                it('hides the label element', async () => {
-                    const page = await setup({ html: '<q2-input hide-label/>' });
-                    const input = await page.find('q2-input');
-                    expect(input).toHaveAttribute('hide-label');
-                    input.setProperty('label', 'My Label');
-                    await page.waitForChanges();
-                    expect(input).toHaveAttribute('hide-label');
-                    input.setAttribute('label', 'Your Label');
-                    await page.waitForChanges();
-                    expect(input).toHaveAttribute('hide-label');
-                    const inputStyle = await input.getComputedStyle();
-                    expect(parseInt(inputStyle.height)).toBe(46);
-                });
-            });
-            describe('when hideLabel is NOT provided', () => {
-                it('when optional is provided, it hides the label element', async () => {
-                    const page = await setup({ html: '<q2-input optional/>' });
-                    const input = await page.find('q2-input');
-                    const label = await page.find('q2-input >>> label');
-                    const hasSRClass = label.classList.contains('sr');
-                    expect(hasSRClass).toBeTruthy();
-                    const inputStyle = await input.getComputedStyle();
-                    expect(parseInt(inputStyle.height)).toBe(46);
-                });
-                it('when readonly is provided, it hides the label element', async () => {
-                    const page = await setup({ html: '<q2-input readonly/>' });
-                    const input = await page.find('q2-input');
-                    const label = await page.find('q2-input >>> label');
-                    const hasSRClass = label.classList.contains('sr');
-                    expect(hasSRClass).toBeTruthy();
-                    const inputStyle = await input.getComputedStyle();
-                    expect(parseInt(inputStyle.height)).toBe(46);
-                });
-                it('when label is provided, it shows the label element', async () => {
-                    const page = await setup({ html: '<q2-input label="My Label"/>' });
-                    const input = await page.find('q2-input');
-                    const label = await page.find('q2-input >>> label');
-                    const hasSRClass = label.classList.contains('sr');
-                    expect(hasSRClass).toBeFalsy();
-                    const inputStyle = await input.getComputedStyle();
-                    expect(parseInt(inputStyle.height)).toBe(69);
-                });
-                it('when label is not provided, it hides the label element', async () => {
-                    const page = await setup({ html: '<q2-input />' });
-                    const input = await page.find('q2-input');
-                    const label = await page.find('q2-input >>> label');
-                    const hasSRClass = label.classList.contains('sr');
-                    expect(hasSRClass).toBeTruthy();
-                    const inputStyle = await input.getComputedStyle();
-                    expect(parseInt(inputStyle.height)).toBe(46);
-                });
-            });
-        });
-        describe('type', () => {
-            describe('numeric', () => {
-                describe('format-modifier', () => {
-                    const formatModifierTest = [
-                        {
-                            modifier: 'integer',
-                            value: '-1000.00',
-                            expected: '-1000',
-                        },
-                        {
-                            modifier: 'integer-delimited',
-                            value: '1000000.00',
-                            expected: '1,000,000',
-                        },
-                        {
-                            modifier: 'integer-positive',
-                            value: '-1000.00',
-                            expected: '1000',
-                        },
-                        {
-                            modifier: 'integer-delimited-positive',
-                            value: '-1000000.00',
-                            expected: '1,000,000',
-                        },
-                        {
-                            modifier: '2decimal',
-                            value: '-1000.000',
-                            expected: '-1000.00',
-                        },
-                        {
-                            modifier: '2decimal-delimited',
-                            value: '1000000.000',
-                            expected: '1,000,000.00',
-                        },
-                        {
-                            modifier: '2decimal-positive',
-                            value: '-1000.000',
-                            expected: '1000.00',
-                        },
-                        {
-                            modifier: '2decimal-delimited-positive',
-                            value: '-1000000.000',
-                            expected: '1,000,000.00',
-                        },
-                        {
-                            modifier: '3decimal',
-                            value: '1000.00',
-                            expected: '1000.000',
-                        },
-                        {
-                            modifier: '2dec',
-                            value: '-1000.000',
-                            expected: '-1,000.00',
-                        },
-                        {
-                            modifier: 'delimited',
-                            value: '1000000.00',
-                            expected: '1,000,000',
-                        },
-                    ];
-                    formatModifierTest.forEach(test => {
-                        const { modifier, value, expected } = test;
-                        it(`on load formats correctly when set to "${modifier}" and value set to "${value}"`, async function () {
-                            const page = await setup({
-                                html: `<q2-input type="numeric" format-modifier="${modifier}" label="Number" value="${value}"></q2-input>`,
-                            });
-                            const innerInput = await page.find('q2-input >>> .input-field');
-                            const innerInputValue = await innerInput.getProperty('value');
-                            expect(innerInputValue).toEqual(expected);
-                        });
-                        it(`after load formats correctly when set to "${modifier}" and value set to "${value}"`, async function () {
-                            const page = await setup({
-                                html: `<q2-input type="numeric" format-modifier="${modifier}" label="Number"></q2-input>`,
-                            });
-                            const q2Input = await page.find('q2-input');
-                            const innerInput = await page.find('q2-input >>> .input-field');
-                            q2Input.setProperty('value', value);
-                            await page.waitForChanges();
-                            const innerInputValue = await innerInput.getProperty('value');
-                            expect(innerInputValue).toEqual(expected);
-                        });
-                    });
-                });
-            });
-        });
-    });
-    describe('Methods', () => {
-        describe('setValue', () => {
-            it('sets the value of the input', async () => {
-                const page = await setup({ html: '<q2-input label="My input" />' });
-                const input = await page.find('q2-input');
-                const innerInput = await page.find('q2-input >>> input');
-                const inputChangeSpy = await input.spyOnEvent('change');
-                const inputInputSpy = await input.spyOnEvent('input');
-                expect(inputChangeSpy).toHaveReceivedEventTimes(0);
-                expect(inputInputSpy).toHaveReceivedEventTimes(0);
-                expect(await getActiveElementTestId(page)).toBeNull();
-                const newValue = 'The truth is, I am Iron Man.';
-                await input.callMethod('setValue', newValue);
-                await page.waitForChanges();
-                expect(inputChangeSpy).toHaveReceivedEventTimes(0);
-                expect(inputInputSpy).toHaveReceivedEventTimes(1);
-                expect(inputInputSpy).toHaveReceivedEventDetail({
-                    formattedValue: newValue,
-                    value: newValue,
-                });
-                expect(await input.getProperty('value')).toBeUndefined();
-                expect(await innerInput.getProperty('value')).toEqual(newValue);
-                expect(await getActiveElementTestId(page)).toEqual('inputField');
-                await innerInput.press('Tab');
-                await page.waitForChanges();
-                expect(inputChangeSpy).toHaveReceivedEventTimes(1);
-                expect(inputChangeSpy).toHaveReceivedEventDetail({
-                    formattedValue: newValue,
-                    value: newValue,
-                });
-                expect(await input.getProperty('value')).toEqual(newValue);
-                expect(await getActiveElementTestId(page)).toBeNull();
-            });
-            it('sets the masked value of the input', async () => {
-                const page = await setup({ html: '<q2-input label="My input" type="phone" />' });
-                const input = await page.find('q2-input');
-                const innerInput = await page.find('q2-input >>> input');
-                const inputChangeSpy = await input.spyOnEvent('change');
-                const inputInputSpy = await input.spyOnEvent('input');
-                expect(inputChangeSpy).toHaveReceivedEventTimes(0);
-                expect(inputInputSpy).toHaveReceivedEventTimes(0);
-                expect(await getActiveElementTestId(page)).toBeNull();
-                const newValue = '5558675309';
-                const formattedValue = '(555) 867-5309';
-                await input.callMethod('setValue', newValue);
-                await page.waitForChanges();
-                expect(inputChangeSpy).toHaveReceivedEventTimes(0);
-                expect(inputInputSpy).toHaveReceivedEventTimes(1);
-                expect(inputInputSpy).toHaveReceivedEventDetail({
-                    formattedValue,
-                    minFormattedLength: formattedValue.length,
-                    value: newValue,
-                });
-                expect(await input.getProperty('value')).toBeUndefined();
-                expect(await innerInput.getProperty('value')).toEqual(formattedValue);
-                expect(await getActiveElementTestId(page)).toEqual('inputField');
-                await innerInput.press('Tab');
-                await page.waitForChanges();
-                expect(inputChangeSpy).toHaveReceivedEventTimes(1);
-                expect(inputChangeSpy).toHaveReceivedEventDetail({
-                    formattedValue,
-                    minFormattedLength: formattedValue.length,
-                    value: newValue,
-                });
-                expect(await input.getProperty('value')).toEqual(newValue);
-                expect(await getActiveElementTestId(page)).toBeNull();
-            });
-        });
-        describe('clearValue', () => {
-            it('clears the value of the input', async () => {
-                const page = await setup({ html: '<q2-input label="My input" value="My value" clearable />' });
-                const input = await page.find('q2-input');
-                const innerInput = await page.find('q2-input >>> input');
-                const inputChangeSpy = await input.spyOnEvent('change');
-                const inputInputSpy = await input.spyOnEvent('input');
-                const inputClearSpy = await input.spyOnEvent('clear');
-                expect(inputChangeSpy).toHaveReceivedEventTimes(0);
-                expect(inputInputSpy).toHaveReceivedEventTimes(0);
-                expect(inputClearSpy).toHaveReceivedEventTimes(0);
-                expect(await innerInput.getProperty('value')).toEqual('My value');
-                expect(await getActiveElementTestId(page)).toBeNull();
-                await input.callMethod('clearValue');
-                await page.waitForChanges();
-                expect(inputChangeSpy).toHaveReceivedEventTimes(1);
-                expect(inputInputSpy).toHaveReceivedEventTimes(1);
-                expect(inputClearSpy).toHaveReceivedEventTimes(1);
-                expect(inputChangeSpy).toHaveReceivedEventDetail({
-                    formattedValue: '',
-                    value: '',
-                });
-                expect(inputInputSpy).toHaveReceivedEventDetail({
-                    formattedValue: '',
-                    value: '',
-                });
-                expect(await input.getProperty('value')).toEqual('');
-                expect(await innerInput.getProperty('value')).toEqual('');
-                expect(await getActiveElementTestId(page)).toEqual('inputField');
-            });
-            it('does not clear the value of the input when not clearable', async () => {
-                const page = await setup({ html: '<q2-input label="My input" value="My value" />' });
-                const input = await page.find('q2-input');
-                const innerInput = await page.find('q2-input >>> input');
-                const inputChangeSpy = await input.spyOnEvent('change');
-                const inputInputSpy = await input.spyOnEvent('input');
-                const inputClearSpy = await input.spyOnEvent('clear');
-                expect(inputChangeSpy).toHaveReceivedEventTimes(0);
-                expect(inputInputSpy).toHaveReceivedEventTimes(0);
-                expect(inputClearSpy).toHaveReceivedEventTimes(0);
-                expect(await innerInput.getProperty('value')).toEqual('My value');
-                expect(await getActiveElementTestId(page)).toBeNull();
-                await input.callMethod('clearValue');
-                await page.waitForChanges();
-                expect(inputChangeSpy).toHaveReceivedEventTimes(0);
-                expect(inputInputSpy).toHaveReceivedEventTimes(0);
-                expect(inputClearSpy).toHaveReceivedEventTimes(0);
-                expect(await input.getProperty('value')).toEqual('My value');
-                expect(await innerInput.getProperty('value')).toEqual('My value');
-                expect(await getActiveElementTestId(page)).toBeNull();
-            });
-        });
-        describe('checkValidity', () => {
-            it('emits invalid event when type=email with incorrect email', async () => {
-                const page = await setup({ html: '<q2-input label="My input" type="email" />' });
-                const input = await page.find('q2-input');
-                const inputInvalidSpy = await input.spyOnEvent('invalid');
-                const innerInput = await page.find('q2-input >>> .input-field');
-                expect(inputInvalidSpy).toHaveReceivedEventTimes(0);
-                expect(await getActiveElementTestId(page)).toBeNull();
-                // should fire invalid event when incorrect email is provided
-                await innerInput.press('f');
-                await page.waitForChanges();
-                expect(inputInvalidSpy).toHaveReceivedEventTimes(1);
-                // should not fire invalid event when correct email is provided
-                await input.callMethod('setValue', 'a@b.c');
-                await page.waitForChanges();
-                expect(inputInvalidSpy).toHaveReceivedEventTimes(1);
-                // should fire invalid event when incorrect email is provided
-                await input.callMethod('setValue', 'a@b.c@');
-                await page.waitForChanges();
-                expect(inputInvalidSpy).toHaveReceivedEventTimes(2);
-            });
-        });
-        describe('pattern', () => {
-            it('should fire invalid when pattern mismatches', async () => {
-                const pattern = '[A-Za-z]{3}';
-                const page = await setup({ html: `<q2-input label="My input" pattern="${pattern}" />` });
-                const input = await page.find('q2-input');
-                const inputInvalidSpy = await input.spyOnEvent('invalid');
-                const innerInput = await page.find('q2-input >>> .input-field');
-                await innerInput.press('f');
-                await page.waitForChanges();
-                expect(inputInvalidSpy).toHaveReceivedEventTimes(1);
-                expect(await innerInput.getProperty('pattern')).toBe(pattern);
-            });
-            it('should not fire invalid when pattern matches', async () => {
-                const pattern = '[A-Za-z]{2,4}';
-                const page = await setup({ html: `<q2-input label="My input" pattern="${pattern}" />` });
-                const input = await page.find('q2-input');
-                const inputInvalidSpy = await input.spyOnEvent('invalid');
-                const innerInput = await page.find('q2-input >>> .input-field');
-                await innerInput.press('a');
-                expect(inputInvalidSpy).toHaveReceivedEventTimes(1);
-                await innerInput.press('b');
-                expect(inputInvalidSpy).toHaveReceivedEventTimes(1);
-                await innerInput.press('c');
-                expect(inputInvalidSpy).toHaveReceivedEventTimes(1);
-                await innerInput.press('d');
-                expect(inputInvalidSpy).toHaveReceivedEventTimes(1);
-                await innerInput.press('e');
-                expect(inputInvalidSpy).toHaveReceivedEventTimes(2);
-            });
-        });
-    });
     describe('Slots', () => {
         describe('input-right', () => {
             it('does not have any nodes assigned to it when not provided', async () => {
                 const page = await setup({
                     html: `
-                        <q2-input></q2-input>
-                    `,
+                            <q2-input></q2-input>
+                        `,
                 });
                 expect(await getNestedAssignedElementLength(page, ['q2-input', 'slot[name=input-right]'])).toBeUndefined();
             });
             it('has a node assigned to it when provided', async () => {
                 const page = await setup({
                     html: `
-                        <q2-input>
-                            <div slot="input-right">Test</div>
-                        </q2-input>
-                    `,
+                            <q2-input>
+                                <div slot="input-right">Test</div>
+                            </q2-input>
+                        `,
                 });
                 expect(await getNestedAssignedElementLength(page, ['q2-input', 'slot[name=input-right]'])).toEqual(1);
             });
             it('automatically updates when added at runtime', async () => {
                 const page = await setup({
                     html: `
-                        <q2-input></q2-input>
-                    `,
+                            <q2-input></q2-input>
+                        `,
                 });
                 expect(await getNestedAssignedElementLength(page, ['q2-input', 'slot[name=input-right]'])).toBeUndefined();
                 await page.$eval('q2-input', (element) => {
@@ -2259,26 +397,26 @@ describe('q2-input', () => {
             it('does not have any nodes assigned to it when not provided', async () => {
                 const page = await setup({
                     html: `
-                        <q2-input></q2-input>
-                    `,
+                            <q2-input></q2-input>
+                        `,
                 });
                 expect(await getNestedAssignedElementLength(page, ['q2-input', 'slot[name=input-left]'])).toBeUndefined();
             });
             it('has a node assigned to it when provided', async () => {
                 const page = await setup({
                     html: `
-                        <q2-input>
-                            <div slot="input-left">Test</div>
-                        </q2-input>
-                    `,
+                            <q2-input>
+                                <div slot="input-left">Test</div>
+                            </q2-input>
+                        `,
                 });
                 expect(await getNestedAssignedElementLength(page, ['q2-input', 'slot[name=input-left]'])).toEqual(1);
             });
             it('automatically updates when added at runtime', async () => {
                 const page = await setup({
                     html: `
-                        <q2-input></q2-input>
-                    `,
+                            <q2-input></q2-input>
+                        `,
                 });
                 expect(await getNestedAssignedElementLength(page, ['q2-input', 'slot[name=input-left]'])).toBeUndefined();
                 await page.$eval('q2-input', (element) => {
@@ -2300,34 +438,24 @@ describe('q2-input', () => {
             it('does not have any nodes assigned to it when not provided', async () => {
                 const page = await setup({
                     html: `
-                        <q2-input></q2-input>
-                    `,
+                            <q2-input></q2-input>
+                        `,
                 });
                 expect(await getNestedAssignedElementLength(page, ['q2-input', 'slot[name=label]'])).toEqual(0);
             });
             it('has a node assigned to it when provided', async () => {
                 const page = await setup({
                     html: `
-                        <q2-input>
-                            <div slot="label">Test</div>
-                        </q2-input>
-                    `,
+                            <q2-input>
+                                <div slot="label">Test</div>
+                            </q2-input>
+                        `,
                 });
                 expect(await getNestedAssignedElementLength(page, ['q2-input', 'slot[name=label]'])).toEqual(1);
                 expect(await getNestedElementAttribute(page, ['q2-input', 'label'], 'class')).toEqual('input-label');
             });
         });
     });
-    describe('Deprecations', () => {
-        it('handles deprecated `ariaLabel` prop', async () => {
-            const label = 'My Label';
-            const page = await setup({ html: `<q2-input aria-label="${label}" />` });
-            await page.waitForChanges();
-            await testDeprecatedAriaLabel(await page.find('q2-input'), label);
-            // aria label no longer exists on the <input> element, so this will be null
-            expect(await page.find('q2-input >>> input')).toEqualAttribute('aria-label', null);
-        });
-    });
     describe('Regressions', () => {
         describe('TCT-2169', () => {
             it('Limits the width of long values when pseudo is true', async () => {
@@ -2384,7 +512,32 @@ describe('q2-input', () => {
             });
         });
         describe('Accessibility Tree', () => { });
-        describe('Keyboard Controls', () => { });
+        describe('Keyboard Controls', () => {
+            it('should match the input entered when the user types quickly', async () => {
+                const page = await setup({ html: '<q2-input type="currency" />' });
+                const innerInput = await page.find('q2-input >>> [test-id="inputField"]');
+                await innerInput.type('12233445678', { delay: 5 });
+                await page.waitForChanges();
+                const innerInputValue = await innerInput.getProperty('value');
+                expect(innerInputValue).toEqual('122,334,456.78');
+            });
+            describe('When type is number', () => {
+                it('Increments value with Arrow keys', async function () {
+                    const page = await setup({
+                        html: '<q2-input type="number" label="Number" value="1" ></q2-input>',
+                    });
+                    const innerInput = await page.find('q2-input >>> .input-field');
+                    await page.waitForChanges();
+                    expect(await innerInput.getProperty('type')).toEqual('number');
+                    await innerInput.press('ArrowUp');
+                    await page.waitForChanges();
+                    expect(await innerInput.getProperty('value')).toEqual('2');
+                    await innerInput.press('ArrowDown');
+                    await page.waitForChanges();
+                    expect(await innerInput.getProperty('value')).toEqual('1');
+                });
+            });
+        });
         describe('Other', () => { });
     });
 });