q2-tecton-elements 1.54.2 → 1.54.4

package/dist/collection/components/q2-dropdown-item/test/q2-dropdown-item-test.e2e.js

@@ -1,4 +1,4 @@
-import { setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getListOfStyleCompilationIssues, evaluateA11y, } from "../../../utils/helpers";
+import { setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getListOfStyleCompilationIssues, evaluateA11y, getFocusedAttribute, } from "../../../utils/helpers";
 describe('q2-dropdown-item', () => {
     let page;
     let item;
@@ -279,7 +279,48 @@ describe('q2-dropdown-item', () => {
             });
         });
         describe('Accessibility Tree', () => { });
-        describe('Keyboard Controls', () => { });
+        describe('Keyboard Controls', () => {
+            it('emits click and tctClick events when Space is pressed', async () => {
+                page = await setup({
+                    html: `
+                        <q2-dropdown-item value="itemValue">item text</q2-dropdown-item>
+                    `,
+                });
+                const dropdownItem = await page.find('q2-dropdown-item');
+                const innerButton = await page.find('q2-dropdown-item >>> [test-id="dropdownItem"]');
+                const clickSpy = await dropdownItem.spyOnEvent('click');
+                const tctClickSpy = await dropdownItem.spyOnEvent('tctClick');
+                await dropdownItem.callMethod('focus');
+                await page.waitForChanges();
+                expect(await getFocusedAttribute(page, 'test-id')).toBe('dropdownItem');
+                await innerButton.press('Space');
+                await page.waitForChanges();
+                expect(clickSpy).toHaveReceivedEventTimes(1);
+                expect(tctClickSpy).toHaveReceivedEventTimes(1);
+                expect(clickSpy).toHaveReceivedEventDetail({ type: 'select', value: 'itemValue' });
+                expect(tctClickSpy).toHaveReceivedEventDetail({ type: 'select', value: 'itemValue' });
+            });
+            it('emits click and tctClick events when Enter is pressed', async () => {
+                page = await setup({
+                    html: `
+                        <q2-dropdown-item value="itemValue">item text</q2-dropdown-item>
+                    `,
+                });
+                const dropdownItem = await page.find('q2-dropdown-item');
+                const innerButton = await page.find('q2-dropdown-item >>> [test-id="dropdownItem"]');
+                const clickSpy = await dropdownItem.spyOnEvent('click');
+                const tctClickSpy = await dropdownItem.spyOnEvent('tctClick');
+                await dropdownItem.callMethod('focus');
+                await page.waitForChanges();
+                expect(await getFocusedAttribute(page, 'test-id')).toBe('dropdownItem');
+                await innerButton.press('Enter');
+                await page.waitForChanges();
+                expect(clickSpy).toHaveReceivedEventTimes(1);
+                expect(tctClickSpy).toHaveReceivedEventTimes(1);
+                expect(clickSpy).toHaveReceivedEventDetail({ type: 'select', value: 'itemValue' });
+                expect(tctClickSpy).toHaveReceivedEventDetail({ type: 'select', value: 'itemValue' });
+            });
+        });
         describe('Other', () => { });
     });
 });

package/dist/collection/components/q2-dropdown-item/test/q2-dropdown-item-test.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-dropdown-item-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown-item/test/q2-dropdown-item-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport {\n    setTestStrings,\n    setup,\n    dispatchEvent,\n    testDeprecatedAriaLabel,\n    getListOfStyleCompilationIssues,\n    evaluateA11y,\n} from '@/utils/helpers';\n\ndescribe('q2-dropdown-item', () => {\n    let page: E2EPage;\n    let item: E2EElement;\n    let itemBtn: E2EElement;\n    let itemSeparator: E2EElement;\n    let removeBtn: E2EElement;\n\n    it('properly compiles CSS vars and functions', async () => {\n        page = await setup({ html: '<q2-dropdown-item></q2-dropdown-item>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-dropdown-item')).toHaveLength(0);\n    });\n\n    it('renders base state', async function (): Promise<void> {\n        page = await setup({\n            html: `\n                <q2-dropdown-item value=\"itemValue\">item text</q2-dropdown-item>\n            `,\n        });\n\n        itemBtn = await page.find('q2-dropdown-item >>> [test-id=\"dropdownItem\"]');\n        expect(itemBtn).not.toBeNull();\n        expect(itemBtn.tagName.toLowerCase()).toEqual('button');\n        expect(itemBtn).toHaveClass('dropdown-item');\n        expect(itemBtn).not.toHaveAttribute('disabled');\n        expect(itemBtn).toEqualAttribute('role', 'menuitem');\n\n        itemSeparator = await page.find('q2-dropdown-item >>> [test-id=\"dropdownItemSeparator\"]');\n        expect(itemSeparator).toBeNull();\n\n        const itemSlotText = await page.$eval(\n            'q2-dropdown-item',\n            (element: HTMLQ2DropdownItemElement) =>\n                element.shadowRoot.querySelector('slot').assignedNodes()[0].textContent\n        );\n        expect(itemSlotText).toEqual('item text');\n\n        item = await page.find('q2-dropdown-item');\n        item.setProperty('disabled', true);\n        await page.waitForChanges();\n\n        expect(itemBtn).toHaveAttribute('disabled');\n    });\n\n    it('correctly emits click event', async function (): Promise<void> {\n        page = await setup({\n            html: `\n                <q2-dropdown-item value=\"itemValue\" removable>item text</q2-dropdown-item>\n            `,\n        });\n\n        item = await page.find('q2-dropdown-item');\n        const clickSpy = await item.spyOnEvent('click');\n\n        await dispatchEvent(page, ['q2-dropdown-item', '[test-id=\"dropdownItem\"]'], 'click');\n        expect(clickSpy).toHaveReceivedEventTimes(1);\n        expect(clickSpy).toHaveReceivedEventDetail({ type: 'select', value: 'itemValue' });\n\n        await dispatchEvent(page, ['q2-dropdown-item', '[test-id=\"removeDropdownItem\"]'], 'click');\n        expect(clickSpy).toHaveReceivedEventTimes(2);\n        expect(clickSpy).toHaveReceivedEventDetail({ type: 'remove', value: 'itemValue' });\n    });\n\n    describe('Props', () => {\n        describe('label', () => {\n            describe('when provided', () => {\n                it('applies label to the <button>', async () => {\n                    page = await setup({\n                        html: `\n                        <div role=\"menu\">\n                            <q2-dropdown-item value=\"itemValue\" label=\"item text\"></q2-dropdown-item>\n                        </div>\n                    `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn.innerText).toEqual('item text');\n                });\n            });\n            describe('when not provided', () => {\n                it('tries to use textContent to apply label to the <button>', async () => {\n                    page = await setup({\n                        html: `\n                        <div role=\"menu\">\n                            <q2-dropdown-item value=\"itemValue\">item text</q2-dropdown-item>\n                        </div>\n                    `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn.innerText).toEqual('item text');\n                });\n                it('tries to use <q2-loc> component value prop (TCT-2678)', async () => {\n                    page = await setup({\n                        html: `\n                        <div role=\"menu\">\n                            <q2-dropdown-item value=\"itemValue\"><q2-loc value=\"item text\"/></q2-dropdown-item>\n                        </div>\n                    `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn.innerText).toEqual('item text');\n                });\n                it('tries to use <q2-loc> component innerText (TCT-2678)', async () => {\n                    page = await setup({\n                        html: `\n                        <div role=\"menu\">\n                            <q2-dropdown-item value=\"itemValue\"><q2-loc>item text</q2-loc></q2-dropdown-item>\n                        </div>\n                    `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn.innerText).toEqual('item text');\n                });\n            });\n        });\n\n        describe('separator', () => {\n            it('renders as a separator', async () => {\n                page = await setup({\n                    html: `\n                    <q2-dropdown-item value=\"itemValue\" separator>item text</q2-dropdown-item>\n                `,\n                });\n\n                itemSeparator = await page.find('q2-dropdown-item >>> .dropdown-separator');\n                expect(itemSeparator).not.toBeNull();\n                expect(itemSeparator).toEqualAttribute('role', 'separator');\n                expect(itemSeparator).toHaveClass('dropdown-separator');\n\n                itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                expect(itemBtn).toBeNull();\n            });\n        });\n\n        describe('removable', () => {\n            beforeEach(async () => {\n                page = await setup({\n                    html: ``,\n                });\n                await setTestStrings(page, {\n                    'tecton.element.dropdownItem.remove': 'Remove Option {0}',\n                });\n                await page.setContent('<q2-dropdown-item value=\"itemValue\" removable></q2-dropdown-item>');\n                await page.waitForChanges();\n            });\n            describe('when provided', () => {\n                it('renders a remove button', async () => {\n                    item = await page.find('q2-dropdown-item');\n                    removeBtn = await page.find('q2-dropdown-item >>> .remove-dropdown-item');\n\n                    expect(removeBtn).not.toBeNull();\n                    expect(removeBtn).not.toHaveAttribute('disabled');\n                    expect(removeBtn).toEqualAttribute('aria-label', 'Remove Option ');\n                });\n\n                it('uses item label in remove button aria-label when provided', async () => {\n                    item = await page.find('q2-dropdown-item');\n                    item.setProperty('label', 'Item Text');\n                    await page.waitForChanges();\n                    removeBtn = await page.find('q2-dropdown-item >>> .remove-dropdown-item');\n\n                    expect(removeBtn).not.toBeNull();\n                    expect(removeBtn).toEqualAttribute('aria-label', 'Remove Option Item Text');\n                });\n            });\n\n            describe('when not provided', () => {\n                it('does not render a remove button', async () => {\n                    item = await page.find('q2-dropdown-item');\n                    item.setProperty('removable', false);\n                    await page.waitForChanges();\n                    removeBtn = await page.find('q2-dropdown-item >>> .remove-dropdown-item');\n\n                    expect(removeBtn).toBeNull();\n                });\n            });\n        });\n\n        describe('disabled', () => {\n            describe('when provided', () => {\n                it('disables the dropdown item', async () => {\n                    page = await setup({\n                        html: `\n                            <div role=\"menu\">\n                                <q2-dropdown-item value=\"itemValue\" disabled></q2-dropdown-item>\n                            </div>\n                        `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn).toHaveAttribute('disabled');\n                });\n\n                it('disables the remove button', async () => {\n                    page = await setup({\n                        html: `\n                            <div role=\"menu\">\n                                <q2-dropdown-item value=\"itemValue\" disabled removable></q2-dropdown-item>\n                            </div>\n                        `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    removeBtn = await page.find('q2-dropdown-item >>> .remove-dropdown-item');\n                    expect(itemBtn).toHaveAttribute('disabled');\n                    expect(removeBtn).toHaveAttribute('disabled');\n                });\n            });\n            describe('when not provided', () => {\n                it('does not disable the dropdown item', async () => {\n                    page = await setup({\n                        html: `\n                            <div role=\"menu\">\n                                <q2-dropdown-item value=\"itemValue\"></q2-dropdown-item>\n                            </div>\n                        `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn).not.toHaveAttribute('disabled');\n                });\n\n                it('does not disable the remove button', async () => {\n                    page = await setup({\n                        html: `\n                            <div role=\"menu\">\n                                <q2-dropdown-item value=\"itemValue\" removable></q2-dropdown-item>\n                            </div>\n                        `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    removeBtn = await page.find('q2-dropdown-item >>> .remove-dropdown-item');\n                    expect(itemBtn).not.toHaveAttribute('disabled');\n                    expect(removeBtn).not.toHaveAttribute('disabled');\n                });\n            });\n        });\n    });\n\n    describe('Focus', () => {\n        it('does not trigger component focus delegator when item or remove <button> is focused', async function (): Promise<void> {\n            page = await setup({\n                html: `\n                <q2-dropdown-item value=\"itemValue\" removable>item text</q2-dropdown-item>\n            `,\n            });\n\n            item = await page.find('q2-dropdown-item');\n            itemBtn = await page.find('q2-dropdown-item >>> [test-id=\"dropdownItem\"]');\n            removeBtn = await page.find('q2-dropdown-item >>> [test-id=\"removeDropdownItem\"]');\n\n            const itemFocusSpy = await item.spyOnEvent('focus');\n            const itemBtnFocusSpy = await itemBtn.spyOnEvent('focus');\n            const removeBtnFocusSpy = await removeBtn.spyOnEvent('focus');\n\n            expect(itemFocusSpy).toHaveReceivedEventTimes(0);\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(0);\n            expect(removeBtnFocusSpy).toHaveReceivedEventTimes(0);\n\n            await dispatchEvent(page, ['q2-dropdown-item', '[test-id=\"removeDropdownItem\"]'], 'focus');\n            expect(itemFocusSpy).toHaveReceivedEventTimes(0);\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(0);\n            expect(removeBtnFocusSpy).toHaveReceivedEventTimes(1);\n\n            await dispatchEvent(page, ['q2-dropdown-item', '[test-id=\"dropdownItem\"]'], 'focus');\n            expect(itemFocusSpy).toHaveReceivedEventTimes(0);\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(1);\n        });\n\n        it('handles focus manipulation', async function (): Promise<void> {\n            page = await setup({\n                html: `\n                <q2-dropdown-item value=\"itemValue\" removable>item text</q2-dropdown-item>\n            `,\n            });\n\n            itemBtn = await page.find('q2-dropdown-item >>> [test-id=\"dropdownItem\"]');\n            removeBtn = await page.find('q2-dropdown-item >>> [test-id=\"removeDropdownItem\"]');\n            const itemBtnFocusSpy = await itemBtn.spyOnEvent('focus');\n            const removeBtnFocusSpy = await removeBtn.spyOnEvent('focus');\n\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(0);\n            expect(removeBtnFocusSpy).toHaveReceivedEventTimes(0);\n\n            await dispatchEvent(page, 'q2-dropdown-item', 'focus');\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(1);\n\n            await page.keyboard.press('ArrowRight');\n            expect(removeBtnFocusSpy).toHaveReceivedEventTimes(1);\n\n            await page.keyboard.press('ArrowLeft');\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(2);\n\n            await page.keyboard.press('ArrowRight');\n            expect(removeBtnFocusSpy).toHaveReceivedEventTimes(2);\n\n            await page.keyboard.press('ArrowLeft');\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(3);\n        });\n    });\n\n    describe('Deprecations', () => {\n        it('handles deprecated `ariaLabel` prop', async () => {\n            const myLabel = 'My Label';\n            page = await setup({\n                html: `<q2-dropdown-item aria-label=\"${myLabel}\">Text</q2-dropdown-item>`,\n            });\n            await testDeprecatedAriaLabel(await page.find('q2-dropdown-item'), myLabel);\n            await page.waitForChanges();\n            itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n            expect(itemBtn.innerText).toEqual(myLabel);\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                page = await setup({\n                    html: `\n                        <div role=\"menu\">\n                            <q2-dropdown-item value=\"itemValue\">item text</q2-dropdown-item>\n                        </div>\n                    `,\n                });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}
+{"version":3,"file":"q2-dropdown-item-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown-item/test/q2-dropdown-item-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport {\n    setTestStrings,\n    setup,\n    dispatchEvent,\n    testDeprecatedAriaLabel,\n    getListOfStyleCompilationIssues,\n    evaluateA11y,\n    getFocusedAttribute,\n} from '@/utils/helpers';\n\ndescribe('q2-dropdown-item', () => {\n    let page: E2EPage;\n    let item: E2EElement;\n    let itemBtn: E2EElement;\n    let itemSeparator: E2EElement;\n    let removeBtn: E2EElement;\n\n    it('properly compiles CSS vars and functions', async () => {\n        page = await setup({ html: '<q2-dropdown-item></q2-dropdown-item>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-dropdown-item')).toHaveLength(0);\n    });\n\n    it('renders base state', async function (): Promise<void> {\n        page = await setup({\n            html: `\n                <q2-dropdown-item value=\"itemValue\">item text</q2-dropdown-item>\n            `,\n        });\n\n        itemBtn = await page.find('q2-dropdown-item >>> [test-id=\"dropdownItem\"]');\n        expect(itemBtn).not.toBeNull();\n        expect(itemBtn.tagName.toLowerCase()).toEqual('button');\n        expect(itemBtn).toHaveClass('dropdown-item');\n        expect(itemBtn).not.toHaveAttribute('disabled');\n        expect(itemBtn).toEqualAttribute('role', 'menuitem');\n\n        itemSeparator = await page.find('q2-dropdown-item >>> [test-id=\"dropdownItemSeparator\"]');\n        expect(itemSeparator).toBeNull();\n\n        const itemSlotText = await page.$eval(\n            'q2-dropdown-item',\n            (element: HTMLQ2DropdownItemElement) =>\n                element.shadowRoot.querySelector('slot').assignedNodes()[0].textContent\n        );\n        expect(itemSlotText).toEqual('item text');\n\n        item = await page.find('q2-dropdown-item');\n        item.setProperty('disabled', true);\n        await page.waitForChanges();\n\n        expect(itemBtn).toHaveAttribute('disabled');\n    });\n\n    it('correctly emits click event', async function (): Promise<void> {\n        page = await setup({\n            html: `\n                <q2-dropdown-item value=\"itemValue\" removable>item text</q2-dropdown-item>\n            `,\n        });\n\n        item = await page.find('q2-dropdown-item');\n        const clickSpy = await item.spyOnEvent('click');\n\n        await dispatchEvent(page, ['q2-dropdown-item', '[test-id=\"dropdownItem\"]'], 'click');\n        expect(clickSpy).toHaveReceivedEventTimes(1);\n        expect(clickSpy).toHaveReceivedEventDetail({ type: 'select', value: 'itemValue' });\n\n        await dispatchEvent(page, ['q2-dropdown-item', '[test-id=\"removeDropdownItem\"]'], 'click');\n        expect(clickSpy).toHaveReceivedEventTimes(2);\n        expect(clickSpy).toHaveReceivedEventDetail({ type: 'remove', value: 'itemValue' });\n    });\n\n    describe('Props', () => {\n        describe('label', () => {\n            describe('when provided', () => {\n                it('applies label to the <button>', async () => {\n                    page = await setup({\n                        html: `\n                        <div role=\"menu\">\n                            <q2-dropdown-item value=\"itemValue\" label=\"item text\"></q2-dropdown-item>\n                        </div>\n                    `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn.innerText).toEqual('item text');\n                });\n            });\n            describe('when not provided', () => {\n                it('tries to use textContent to apply label to the <button>', async () => {\n                    page = await setup({\n                        html: `\n                        <div role=\"menu\">\n                            <q2-dropdown-item value=\"itemValue\">item text</q2-dropdown-item>\n                        </div>\n                    `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn.innerText).toEqual('item text');\n                });\n                it('tries to use <q2-loc> component value prop (TCT-2678)', async () => {\n                    page = await setup({\n                        html: `\n                        <div role=\"menu\">\n                            <q2-dropdown-item value=\"itemValue\"><q2-loc value=\"item text\"/></q2-dropdown-item>\n                        </div>\n                    `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn.innerText).toEqual('item text');\n                });\n                it('tries to use <q2-loc> component innerText (TCT-2678)', async () => {\n                    page = await setup({\n                        html: `\n                        <div role=\"menu\">\n                            <q2-dropdown-item value=\"itemValue\"><q2-loc>item text</q2-loc></q2-dropdown-item>\n                        </div>\n                    `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn.innerText).toEqual('item text');\n                });\n            });\n        });\n\n        describe('separator', () => {\n            it('renders as a separator', async () => {\n                page = await setup({\n                    html: `\n                    <q2-dropdown-item value=\"itemValue\" separator>item text</q2-dropdown-item>\n                `,\n                });\n\n                itemSeparator = await page.find('q2-dropdown-item >>> .dropdown-separator');\n                expect(itemSeparator).not.toBeNull();\n                expect(itemSeparator).toEqualAttribute('role', 'separator');\n                expect(itemSeparator).toHaveClass('dropdown-separator');\n\n                itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                expect(itemBtn).toBeNull();\n            });\n        });\n\n        describe('removable', () => {\n            beforeEach(async () => {\n                page = await setup({\n                    html: ``,\n                });\n                await setTestStrings(page, {\n                    'tecton.element.dropdownItem.remove': 'Remove Option {0}',\n                });\n                await page.setContent('<q2-dropdown-item value=\"itemValue\" removable></q2-dropdown-item>');\n                await page.waitForChanges();\n            });\n            describe('when provided', () => {\n                it('renders a remove button', async () => {\n                    item = await page.find('q2-dropdown-item');\n                    removeBtn = await page.find('q2-dropdown-item >>> .remove-dropdown-item');\n\n                    expect(removeBtn).not.toBeNull();\n                    expect(removeBtn).not.toHaveAttribute('disabled');\n                    expect(removeBtn).toEqualAttribute('aria-label', 'Remove Option ');\n                });\n\n                it('uses item label in remove button aria-label when provided', async () => {\n                    item = await page.find('q2-dropdown-item');\n                    item.setProperty('label', 'Item Text');\n                    await page.waitForChanges();\n                    removeBtn = await page.find('q2-dropdown-item >>> .remove-dropdown-item');\n\n                    expect(removeBtn).not.toBeNull();\n                    expect(removeBtn).toEqualAttribute('aria-label', 'Remove Option Item Text');\n                });\n            });\n\n            describe('when not provided', () => {\n                it('does not render a remove button', async () => {\n                    item = await page.find('q2-dropdown-item');\n                    item.setProperty('removable', false);\n                    await page.waitForChanges();\n                    removeBtn = await page.find('q2-dropdown-item >>> .remove-dropdown-item');\n\n                    expect(removeBtn).toBeNull();\n                });\n            });\n        });\n\n        describe('disabled', () => {\n            describe('when provided', () => {\n                it('disables the dropdown item', async () => {\n                    page = await setup({\n                        html: `\n                            <div role=\"menu\">\n                                <q2-dropdown-item value=\"itemValue\" disabled></q2-dropdown-item>\n                            </div>\n                        `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn).toHaveAttribute('disabled');\n                });\n\n                it('disables the remove button', async () => {\n                    page = await setup({\n                        html: `\n                            <div role=\"menu\">\n                                <q2-dropdown-item value=\"itemValue\" disabled removable></q2-dropdown-item>\n                            </div>\n                        `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    removeBtn = await page.find('q2-dropdown-item >>> .remove-dropdown-item');\n                    expect(itemBtn).toHaveAttribute('disabled');\n                    expect(removeBtn).toHaveAttribute('disabled');\n                });\n            });\n            describe('when not provided', () => {\n                it('does not disable the dropdown item', async () => {\n                    page = await setup({\n                        html: `\n                            <div role=\"menu\">\n                                <q2-dropdown-item value=\"itemValue\"></q2-dropdown-item>\n                            </div>\n                        `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    expect(itemBtn).not.toHaveAttribute('disabled');\n                });\n\n                it('does not disable the remove button', async () => {\n                    page = await setup({\n                        html: `\n                            <div role=\"menu\">\n                                <q2-dropdown-item value=\"itemValue\" removable></q2-dropdown-item>\n                            </div>\n                        `,\n                    });\n                    itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n                    removeBtn = await page.find('q2-dropdown-item >>> .remove-dropdown-item');\n                    expect(itemBtn).not.toHaveAttribute('disabled');\n                    expect(removeBtn).not.toHaveAttribute('disabled');\n                });\n            });\n        });\n    });\n\n    describe('Focus', () => {\n        it('does not trigger component focus delegator when item or remove <button> is focused', async function (): Promise<void> {\n            page = await setup({\n                html: `\n                <q2-dropdown-item value=\"itemValue\" removable>item text</q2-dropdown-item>\n            `,\n            });\n\n            item = await page.find('q2-dropdown-item');\n            itemBtn = await page.find('q2-dropdown-item >>> [test-id=\"dropdownItem\"]');\n            removeBtn = await page.find('q2-dropdown-item >>> [test-id=\"removeDropdownItem\"]');\n\n            const itemFocusSpy = await item.spyOnEvent('focus');\n            const itemBtnFocusSpy = await itemBtn.spyOnEvent('focus');\n            const removeBtnFocusSpy = await removeBtn.spyOnEvent('focus');\n\n            expect(itemFocusSpy).toHaveReceivedEventTimes(0);\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(0);\n            expect(removeBtnFocusSpy).toHaveReceivedEventTimes(0);\n\n            await dispatchEvent(page, ['q2-dropdown-item', '[test-id=\"removeDropdownItem\"]'], 'focus');\n            expect(itemFocusSpy).toHaveReceivedEventTimes(0);\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(0);\n            expect(removeBtnFocusSpy).toHaveReceivedEventTimes(1);\n\n            await dispatchEvent(page, ['q2-dropdown-item', '[test-id=\"dropdownItem\"]'], 'focus');\n            expect(itemFocusSpy).toHaveReceivedEventTimes(0);\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(1);\n        });\n\n        it('handles focus manipulation', async function (): Promise<void> {\n            page = await setup({\n                html: `\n                <q2-dropdown-item value=\"itemValue\" removable>item text</q2-dropdown-item>\n            `,\n            });\n\n            itemBtn = await page.find('q2-dropdown-item >>> [test-id=\"dropdownItem\"]');\n            removeBtn = await page.find('q2-dropdown-item >>> [test-id=\"removeDropdownItem\"]');\n            const itemBtnFocusSpy = await itemBtn.spyOnEvent('focus');\n            const removeBtnFocusSpy = await removeBtn.spyOnEvent('focus');\n\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(0);\n            expect(removeBtnFocusSpy).toHaveReceivedEventTimes(0);\n\n            await dispatchEvent(page, 'q2-dropdown-item', 'focus');\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(1);\n\n            await page.keyboard.press('ArrowRight');\n            expect(removeBtnFocusSpy).toHaveReceivedEventTimes(1);\n\n            await page.keyboard.press('ArrowLeft');\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(2);\n\n            await page.keyboard.press('ArrowRight');\n            expect(removeBtnFocusSpy).toHaveReceivedEventTimes(2);\n\n            await page.keyboard.press('ArrowLeft');\n            expect(itemBtnFocusSpy).toHaveReceivedEventTimes(3);\n        });\n    });\n\n    describe('Deprecations', () => {\n        it('handles deprecated `ariaLabel` prop', async () => {\n            const myLabel = 'My Label';\n            page = await setup({\n                html: `<q2-dropdown-item aria-label=\"${myLabel}\">Text</q2-dropdown-item>`,\n            });\n            await testDeprecatedAriaLabel(await page.find('q2-dropdown-item'), myLabel);\n            await page.waitForChanges();\n            itemBtn = await page.find('q2-dropdown-item >>> .dropdown-item');\n            expect(itemBtn.innerText).toEqual(myLabel);\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                page = await setup({\n                    html: `\n                        <div role=\"menu\">\n                            <q2-dropdown-item value=\"itemValue\">item text</q2-dropdown-item>\n                        </div>\n                    `,\n                });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {\n            it('emits click and tctClick events when Space is pressed', async () => {\n                page = await setup({\n                    html: `\n                        <q2-dropdown-item value=\"itemValue\">item text</q2-dropdown-item>\n                    `,\n                });\n\n                const dropdownItem = await page.find('q2-dropdown-item');\n                const innerButton = await page.find('q2-dropdown-item >>> [test-id=\"dropdownItem\"]');\n                const clickSpy = await dropdownItem.spyOnEvent('click');\n                const tctClickSpy = await dropdownItem.spyOnEvent('tctClick');\n\n                await dropdownItem.callMethod('focus');\n                await page.waitForChanges();\n\n                expect(await getFocusedAttribute(page, 'test-id')).toBe('dropdownItem');\n\n                await innerButton.press('Space');\n                await page.waitForChanges();\n\n                expect(clickSpy).toHaveReceivedEventTimes(1);\n                expect(tctClickSpy).toHaveReceivedEventTimes(1);\n                expect(clickSpy).toHaveReceivedEventDetail({ type: 'select', value: 'itemValue' });\n                expect(tctClickSpy).toHaveReceivedEventDetail({ type: 'select', value: 'itemValue' });\n            });\n\n            it('emits click and tctClick events when Enter is pressed', async () => {\n                page = await setup({\n                    html: `\n                        <q2-dropdown-item value=\"itemValue\">item text</q2-dropdown-item>\n                    `,\n                });\n\n                const dropdownItem = await page.find('q2-dropdown-item');\n                const innerButton = await page.find('q2-dropdown-item >>> [test-id=\"dropdownItem\"]');\n                const clickSpy = await dropdownItem.spyOnEvent('click');\n                const tctClickSpy = await dropdownItem.spyOnEvent('tctClick');\n\n                await dropdownItem.callMethod('focus');\n                await page.waitForChanges();\n\n                expect(await getFocusedAttribute(page, 'test-id')).toBe('dropdownItem');\n\n                await innerButton.press('Enter');\n                await page.waitForChanges();\n\n                expect(clickSpy).toHaveReceivedEventTimes(1);\n                expect(tctClickSpy).toHaveReceivedEventTimes(1);\n                expect(clickSpy).toHaveReceivedEventDetail({ type: 'select', value: 'itemValue' });\n                expect(tctClickSpy).toHaveReceivedEventDetail({ type: 'select', value: 'itemValue' });\n            });\n        });\n        describe('Other', () => {});\n    });\n});\n"]}

package/dist/collection/components/q2-input/q2-input.css

@@ -230,7 +230,7 @@ label {
 .input-field[type=number] {
   -moz-appearance: textfield;
 }
-.input-field::-ms-clear {
+.input-field::-ms-reveal, .input-field::-ms-clear {
   display: none;
 }
 .input-field[type=search]::-webkit-search-decoration, .input-field[type=search]::-webkit-search-cancel-button, .input-field[type=search]::-webkit-search-results-button, .input-field[type=search]::-webkit-search-results-decoration {

package/dist/collection/components/q2-option/q2-option.js

@@ -80,7 +80,20 @@ export class Q2Option {
     renderOption() {
         const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: loc(display) }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
+        return (h(Host, { tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: loc(display), onClick: () => {
+                if (isDisabled)
+                    return;
+                this.tctClick.emit({ type: 'select', value: this.value });
+            }, onKeydown: (event) => {
+                if (isDisabled)
+                    return;
+                if (event.key === 'Enter' || event.key === ' ') {
+                    setTimeout(() => {
+                        this.tctClick.emit({ type: 'select', value: this.value });
+                    }, 1);
+                    event.preventDefault();
+                }
+            } }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
     }
     render() {
         return this.separator ? this.renderSeparator() : this.renderOption();
@@ -313,6 +326,21 @@ export class Q2Option {
                     "resolved": "{ value: string; display: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "tctClick",
+                "name": "tctClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Is emitted when the option is clicked."
+                },
+                "complexType": {
+                    "original": "{ type: 'select' | 'remove'; value: string }",
+                    "resolved": "{ type: \"select\" | \"remove\"; value: string; }",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "hostElement"; }

package/dist/collection/components/q2-option/q2-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-option.js","sourceRoot":"","sources":["../../../src/components/q2-option/q2-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('separator')\n    async separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    @Watch('display')\n    async displayChangedHandler() {\n        this.display = loc(this.display);\n        await this.handleTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleTextContent = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display === textContent) return;\n        if (this.display && !textContent) this.hostElement.textContent = loc(this.display);\n    };\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        await this.handleTextContent();\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-option.js","sourceRoot":"","sources":["../../../src/components/q2-option/q2-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    /**\n     * Is emitted when the option is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('separator')\n    async separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    @Watch('display')\n    async displayChangedHandler() {\n        this.display = loc(this.display);\n        await this.handleTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleTextContent = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display === textContent) return;\n        if (this.display && !textContent) this.hostElement.textContent = loc(this.display);\n    };\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        await this.handleTextContent();\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n                onClick={() => {\n                    if (isDisabled) return;\n                    this.tctClick.emit({ type: 'select', value: this.value });\n                }}\n                onKeydown={(event: KeyboardEvent) => {\n                    if (isDisabled) return;\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        setTimeout(() => {\n                            this.tctClick.emit({ type: 'select', value: this.value });\n                        }, 1);\n\n                        event.preventDefault();\n                    }\n                }}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup, getAllElementTextE2E, } from "../../../utils/helpers";
+import { evaluateA11y, getListOfStyleCompilationIssues, setup } from "../../../utils/helpers";
 describe('q2-option', () => {
     let page;
     let option;
@@ -8,107 +8,27 @@ describe('q2-option', () => {
             expect(await getListOfStyleCompilationIssues(page, 'q2-option')).toHaveLength(0);
         });
     });
-    describe('Interactions with q2-loc component', () => {
-        describe('when q2-loc has value prop', () => {
-            it('updates the q2-option display prop and renders the translated string', async () => {
-                page = await setup({ html: `` });
-                await setTestStrings(page, {
-                    'tecton.element.loc.test': 'Loc Text',
-                    'tecton.element.option.test': 'Option Text',
-                });
-                await page.setContent(`
-                            <q2-option>
-                                <q2-loc value="tecton.element.loc.test"></q2-loc>
-                            </q2-option>
-                        `);
-                await page.waitForChanges();
-                option = await page.find('q2-option');
-                const displayProp = await option.getProperty('display');
-                const optionText = await getAllElementTextE2E(page, 'q2-option');
-                expect(displayProp).toEqual('Loc Text');
-                expect(optionText).toEqual(displayProp);
-            });
-        });
-        describe('when q2-loc is combined with q2-option textContent', () => {
-            it('updates the display prop', async () => {
-                page = await setup({ html: `` });
-                await setTestStrings(page, {
-                    'tecton.element.loc.test': 'Loc Text',
-                    'tecton.element.option.test': 'Option Text',
-                });
-                await page.setContent(`
-                            <q2-option>
-                            Option Text
-                                <q2-loc value="tecton.element.loc.test"></q2-loc>
-                            </q2-option>
-                        `);
-                await page.waitForChanges();
-                option = await page.find('q2-option');
-                const displayProp = await option.getProperty('display');
-                expect(displayProp).toEqual('Option Text Loc Text');
-            });
-            it('translates both the option textContent and q2-loc', async () => {
-                page = await setup({ html: `` });
-                await setTestStrings(page, {
-                    'tecton.element.loc.test': 'Loc Text',
-                    'tecton.element.option.test': 'Option Text',
+    describe('Events', () => {
+        describe('tctClick', () => {
+            it('is emitted when the option is clicked', async () => {
+                page = await setup({
+                    html: `<q2-option value="2">My Option</q2-option>`,
                 });
-                await page.setContent(`
-                            <q2-option>
-                            tecton.element.option.test
-                                <q2-loc value="tecton.element.loc.test"></q2-loc>
-                            </q2-option>
-                        `);
-                await page.waitForChanges();
                 option = await page.find('q2-option');
-                const displayProp = await option.getProperty('display');
-                const optionText = await getAllElementTextE2E(page, 'q2-option');
-                expect(displayProp).toEqual('Option Text Loc Text');
-                expect(optionText).toEqual(displayProp);
-            });
-            it('renders the combined strings', async () => {
-                page = await setup({ html: `` });
-                await setTestStrings(page, {
-                    'tecton.element.loc.test': 'Loc Text',
-                    'tecton.element.option.test': 'Option Text',
-                });
-                await page.setContent(`
-                            <q2-option>
-                            Option Text
-                                <q2-loc value="tecton.element.loc.test"></q2-loc>
-                            </q2-option>
-                        `);
+                const clickSpy = await option.spyOnEvent('tctClick');
+                await option.click();
                 await page.waitForChanges();
-                option = await page.find('q2-option');
-                const optionText = await getAllElementTextE2E(page, 'q2-option');
-                expect(optionText).toEqual('Option Text Loc Text');
-            });
-            it('maintains the order of text nodes', async () => {
-                page = await setup({ html: `` });
-                await setTestStrings(page, {
-                    'tecton.element.loc.test': 'Loc Text',
-                    'tecton.element.option.test': 'Option Text',
+                expect(clickSpy).toHaveReceivedEventDetail({
+                    type: 'select',
+                    value: '2',
                 });
-                await page.setContent(`
-                            <q2-option>
-                                tecton.element.option.test
-                                <q2-loc value="tecton.element.loc.test"></q2-loc>
-                                <span>My Other Text</span>
-                                tecton.element.option.test
-
-                            </q2-option>
-                        `);
-                await page.waitForChanges();
-                option = await page.find('q2-option');
-                const optionText = await getAllElementTextE2E(page, 'q2-option');
-                expect(optionText).toEqual('Option Text Loc Text My Other Text Option Text');
             });
         });
     });
     describe('Accessibility', () => {
         describe('aXe DevTools', () => {
             it('does not have accessibility violations', async () => {
-                const page = await setup({
+                page = await setup({
                     html: `<q2-select label="Test" value="option-1">
                             <q2-option value="option-1" display="Option Text">Option Text</q2-option>
                             <q2-option value="option-2" display="Option Text">Option Text</q2-option>
@@ -130,35 +50,34 @@ describe('q2-option', () => {
                 expect(accessibilitySnapshot.name).toBe('My Option');
             });
         });
-        describe('Keyboard Controls', () => { });
-        describe('Other', () => { });
-    });
-    describe('Accessibility', () => {
-        describe('aXe DevTools', () => {
-            it('does not have accessibility violations', async () => {
-                const page = await setup({
-                    html: `<q2-select label="Test" value="option-1">
-                            <q2-option value="option-1" display="Option Text">Option Text</q2-option>
-                            <q2-option value="option-2" display="Option Text">Option Text</q2-option>
-                        </q2-select>`,
+        describe('Keyboard Controls', () => {
+            it("emits a click event when the 'Space' key is pressed", async () => {
+                page = await setup({
+                    html: `<q2-option value="2">My Option</q2-option>`,
+                });
+                option = await page.find('q2-option');
+                const clickSpy = await option.spyOnEvent('tctClick');
+                await option.press('Space');
+                await page.waitForChanges();
+                expect(clickSpy).toHaveReceivedEventDetail({
+                    type: 'select',
+                    value: '2',
                 });
-                const hasViolations = await evaluateA11y(page);
-                expect(hasViolations).toBe(false);
             });
-        });
-        describe('Accessibility Tree', () => {
-            it('is correctly represented in the accessibility tree', async () => {
+            it("emits a click event when the 'Enter' key is pressed", async () => {
                 page = await setup({
-                    html: `<q2-option>My Option</q2-option>`,
+                    html: `<q2-option value="2">My Option</q2-option>`,
                 });
-                const accessibilitySnapshot = await page.accessibility.snapshot({
-                    root: await page.$('q2-option'),
+                option = await page.find('q2-option');
+                const clickSpy = await option.spyOnEvent('tctClick');
+                await option.press('Enter');
+                await page.waitForChanges();
+                expect(clickSpy).toHaveReceivedEventDetail({
+                    type: 'select',
+                    value: '2',
                 });
-                expect(accessibilitySnapshot.role).toBe('option');
-                expect(accessibilitySnapshot.name).toBe('My Option');
             });
         });
-        describe('Keyboard Controls', () => { });
         describe('Other', () => { });
     });
 });

package/dist/collection/components/q2-option/test/q2-option-test.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-option-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-option/test/q2-option-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport {\n    evaluateA11y,\n    getListOfStyleCompilationIssues,\n    setTestStrings,\n    setup,\n    getAllElementTextE2E,\n} from '@/utils/helpers';\n\ndescribe('q2-option', () => {\n    let page: E2EPage;\n    let option: E2EElement;\n\n    describe('Initialization', () => {\n        it('properly compiles CSS vars and functions', async () => {\n            const page = await setup({ html: '<q2-option></q2-option>' });\n            expect(await getListOfStyleCompilationIssues(page, 'q2-option')).toHaveLength(0);\n        });\n    });\n\n    describe('Interactions with q2-loc component', () => {\n        describe('when q2-loc has value prop', () => {\n            it('updates the q2-option display prop and renders the translated string', async () => {\n                page = await setup({ html: `` });\n                await setTestStrings(page, {\n                    'tecton.element.loc.test': 'Loc Text',\n                    'tecton.element.option.test': 'Option Text',\n                });\n                await page.setContent(`\n                            <q2-option>\n                                <q2-loc value=\"tecton.element.loc.test\"></q2-loc>\n                            </q2-option>\n                        `);\n                await page.waitForChanges();\n                option = await page.find('q2-option');\n                const displayProp = await option.getProperty('display');\n                const optionText = await getAllElementTextE2E(page, 'q2-option');\n                expect(displayProp).toEqual('Loc Text');\n                expect(optionText).toEqual(displayProp);\n            });\n        });\n        describe('when q2-loc is combined with q2-option textContent', () => {\n            it('updates the display prop', async () => {\n                page = await setup({ html: `` });\n                await setTestStrings(page, {\n                    'tecton.element.loc.test': 'Loc Text',\n                    'tecton.element.option.test': 'Option Text',\n                });\n                await page.setContent(`\n                            <q2-option>\n                            Option Text\n                                <q2-loc value=\"tecton.element.loc.test\"></q2-loc>\n                            </q2-option>\n                        `);\n                await page.waitForChanges();\n                option = await page.find('q2-option');\n                const displayProp = await option.getProperty('display');\n                expect(displayProp).toEqual('Option Text Loc Text');\n            });\n            it('translates both the option textContent and q2-loc', async () => {\n                page = await setup({ html: `` });\n                await setTestStrings(page, {\n                    'tecton.element.loc.test': 'Loc Text',\n                    'tecton.element.option.test': 'Option Text',\n                });\n                await page.setContent(`\n                            <q2-option>\n                            tecton.element.option.test\n                                <q2-loc value=\"tecton.element.loc.test\"></q2-loc>\n                            </q2-option>\n                        `);\n                await page.waitForChanges();\n                option = await page.find('q2-option');\n                const displayProp = await option.getProperty('display');\n                const optionText = await getAllElementTextE2E(page, 'q2-option');\n                expect(displayProp).toEqual('Option Text Loc Text');\n                expect(optionText).toEqual(displayProp);\n            });\n            it('renders the combined strings', async () => {\n                page = await setup({ html: `` });\n                await setTestStrings(page, {\n                    'tecton.element.loc.test': 'Loc Text',\n                    'tecton.element.option.test': 'Option Text',\n                });\n                await page.setContent(`\n                            <q2-option>\n                            Option Text\n                                <q2-loc value=\"tecton.element.loc.test\"></q2-loc>\n                            </q2-option>\n                        `);\n                await page.waitForChanges();\n                option = await page.find('q2-option');\n                const optionText = await getAllElementTextE2E(page, 'q2-option');\n                expect(optionText).toEqual('Option Text Loc Text');\n            });\n            it('maintains the order of text nodes', async () => {\n                page = await setup({ html: `` });\n                await setTestStrings(page, {\n                    'tecton.element.loc.test': 'Loc Text',\n                    'tecton.element.option.test': 'Option Text',\n                });\n                await page.setContent(`\n                            <q2-option>\n                                tecton.element.option.test\n                                <q2-loc value=\"tecton.element.loc.test\"></q2-loc>\n                                <span>My Other Text</span>\n                                tecton.element.option.test\n\n                            </q2-option>\n                        `);\n                await page.waitForChanges();\n                option = await page.find('q2-option');\n                const optionText = await getAllElementTextE2E(page, 'q2-option');\n                expect(optionText).toEqual('Option Text Loc Text My Other Text Option Text');\n            });\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({\n                    html: `<q2-select label=\"Test\" value=\"option-1\">\n                            <q2-option value=\"option-1\" display=\"Option Text\">Option Text</q2-option>\n                            <q2-option value=\"option-2\" display=\"Option Text\">Option Text</q2-option>\n                        </q2-select>`,\n                });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {\n            it('is correctly represented in the accessibility tree', async () => {\n                page = await setup({\n                    html: `<q2-option>My Option</q2-option>`,\n                });\n                const accessibilitySnapshot = await page.accessibility.snapshot({\n                    root: await page.$('q2-option'),\n                });\n                expect(accessibilitySnapshot.role).toBe('option');\n                expect(accessibilitySnapshot.name).toBe('My Option');\n            });\n        });\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({\n                    html: `<q2-select label=\"Test\" value=\"option-1\">\n                            <q2-option value=\"option-1\" display=\"Option Text\">Option Text</q2-option>\n                            <q2-option value=\"option-2\" display=\"Option Text\">Option Text</q2-option>\n                        </q2-select>`,\n                });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {\n            it('is correctly represented in the accessibility tree', async () => {\n                page = await setup({\n                    html: `<q2-option>My Option</q2-option>`,\n                });\n                const accessibilitySnapshot = await page.accessibility.snapshot({\n                    root: await page.$('q2-option'),\n                });\n                expect(accessibilitySnapshot.role).toBe('option');\n                expect(accessibilitySnapshot.name).toBe('My Option');\n            });\n        });\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}
+{"version":3,"file":"q2-option-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-option/test/q2-option-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { evaluateA11y, getListOfStyleCompilationIssues, setup } from '@/utils/helpers';\n\ndescribe('q2-option', () => {\n    let page: E2EPage;\n    let option: E2EElement;\n\n    describe('Initialization', () => {\n        it('properly compiles CSS vars and functions', async () => {\n            const page = await setup({ html: '<q2-option></q2-option>' });\n            expect(await getListOfStyleCompilationIssues(page, 'q2-option')).toHaveLength(0);\n        });\n    });\n\n    describe('Events', () => {\n        describe('tctClick', () => {\n            it('is emitted when the option is clicked', async () => {\n                page = await setup({\n                    html: `<q2-option value=\"2\">My Option</q2-option>`,\n                });\n                option = await page.find('q2-option');\n                const clickSpy = await option.spyOnEvent('tctClick');\n\n                await option.click();\n                await page.waitForChanges();\n\n                expect(clickSpy).toHaveReceivedEventDetail({\n                    type: 'select',\n                    value: '2',\n                });\n            });\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                page = await setup({\n                    html: `<q2-select label=\"Test\" value=\"option-1\">\n                            <q2-option value=\"option-1\" display=\"Option Text\">Option Text</q2-option>\n                            <q2-option value=\"option-2\" display=\"Option Text\">Option Text</q2-option>\n                        </q2-select>`,\n                });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {\n            it('is correctly represented in the accessibility tree', async () => {\n                page = await setup({\n                    html: `<q2-option>My Option</q2-option>`,\n                });\n                const accessibilitySnapshot = await page.accessibility.snapshot({\n                    root: await page.$('q2-option'),\n                });\n                expect(accessibilitySnapshot.role).toBe('option');\n                expect(accessibilitySnapshot.name).toBe('My Option');\n            });\n        });\n        describe('Keyboard Controls', () => {\n            it(\"emits a click event when the 'Space' key is pressed\", async () => {\n                page = await setup({\n                    html: `<q2-option value=\"2\">My Option</q2-option>`,\n                });\n                option = await page.find('q2-option');\n                const clickSpy = await option.spyOnEvent('tctClick');\n\n                await option.press('Space');\n                await page.waitForChanges();\n\n                expect(clickSpy).toHaveReceivedEventDetail({\n                    type: 'select',\n                    value: '2',\n                });\n            });\n\n            it(\"emits a click event when the 'Enter' key is pressed\", async () => {\n                page = await setup({\n                    html: `<q2-option value=\"2\">My Option</q2-option>`,\n                });\n                option = await page.find('q2-option');\n                const clickSpy = await option.spyOnEvent('tctClick');\n\n                await option.press('Enter');\n                await page.waitForChanges();\n\n                expect(clickSpy).toHaveReceivedEventDetail({\n                    type: 'select',\n                    value: '2',\n                });\n            });\n        });\n        describe('Other', () => {});\n    });\n});\n"]}

package/dist/collection/components/q2-option-list/q2-option-list.js

@@ -119,24 +119,26 @@ export class Q2OptionList {
                         this.searchOptions(key, false);
                         break;
                     }
-                    event.preventDefault();
                     newOption = allOptions.find(element => element.active);
                     if (!newOption || newOption.disabled)
                         break;
                     this.selectOption(newOption);
                     if (multiple)
                         break;
-                    this.popoverState.emit({ open: false, action: 'select' });
+                    this.hostElement.addEventListener('tctClick', () => {
+                        this.popoverState.emit({ open: false, action: 'select' });
+                    }, { once: true });
                     break;
                 case 'Enter':
-                    event.preventDefault();
                     newOption = allOptions.find(element => element.active);
                     if (!newOption || newOption.disabled)
                         break;
                     this.selectOption(newOption);
                     if (multiple)
                         break;
-                    this.popoverState.emit({ open: false, action: 'select' });
+                    this.hostElement.addEventListener('tctClick', () => {
+                        this.popoverState.emit({ open: false, action: 'select' });
+                    }, { once: true });
                     break;
                 case 'ArrowUp':
                     event.preventDefault();
@@ -560,7 +562,7 @@ export class Q2OptionList {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: '16e12e08dcd1d6514aa59ad8dd20dbf33d352bbe' }, h("div", { key: 'b0eb152206ccb8b93e98d11c32894cb136ffc9a9', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: 'bccbd0eb8bc8fc92db4629be02ab23e050e32fe9', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '9b5a130d4d0a1a5f594b47669607febf39c0ea87' })))));
+        return (h(Host, { key: '5708785bddc01b545a3b2a94417ad415c6cba32e' }, h("div", { key: 'e6f36e235609824dae19e93edc14d8f8504eb860', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: 'cbdf42235da01a1fc10efcc0798edeb653fe26ae', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: 'cec72b3912c96f09a12c171e4227efd29a9097c9' })))));
     }
     static get is() { return "q2-option-list"; }
     static get encapsulation() { return "shadow"; }